Repository navigation
Expand file tree
/
Copy pathsite-climate.html
More file actions
650 lines (474 loc) · 327 KB
/
Copy pathsite-climate.html
File metadata and controls
650 lines (474 loc) · 327 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
<!doctype html>
<!-- Generated from content/site-climate/ by the local content build. Edit the Markdown source. -->
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Read a site, compare climate-responsive design principles, and turn hourly weather data into architectural decisions.">
<meta name="author" content="Timur Dogan"><meta name="theme-color" content="#ffffff">
<title>Site + climate · ES1 Course Reader</title>
<link rel="icon" href="./assets/course-logo.png" type="image/png">
<script src="./src/theme.js"></script>
<link rel="stylesheet" href="./styles.css"><link rel="stylesheet" href="./theme.css"><link rel="stylesheet" href="./climate.css">
<script defer src="./assets/climate.bundle.js"></script>
</head>
<body>
<a class="skip-link" href="#main">Skip to chapter</a>
<div class="mobile-bar"><a href="#top" class="wordmark"><img class="course-logo" src="./assets/course-logo.png" alt="ES1" width="372" height="123"><span>Course reader</span></a><div class="mobile-actions"><button type="button" class="theme-toggle" data-theme-toggle aria-label="Switch to dark mode" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16Z" fill="currentColor" stroke="none"/></svg></button><button id="menu-toggle" aria-expanded="false" aria-controls="sidebar">Contents <span aria-hidden="true">☰</span></button></div></div>
<aside class="sidebar" id="sidebar" aria-label="Chapter navigation">
<a class="brand" href="#top"><img class="course-logo" src="./assets/course-logo.png" alt="ES1" width="372" height="123"><span class="brand-sub">ES1 / COURSE READER</span></a>
<p class="sidebar-intro">Environmental systems<br>as a design material.</p>
<div class="chapter-label">THE CHAPTERS</div><div class="course-chapters"><a href="./site-climate.html" aria-current="page"><span>01</span>Site + climate</a><a href="./index.html"><span>02</span>Solar geometry</a><a href="./shadow-drawing.html"><span>03</span>Drawing shadows</a><a href="./sun-paths-shading.html"><span>04</span>Sun paths and shading</a><a href="./solar-radiation.html"><span>05</span>Solar radiation</a><a href="./hdr-photography.html"><span>06</span>HDR photography</a><a href="./heat-transfer.html"><span>07</span>Heat transfer</a><a href="./heat-balance.html"><span>08</span>Heat balance</a><a href="./psychrometrics.html"><span>09</span>Psychrometrics</a></div>
<nav aria-label="On this page">
<a href="#climate" class="active"><span>01</span>Where climate comes from</a>
<a href="#site"><span>02</span>Read the site</a>
<a href="#principles"><span>03</span>Design with climate</a>
<a href="#weather"><span>04</span>Know the weather file</a>
<a href="#analysis"><span>05</span>Find the patterns</a>
<a href="#decisions"><span>06</span>Make a design decision</a>
<a href="#future"><span>07</span>Test a changing climate</a>
<a href="#practice"><span>08</span>Check your thinking</a>
<a href="#studio"><span>09</span>Take it into studio</a>
</nav>
<div class="sidebar-bottom"><button type="button" class="theme-toggle" data-theme-toggle aria-label="Switch to dark mode" aria-pressed="false"><span data-theme-label>Dark mode</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16Z" fill="currentColor" stroke="none"/></svg></button><div class="reading-label"><span>Reading position</span><span id="progress-number">0%</span></div><div class="progress-track"><div id="reading-progress"></div></div><a href="./index.html#author">About the instructor ↗</a><a href="#references">Sources & model notes ↗</a><p>Environmental Systems I<br>Cornell AAP</p></div>
</aside>
<main id="main">
<header class="hero" id="top">
<div class="topline"><span>ENVIRONMENTAL SYSTEMS I</span><span>READ · EXPERIMENT · DESIGN</span></div>
<div class="hero-heading"><div><p class="eyebrow">CHAPTER 01 / CLIMATE & THE BUILT ENVIRONMENT</p><h1>Site + climate<span class="title-dot">.</span></h1></div><div class="chapter-symbol" aria-hidden="true"><svg viewBox="0 0 110 110"><circle cx="74" cy="29" r="14"/><path d="M4 88h102M20 88V58l27-19 28 19v30M47 39V24M80 88V62m-12 8 12-13 13 13M4 49h19M4 57h13M90 43h16"/></svg></div></div>
<p class="hero-lead">A climate is a set of opportunities and constraints. A site tells you where they become architecture.</p>
<div class="hero-bottom"><p>Read the ground, sun, wind, and water. Learn which weather patterns matter, then turn the evidence into a design move you can test.</p>
<a href="#climate" class="text-link">Start with the climate <span aria-hidden="true">↓</span></a>
</div>
<div class="chapter-route"><span>Site observation</span>
<b aria-hidden="true">→</b>
<span>Weather evidence</span>
<b aria-hidden="true">→</b>
<span>Design hypothesis</span>
<b aria-hidden="true">→</b>
<span>Performance test</span>
</div>
</header>
<noscript><p class="notice">All readings, principles, and the monthly data table are available below. Enable JavaScript to filter climates, explore hourly patterns, or analyze your own EPW file.</p></noscript>
<section class="reader-section" id="climate" aria-labelledby="climate-title">
<div class="section-heading"><span class="section-number">01</span><div><p class="eyebrow">FROM PLANET TO REGION</p><h2 id="climate-title">Where climate comes from.</h2></div></div>
<p class="section-lead">Climate is the long-term pattern of weather: its averages, its cycles, and its extremes. Before you read a weather file, know which forces shaped it.</p>
<div class="reading-grid"><div><h3>Weather, climate, microclimate</h3>
<p><strong>Weather</strong> is the sequence of conditions at a particular time. <strong>Climate</strong> describes their long-term distribution, typically over about 30 years: typical patterns, variability, and extremes. <strong>Microclimate</strong> is the local modification of those conditions by terrain, water, vegetation, materials, and buildings.</p>
</div>
<div><h3>The sun drives the system</h3>
<p>The word comes from the Greek <em>klima</em>, slope or inclination: latitude and sun angle set the first pattern (<a href="./index.html">Chapter 02</a>). The atmosphere is largely transparent to sunlight, so the ground heats first and warms the air above it. The equator receives more energy than the poles. The resulting convection, deflected by the Earth’s rotation, organizes the global winds.</p>
</div>
</div>
<div class="driver-grid"><article><span>01 / LATITUDE</span>
<h3>Seasons grow with distance from the equator</h3>
<p>The 23.45° tilt of the Earth’s axis creates the seasons. At 65° N, Fairbanks receives about 1 kWh/m² of horizontal solar energy in December and 176 in June. Miami, at 26° N, barely has a winter.</p>
</article>
<article><span>02 / LAND AND WATER</span>
<h3>Water moderates</h3>
<p>Water heats and cools slowly. Key West, Florida, has an annual temperature range of about 13°C; inland San Antonio, Texas, at almost the same latitude, about 31°C. Coasts get sea breezes by day and land breezes at night.</p>
</article>
<article><span>03 / MOUNTAINS</span>
<h3>Relief sorts wet from dry</h3>
<p>Rising air cools about 2°C per 300 m. Moist air forced over a range loses its water on the windward side and descends warm and dry on the other: a rain shadow. Slopes drive upslope winds by day and cold drainage at night.</p>
</article>
<article><span>04 / MOISTURE</span>
<h3>Humidity sets the daily swing</h3>
<p>Water vapor, and clouds even more, block incoming sunlight and outgoing long-wave radiation. Dry climates have hot days and cool nights, often a daily range above 17°C. Humid climates stay within about 11°C.</p>
</article>
</div>
<div class="reading-grid"><div><h3>Köppen–Geiger: what grows</h3>
<p>Wladimir Köppen’s 1884 map, refined with Rudolf Geiger, sorts climates into about 25 types by temperature and precipitation. Read the letters as an address: <strong>Dfb</strong> (snow climate, fully humid, warm summer) for Ithaca, <strong>BWh</strong> (hot desert) for Phoenix, <strong>Am</strong> (equatorial monsoon) for Miami. Rubel and Kottek mapped how these zones shift between 1901 and 2100. A Köppen code locates a climate; it does not specify a building.</p>
</div>
<div><h3>Four types: what people need</h3>
<p>For building design, Szokolay, after Atkinson (1953), uses four types based on the human thermal problem. <strong>Cold</strong>: underheating most of the year. <strong>Temperate</strong>: a seasonal swing between underheating and overheating, neither severe. <strong>Hot-dry</strong>: overheating, but dry air lets sweat evaporate; a large daily swing. <strong>Warm-humid</strong>: less extreme heat, aggravated by humidity; a small daily swing. Maritime, upland, and composite climates mix these features. The four families on the design sheet in section 03 follow this logic.</p>
</div>
</div>
<div class="data-table-wrap"><table class="climate-table compare-table"><caption>Six US weather files, four design problems. Select Plot to load a file into the charts in section 05.</caption><thead><tr><th scope="col">Weather file</th><th scope="col">Design problem</th><th scope="col">Annual mean °C</th><th scope="col">Coldest / warmest month °C</th><th scope="col">Mean daily range °C</th><th scope="col">Warmest-month dew point °C</th><th scope="col">HDD18 °C·d</th><th scope="col">CDD18 °C·d</th><th scope="col">GHI kWh/m²·a</th><th scope="col"><span class="sr-only">Load</span></th></tr></thead><tbody><!-- CLIMATE_COMPARE_START -->
<tr><th scope="row">Fairbanks, AK<small>Dfc · Polar / very cold</small></th><td>Long, deep underheating</td><td>−1.5</td><td>−21.4 / 18.1</td><td>9.8</td><td>8.8</td><td>7,166</td><td>55</td><td>955</td><td><button type="button" class="quiet-button" data-load-dataset="fairbanks" aria-label="Plot Fairbanks, AK">Plot ↓</button></td></tr>
<tr><th scope="row">Ithaca, NY<small>Dfb · Temperate / seasonal</small></th><td>Seasonal: long winter, warm summer</td><td>9.2</td><td>−3.6 / 21.9</td><td>10.1</td><td>14.6</td><td>3,484</td><td>278</td><td>1,391</td><td><button type="button" class="quiet-button" data-load-dataset="ithaca" aria-label="Plot Ithaca, NY">Plot ↓</button></td></tr>
<tr><th scope="row">San Francisco, CA<small>Csb · Temperate / marine</small></th><td>Mild all year; cool, windy summers</td><td>14.6</td><td>11.3 / 17.9</td><td>7.8</td><td>12.8</td><td>1,303</td><td>51</td><td>1,851</td><td><button type="button" class="quiet-button" data-load-dataset="sanfrancisco" aria-label="Plot San Francisco, CA">Plot ↓</button></td></tr>
<tr><th scope="row">Denver, CO<small>BSk · Cold, dry, high altitude</small></th><td>Cold winters, strong sun, large daily swing</td><td>11.1</td><td>−2.2 / 24.1</td><td>14.7</td><td>9.8</td><td>3,062</td><td>548</td><td>1,876</td><td><button type="button" class="quiet-button" data-load-dataset="denver" aria-label="Plot Denver, CO">Plot ↓</button></td></tr>
<tr><th scope="row">Phoenix, AZ<small>BWh · Hot-arid</small></th><td>Severe overheating, dry air</td><td>24.5</td><td>12.0 / 35.7</td><td>13.0</td><td>13.5</td><td>538</td><td>2,927</td><td>2,141</td><td><button type="button" class="quiet-button" data-load-dataset="phoenix" aria-label="Plot Phoenix, AZ">Plot ↓</button></td></tr>
<tr><th scope="row">Miami, FL<small>Am · Warm-humid</small></th><td>Overheating aggravated by humidity</td><td>25.5</td><td>21.4 / 29.2</td><td>6.5</td><td>23.6</td><td>27</td><td>2,768</td><td>1,816</td><td><button type="button" class="quiet-button" data-load-dataset="miami" aria-label="Plot Miami, FL">Plot ↓</button></td></tr>
<!-- CLIMATE_COMPARE_END --></tbody></table>
</div>
<p class="caption">Computed from the bundled TMYx 2009-2023 typical years of six airport and city stations (Climate.OneBuilding.org). The mean daily range averages each day’s maximum minus minimum. Degree-days use an illustrative 18°C base and describe outdoor temperature exposure, not energy use.</p>
<div class="design-note"><span>COMPARE</span>
<p>Phoenix and Miami have nearly the same cooling degree-days. Compare their dew points and daily ranges, then predict which climate rewards heavy walls with night ventilation, and which a light, shaded, breezy section. Plot both in section 05 to check your prediction.</p>
</div>
</section>
<section class="reader-section" id="site" aria-labelledby="site-title">
<div class="section-heading"><span class="section-number">02</span><div><p class="eyebrow">FROM REGION TO ROOM</p><h2 id="site-title">Read the site.</h2></div></div>
<p class="section-lead">A regional weather station describes a climate. It does not describe the temperature of a sunlit wall, the wind at an entrance, or the shade beneath a tree.</p>
<div class="reading-grid"><div><h3>Know what the station measured</h3>
<p>Meteorological stations measure air temperature in a shaded, ventilated screen 1.2-1.8 m above the ground, and wind at 10 m in open country. A pyranometer records solar radiation on an unobstructed horizontal surface. Most weather files come from airports: open, flat, mown, and often outside town. Your site is rarely any of these.</p>
</div>
<div><h3>Draw more than the property line</h3>
<p>Map true north, slopes, drainage paths, vegetation, neighboring heights, sky exposure, and noisy or polluted edges. In section, show the sun and wind in relation to occupied spaces. Ask what changes with the season, the time of day, and future development.</p>
</div>
</div>
<h3 class="subsection-heading">Six factors that shift a microclimate</h3>
<div class="factor-grid"><article><span>01</span>
<h4>Elevation</h4>
<p>Air cools about 2°C for every 300 m of ascent. Ithaca’s airport station sits at 335 m, roughly 200 m above downtown on the valley floor. On calm, clear nights cold air drains downhill, and the valley can become colder than the hill.</p>
</article>
<article><span>02</span>
<h4>Slope and aspect</h4>
<p>On December 21 in New York, a south wall receives about 108 times the solar radiation of a north wall. South slopes warm first in spring; west slopes are warmer than east, because the strongest sun coincides with the warm afternoon. Cold, heavy air pools in hollows, where frost and fog linger.</p>
</article>
<article><span>03</span>
<h4>Water</h4>
<p>Large bodies of water store heat, damp temperature swings, raise humidity, and drive local breezes. The Finger Lakes moderate their shores enough to support vineyards on the surrounding slopes.</p>
</article>
<article><span>04</span>
<h4>Ground</h4>
<p>The color, heat capacity, and moisture of the ground matter. Moist soil cools the air by evaporation. Dry sand grows very hot by day and reflects sunlight onto people and walls.</p>
</article>
<article><span>05</span>
<h4>Vegetation</h4>
<p>Shade and evapotranspiration lower air and surface temperatures; windbreaks shelter in cold climates. In warm-humid climates, a high canopy without low shrubs keeps both shade and breeze. Deciduous trees admit more winter sun once the leaves have fallen.</p>
</article>
<article><span>06</span>
<h4>Buildings and paving</h4>
<p>A large new building can turn a sunny, sheltered exposure into a cold, windy one. Buildings cast shade and channel wind into canyons. Dark asphalt can reach about 60°C and warms the air above and around it.</p>
</article>
</div>
<div class="reading-grid"><div><h3>Cities make their own climate</h3>
<p>Compared with the surrounding countryside, a city’s annual mean temperature is typically about 0.8°C higher, winter minima about 1.7°C higher, and summer temperatures up to about 4°C higher: an urban heat island. Average wind speed drops by about 25%, although gusts accelerate in street canyons. Pollution reduces solar radiation by about 20%. Phoenix’s airport station sits inside such an island.</p>
</div>
<div><h3>Climate anomalies</h3>
<p>Lugano, Switzerland, shares Quebec’s latitude (about 47° N) but feels subtropical. Low elevation, south-facing slopes, the Alps sheltering it from the north, and a lake that reflects winter sun combine into a climate far warmer than its latitude suggests. Smaller anomalies occur everywhere: in flat country, places a few kilometers apart can differ by as much as 17°C.</p>
</div>
</div>
<div class="reading-grid"><div><h3>Observe the hours people use</h3>
<p>Compare a shaded courtyard, an exposed roof, and the proposed entrance at the same times. Log air temperature in a radiation shield; record sensor height, location, and time zone. An unshielded sensor in direct sun is not a reliable measurement of air temperature.</p>
</div>
<div><h3>Translate exposure into experience</h3>
<p>Air temperature is only part of comfort. Direct sun and hot surfaces change radiant exchange; moving air changes heat loss from the body. Two sites with similar air temperatures can feel very different. Record shade, surface exposure, and air movement alongside temperature.</p>
</div>
</div>
<figure class="station-figure"><img src="./assets/climate-microclimate-stations.png" alt="Two ES Lab weather stations: one on a sun-exposed campus roof and one among campus trees." width="580" height="356" loading="lazy">
<figcaption>Measurement depends on location. The ES Lab’s mobile stations, about $3,000 each, record air temperature and humidity, wind speed and direction, solar radiation, and rain. Campus microclimate stations: work by Patrick Kastner and Remy Mermelstein. Compare simultaneous measurements before attributing a difference to the site.</figcaption>
</figure>
<div class="try-it"><span>FIELD PROMPT</span>
<p>Choose two outdoor places a minute apart. Predict which will feel warmer at noon and after sunset. Name the mechanism from the six factors above, sketch the exposure, and identify the measurement that would test your prediction.</p>
</div>
</section>
<section class="reader-section" id="principles" aria-labelledby="principles-title">
<div class="section-heading"><span class="section-number">03</span><div><p class="eyebrow">FOUR CLIMATE FAMILIES · SEVEN DESIGN LENSES</p><h2 id="principles-title">Design with climate.</h2></div></div>
<p class="section-lead">The same design move can solve a problem in one climate and create it in another. Start with the physical mechanism, then check whether its necessary conditions exist.</p>
<p class="measure">The four families follow the four design problems from section 01: underheating, a seasonal swing, dry overheating, and humid overheating. Each is read through seven lenses: form, zoning, rain and snow, air, sun, ground, and materials. They are teaching models, rather than a complete climate classification. Altitude, seasons, program, construction, and local exposure can change the response.</p>
<div class="matrix-heading"><span class="small-label">THE SHEET · FOUR CLIMATES × SEVEN LENSES</span>
<p class="caption">Read across a row to see one climate’s strategy. Read down a column to see how the same lens changes with climate. Select a drawing to read its mechanism, conditions, and precedent below.</p>
</div>
<div class="principle-matrix-wrap" tabindex="0" aria-label="Design principles matrix; scrolls horizontally on small screens"><!-- MATRIX_START -->
<table class="principle-matrix"><caption class="sr-only">Design principles by climate family and design lens</caption><thead><tr><td></td><th scope="col">Form</th><th scope="col">Zoning</th><th scope="col">Rain + snow</th><th scope="col">Air</th><th scope="col">Sun</th><th scope="col">Ground</th><th scope="col">Materials</th></tr></thead><tbody><tr data-family="polar"><th scope="row"><a class="matrix-row-link" href="#card-polar-form" data-matrix-family="polar"><span>Polar / very cold</span><small>Conserve heat. Shelter the threshold.</small></a></th><td><a class="matrix-cell" href="#card-polar-form" data-matrix-family="polar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="polar: form design principle"><title>polar: form design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M83.3 116A36.7 36.7 0 0 1 156.7 116A36.7 21.2 0 0 1 83.3 116Z" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M90.6 116A29.4 29.4 0 0 1 149.4 116A29.4 17 0 0 1 90.6 116Z" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.8" stroke-dasharray="2.5 2"/><path d="M104.1 116A15.9 15.9 0 0 1 135.9 116A15.9 9.2 0 0 1 104.1 116Z" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.9"/><polygon points="161.6,133 149.4,140 149.4,130 161.6,123" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="134.7,131.5 149.4,140 149.4,130 134.7,121.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="146.8,114.5 161.6,123 149.4,130 134.7,121.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="158.5,134.8 152.5,138.3 152.5,131.3 158.5,127.8" fill="light-dark(#2e647e, #8acde9)" stroke="none"/></g></svg><span>Compact enclosure</span></a></td><td><a class="matrix-cell" href="#card-polar-zoning" data-matrix-family="polar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="polar: zoning design principle"><title>polar: zoning design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><circle cx="120" cy="96" r="58" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width=".9"/><circle cx="120" cy="96" r="44" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width=".9"/><circle cx="120" cy="96" r="29" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".9"/><rect x="176" y="88" width="20" height="16" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width=".9"/><path d="M196 92v8" stroke="light-dark(#2e647e, #8acde9)" stroke-width="2"/></g></svg><span>Layers of protection</span></a></td><td><a class="matrix-cell" href="#card-polar-rain" data-matrix-family="polar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="polar: rain design principle"><title>polar: rain design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M83.3 116A36.7 36.7 0 0 1 156.7 116A36.7 21.2 0 0 1 83.3 116Z" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="91,93.5 92.7,91.4 94.7,89.4 96.8,87.5 99,85.8 101.4,84.3 103.8,83 106.4,81.9 109,80.9 111.7,80.2 114.4,79.7 117.2,79.4 120,79.3 122.8,79.4 125.6,79.7 128.3,80.2 131,80.9 133.6,81.9 136.2,83 138.6,84.3 141,85.8 143.2,87.5 145.3,89.4 147.3,91.4 149,93.5 149,93.5 150.8,96.4 151.7,99.4 151.7,102.4 150.9,105.4 149.2,108.3 146.7,111 143.5,113.4 139.6,115.5 135.2,117.1 130.4,118.4 125.3,119.1 120,119.4 114.7,119.1 109.6,118.4 104.8,117.1 100.4,115.5 96.5,113.4 93.3,111 90.8,108.3 89.1,105.4 88.3,102.4 88.3,99.4 89.2,96.4 91,93.5" fill="light-dark(#a3dde2, #2a7884)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="161.6,133 149.4,140 149.4,130 161.6,123" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="134.7,131.5 149.4,140 149.4,130 134.7,121.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="146.8,114.5 161.6,123 149.4,130 134.7,121.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="158.5,134.8 152.5,138.3 152.5,131.3 158.5,127.8" fill="light-dark(#2e647e, #8acde9)" stroke="none"/><polyline points="104,22 104,41.6" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.5"/><polygon points="104,49 100.5,41.6 107.5,41.6" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="120,22 120,37.6" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.5"/><polygon points="120,45 116.5,37.6 123.5,37.6" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="136,22 136,41.6" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.5"/><polygon points="136,49 132.5,41.6 139.5,41.6" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg><span>Snow-aware roof</span></a></td><td><a class="matrix-cell" href="#card-polar-air" data-matrix-family="polar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="polar: air design principle"><title>polar: air design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M83.3 116A36.7 36.7 0 0 1 156.7 116A36.7 21.2 0 0 1 83.3 116Z" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="161.6,133 149.4,140 149.4,130 161.6,123" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="134.7,131.5 149.4,140 149.4,130 134.7,121.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="146.8,114.5 161.6,123 149.4,130 134.7,121.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="158.5,134.8 152.5,138.3 152.5,131.3 158.5,127.8" fill="light-dark(#2e647e, #8acde9)" stroke="none"/><polyline points="214,150 209.9,147 205.9,143.6 202.2,139.9 198.6,135.8 195.1,131.5 191.8,126.9 188.5,122.2 185.3,117.3 182.2,112.4 179.1,107.4 175.9,102.4 172.8,97.5 169.5,92.7 166.2,88 162.8,83.6 159.3,79.3 155.7,75.4 151.8,71.8 147.8,68.6 143.6,65.8 139.1,63.5 134.4,61.8 129.3,60.6 124,60 121.1,59.9 118.2,59.9 115.5,59.9 112.8,60 110.2,60.2 107.8,60.4 105.4,60.7 103,61 100.8,61.5 98.6,61.9 96.5,62.5 94.5,63.1 92.5,63.8 90.6,64.6 88.8,65.4 87,66.3 85.2,67.3 83.5,68.3 81.8,69.4 80.2,70.6 78.6,71.8 77,73.1 75.5,74.5 78.9,71.2" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.8"/><polygon points="73.3,76.7 76.3,68.5 81.6,73.9" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="222,124 219.3,123.3 216.5,122.7 213.9,122.2 211.2,121.7 208.6,121.4 206,121.2 203.4,121 200.9,121 198.4,121 196,121.1 193.6,121.3 191.3,121.6 189,122 186.7,122.5 184.6,123.1 182.4,123.7 180.4,124.4 178.4,125.3 176.5,126.2 174.6,127.2 172.9,128.3 171.2,129.4 169.5,130.7 172.7,127.9" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.4"/><polygon points="167.2,132.7 170.5,125.3 174.9,130.5" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg><span>Sheltered entrance</span></a></td><td><a class="matrix-cell" href="#card-polar-sun" data-matrix-family="polar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="polar: sun design principle"><title>polar: sun design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polyline points="187.5,155 184.1,155.5 180.5,155.8 176.8,156.1 172.9,156.2 168.8,156.3 164.6,156.2 160.3,156 155.9,155.7 151.4,155.3 146.8,154.8 142.1,154.1 137.3,153.4 132.5,152.6 127.7,151.7 122.9,150.6 118,149.5 113.2,148.3 108.4,147 103.6,145.6 98.8,144.1 94.1,142.6 89.5,141 84.9,139.3 80.5,137.5 76.2,135.7 72,133.9 67.9,131.9 63.9,130 60.1,128 56.5,126 53.1,123.9 49.8,121.8 46.7,119.7 43.9,117.6 41.2,115.5 38.8,113.4 36.5,111.3 34.5,109.2 32.8,107.2 31.3,105.1 30,103.1 28.9,101.1 28.2,99.2 27.6,97.3 27.4,95.5 27.3,93.7 27.6,92 28,90.3 28.8,88.7 29.8,87.2 31,85.8 32.5,84.4 34.2,83.2 36.1,82 38.3,80.9 40.7,79.9 43.4,79 46.2,78.3 49.2,77.6 52.5,77" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.8"/><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M83.3 116A36.7 36.7 0 0 1 156.7 116A36.7 21.2 0 0 1 83.3 116Z" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="161.6,133 149.4,140 149.4,130 161.6,123" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="134.7,131.5 149.4,140 149.4,130 134.7,121.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="146.8,114.5 161.6,123 149.4,130 134.7,121.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="158.5,134.8 152.5,138.3 152.5,131.3 158.5,127.8" fill="light-dark(#2e647e, #8acde9)" stroke="none"/><circle cx="27.6" cy="97.3" r="6.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="36.6,97.3 39.6,97.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="34,103.7 36.1,105.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="27.6,106.3 27.6,109.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="21.3,103.7 19.1,105.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="18.6,97.3 15.6,97.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="21.3,90.9 19.1,88.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="27.6,88.3 27.6,85.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="34,90.9 36.1,88.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="37.6,100.3 77.9,110.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.4"/><polygon points="85,112.2 77.1,113.8 78.8,107.2" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><polyline points="104,14 104,27.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.3"/><polygon points="104,35 100.7,27.9 107.3,27.9" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><polyline points="120,14 120,27.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.3"/><polygon points="120,35 116.7,27.9 123.3,27.9" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><polyline points="136,14 136,27.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.3"/><polygon points="136,35 132.7,27.9 139.3,27.9" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/></g></svg><span>Low-angle light</span></a></td><td><a class="matrix-cell" href="#card-polar-ground" data-matrix-family="polar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="polar: ground design principle"><title>polar: ground design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#a3dde2, #2a7884)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M83.3 116A36.7 36.7 0 0 1 156.7 116A36.7 21.2 0 0 1 83.3 116Z" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="161.6,133 149.4,140 149.4,130 161.6,123" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="134.7,131.5 149.4,140 149.4,130 134.7,121.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="146.8,114.5 161.6,123 149.4,130 134.7,121.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="158.5,134.8 152.5,138.3 152.5,131.3 158.5,127.8" fill="light-dark(#2e647e, #8acde9)" stroke="none"/><circle cx="27.7" cy="91.4" r="6.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="36.7,91.4 39.7,91.4" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="34.1,97.8 36.2,99.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="27.7,100.4 27.7,103.4" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="21.3,97.8 19.2,99.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="18.7,91.4 15.7,91.4" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="21.3,85 19.2,82.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="27.7,82.4 27.7,79.4" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="34.1,85 36.2,82.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="35.7,97.4 66.2,135.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.3"/><polygon points="70.6,140.8 63.6,137.3 68.8,133.2" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><polyline points="70,140 89.1,116.7" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.3" stroke-dasharray="3 2"/><polygon points="93.6,111.2 91.7,118.8 86.6,114.6" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/></g></svg><span>Protected foundation</span></a></td><td><a class="matrix-cell" href="#card-polar-material" data-matrix-family="polar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="polar: material design principle"><title>polar: material design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="137.3,96 114.8,109 114.8,106.5 137.3,93.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="85.4,92 114.8,109 114.8,106.5 85.4,89.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="107.9,76.5 137.3,93.5 114.8,106.5 85.4,89.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="137.3,96.5 114.8,109.5 114.8,107 137.3,94" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="85.4,92.5 114.8,109.5 114.8,107 85.4,90" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="107.9,77 137.3,94 114.8,107 85.4,90" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="95.8,114 95.9,112.2 96.3,110.3 96.9,108.3 97.8,106.4 98.8,104.6 100.1,102.8 101.4,101.3 102.9,100 104.4,99 105.9,98.3 107.4,97.9 108.7,97.8 110,98.1 111,98.7 111.9,99.7 112.5,100.9 112.9,102.3 113.1,104 112.9,105.8 112.5,107.7 111.9,109.7 111,111.6 110,113.4 108.7,115.2 107.4,116.7 105.9,118 104.4,119 102.9,119.7 101.4,120.1 100.1,120.2 98.8,119.9 97.8,119.3 96.9,118.3 96.3,117.1 95.9,115.7 95.8,114" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="110,98.1 149.8,121.1 138.7,142.9 98.8,119.9" fill="light-dark(#eaf2f8, #293741)" stroke="none"/><polyline points="110,98.1 149.8,121.1" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="98.8,119.9 138.7,142.9" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="135.6,137 135.7,135.2 136.1,133.3 136.7,131.3 137.6,129.4 138.7,127.6 139.9,125.8 141.3,124.3 142.7,123 144.2,122 145.8,121.3 147.2,120.9 148.6,120.8 149.8,121.1 150.9,121.7 151.7,122.7 152.4,123.9 152.8,125.3 152.9,127 152.8,128.8 152.4,130.7 151.7,132.7 150.9,134.6 149.8,136.4 148.6,138.2 147.2,139.7 145.8,141 144.2,142 142.7,142.7 141.3,143.1 139.9,143.2 138.7,142.9 137.6,142.3 136.7,141.3 136.1,140.1 135.7,138.7 135.6,137" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.1"/><polyline points="135.6,137 136,134.3 136.8,131.5 138.2,128.8 139.9,126.4 141.8,124.3 143.9,122.9 145.9,122 147.8,121.8 149.4,122.2 150.6,123.3 151.4,124.9 151.8,126.9 151.6,129.2 151,131.6 149.9,134 148.5,136.2 146.9,138 145.2,139.5 143.4,140.4 141.7,140.7 140.3,140.5 139.1,139.8 138.3,138.6 137.9,136.9 137.9,135.1 138.4,133 139.1,131 140.2,129.1 141.5,127.4 143,126.1 144.5,125.2 145.9,124.8 147.1,124.8 148.2,125.3 148.9,126.2 149.4,127.5 149.5,128.9 149.2,130.6 148.7,132.2 147.8,133.8 146.8,135.2 145.7,136.4 144.5,137.2 143.3,137.7 142.3,137.8 141.4,137.5 140.7,136.8 140.3,135.9 140.2,134.8 140.3,133.5 140.7,132.3 141.3,131 142,129.9 142.9,128.9 143.8,128.2 144.6,127.8 145.5,127.7 146.2,127.9 146.7,128.3 147,128.9 147.2,129.7 147.1,130.6 146.9,131.5 146.5,132.4 146,133.2 145.4,133.9 144.8,134.4 144.2,134.7 143.6,134.8 143.2,134.8 142.8,134.5 142.6,134.1 142.5,133.6 142.5,133.1 142.6,132.5 142.9,131.9 143.2,131.5 143.5,131.1 143.8,130.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.8"/></g></svg><span>Continuous insulation</span></a></td></tr>
<tr data-family="temperate"><th scope="row"><a class="matrix-row-link" href="#card-temperate-form" data-matrix-family="temperate"><span>Temperate / seasonal</span><small>Admit in winter. Protect in summer.</small></a></th><td><a class="matrix-cell" href="#card-temperate-form" data-matrix-family="temperate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="temperate: form design principle"><title>temperate: form design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="114.8,71 156.4,95 140.8,84 99.2,60" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#ffffff, #202124)" stroke-width="1.2"/><polygon points="156.4,119 125.2,137 125.2,113 156.4,95" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#ffffff, #202124)" stroke-width="1.2"/><polygon points="83.6,113 125.2,137 125.2,113 83.6,89" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#ffffff, #202124)" stroke-width="1.2"/><polygon points="114.8,71 156.4,95 125.2,113 83.6,89" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#ffffff, #202124)" stroke-width="1.2"/><polygon points="156.4,95 125.2,113 140.8,84" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#ffffff, #202124)" stroke-width="1.2"/><polygon points="83.6,89 125.2,113 140.8,84 99.2,60" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#ffffff, #202124)" stroke-width="1.2"/></g></svg><span>Compact, but adaptable</span></a></td><td><a class="matrix-cell" href="#card-temperate-zoning" data-matrix-family="temperate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="temperate: zoning design principle"><title>temperate: zoning design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><rect x="72" y="34" width="96" height="104" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width=".9"/><rect x="72" y="70" width="96" height="68" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width=".9"/><circle cx="120" cy="170" r="6.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="107.4,160 110.1,149.7" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.2"/><polygon points="111.9,143 113.2,150.5 107,148.9" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><polyline points="120,160 120,149.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.2"/><polygon points="120,143 123.2,149.9 116.8,149.9" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><polyline points="132.6,160 129.9,149.7" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.2"/><polygon points="128.1,143 133,148.9 126.8,150.5" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><text x="186" y="40" font-size="9" fill="light-dark(#607181, #aabccb)" text-anchor="middle">N</text><path d="M186 44v14" stroke="light-dark(#607181, #aabccb)" stroke-width=".9"/></g></svg><span>Sun-aware plan</span></a></td><td><a class="matrix-cell" href="#card-temperate-rain" data-matrix-family="temperate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="temperate: rain design principle"><title>temperate: rain design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="114.8,71.8 168.5,102.8 146.8,87.5 93.2,56.5" fill="light-dark(#a3dde2, #2a7884)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="156.4,119 125.2,137 125.2,113 156.4,95" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="83.6,113 125.2,137 125.2,113 83.6,89" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="114.8,71 156.4,95 125.2,113 83.6,89" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="156.4,95 125.2,113 140.8,84" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="71.5,96.8 125.2,127.8 146.8,87.5 93.2,56.5" fill="light-dark(#a3dde2, #2a7884)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="150,10 136.5,40" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="156.5,15 143,45" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="163,20 149.5,50" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="169.5,10 156,40" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="176,15 162.5,45" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="182.5,20 169,50" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="189,10 175.5,40" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="195.5,15 182,45" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="202,20 188.5,50" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="73,108 73,129.9" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.3"/><polygon points="73,137 69.7,129.9 76.3,129.9" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg><span>Protected edges</span></a></td><td><a class="matrix-cell" href="#card-temperate-air" data-matrix-family="temperate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="temperate: air design principle"><title>temperate: air design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="114.8,71 156.4,95 140.8,84 99.2,60" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="156.4,119 125.2,137 125.2,113 156.4,95" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="83.6,113 125.2,137 125.2,113 83.6,89" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="114.8,71 156.4,95 125.2,113 83.6,89" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="156.4,95 125.2,113 140.8,84" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="83.6,89 125.2,113 140.8,84 99.2,60" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="155.5,129.5 143.4,136.5 143.4,123.5 155.5,116.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="134.7,131.5 143.4,136.5 143.4,123.5 134.7,118.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="146.8,111.5 155.5,116.5 143.4,123.5 134.7,118.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="216,150 212.8,147.5 209.7,144.7 206.7,141.5 203.8,137.9 201,134.1 198.2,130 195.4,125.7 192.7,121.3 189.9,116.7 187.1,112 184.3,107.3 181.5,102.5 178.6,97.8 175.6,93.1 172.5,88.5 169.3,84.1 166,79.8 162.6,75.8 159,71.9 155.2,68.4 151.2,65.2 147,62.4 142.6,60 138,58 135.5,57.3 133,56.7 130.6,56.3 128.2,56 125.8,55.7 123.4,55.6 121.1,55.6 118.8,55.7 116.6,55.9 114.3,56.2 112.1,56.5 110,57 107.9,57.5 105.8,58.2 103.8,58.9 101.9,59.6 99.9,60.5 98.1,61.4 96.2,62.3 94.5,63.4 92.8,64.5 91.1,65.6 89.5,66.8 93.4,63.7" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.8"/><polygon points="87.2,68.6 91,60.7 95.7,66.7" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="226,128 223.8,127.3 221.5,126.7 219.3,126.1 217,125.7 214.8,125.3 212.6,125 210.4,124.7 208.2,124.6 206.1,124.5 203.9,124.5 201.8,124.6 199.8,124.8 197.7,125 195.7,125.3 193.7,125.6 191.8,126.1 189.9,126.6 188,127.2 186.2,127.8 184.5,128.5 182.8,129.3 181.1,130.1 179.5,131 183.3,128.7" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.4"/><polygon points="177.2,132.5 181.5,125.8 185.1,131.5" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg><span>Seasonal openings</span></a></td><td><a class="matrix-cell" href="#card-temperate-sun" data-matrix-family="temperate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="temperate: sun design principle"><title>temperate: sun design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polyline points="212.7,127.7 211.7,126.8 210.6,125.9 209.2,124.9 207.7,123.7 205.9,122.4 204,121 201.9,119.6 199.7,118 197.3,116.3 194.7,114.5 192,112.7 189.1,110.8 186.1,108.8 182.9,106.7 179.7,104.6 176.3,102.4 172.9,100.1 169.3,97.8 165.7,95.5 162,93.2 158.3,90.8 154.4,88.4 150.6,86 146.7,83.6 142.8,81.1 138.9,78.7 135,76.3 131.1,74 127.3,71.6 123.4,69.3 119.6,67 115.9,64.8 112.3,62.6 108.7,60.5 105.2,58.4 101.8,56.4 98.5,54.5 95.3,52.7 92.2,50.9 89.3,49.3 86.5,47.7 83.8,46.2 81.3,44.9 79,43.6 76.8,42.5 74.8,41.5 73,40.5 71.4,39.7 69.9,39.1 68.7,38.5 67.6,38.1 66.8,37.8 66.1,37.6 65.7,37.5 65.4,37.6 65.4,37.8 65.5,38.1 65.9,38.6 66.4,39.2 67.2,39.9 68.2,40.7 69.3,41.6 70.7,42.7 72.2,43.8 73.9,45.1 75.9,46.5 77.9,48 80.2,49.5 82.6,51.2 85.2,53 87.9,54.8 90.8,56.8 93.8,58.8 96.9,60.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.8"/><polyline points="139.8,169 136.5,166.9 133,164.6 129.5,162.3 125.8,160 122.1,157.6 118.4,155.3 114.6,152.9 110.7,150.5 106.8,148 102.9,145.6 99,143.2 95.1,140.8 91.2,138.4 87.4,136.1 83.6,133.8 79.8,131.5 76,129.3 72.4,127.1 68.8,124.9 65.3,122.9 61.9,120.9 58.6,119 55.4,117.2 52.3,115.4 49.4,113.8 46.6,112.2 43.9,110.7 41.5,109.4 39.1,108.1 37,107 35,105.9 33.1,105 31.5,104.2 30.1,103.5 28.8,103 27.8,102.6 26.9,102.2 26.2,102.1 25.8,102 25.5,102.1 25.5,102.3 25.6,102.6 26,103.1 26.6,103.6" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.8" stroke-dasharray="3 2"/><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="114.8,73 156.4,97 140.8,86 99.2,62" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="156.4,119 125.2,137 125.2,115 156.4,97" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="83.6,113 125.2,137 125.2,115 83.6,91" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="114.8,73 156.4,97 125.2,115 83.6,91" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="156.4,97 125.2,115 140.8,86" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="83.6,91 125.2,115 140.8,86 99.2,62" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="94.9,114.5 113.9,125.5 113.9,113.5 94.9,102.5" fill="light-dark(#7ac5e6, #76c9f0)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="117.4,114 109.6,118.5 109.6,117.3 117.4,112.8" fill="light-dark(#8cb4cc, #46728d)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="83.6,103.5 109.6,118.5 109.6,117.3 83.6,102.3" fill="light-dark(#8cb4cc, #46728d)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="91.4,97.8 117.4,112.8 109.6,117.3 83.6,102.3" fill="light-dark(#8cb4cc, #46728d)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><circle cx="58.6" cy="119" r="6.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><circle cx="98.5" cy="54.5" r="6.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="66.6,119 96.2,114.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.4"/><polygon points="103.4,113.9 96.7,118.2 95.8,111.5" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><polyline points="98.5,62.5 96.9,102.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.4"/><polygon points="96.6,109.5 93.5,102.1 100.3,102.4" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><text x="108.5" y="48.5" font-size="8" fill="light-dark(#607181, #aabccb)">JUN</text><text x="52.6" y="108" font-size="8" fill="light-dark(#607181, #aabccb)">DEC</text></g></svg><span>Selective solar access</span></a></td><td><a class="matrix-cell" href="#card-temperate-ground" data-matrix-family="temperate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="temperate: ground design principle"><title>temperate: ground design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polyline points="83.6,131 83.6,165" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="3.2"/><polyline points="94,137 94,171" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="3.2"/><polyline points="104.4,143 104.4,177" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="3.2"/><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="83.6,125 83.6,129" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1" stroke-dasharray="2 2"/><polyline points="94,131 94,135" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1" stroke-dasharray="2 2"/><polyline points="104.4,137 104.4,141" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1" stroke-dasharray="2 2"/><polygon points="114.8,71 156.4,95 140.8,84 99.2,60" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="156.4,119 125.2,137 125.2,113 156.4,95" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="83.6,113 125.2,137 125.2,113 83.6,89" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="114.8,71 156.4,95 125.2,113 83.6,89" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="156.4,95 125.2,113 140.8,84" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="83.6,89 125.2,113 140.8,84 99.2,60" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="83.6,113 83.6,117 125.2,141 125.2,137" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.8" stroke-dasharray="2 2"/></g></svg><span>Insulated ground edge</span></a></td><td><a class="matrix-cell" href="#card-temperate-material" data-matrix-family="temperate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="temperate: material design principle"><title>temperate: material design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="146,125 137.3,130 137.3,66 146,61" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="102.7,110 137.3,130 137.3,66 102.7,46" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="111.3,41 146,61 137.3,66 102.7,46" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="137.3,130 130.4,134 130.4,70 137.3,66" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="95.8,114 130.4,134 130.4,70 95.8,50" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="102.7,46 137.3,66 130.4,70 95.8,50" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="146,125 144.8,61.7" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.5"/><polyline points="144.7,125.8 143.5,62.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.5"/><polyline points="143.4,126.5 142.2,63.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.5"/><polyline points="142.1,127.3 140.9,64" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.5"/><polyline points="140.8,128 139.6,64.7" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.5"/><polyline points="139.5,128.8 138.3,65.4" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.5"/><polyline points="138.2,129.5 137,66.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.5"/><polyline points="135.6,131 132.1,129 135.6,123 132.1,121 135.6,115 132.1,113 135.6,107 132.1,105 135.6,99 132.1,97 135.6,91 132.1,89 135.6,83 132.1,81 135.6,75 132.1,73 135.6,67" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.6"/><polygon points="104.4,97 121.7,107 121.7,83 104.4,73" fill="light-dark(#7ac5e6, #76c9f0)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><circle cx="27.1" cy="87" r="6.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="36.1,87 39.1,87" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="33.5,93.4 35.6,95.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="27.1,96 27.1,99" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="20.8,93.4 18.7,95.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="18.1,87 15.1,87" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="20.8,80.6 18.7,78.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="27.1,78 27.1,75" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="33.5,80.6 35.6,78.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="39.1,93 106.7,90.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.5"/><polygon points="114.1,90 106.8,93.8 106.5,86.8" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/></g></svg><span>Insulation plus capacity</span></a></td></tr>
<tr data-family="arid"><th scope="row"><a class="matrix-row-link" href="#card-arid-form" data-matrix-family="arid"><span>Hot-arid</span><small>Make shade. Use the cool part of the day.</small></a></th><td><a class="matrix-cell" href="#card-arid-form" data-matrix-family="arid"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="arid: form design principle"><title>arid: form design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 151.2,116 120,134 88.8,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 88.8,116 88.8,100 120,82" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 151.2,116 151.2,100 120,82" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="185.8,116 120,154 120,138 185.8,100" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="54.2,116 120,154 120,138 54.2,100" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M120,62L185.8,100L120,138L54.2,100ZM120,82L151.2,100L120,118L88.8,100Z" fill="light-dark(#5aa7d8, #3f8fc2)" fill-rule="evenodd" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><circle cx="212" cy="42" r="6.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="221,42 224,42" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="218.4,48.4 220.5,50.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="212,51 212,54" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="205.6,48.4 203.5,50.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="203,42 200,42" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="205.6,35.6 203.5,33.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="212,33 212,30" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="218.4,35.6 220.5,33.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="206,49 144.5,127.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.3"/><polygon points="140.2,132.8 141.9,125.2 147.1,129.3" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/></g></svg><span>Self-shading courtyard</span></a></td><td><a class="matrix-cell" href="#card-arid-zoning" data-matrix-family="arid"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="arid: zoning design principle"><title>arid: zoning design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><rect x="62" y="38" width="116" height="116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width=".9"/><path d="M70 46h100v100H70ZM104 80v32h32V80Z" fill="light-dark(#5aa7d8, #3f8fc2)" fill-rule="evenodd" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".9"/></g></svg><span>Shaded occupied edge</span></a></td><td><a class="matrix-cell" href="#card-arid-rain" data-matrix-family="arid"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="arid: rain design principle"><title>arid: rain design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 151.2,116 120,134 88.8,116" fill="light-dark(#a3dde2, #2a7884)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 88.8,116 88.8,100 120,82" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 151.2,116 151.2,100 120,82" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="185.8,116 120,154 120,138 185.8,100" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="54.2,116 120,154 120,138 54.2,100" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M120,62L185.8,100L120,138L54.2,100ZM120,82L151.2,100L120,118L88.8,100Z" fill="light-dark(#ffffff, #202124)" fill-rule="evenodd" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="132,20 109.5,70" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="137,25 114.5,75" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="142,30 119.5,80" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="147,20 124.5,70" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="152,25 129.5,75" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="157,30 134.5,80" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="94,79 101.9,83.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.2"/><polygon points="107.9,87 100.3,86.3 103.5,80.8" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="146,79 138.1,83.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.2"/><polygon points="132.1,87 136.5,80.8 139.7,86.3" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg><span>Catch, store, overflow</span></a></td><td><a class="matrix-cell" href="#card-arid-air" data-matrix-family="arid"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="arid: air design principle"><title>arid: air design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 151.2,116 120,134 88.8,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 88.8,116 88.8,100 120,82" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 151.2,116 151.2,100 120,82" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="185.8,116 120,154 120,138 185.8,100" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="54.2,116 120,154 120,138 54.2,100" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M120,62L185.8,100L120,138L54.2,100ZM120,82L151.2,100L120,118L88.8,100Z" fill="light-dark(#ffffff, #202124)" fill-rule="evenodd" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="133,71.5 120,79 120,55 133,47.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="107,71.5 120,79 120,55 107,47.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,40 133,47.5 120,55 107,47.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="129.5,59.5 123.5,63 123.5,55 129.5,51.5" fill="light-dark(#2e647e, #8acde9)" stroke="none"/><polyline points="228,30 135.4,55.7" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.6"/><polygon points="128.1,57.8 134.4,52.3 136.3,59.2" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="120,54 120,84 120,104" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.2" stroke-dasharray="3 2"/><polyline points="120,112 120,64.9" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.8"/><polygon points="120,57 123.8,64.9 116.2,64.9" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg><span>Timed air exchange</span></a></td><td><a class="matrix-cell" href="#card-arid-sun" data-matrix-family="arid"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="arid: sun design principle"><title>arid: sun design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polyline points="203.6,141.3 202.4,138.7 201.1,136 199.6,133.2 197.9,130.3 196,127.3 193.9,124.3 191.7,121.2 189.4,118 186.9,114.7 184.2,111.4 181.5,108.1 178.6,104.8 175.5,101.4 172.4,98 169.2,94.6 165.9,91.3 162.5,87.9 159,84.6 155.5,81.3 151.9,78.1 148.3,74.9 144.6,71.8 140.9,68.8 137.2,65.8 133.5,62.9 129.8,60.2 126.1,57.5 122.4,54.9 118.8,52.5 115.2,50.2 111.7,48 108.3,46 104.9,44.1 101.6,42.3 98.4,40.7 95.3,39.3 92.3,38 89.5,36.9 86.7,35.9 84.1,35.2 81.7,34.6 79.3,34.1 77.2,33.9 75.2,33.8 73.4,33.9 71.7,34.2 70.2,34.7 68.9,35.3 67.8,36.1 66.8,37.1 66.1,38.2 65.6,39.5 65.2,41 65,42.6 65,44.4 65.3,46.3 65.7,48.4 66.3,50.6 67.1,52.9 68.1,55.4 69.2,58 70.6,60.6 72.1,63.4 73.8,66.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.8"/><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,78 135.1,85.8 200.9,123.8 135.1,161.8 120,154 54.2,116" fill="light-dark(#4583a4, #7bbbdc)" stroke="none" fill-opacity=".35"/><polygon points="120,98 151.2,116 120,134 88.8,116" fill="light-dark(#4583a4, #7bbbdc)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="134.3,106.3 151.2,116 120.8,133.6 103.9,123.8" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="120,98 88.8,116 88.8,100 120,82" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 151.2,116 151.2,100 120,82" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="185.8,116 120,154 120,138 185.8,100" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="54.2,116 120,154 120,138 54.2,100" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M120,62L185.8,100L120,138L54.2,100ZM120,82L151.2,100L120,118L88.8,100Z" fill="light-dark(#5aa7d8, #3f8fc2)" fill-rule="evenodd" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><circle cx="68.9" cy="35.3" r="6.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="77.9,35.3 80.9,35.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="75.3,41.7 77.4,43.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="68.9,44.3 68.9,47.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="62.5,41.7 60.4,43.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="59.9,35.3 56.9,35.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="62.5,28.9 60.4,26.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="68.9,26.3 68.9,23.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="75.3,28.9 77.4,26.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="72.9,43.3 116.4,104.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.4"/><polygon points="120.6,110.8 113.6,106.9 119.2,102.9" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/></g></svg><span>Shade before storage</span></a></td><td><a class="matrix-cell" href="#card-arid-ground" data-matrix-family="arid"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="arid: ground design principle"><title>arid: ground design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="120,130 151.2,148 120,166 88.8,148" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,130 88.8,148 88.8,128 120,110" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,130 151.2,148 151.2,128 120,110" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="199.7,150 120,196 120,162 199.7,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,150 120,196 120,162 40.3,116" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><circle cx="79.4" cy="153.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="49.5" cy="147" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="75.6" cy="153.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="46.6" cy="123.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.3" cy="163.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="63" cy="136.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="92.7" cy="177.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="80" cy="164.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="93.9" cy="175.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="85" cy="159.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="54.4" cy="156.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="115.1" cy="160.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="49.9" cy="140.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="116.5" cy="187.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="73.7" cy="150.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="93.9" cy="171.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="53.9" cy="124.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="75.8" cy="162.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="83.9" cy="163.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="52.6" cy="130.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="68.3" cy="154.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="46.7" cy="122.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="59.3" cy="130.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="77.8" cy="163.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="88.4" cy="164.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="100.8" cy="162.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="51.2" cy="148.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="76.2" cy="167.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="44.1" cy="138.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94.6" cy="159.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="116.4" cy="182.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="75.2" cy="153.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="75.3" cy="141.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="76.2" cy="155.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="61.4" cy="154.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="99.5" cy="179.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="61.9" cy="136.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="108.7" cy="156.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="114.2" cy="163.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="99.9" cy="162.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="84.5" cy="174.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="66.1" cy="152.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="57.5" cy="146.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="95" cy="156.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="61.6" cy="129.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="40.9" cy="138.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87" cy="161.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="47.5" cy="120.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="76.7" cy="141.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.1" cy="161.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="50.3" cy="128.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="111.7" cy="182.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="42.3" cy="145.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="96.7" cy="158.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="92.9" cy="150.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="58.6" cy="132.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="53.8" cy="156.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="46.8" cy="153" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="83.1" cy="146.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="107.5" cy="183.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="79.7" cy="171" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="62.6" cy="146.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="45.4" cy="140.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="58.7" cy="150.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="103.3" cy="181.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="53.4" cy="157.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="90" cy="175.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="72.5" cy="164.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="78.4" cy="157.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="41" cy="124.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="173.3" cy="157.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="125.3" cy="179.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="147.2" cy="171.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123" cy="179.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="169.7" cy="150.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="124" cy="169.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="170.8" cy="145.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="144" cy="181.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="128" cy="166.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="130.8" cy="184.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="181" cy="149.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="132.8" cy="167.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="135.9" cy="175" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="174.4" cy="140" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="191.4" cy="130" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="159.3" cy="155.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="177.5" cy="143.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="197.7" cy="138.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="174.7" cy="163.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="163.6" cy="165" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="125" cy="162.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="155.4" cy="169.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="185.8" cy="128" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="185.9" cy="135.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="154.5" cy="164.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="138" cy="184.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="194.3" cy="120.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="145.5" cy="154" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="152.8" cy="145" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123.9" cy="189.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="181.5" cy="128.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="124.2" cy="161.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="186.9" cy="140.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="156.3" cy="173.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="184.8" cy="144.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="197.6" cy="136.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123" cy="177.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="148.7" cy="158.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="129.4" cy="182.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="134.6" cy="167.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="148.9" cy="147.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="194.6" cy="144.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="164.7" cy="146.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="158.6" cy="149.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="127.8" cy="163.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="186.7" cy="153.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="151.3" cy="170.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="141.5" cy="174.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="174.1" cy="158.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="180.2" cy="132.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><path d="M120,70L199.7,116L120,162L40.3,116ZM120,110L151.2,128L120,146L88.8,128Z" fill="light-dark(#ffffff, #202124)" fill-rule="evenodd" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="142.5,91 120,104 120,88 142.5,75" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="97.5,91 120,104 120,88 97.5,75" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,62 142.5,75 120,88 97.5,75" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="65.4,114.5 59.4,118 59.4,104 65.4,100.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="53.3,114.5 59.4,118 59.4,104 53.3,100.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="59.4,97 65.4,100.5 59.4,104 53.3,100.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="59.4,102.5 59.4,141.5 101.4,165.8 104.4,157" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.1" stroke-dasharray="3 2"/><polyline points="59.4,141.5 80.4,153.6" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.4"/><polygon points="86.7,157.3 78.7,156.6 82.1,150.7" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><polyline points="104.4,157 110.7,149.7" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.4"/><polygon points="115.5,144.2 113.3,151.9 108.1,147.5" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg><span>Tempered lower level</span></a></td><td><a class="matrix-cell" href="#card-arid-material" data-matrix-family="arid"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="arid: material design principle"><title>arid: material design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="123.5,104 99.2,118 99.2,56 123.5,42" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="85.4,110 99.2,118 99.2,56 85.4,48" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="109.6,34 123.5,42 99.2,56 85.4,48" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><circle cx="96" cy="90.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94.8" cy="69" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="86.3" cy="51.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="96.2" cy="59.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="88.3" cy="94" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="90.5" cy="57.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94.7" cy="62.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="90.9" cy="90.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="96.1" cy="106.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="96.2" cy="81.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="93.3" cy="94.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="93.9" cy="110.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="91.3" cy="90.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="86.4" cy="79.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="88.4" cy="50.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="98.7" cy="80.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="88.6" cy="98" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="98.3" cy="103.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="95.1" cy="77.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="90.6" cy="61.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="86.4" cy="103.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="99.2" cy="72.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="97.2" cy="77.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="99.1" cy="117.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.7" cy="94.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="99" cy="56" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="85.5" cy="97" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="93" cy="77.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="86.8" cy="96.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="91.7" cy="109" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="92" cy="113" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="92.9" cy="71.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94.7" cy="57.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="89.3" cy="58.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94.4" cy="72.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="99.2" cy="111" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="89.6" cy="82.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="95.6" cy="80.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="95.8" cy="57" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="97.5" cy="103.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.6" cy="70.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="89.2" cy="63.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="89.9" cy="89.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="88.6" cy="93.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="97.9" cy="59.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="99" cy="99.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="89.5" cy="62" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="98.8" cy="71.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="88" cy="91.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94.9" cy="81.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="96.4" cy="82.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="89.2" cy="63" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="95.5" cy="65.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="95.5" cy="74.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="93.4" cy="113" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="96" cy="55.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="86.7" cy="82.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="91.2" cy="91" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.2" cy="89.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="88.6" cy="97.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.4" cy="103" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.4" cy="95.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="91.9" cy="93.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="86.6" cy="69.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.6" cy="107.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.4" cy="106.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="93.3" cy="95.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="92.2" cy="110.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="93.5" cy="63.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="98.3" cy="93.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="92.1" cy="75.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.2" cy="55.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="92.5" cy="99.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="91.8" cy="110.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="86.9" cy="72.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94.2" cy="104.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="96.1" cy="73" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="97.2" cy="95.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94.2" cy="80.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="95.5" cy="60.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="95.1" cy="92.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="97.2" cy="72.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94.9" cy="55.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="99.1" cy="113" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94" cy="55.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="98.8" cy="102.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="85.9" cy="62.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="89" cy="72" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="97.9" cy="112.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="88.1" cy="63" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><polygon points="137.3,112 113.1,126 113.1,64 137.3,50" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="99.2,118 113.1,126 113.1,64 99.2,56" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="123.5,42 137.3,50 113.1,64 99.2,56" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><circle cx="104.9" cy="72.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="104.9" cy="109.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="102.1" cy="60" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="102.6" cy="76.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="100.1" cy="56.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="109" cy="115.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="111.1" cy="86.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="107.5" cy="107.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="111.2" cy="71.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="107" cy="69.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="103.9" cy="105.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="99.4" cy="89.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="109.1" cy="77.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="107.9" cy="100.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="105.9" cy="105.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="107.9" cy="83.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="110.3" cy="67.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="107.7" cy="83.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="108.1" cy="70.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="101.7" cy="105.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="109.4" cy="69.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="100.5" cy="74.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="100.8" cy="78.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="101.7" cy="99.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="103.5" cy="85.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="112" cy="94.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="103.1" cy="100.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="108" cy="76.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="112.3" cy="118" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="104.4" cy="108.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="104.6" cy="84.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="106.3" cy="69.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="110.2" cy="106.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="111.9" cy="99.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="112.5" cy="125.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="111.2" cy="67.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="106.7" cy="87.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="107.8" cy="65.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="112.1" cy="97.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="107.5" cy="99.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="110.7" cy="65" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="103.7" cy="109.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="105.2" cy="110.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="111.9" cy="98.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="104.3" cy="92.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="104.3" cy="102.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="102.1" cy="78.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="104.8" cy="83.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="109.3" cy="118.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="100" cy="56.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="109.8" cy="63.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="111.2" cy="71.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="110.1" cy="76.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="110.1" cy="69" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="100.7" cy="59.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="109.2" cy="104.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="110.2" cy="81.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="110" cy="80.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="102.1" cy="61.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="101" cy="75.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="102.3" cy="91.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="107.1" cy="121.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="100.8" cy="103.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="109.8" cy="91.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="101.3" cy="65.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="100.6" cy="76.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="109.5" cy="108.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="103" cy="69.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="104.8" cy="100.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="106" cy="61.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><polygon points="151.2,120 126.9,134 126.9,72 151.2,58" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.1,126 126.9,134 126.9,72 113.1,64" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="137.3,50 151.2,58 126.9,72 113.1,64" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><circle cx="113.7" cy="116.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="115" cy="88.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.9" cy="68.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="122.9" cy="100.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="125.8" cy="89.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="113.7" cy="102.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="113.6" cy="102.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="124.1" cy="125.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="126.3" cy="98.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.9" cy="119.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="114.5" cy="116.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="118.8" cy="77.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="126.8" cy="125.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="115.6" cy="113.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123.4" cy="97.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117" cy="87.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="118.2" cy="91.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.2" cy="126" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="121" cy="126.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="126.7" cy="94.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="118.5" cy="90.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="115.6" cy="84.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="118.2" cy="88.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="118.2" cy="89.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="119.4" cy="76.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="125" cy="132.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="120.8" cy="103.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123" cy="76" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123.9" cy="131.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.1" cy="108.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.2" cy="118.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="119.6" cy="129.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="125.6" cy="93" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="120.5" cy="70.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="116.8" cy="108.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123.3" cy="85.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123.7" cy="92.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="119.9" cy="111.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="114.6" cy="68.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.6" cy="95" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="119.9" cy="113.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="118.1" cy="93.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="120.5" cy="69.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="121.3" cy="96.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="124.5" cy="72.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123.4" cy="112.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="114.8" cy="95.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="124.7" cy="103.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="116.8" cy="75.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="119" cy="101.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123.2" cy="106.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="119.4" cy="72.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="124.6" cy="88.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="124.7" cy="125.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="121.8" cy="76.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="122.4" cy="92.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="119.8" cy="72.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="114.9" cy="123.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117" cy="94.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="113.4" cy="116" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.1" cy="79.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="126.8" cy="85.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123.7" cy="121.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="119.1" cy="105.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="115" cy="85.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="113.8" cy="108.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="125.7" cy="121.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="113.8" cy="91.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="116.2" cy="76" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="113.6" cy="91.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="114" cy="78.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="121.5" cy="121.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="115.3" cy="78" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="120.2" cy="90.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="120.5" cy="94.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="121.5" cy="115.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123.3" cy="101.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.9" cy="102.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="122.9" cy="116.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="113.9" cy="84.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="118.2" cy="126" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="124.2" cy="124.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="124.3" cy="100.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="126" cy="85.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="116.1" cy="114.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.7" cy="107.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="118.4" cy="71.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.1" cy="75.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="126.4" cy="103.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="113.7" cy="73.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="44" cy="32" r="6" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="52.5,32 55.5,32" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="50,38 52.1,40.1" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="44,40.5 44,43.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="38,38 35.9,40.1" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="35.5,32 32.5,32" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="38,26 35.9,23.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="44,23.5 44,20.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="50,26 52.1,23.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><path d="M200 27a8 8 0 1 0 4 13a6.5 6.5 0 1 1-4-13Z" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="58,34 63.3,31.6 68.7,29.4 74.1,27.4 79.5,25.7 85.1,24.1 90.6,22.7 96.1,21.6 101.7,20.6 107.3,19.8 112.8,19.3 118.3,18.9 123.8,18.8 129.2,18.8 134.5,19 139.8,19.4 145,20.1 150.1,20.9 155,21.9 159.9,23.1 164.6,24.5 169.2,26.1 173.6,27.9 177.9,29.8 176.8,29.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.2" stroke-dasharray="3 2"/><polygon points="182.9,32.5 175.3,32.1 178.3,26.4" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/></g></svg><span>Mass with a reset</span></a></td></tr>
<tr data-family="tropical"><th scope="row"><a class="matrix-row-link" href="#card-tropical-form" data-matrix-family="tropical"><span>Warm-humid</span><small>Shade the room. Move air across people.</small></a></th><td><a class="matrix-cell" href="#card-tropical-form" data-matrix-family="tropical"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="tropical: form design principle"><title>tropical: form design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="113.9,100.5 113.9,88.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="93.2,112.5 93.2,100.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="130.4,110 130.4,98" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="109.6,122 109.6,110" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="146.8,119.5 146.8,107.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="126.1,131.5 126.1,119.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polygon points="157.2,109.5 126.1,127.5 126.1,125.5 157.2,107.5" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="82.8,102.5 126.1,127.5 126.1,125.5 82.8,100.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,82.5 157.2,107.5 126.1,125.5 82.8,100.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="152,107.5 126.1,122.5 126.1,104.5 152,89.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="88,100.5 126.1,122.5 126.1,104.5 88,82.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,67.5 152,89.5 126.1,104.5 88,82.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,58.5 167.6,89.5 131.3,66.5 108.7,53.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="167.6,89.5 126.1,113.5 131.3,66.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="72.4,82.5 126.1,113.5 131.3,66.5 108.7,53.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="77.7,85.6 111,54.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="83.1,88.7 113.2,56.1" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="88.5,91.8 115.5,57.4" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="93.8,94.9 117.7,58.7" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="99.2,98 120,60" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="104.6,101.1 122.3,61.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="110,104.2 124.5,62.6" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="115.3,107.3 126.8,63.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="120.7,110.4 129,65.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="160.7,93.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="153.8,97.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="146.8,101.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="139.9,105.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="133,109.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="90.6,68 128.7,90" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polygon points="135.6,71 126.9,76 131.3,66.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.8"/></g></svg><span>Broad roof, shallow plan</span></a></td><td><a class="matrix-cell" href="#card-tropical-zoning" data-matrix-family="tropical"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="tropical: zoning design principle"><title>tropical: zoning design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><rect x="66" y="44" width="108" height="100" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width=".9"/><rect x="130" y="44" width="44" height="100" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width=".9"/><path d="M134 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M138 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M142 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M146 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M150 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M154 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M158 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M162 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M166 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M170 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M131 50h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 58h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 66h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 74h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 82h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 90h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 98h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 106h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 114h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 122h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 130h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 138h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/></g></svg><span>Ventilated living edge</span></a></td><td><a class="matrix-cell" href="#card-tropical-rain" data-matrix-family="tropical"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="tropical: rain design principle"><title>tropical: rain design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="113.9,100.5 113.9,88.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="93.2,112.5 93.2,100.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="130.4,110 130.4,98" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="109.6,122 109.6,110" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="146.8,119.5 146.8,107.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="126.1,131.5 126.1,119.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polygon points="157.2,109.5 126.1,127.5 126.1,125.5 157.2,107.5" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="82.8,102.5 126.1,127.5 126.1,125.5 82.8,100.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,82.5 157.2,107.5 126.1,125.5 82.8,100.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="152,107.5 126.1,122.5 126.1,104.5 152,89.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="88,100.5 126.1,122.5 126.1,104.5 88,82.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,67.5 152,89.5 126.1,104.5 88,82.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,58.5 167.6,89.5 131.3,66.5 108.7,53.5" fill="light-dark(#a3dde2, #2a7884)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="167.6,89.5 126.1,113.5 131.3,66.5" fill="light-dark(#a3dde2, #2a7884)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="72.4,82.5 126.1,113.5 131.3,66.5 108.7,53.5" fill="light-dark(#a3dde2, #2a7884)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="77.7,85.6 111,54.8" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="83.1,88.7 113.2,56.1" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="88.5,91.8 115.5,57.4" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="93.8,94.9 117.7,58.7" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="99.2,98 120,60" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="104.6,101.1 122.3,61.3" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="110,104.2 124.5,62.6" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="115.3,107.3 126.8,63.9" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="120.7,110.4 129,65.2" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="160.7,93.5 131.3,66.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="153.8,97.5 131.3,66.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="146.8,101.5 131.3,66.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="139.9,105.5 131.3,66.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="133,109.5 131.3,66.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="90.6,68 128.7,90" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polygon points="135.6,71 126.9,76 131.3,66.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.8"/><polyline points="150,6 136.5,36" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="156.5,11 143,41" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="163,16 149.5,46" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="169.5,6 156,36" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="176,11 162.5,41" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="182.5,16 169,46" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="189,6 175.5,36" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="195.5,11 182,41" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="202,16 188.5,46" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="124.3,116.5 124.3,136.4" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.3"/><polygon points="124.3,143.5 121,136.4 127.6,136.4" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="70.6,85.5 70.6,105.4" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.3"/><polygon points="70.6,112.5 67.3,105.4 73.9,105.4" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg><span>Roof and drying path</span></a></td><td><a class="matrix-cell" href="#card-tropical-air" data-matrix-family="tropical"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="tropical: air design principle"><title>tropical: air design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="113.9,100.5 113.9,88.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="93.2,112.5 93.2,100.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="130.4,110 130.4,98" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="109.6,122 109.6,110" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="146.8,119.5 146.8,107.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="126.1,131.5 126.1,119.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polygon points="157.2,109.5 126.1,127.5 126.1,125.5 157.2,107.5" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="82.8,102.5 126.1,127.5 126.1,125.5 82.8,100.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,82.5 157.2,107.5 126.1,125.5 82.8,100.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="152,107.5 126.1,122.5 126.1,104.5 152,89.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="88,100.5 126.1,122.5 126.1,104.5 88,82.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,67.5 152,89.5 126.1,104.5 88,82.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,58.5 167.6,89.5 131.3,66.5 108.7,53.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="167.6,89.5 126.1,113.5 131.3,66.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="72.4,82.5 126.1,113.5 131.3,66.5 108.7,53.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="77.7,85.6 111,54.8" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="83.1,88.7 113.2,56.1" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="88.5,91.8 115.5,57.4" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="93.8,94.9 117.7,58.7" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="99.2,98 120,60" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="104.6,101.1 122.3,61.3" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="110,104.2 124.5,62.6" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="115.3,107.3 126.8,63.9" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="120.7,110.4 129,65.2" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="160.7,93.5 131.3,66.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="153.8,97.5 131.3,66.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="146.8,101.5 131.3,66.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="139.9,105.5 131.3,66.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="133,109.5 131.3,66.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="90.6,68 128.7,90" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polygon points="135.6,71 126.9,76 131.3,66.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.8"/><polyline points="178.9,124 149.1,106.8" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.6"/><polygon points="142.5,103 150.9,103.7 147.3,109.9" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="166.8,127 136.9,109.8" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.6"/><polygon points="130.4,106 138.7,106.7 135.1,112.9" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="101.8,98.5 75.5,113.7" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.6"/><polygon points="68.9,117.5 73.7,110.6 77.3,116.8" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="115.7,110.5 91,124.7" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.6"/><polygon points="84.5,128.5 89.2,121.6 92.8,127.8" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="142.5,154 97.6,128" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.3"/><polygon points="91.4,124.5 99.2,125.2 95.9,130.9" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="120,54 121.3,33.9" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.8"/><polygon points="121.8,26 125.1,34.1 117.5,33.6" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg><span>Air movement for comfort</span></a></td><td><a class="matrix-cell" href="#card-tropical-sun" data-matrix-family="tropical"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="tropical: sun design principle"><title>tropical: sun design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polyline points="187.5,155 187.1,151.1 186.6,147 185.8,142.9 184.8,138.7 183.7,134.4 182.4,130.1 181,125.8 179.3,121.4 177.5,117 175.6,112.6 173.4,108.2 171.2,103.9 168.8,99.5 166.3,95.3 163.6,91 160.8,86.9 157.9,82.8 154.9,78.8 151.9,74.9 148.7,71.2 145.4,67.5 142.1,64 138.7,60.6 135.3,57.4 131.8,54.3 128.3,51.4 124.8,48.7 121.2,46.2 117.7,43.8 114.1,41.7 110.6,39.8 107.1,38 103.6,36.5 100.2,35.2 96.8,34.1 93.5,33.3 90.3,32.7 87.1,32.3 84.1,32.1 81.1,32.2 78.3,32.4 75.5,33 72.9,33.7 70.4,34.7 68.1,35.9 65.9,37.3 63.8,38.9 61.9,40.8 60.1,42.8 58.6,45.1 57.1,47.5 55.9,50.1 54.8,53 53.9,55.9 53.2,59.1 52.7,62.4 52.4,65.9 52.2,69.4 52.2,73.2 52.5,77" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.8"/><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="113.9,100.5 113.9,88.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="93.2,112.5 93.2,100.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="130.4,110 130.4,98" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="109.6,122 109.6,110" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="146.8,119.5 146.8,107.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="126.1,131.5 126.1,119.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polygon points="157.2,109.5 126.1,127.5 126.1,125.5 157.2,107.5" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="82.8,102.5 126.1,127.5 126.1,125.5 82.8,100.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,82.5 157.2,107.5 126.1,125.5 82.8,100.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="152,107.5 126.1,122.5 126.1,104.5 152,89.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="88,100.5 126.1,122.5 126.1,104.5 88,82.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,67.5 152,89.5 126.1,104.5 88,82.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,58.5 167.6,89.5 131.3,66.5 108.7,53.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="167.6,89.5 126.1,113.5 131.3,66.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="72.4,82.5 126.1,113.5 131.3,66.5 108.7,53.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="77.7,85.6 111,54.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="83.1,88.7 113.2,56.1" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="88.5,91.8 115.5,57.4" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="93.8,94.9 117.7,58.7" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="99.2,98 120,60" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="104.6,101.1 122.3,61.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="110,104.2 124.5,62.6" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="115.3,107.3 126.8,63.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="120.7,110.4 129,65.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="160.7,93.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="153.8,97.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="146.8,101.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="139.9,105.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="133,109.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="90.6,68 128.7,90" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polygon points="135.6,71 126.9,76 131.3,66.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.8"/><circle cx="81.1" cy="32.2" r="6.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="90.1,32.2 93.1,32.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="87.5,38.5 89.6,40.6" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="81.1,41.2 81.1,44.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="74.8,38.5 72.6,40.6" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="72.1,32.2 69.1,32.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="74.8,25.8 72.6,23.7" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="81.1,23.2 81.1,20.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="87.5,25.8 89.6,23.7" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="78.1,40.2 102.4,86" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.4"/><polygon points="105.7,92.4 99.4,87.6 105.4,84.4" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><polyline points="105.3,91.5 134.8,65.4" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.2" stroke-dasharray="3 2"/><polygon points="140,60.8 137,67.8 132.7,63" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/></g></svg><span>Continuous solar protection</span></a></td><td><a class="matrix-cell" href="#card-tropical-ground" data-matrix-family="tropical"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="tropical: ground design principle"><title>tropical: ground design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="113.9,100.5 113.9,82.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="3"/><polyline points="93.2,112.5 93.2,94.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="3"/><polyline points="130.4,110 130.4,92" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="3"/><polyline points="109.6,122 109.6,104" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="3"/><polyline points="146.8,119.5 146.8,101.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="3"/><polyline points="126.1,131.5 126.1,113.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="3"/><polygon points="157.2,103.5 126.1,121.5 126.1,119.5 157.2,101.5" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="82.8,96.5 126.1,121.5 126.1,119.5 82.8,94.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,76.5 157.2,101.5 126.1,119.5 82.8,94.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="152,101.5 126.1,116.5 126.1,98.5 152,83.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="88,94.5 126.1,116.5 126.1,98.5 88,76.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,61.5 152,83.5 126.1,98.5 88,76.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,52.5 167.6,83.5 131.3,60.5 108.7,47.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="167.6,83.5 126.1,107.5 131.3,60.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="72.4,76.5 126.1,107.5 131.3,60.5 108.7,47.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="77.7,79.6 111,48.8" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="83.1,82.7 113.2,50.1" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="88.5,85.8 115.5,51.4" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="93.8,88.9 117.7,52.7" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="99.2,92 120,54" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="104.6,95.1 122.3,55.3" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="110,98.2 124.5,56.6" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="115.3,101.3 126.8,57.9" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="120.7,104.4 129,59.2" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="160.7,87.5 131.3,60.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="153.8,91.5 131.3,60.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="146.8,95.5 131.3,60.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="139.9,99.5 131.3,60.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="133,103.5 131.3,60.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="90.6,62 128.7,84" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polygon points="135.6,65 126.9,70 131.3,60.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.8"/></g></svg><span>Raised, protected floor</span></a></td><td><a class="matrix-cell" href="#card-tropical-material" data-matrix-family="tropical"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="tropical: material design principle"><title>tropical: material design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,116 116.5,118 116.5,58 120,56" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="90.6,103 116.5,118 116.5,58 90.6,43" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="94,41 120,56 116.5,58 90.6,43" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="93.2,100.5 95.8,102 95.8,98.4 93.2,96.9" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="93.2,94.3 95.8,95.8 95.8,92.2 93.2,90.7" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="93.2,88.1 95.8,89.6 95.8,86 93.2,84.5" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="93.2,81.9 95.8,83.4 95.8,79.8 93.2,78.3" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="93.2,75.7 95.8,77.2 95.8,73.6 93.2,72.1" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="93.2,69.5 95.8,71 95.8,67.4 93.2,65.9" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="93.2,63.3 95.8,64.8 95.8,61.2 93.2,59.7" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="93.2,57.1 95.8,58.6 95.8,55 93.2,53.5" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="93.2,50.9 95.8,52.4 95.8,48.8 93.2,47.3" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="97.8,103.2 100.4,104.7 100.4,101.1 97.8,99.6" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="97.8,97 100.4,98.5 100.4,94.9 97.8,93.4" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="97.8,90.8 100.4,92.3 100.4,88.7 97.8,87.2" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="97.8,84.6 100.4,86.1 100.4,82.5 97.8,81" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="97.8,78.4 100.4,79.9 100.4,76.3 97.8,74.8" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="97.8,72.2 100.4,73.7 100.4,70.1 97.8,68.6" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="97.8,66 100.4,67.5 100.4,63.9 97.8,62.4" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="97.8,59.8 100.4,61.3 100.4,57.7 97.8,56.2" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="97.8,53.6 100.4,55.1 100.4,51.5 97.8,50" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="102.5,105.9 105.1,107.4 105.1,103.8 102.5,102.3" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="102.5,99.7 105.1,101.2 105.1,97.6 102.5,96.1" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="102.5,93.5 105.1,95 105.1,91.4 102.5,89.9" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="102.5,87.3 105.1,88.8 105.1,85.2 102.5,83.7" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="102.5,81.1 105.1,82.6 105.1,79 102.5,77.5" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="102.5,74.9 105.1,76.4 105.1,72.8 102.5,71.3" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="102.5,68.7 105.1,70.2 105.1,66.6 102.5,65.1" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="102.5,62.5 105.1,64 105.1,60.4 102.5,58.9" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="102.5,56.3 105.1,57.8 105.1,54.2 102.5,52.7" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="107.2,108.6 109.8,110.1 109.8,106.5 107.2,105" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="107.2,102.4 109.8,103.9 109.8,100.3 107.2,98.8" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="107.2,96.2 109.8,97.7 109.8,94.1 107.2,92.6" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="107.2,90 109.8,91.5 109.8,87.9 107.2,86.4" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="107.2,83.8 109.8,85.3 109.8,81.7 107.2,80.2" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="107.2,77.6 109.8,79.1 109.8,75.5 107.2,74" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="107.2,71.4 109.8,72.9 109.8,69.3 107.2,67.8" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="107.2,65.2 109.8,66.7 109.8,63.1 107.2,61.6" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="107.2,59 109.8,60.5 109.8,56.9 107.2,55.4" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="111.9,111.3 114.5,112.8 114.5,109.2 111.9,107.7" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="111.9,105.1 114.5,106.6 114.5,103 111.9,101.5" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="111.9,98.9 114.5,100.4 114.5,96.8 111.9,95.3" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="111.9,92.7 114.5,94.2 114.5,90.6 111.9,89.1" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="111.9,86.5 114.5,88 114.5,84.4 111.9,82.9" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="111.9,80.3 114.5,81.8 114.5,78.2 111.9,76.7" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="111.9,74.1 114.5,75.6 114.5,72 111.9,70.5" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="111.9,67.9 114.5,69.4 114.5,65.8 111.9,64.3" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="111.9,61.7 114.5,63.2 114.5,59.6 111.9,58.1" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="90.6,103 116.5,118 116.5,58 90.6,43" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="158.1,128 155.9,129.3 155.9,77.3 158.1,76" fill="light-dark(#1f6fa3, #8bcfff)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="140.4,120.3 155.9,129.3 155.9,77.3 140.4,68.3" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="142.5,67 158.1,76 155.9,77.3 140.4,68.3" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="147.7,62 79.1,96.1" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.6"/><polygon points="72.3,99.4 77.5,92.9 80.7,99.3" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="137.3,70 68.7,104.1" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.6"/><polygon points="61.9,107.4 67.1,100.9 70.3,107.3" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg><span>Light and quick to dry</span></a></td></tr></tbody></table>
<!-- MATRIX_END -->
</div>
<div class="principle-detail" id="principle-detail" aria-label="Selected design principle"><div class="detail-bar"><span class="small-label" id="detail-position">SELECTED PRINCIPLE</span>
<div class="detail-nav"><button type="button" class="quiet-button" data-card-step="-1">← Previous</button>
<button type="button" class="quiet-button" data-card-step="1">Next →</button>
</div>
</div>
<div class="detail-body"><div class="principle-cards"><!-- PRINCIPLES_START -->
<article class="principle-card" id="card-polar-form" data-family="polar" aria-labelledby="card-polar-form-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="polar: form design principle"><title>polar: form design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M83.3 116A36.7 36.7 0 0 1 156.7 116A36.7 21.2 0 0 1 83.3 116Z" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M90.6 116A29.4 29.4 0 0 1 149.4 116A29.4 17 0 0 1 90.6 116Z" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.8" stroke-dasharray="2.5 2"/><path d="M104.1 116A15.9 15.9 0 0 1 135.9 116A15.9 9.2 0 0 1 104.1 116Z" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.9"/><polygon points="161.6,133 149.4,140 149.4,130 161.6,123" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="134.7,131.5 149.4,140 149.4,130 134.7,121.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="146.8,114.5 161.6,123 149.4,130 134.7,121.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="158.5,134.8 152.5,138.3 152.5,131.3 158.5,127.8" fill="light-dark(#2e647e, #8acde9)" stroke="none"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Polar / very cold</span><span>Form · 01</span></p><h4 id="card-polar-form-title">Compact enclosure</h4><p class="mechanism">Reduce exposed area</p><p>A compact volume encloses useful space with less exterior area. For the same insulation and indoor-outdoor temperature difference, less area reduces conductive heat loss. Limit unnecessary projections and thermal bridges, while keeping enough window area for daylight and views.</p><a href="./assets/diagrams/climate/polar-form.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-polar-zoning" data-family="polar" aria-labelledby="card-polar-zoning-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="polar: zoning design principle"><title>polar: zoning design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><circle cx="120" cy="96" r="58" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width=".9"/><circle cx="120" cy="96" r="44" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width=".9"/><circle cx="120" cy="96" r="29" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".9"/><rect x="176" y="88" width="20" height="16" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width=".9"/><path d="M196 92v8" stroke="light-dark(#2e647e, #8acde9)" stroke-width="2"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Polar / very cold</span><span>Zoning · 02</span></p><h4 id="card-polar-zoning-title">Layers of protection</h4><p class="mechanism">Buffer the occupied core</p><p>Place less temperature-sensitive spaces around a warmer occupied core. An enclosed entry slows the exchange of indoor and outdoor air when doors open. Buffer zones only help if their doors, temperatures, and ventilation are managed; a poorly enclosed porch can simply become another heated room.</p><a href="./assets/diagrams/climate/polar-zoning.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-polar-rain" data-family="polar" aria-labelledby="card-polar-rain-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="polar: rain design principle"><title>polar: rain design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M83.3 116A36.7 36.7 0 0 1 156.7 116A36.7 21.2 0 0 1 83.3 116Z" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="91,93.5 92.7,91.4 94.7,89.4 96.8,87.5 99,85.8 101.4,84.3 103.8,83 106.4,81.9 109,80.9 111.7,80.2 114.4,79.7 117.2,79.4 120,79.3 122.8,79.4 125.6,79.7 128.3,80.2 131,80.9 133.6,81.9 136.2,83 138.6,84.3 141,85.8 143.2,87.5 145.3,89.4 147.3,91.4 149,93.5 149,93.5 150.8,96.4 151.7,99.4 151.7,102.4 150.9,105.4 149.2,108.3 146.7,111 143.5,113.4 139.6,115.5 135.2,117.1 130.4,118.4 125.3,119.1 120,119.4 114.7,119.1 109.6,118.4 104.8,117.1 100.4,115.5 96.5,113.4 93.3,111 90.8,108.3 89.1,105.4 88.3,102.4 88.3,99.4 89.2,96.4 91,93.5" fill="light-dark(#a3dde2, #2a7884)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="161.6,133 149.4,140 149.4,130 161.6,123" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="134.7,131.5 149.4,140 149.4,130 134.7,121.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="146.8,114.5 161.6,123 149.4,130 134.7,121.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="158.5,134.8 152.5,138.3 152.5,131.3 158.5,127.8" fill="light-dark(#2e647e, #8acde9)" stroke="none"/><polyline points="104,22 104,41.6" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.5"/><polygon points="104,49 100.5,41.6 107.5,41.6" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="120,22 120,37.6" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.5"/><polygon points="120,45 116.5,37.6 123.5,37.6" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="136,22 136,41.6" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.5"/><polygon points="136,49 132.5,41.6 139.5,41.6" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Polar / very cold</span><span>Rain + snow · 03</span></p><h4 id="card-polar-rain-title">Snow-aware roof</h4><p class="mechanism">Plan load and shedding</p><p>Roof form changes where snow accumulates and where it falls. Coordinate structure, drainage, entries, and paths with drifting and snow shedding. Insulation and airtightness also limit roof warming that can contribute to ice dams. Determine structural loads from local design data, beyond a typical weather year.</p><a href="./assets/diagrams/climate/polar-rain.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-polar-air" data-family="polar" aria-labelledby="card-polar-air-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="polar: air design principle"><title>polar: air design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M83.3 116A36.7 36.7 0 0 1 156.7 116A36.7 21.2 0 0 1 83.3 116Z" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="161.6,133 149.4,140 149.4,130 161.6,123" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="134.7,131.5 149.4,140 149.4,130 134.7,121.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="146.8,114.5 161.6,123 149.4,130 134.7,121.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="158.5,134.8 152.5,138.3 152.5,131.3 158.5,127.8" fill="light-dark(#2e647e, #8acde9)" stroke="none"/><polyline points="214,150 209.9,147 205.9,143.6 202.2,139.9 198.6,135.8 195.1,131.5 191.8,126.9 188.5,122.2 185.3,117.3 182.2,112.4 179.1,107.4 175.9,102.4 172.8,97.5 169.5,92.7 166.2,88 162.8,83.6 159.3,79.3 155.7,75.4 151.8,71.8 147.8,68.6 143.6,65.8 139.1,63.5 134.4,61.8 129.3,60.6 124,60 121.1,59.9 118.2,59.9 115.5,59.9 112.8,60 110.2,60.2 107.8,60.4 105.4,60.7 103,61 100.8,61.5 98.6,61.9 96.5,62.5 94.5,63.1 92.5,63.8 90.6,64.6 88.8,65.4 87,66.3 85.2,67.3 83.5,68.3 81.8,69.4 80.2,70.6 78.6,71.8 77,73.1 75.5,74.5 78.9,71.2" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.8"/><polygon points="73.3,76.7 76.3,68.5 81.6,73.9" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="222,124 219.3,123.3 216.5,122.7 213.9,122.2 211.2,121.7 208.6,121.4 206,121.2 203.4,121 200.9,121 198.4,121 196,121.1 193.6,121.3 191.3,121.6 189,122 186.7,122.5 184.6,123.1 182.4,123.7 180.4,124.4 178.4,125.3 176.5,126.2 174.6,127.2 172.9,128.3 171.2,129.4 169.5,130.7 172.7,127.9" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.4"/><polygon points="167.2,132.7 170.5,125.3 174.9,130.5" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Polar / very cold</span><span>Air · 04</span></p><h4 id="card-polar-air-title">Sheltered entrance</h4><p class="mechanism">Reduce unwanted air exchange</p><p>Use siting, windbreaks, and a vestibule to moderate exposure at the door. Airtight construction controls infiltration; deliberate ventilation supplies fresh air. Sheltering an entrance does not replace ventilation, and snowdrifts around windbreaks must be checked.</p><a href="./assets/diagrams/climate/polar-air.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-polar-sun" data-family="polar" aria-labelledby="card-polar-sun-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="polar: sun design principle"><title>polar: sun design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polyline points="187.5,155 184.1,155.5 180.5,155.8 176.8,156.1 172.9,156.2 168.8,156.3 164.6,156.2 160.3,156 155.9,155.7 151.4,155.3 146.8,154.8 142.1,154.1 137.3,153.4 132.5,152.6 127.7,151.7 122.9,150.6 118,149.5 113.2,148.3 108.4,147 103.6,145.6 98.8,144.1 94.1,142.6 89.5,141 84.9,139.3 80.5,137.5 76.2,135.7 72,133.9 67.9,131.9 63.9,130 60.1,128 56.5,126 53.1,123.9 49.8,121.8 46.7,119.7 43.9,117.6 41.2,115.5 38.8,113.4 36.5,111.3 34.5,109.2 32.8,107.2 31.3,105.1 30,103.1 28.9,101.1 28.2,99.2 27.6,97.3 27.4,95.5 27.3,93.7 27.6,92 28,90.3 28.8,88.7 29.8,87.2 31,85.8 32.5,84.4 34.2,83.2 36.1,82 38.3,80.9 40.7,79.9 43.4,79 46.2,78.3 49.2,77.6 52.5,77" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.8"/><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M83.3 116A36.7 36.7 0 0 1 156.7 116A36.7 21.2 0 0 1 83.3 116Z" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="161.6,133 149.4,140 149.4,130 161.6,123" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="134.7,131.5 149.4,140 149.4,130 134.7,121.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="146.8,114.5 161.6,123 149.4,130 134.7,121.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="158.5,134.8 152.5,138.3 152.5,131.3 158.5,127.8" fill="light-dark(#2e647e, #8acde9)" stroke="none"/><circle cx="27.6" cy="97.3" r="6.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="36.6,97.3 39.6,97.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="34,103.7 36.1,105.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="27.6,106.3 27.6,109.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="21.3,103.7 19.1,105.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="18.6,97.3 15.6,97.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="21.3,90.9 19.1,88.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="27.6,88.3 27.6,85.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="34,90.9 36.1,88.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="37.6,100.3 77.9,110.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.4"/><polygon points="85,112.2 77.1,113.8 78.8,107.2" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><polyline points="104,14 104,27.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.3"/><polygon points="104,35 100.7,27.9 107.3,27.9" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><polyline points="120,14 120,27.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.3"/><polygon points="120,35 116.7,27.9 123.3,27.9" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><polyline points="136,14 136,27.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.3"/><polygon points="136,35 132.7,27.9 139.3,27.9" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Polar / very cold</span><span>Sun · 05</span></p><h4 id="card-polar-sun-title">Low-angle light</h4><p class="mechanism">Admit sun selectively</p><p>Low winter sun can enter vertical openings deeply where the horizon is clear. Locate openings using actual sun paths, obstructions, and occupancy. Balance useful solar gains and daylight against window heat loss, glare, and seasonal darkness. Reflected light from snow can be strong.</p><a href="./assets/diagrams/climate/polar-sun.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-polar-ground" data-family="polar" aria-labelledby="card-polar-ground-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="polar: ground design principle"><title>polar: ground design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#a3dde2, #2a7884)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M83.3 116A36.7 36.7 0 0 1 156.7 116A36.7 21.2 0 0 1 83.3 116Z" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="161.6,133 149.4,140 149.4,130 161.6,123" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="134.7,131.5 149.4,140 149.4,130 134.7,121.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="146.8,114.5 161.6,123 149.4,130 134.7,121.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="158.5,134.8 152.5,138.3 152.5,131.3 158.5,127.8" fill="light-dark(#2e647e, #8acde9)" stroke="none"/><circle cx="27.7" cy="91.4" r="6.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="36.7,91.4 39.7,91.4" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="34.1,97.8 36.2,99.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="27.7,100.4 27.7,103.4" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="21.3,97.8 19.2,99.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="18.7,91.4 15.7,91.4" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="21.3,85 19.2,82.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="27.7,82.4 27.7,79.4" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="34.1,85 36.2,82.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="35.7,97.4 66.2,135.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.3"/><polygon points="70.6,140.8 63.6,137.3 68.8,133.2" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><polyline points="70,140 89.1,116.7" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.3" stroke-dasharray="3 2"/><polygon points="93.6,111.2 91.7,118.8 86.6,114.6" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Polar / very cold</span><span>Ground · 06</span></p><h4 id="card-polar-ground-title">Protected foundation</h4><p class="mechanism">Resolve frost and ground contact</p><p>Ground conditions can govern the whole section: frost, drainage, snow cover, and permafrost require different details. Continuous foundation insulation can reduce heat loss; a permafrost site may instead need a ventilated raised structure to limit ground warming. Investigate the actual soil and water regime.</p><a href="./assets/diagrams/climate/polar-ground.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-polar-material" data-family="polar" aria-labelledby="card-polar-material-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="polar: material design principle"><title>polar: material design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="137.3,96 114.8,109 114.8,106.5 137.3,93.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="85.4,92 114.8,109 114.8,106.5 85.4,89.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="107.9,76.5 137.3,93.5 114.8,106.5 85.4,89.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="137.3,96.5 114.8,109.5 114.8,107 137.3,94" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="85.4,92.5 114.8,109.5 114.8,107 85.4,90" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="107.9,77 137.3,94 114.8,107 85.4,90" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="95.8,114 95.9,112.2 96.3,110.3 96.9,108.3 97.8,106.4 98.8,104.6 100.1,102.8 101.4,101.3 102.9,100 104.4,99 105.9,98.3 107.4,97.9 108.7,97.8 110,98.1 111,98.7 111.9,99.7 112.5,100.9 112.9,102.3 113.1,104 112.9,105.8 112.5,107.7 111.9,109.7 111,111.6 110,113.4 108.7,115.2 107.4,116.7 105.9,118 104.4,119 102.9,119.7 101.4,120.1 100.1,120.2 98.8,119.9 97.8,119.3 96.9,118.3 96.3,117.1 95.9,115.7 95.8,114" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="110,98.1 149.8,121.1 138.7,142.9 98.8,119.9" fill="light-dark(#eaf2f8, #293741)" stroke="none"/><polyline points="110,98.1 149.8,121.1" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="98.8,119.9 138.7,142.9" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="135.6,137 135.7,135.2 136.1,133.3 136.7,131.3 137.6,129.4 138.7,127.6 139.9,125.8 141.3,124.3 142.7,123 144.2,122 145.8,121.3 147.2,120.9 148.6,120.8 149.8,121.1 150.9,121.7 151.7,122.7 152.4,123.9 152.8,125.3 152.9,127 152.8,128.8 152.4,130.7 151.7,132.7 150.9,134.6 149.8,136.4 148.6,138.2 147.2,139.7 145.8,141 144.2,142 142.7,142.7 141.3,143.1 139.9,143.2 138.7,142.9 137.6,142.3 136.7,141.3 136.1,140.1 135.7,138.7 135.6,137" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.1"/><polyline points="135.6,137 136,134.3 136.8,131.5 138.2,128.8 139.9,126.4 141.8,124.3 143.9,122.9 145.9,122 147.8,121.8 149.4,122.2 150.6,123.3 151.4,124.9 151.8,126.9 151.6,129.2 151,131.6 149.9,134 148.5,136.2 146.9,138 145.2,139.5 143.4,140.4 141.7,140.7 140.3,140.5 139.1,139.8 138.3,138.6 137.9,136.9 137.9,135.1 138.4,133 139.1,131 140.2,129.1 141.5,127.4 143,126.1 144.5,125.2 145.9,124.8 147.1,124.8 148.2,125.3 148.9,126.2 149.4,127.5 149.5,128.9 149.2,130.6 148.7,132.2 147.8,133.8 146.8,135.2 145.7,136.4 144.5,137.2 143.3,137.7 142.3,137.8 141.4,137.5 140.7,136.8 140.3,135.9 140.2,134.8 140.3,133.5 140.7,132.3 141.3,131 142,129.9 142.9,128.9 143.8,128.2 144.6,127.8 145.5,127.7 146.2,127.9 146.7,128.3 147,128.9 147.2,129.7 147.1,130.6 146.9,131.5 146.5,132.4 146,133.2 145.4,133.9 144.8,134.4 144.2,134.7 143.6,134.8 143.2,134.8 142.8,134.5 142.6,134.1 142.5,133.6 142.5,133.1 142.6,132.5 142.9,131.9 143.2,131.5 143.5,131.1 143.8,130.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.8"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Polar / very cold</span><span>Materials · 07</span></p><h4 id="card-polar-material-title">Continuous insulation</h4><p class="mechanism">Separate insulation from mass</p><p>A thick insulating layer resists heat flow; thermal mass stores heat. They perform different jobs. Keep the insulating layer continuous around corners, floors, and openings, with an airtight layer and a climate-appropriate moisture strategy. Material durability and repair access matter as much as nominal thickness.</p><a href="./assets/diagrams/climate/polar-material.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-temperate-form" data-family="temperate" aria-labelledby="card-temperate-form-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="temperate: form design principle"><title>temperate: form design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="114.8,71 156.4,95 140.8,84 99.2,60" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#ffffff, #202124)" stroke-width="1.2"/><polygon points="156.4,119 125.2,137 125.2,113 156.4,95" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#ffffff, #202124)" stroke-width="1.2"/><polygon points="83.6,113 125.2,137 125.2,113 83.6,89" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#ffffff, #202124)" stroke-width="1.2"/><polygon points="114.8,71 156.4,95 125.2,113 83.6,89" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#ffffff, #202124)" stroke-width="1.2"/><polygon points="156.4,95 125.2,113 140.8,84" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#ffffff, #202124)" stroke-width="1.2"/><polygon points="83.6,89 125.2,113 140.8,84 99.2,60" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#ffffff, #202124)" stroke-width="1.2"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Temperate / seasonal</span><span>Form · 01</span></p><h4 id="card-temperate-form-title">Compact, but adaptable</h4><p class="mechanism">Balance area and exposure</p><p>A compact, insulated volume limits winter losses. Its proportions must also support daylight, summer shading, and ventilation paths. Compare equal-area schemes: the smallest envelope may create deep rooms that need electric light, while a very narrow plan increases exposed wall area.</p><a href="./assets/diagrams/climate/temperate-form.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-temperate-zoning" data-family="temperate" aria-labelledby="card-temperate-zoning-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="temperate: zoning design principle"><title>temperate: zoning design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><rect x="72" y="34" width="96" height="104" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width=".9"/><rect x="72" y="70" width="96" height="68" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width=".9"/><circle cx="120" cy="170" r="6.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="107.4,160 110.1,149.7" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.2"/><polygon points="111.9,143 113.2,150.5 107,148.9" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><polyline points="120,160 120,149.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.2"/><polygon points="120,143 123.2,149.9 116.8,149.9" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><polyline points="132.6,160 129.9,149.7" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.2"/><polygon points="128.1,143 133,148.9 126.8,150.5" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><text x="186" y="40" font-size="9" fill="light-dark(#607181, #aabccb)" text-anchor="middle">N</text><path d="M186 44v14" stroke="light-dark(#607181, #aabccb)" stroke-width=".9"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Temperate / seasonal</span><span>Zoning · 02</span></p><h4 id="card-temperate-zoning-title">Sun-aware plan</h4><p class="mechanism">Match spaces to schedules</p><p>Put spaces that benefit from winter sun on the equator-facing side: south in the northern extratropics, north in the southern extratropics. Use service spaces as buffers where helpful. Check each room’s schedule and internal gains; a crowded studio can need cooling even when the outdoor air is cool.</p><a href="./assets/diagrams/climate/temperate-zoning.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-temperate-rain" data-family="temperate" aria-labelledby="card-temperate-rain-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="temperate: rain design principle"><title>temperate: rain design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="114.8,71.8 168.5,102.8 146.8,87.5 93.2,56.5" fill="light-dark(#a3dde2, #2a7884)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="156.4,119 125.2,137 125.2,113 156.4,95" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="83.6,113 125.2,137 125.2,113 83.6,89" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="114.8,71 156.4,95 125.2,113 83.6,89" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="156.4,95 125.2,113 140.8,84" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="71.5,96.8 125.2,127.8 146.8,87.5 93.2,56.5" fill="light-dark(#a3dde2, #2a7884)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="150,10 136.5,40" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="156.5,15 143,45" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="163,20 149.5,50" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="169.5,10 156,40" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="176,15 162.5,45" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="182.5,20 169,50" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="189,10 175.5,40" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="195.5,15 182,45" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="202,20 188.5,50" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="73,108 73,129.9" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.3"/><polygon points="73,137 69.7,129.9 76.3,129.9" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Temperate / seasonal</span><span>Rain + snow · 03</span></p><h4 id="card-temperate-rain-title">Protected edges</h4><p class="mechanism">Shed and drain water</p><p>An overhang protects openings and parts of the wall while also shading summer sun. Design a continuous route for water from roof to gutter to ground, away from the foundation. Wind-driven rain can still wet a wall below an overhang, so flashing, drainage cavities, and drying remain necessary.</p><a href="./assets/diagrams/climate/temperate-rain.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-temperate-air" data-family="temperate" aria-labelledby="card-temperate-air-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="temperate: air design principle"><title>temperate: air design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="114.8,71 156.4,95 140.8,84 99.2,60" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="156.4,119 125.2,137 125.2,113 156.4,95" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="83.6,113 125.2,137 125.2,113 83.6,89" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="114.8,71 156.4,95 125.2,113 83.6,89" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="156.4,95 125.2,113 140.8,84" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="83.6,89 125.2,113 140.8,84 99.2,60" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="155.5,129.5 143.4,136.5 143.4,123.5 155.5,116.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="134.7,131.5 143.4,136.5 143.4,123.5 134.7,118.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="146.8,111.5 155.5,116.5 143.4,123.5 134.7,118.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="216,150 212.8,147.5 209.7,144.7 206.7,141.5 203.8,137.9 201,134.1 198.2,130 195.4,125.7 192.7,121.3 189.9,116.7 187.1,112 184.3,107.3 181.5,102.5 178.6,97.8 175.6,93.1 172.5,88.5 169.3,84.1 166,79.8 162.6,75.8 159,71.9 155.2,68.4 151.2,65.2 147,62.4 142.6,60 138,58 135.5,57.3 133,56.7 130.6,56.3 128.2,56 125.8,55.7 123.4,55.6 121.1,55.6 118.8,55.7 116.6,55.9 114.3,56.2 112.1,56.5 110,57 107.9,57.5 105.8,58.2 103.8,58.9 101.9,59.6 99.9,60.5 98.1,61.4 96.2,62.3 94.5,63.4 92.8,64.5 91.1,65.6 89.5,66.8 93.4,63.7" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.8"/><polygon points="87.2,68.6 91,60.7 95.7,66.7" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="226,128 223.8,127.3 221.5,126.7 219.3,126.1 217,125.7 214.8,125.3 212.6,125 210.4,124.7 208.2,124.6 206.1,124.5 203.9,124.5 201.8,124.6 199.8,124.8 197.7,125 195.7,125.3 193.7,125.6 191.8,126.1 189.9,126.6 188,127.2 186.2,127.8 184.5,128.5 182.8,129.3 181.1,130.1 179.5,131 183.3,128.7" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.4"/><polygon points="177.2,132.5 181.5,125.8 185.1,131.5" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Temperate / seasonal</span><span>Air · 04</span></p><h4 id="card-temperate-air-title">Seasonal openings</h4><p class="mechanism">Ventilate when it helps</p><p>Protect against cold-season infiltration, then provide operable paths for mild-weather ventilation. Locate both inlets and outlets and consider internal doors. Outdoor temperature, moisture, air quality, rain, security, and noise determine when windows can usefully open.</p><a href="./assets/diagrams/climate/temperate-air.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-temperate-sun" data-family="temperate" aria-labelledby="card-temperate-sun-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="temperate: sun design principle"><title>temperate: sun design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polyline points="212.7,127.7 211.7,126.8 210.6,125.9 209.2,124.9 207.7,123.7 205.9,122.4 204,121 201.9,119.6 199.7,118 197.3,116.3 194.7,114.5 192,112.7 189.1,110.8 186.1,108.8 182.9,106.7 179.7,104.6 176.3,102.4 172.9,100.1 169.3,97.8 165.7,95.5 162,93.2 158.3,90.8 154.4,88.4 150.6,86 146.7,83.6 142.8,81.1 138.9,78.7 135,76.3 131.1,74 127.3,71.6 123.4,69.3 119.6,67 115.9,64.8 112.3,62.6 108.7,60.5 105.2,58.4 101.8,56.4 98.5,54.5 95.3,52.7 92.2,50.9 89.3,49.3 86.5,47.7 83.8,46.2 81.3,44.9 79,43.6 76.8,42.5 74.8,41.5 73,40.5 71.4,39.7 69.9,39.1 68.7,38.5 67.6,38.1 66.8,37.8 66.1,37.6 65.7,37.5 65.4,37.6 65.4,37.8 65.5,38.1 65.9,38.6 66.4,39.2 67.2,39.9 68.2,40.7 69.3,41.6 70.7,42.7 72.2,43.8 73.9,45.1 75.9,46.5 77.9,48 80.2,49.5 82.6,51.2 85.2,53 87.9,54.8 90.8,56.8 93.8,58.8 96.9,60.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.8"/><polyline points="139.8,169 136.5,166.9 133,164.6 129.5,162.3 125.8,160 122.1,157.6 118.4,155.3 114.6,152.9 110.7,150.5 106.8,148 102.9,145.6 99,143.2 95.1,140.8 91.2,138.4 87.4,136.1 83.6,133.8 79.8,131.5 76,129.3 72.4,127.1 68.8,124.9 65.3,122.9 61.9,120.9 58.6,119 55.4,117.2 52.3,115.4 49.4,113.8 46.6,112.2 43.9,110.7 41.5,109.4 39.1,108.1 37,107 35,105.9 33.1,105 31.5,104.2 30.1,103.5 28.8,103 27.8,102.6 26.9,102.2 26.2,102.1 25.8,102 25.5,102.1 25.5,102.3 25.6,102.6 26,103.1 26.6,103.6" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.8" stroke-dasharray="3 2"/><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="114.8,73 156.4,97 140.8,86 99.2,62" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="156.4,119 125.2,137 125.2,115 156.4,97" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="83.6,113 125.2,137 125.2,115 83.6,91" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="114.8,73 156.4,97 125.2,115 83.6,91" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="156.4,97 125.2,115 140.8,86" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="83.6,91 125.2,115 140.8,86 99.2,62" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="94.9,114.5 113.9,125.5 113.9,113.5 94.9,102.5" fill="light-dark(#7ac5e6, #76c9f0)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="117.4,114 109.6,118.5 109.6,117.3 117.4,112.8" fill="light-dark(#8cb4cc, #46728d)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="83.6,103.5 109.6,118.5 109.6,117.3 83.6,102.3" fill="light-dark(#8cb4cc, #46728d)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="91.4,97.8 117.4,112.8 109.6,117.3 83.6,102.3" fill="light-dark(#8cb4cc, #46728d)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><circle cx="58.6" cy="119" r="6.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><circle cx="98.5" cy="54.5" r="6.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="66.6,119 96.2,114.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.4"/><polygon points="103.4,113.9 96.7,118.2 95.8,111.5" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><polyline points="98.5,62.5 96.9,102.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.4"/><polygon points="96.6,109.5 93.5,102.1 100.3,102.4" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><text x="108.5" y="48.5" font-size="8" fill="light-dark(#607181, #aabccb)">JUN</text><text x="52.6" y="108" font-size="8" fill="light-dark(#607181, #aabccb)">DEC</text></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Temperate / seasonal</span><span>Sun · 05</span></p><h4 id="card-temperate-sun-title">Selective solar access</h4><p class="mechanism">Coordinate glass and shade</p><p>Admit winter sun where it reduces heating demand, and block unwanted warm-season gains before they reach the glass. Horizontal overhangs suit high-angle sun; low east and west sun often needs fins, screens, or less glazing. Use the solar-geometry chapter to test the actual hours.</p><a href="./assets/diagrams/climate/temperate-sun.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-temperate-ground" data-family="temperate" aria-labelledby="card-temperate-ground-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="temperate: ground design principle"><title>temperate: ground design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polyline points="83.6,131 83.6,165" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="3.2"/><polyline points="94,137 94,171" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="3.2"/><polyline points="104.4,143 104.4,177" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="3.2"/><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="83.6,125 83.6,129" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1" stroke-dasharray="2 2"/><polyline points="94,131 94,135" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1" stroke-dasharray="2 2"/><polyline points="104.4,137 104.4,141" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1" stroke-dasharray="2 2"/><polygon points="114.8,71 156.4,95 140.8,84 99.2,60" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="156.4,119 125.2,137 125.2,113 156.4,95" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="83.6,113 125.2,137 125.2,113 83.6,89" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="114.8,71 156.4,95 125.2,113 83.6,89" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="156.4,95 125.2,113 140.8,84" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="83.6,89 125.2,113 140.8,84 99.2,60" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="83.6,113 83.6,117 125.2,141 125.2,137" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.8" stroke-dasharray="2 2"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Temperate / seasonal</span><span>Ground · 06</span></p><h4 id="card-temperate-ground-title">Insulated ground edge</h4><p class="mechanism">Use stable temperatures carefully</p><p>Soil temperatures vary more slowly than outdoor air temperatures, but ground contact still transfers heat and moisture. Resolve slab-edge insulation, drainage, and soil gas before treating the ground as an energy resource. A ground-source heat exchanger needs a separate assessment of geology, sizing, and seasonal heat balance.</p><a href="./assets/diagrams/climate/temperate-ground.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-temperate-material" data-family="temperate" aria-labelledby="card-temperate-material-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="temperate: material design principle"><title>temperate: material design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="146,125 137.3,130 137.3,66 146,61" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="102.7,110 137.3,130 137.3,66 102.7,46" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="111.3,41 146,61 137.3,66 102.7,46" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="137.3,130 130.4,134 130.4,70 137.3,66" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="95.8,114 130.4,134 130.4,70 95.8,50" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="102.7,46 137.3,66 130.4,70 95.8,50" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="146,125 144.8,61.7" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.5"/><polyline points="144.7,125.8 143.5,62.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.5"/><polyline points="143.4,126.5 142.2,63.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.5"/><polyline points="142.1,127.3 140.9,64" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.5"/><polyline points="140.8,128 139.6,64.7" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.5"/><polyline points="139.5,128.8 138.3,65.4" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.5"/><polyline points="138.2,129.5 137,66.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.5"/><polyline points="135.6,131 132.1,129 135.6,123 132.1,121 135.6,115 132.1,113 135.6,107 132.1,105 135.6,99 132.1,97 135.6,91 132.1,89 135.6,83 132.1,81 135.6,75 132.1,73 135.6,67" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.6"/><polygon points="104.4,97 121.7,107 121.7,83 104.4,73" fill="light-dark(#7ac5e6, #76c9f0)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><circle cx="27.1" cy="87" r="6.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="36.1,87 39.1,87" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="33.5,93.4 35.6,95.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="27.1,96 27.1,99" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="20.8,93.4 18.7,95.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="18.1,87 15.1,87" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="20.8,80.6 18.7,78.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="27.1,78 27.1,75" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="33.5,80.6 35.6,78.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="39.1,93 106.7,90.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.5"/><polygon points="114.1,90 106.8,93.8 106.5,86.8" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Temperate / seasonal</span><span>Materials · 07</span></p><h4 id="card-temperate-material-title">Insulation plus capacity</h4><p class="mechanism">Control flow; then store heat</p><p>Insulation reduces heat transfer across the envelope. Exposed thermal mass inside that envelope can moderate temperature swings if a useful heating or cooling cycle is available. Sunlit mass can store winter gains; in summer it needs a path to release accumulated heat. Mass alone does not prevent overheating.</p><a href="./assets/diagrams/climate/temperate-material.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-arid-form" data-family="arid" aria-labelledby="card-arid-form-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="arid: form design principle"><title>arid: form design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 151.2,116 120,134 88.8,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 88.8,116 88.8,100 120,82" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 151.2,116 151.2,100 120,82" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="185.8,116 120,154 120,138 185.8,100" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="54.2,116 120,154 120,138 54.2,100" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M120,62L185.8,100L120,138L54.2,100ZM120,82L151.2,100L120,118L88.8,100Z" fill="light-dark(#5aa7d8, #3f8fc2)" fill-rule="evenodd" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><circle cx="212" cy="42" r="6.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="221,42 224,42" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="218.4,48.4 220.5,50.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="212,51 212,54" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="205.6,48.4 203.5,50.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="203,42 200,42" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="205.6,35.6 203.5,33.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="212,33 212,30" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="218.4,35.6 220.5,33.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="206,49 144.5,127.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.3"/><polygon points="140.2,132.8 141.9,125.2 147.1,129.3" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Hot-arid</span><span>Form · 01</span></p><h4 id="card-arid-form-title">Self-shading courtyard</h4><p class="mechanism">Make a cooler outdoor room</p><p>A courtyard and compact streets can shade walls and occupied outdoor space. The courtyard’s proportions, orientation, and surface temperatures determine when it is comfortable. Test sun penetration at occupied hours and keep a route for stored heat to leave after sunset. A courtyard is not automatically a cool space.</p><a href="./assets/diagrams/climate/arid-form.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-arid-zoning" data-family="arid" aria-labelledby="card-arid-zoning-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="arid: zoning design principle"><title>arid: zoning design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><rect x="62" y="38" width="116" height="116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width=".9"/><path d="M70 46h100v100H70ZM104 80v32h32V80Z" fill="light-dark(#5aa7d8, #3f8fc2)" fill-rule="evenodd" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".9"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Hot-arid</span><span>Zoning · 02</span></p><h4 id="card-arid-zoning-title">Shaded occupied edge</h4><p class="mechanism">Move use with the day</p><p>Place daytime activities behind shaded edges and use transitional spaces to buffer exposure. Where the program allows it, occupants can move between shaded daytime and cooler nighttime spaces. Coordinate that flexibility with privacy, daylight, access, and ventilation.</p><a href="./assets/diagrams/climate/arid-zoning.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-arid-rain" data-family="arid" aria-labelledby="card-arid-rain-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="arid: rain design principle"><title>arid: rain design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 151.2,116 120,134 88.8,116" fill="light-dark(#a3dde2, #2a7884)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 88.8,116 88.8,100 120,82" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 151.2,116 151.2,100 120,82" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="185.8,116 120,154 120,138 185.8,100" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="54.2,116 120,154 120,138 54.2,100" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M120,62L185.8,100L120,138L54.2,100ZM120,82L151.2,100L120,118L88.8,100Z" fill="light-dark(#ffffff, #202124)" fill-rule="evenodd" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="132,20 109.5,70" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="137,25 114.5,75" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="142,30 119.5,80" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="147,20 124.5,70" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="152,25 129.5,75" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="157,30 134.5,80" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="94,79 101.9,83.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.2"/><polygon points="107.9,87 100.3,86.3 103.5,80.8" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="146,79 138.1,83.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.2"/><polygon points="132.1,87 136.5,80.8 139.7,86.3" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Hot-arid</span><span>Rain + snow · 03</span></p><h4 id="card-arid-rain-title">Catch, store, overflow</h4><p class="mechanism">Treat scarce rain as a resource</p><p>Collect suitable roof runoff and provide storage, treatment, and a safe overflow route. Low annual rainfall can still arrive as an intense storm. Evaporative cooling uses the difference between dry-bulb and wet-bulb temperatures, but consumes water; evaluate humidity, water availability, and maintenance together.</p><a href="./assets/diagrams/climate/arid-rain.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-arid-air" data-family="arid" aria-labelledby="card-arid-air-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="arid: air design principle"><title>arid: air design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 151.2,116 120,134 88.8,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 88.8,116 88.8,100 120,82" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 151.2,116 151.2,100 120,82" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="185.8,116 120,154 120,138 185.8,100" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="54.2,116 120,154 120,138 54.2,100" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M120,62L185.8,100L120,138L54.2,100ZM120,82L151.2,100L120,118L88.8,100Z" fill="light-dark(#ffffff, #202124)" fill-rule="evenodd" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="133,71.5 120,79 120,55 133,47.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="107,71.5 120,79 120,55 107,47.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,40 133,47.5 120,55 107,47.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="129.5,59.5 123.5,63 123.5,55 129.5,51.5" fill="light-dark(#2e647e, #8acde9)" stroke="none"/><polyline points="228,30 135.4,55.7" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.6"/><polygon points="128.1,57.8 134.4,52.3 136.3,59.2" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="120,54 120,84 120,104" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.2" stroke-dasharray="3 2"/><polyline points="120,112 120,64.9" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.8"/><polygon points="120,57 123.8,64.9 116.2,64.9" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Hot-arid</span><span>Air · 04</span></p><h4 id="card-arid-air-title">Timed air exchange</h4><p class="mechanism">Catch wind; control dust</p><p>A windcatcher can connect a pressure-driven inlet to occupied rooms and an outlet. Night ventilation can remove stored heat when outdoor conditions are favorable. Filter dust and provide a closable path during sandstorms or very hot periods. Check airflow through the whole building, beyond the tower shape.</p><a href="./assets/diagrams/climate/arid-air.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-arid-sun" data-family="arid" aria-labelledby="card-arid-sun-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="arid: sun design principle"><title>arid: sun design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polyline points="203.6,141.3 202.4,138.7 201.1,136 199.6,133.2 197.9,130.3 196,127.3 193.9,124.3 191.7,121.2 189.4,118 186.9,114.7 184.2,111.4 181.5,108.1 178.6,104.8 175.5,101.4 172.4,98 169.2,94.6 165.9,91.3 162.5,87.9 159,84.6 155.5,81.3 151.9,78.1 148.3,74.9 144.6,71.8 140.9,68.8 137.2,65.8 133.5,62.9 129.8,60.2 126.1,57.5 122.4,54.9 118.8,52.5 115.2,50.2 111.7,48 108.3,46 104.9,44.1 101.6,42.3 98.4,40.7 95.3,39.3 92.3,38 89.5,36.9 86.7,35.9 84.1,35.2 81.7,34.6 79.3,34.1 77.2,33.9 75.2,33.8 73.4,33.9 71.7,34.2 70.2,34.7 68.9,35.3 67.8,36.1 66.8,37.1 66.1,38.2 65.6,39.5 65.2,41 65,42.6 65,44.4 65.3,46.3 65.7,48.4 66.3,50.6 67.1,52.9 68.1,55.4 69.2,58 70.6,60.6 72.1,63.4 73.8,66.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.8"/><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,78 135.1,85.8 200.9,123.8 135.1,161.8 120,154 54.2,116" fill="light-dark(#4583a4, #7bbbdc)" stroke="none" fill-opacity=".35"/><polygon points="120,98 151.2,116 120,134 88.8,116" fill="light-dark(#4583a4, #7bbbdc)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="134.3,106.3 151.2,116 120.8,133.6 103.9,123.8" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="120,98 88.8,116 88.8,100 120,82" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,98 151.2,116 151.2,100 120,82" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="185.8,116 120,154 120,138 185.8,100" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="54.2,116 120,154 120,138 54.2,100" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><path d="M120,62L185.8,100L120,138L54.2,100ZM120,82L151.2,100L120,118L88.8,100Z" fill="light-dark(#5aa7d8, #3f8fc2)" fill-rule="evenodd" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><circle cx="68.9" cy="35.3" r="6.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="77.9,35.3 80.9,35.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="75.3,41.7 77.4,43.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="68.9,44.3 68.9,47.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="62.5,41.7 60.4,43.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="59.9,35.3 56.9,35.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="62.5,28.9 60.4,26.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="68.9,26.3 68.9,23.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="75.3,28.9 77.4,26.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="72.9,43.3 116.4,104.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.4"/><polygon points="120.6,110.8 113.6,106.9 119.2,102.9" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Hot-arid</span><span>Sun · 05</span></p><h4 id="card-arid-sun-title">Shade before storage</h4><p class="mechanism">Block direct solar gains</p><p>Shade the roof, glazing, and outdoor circulation. Reduce low-angle solar exposure using orientation, deep reveals, screens, and vegetation suited to local water conditions. Thermal mass can absorb remaining gains, but sustained sun without a cooling cycle can turn that mass into an unwanted heat source.</p><a href="./assets/diagrams/climate/arid-sun.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-arid-ground" data-family="arid" aria-labelledby="card-arid-ground-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="arid: ground design principle"><title>arid: ground design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="120,130 151.2,148 120,166 88.8,148" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,130 88.8,148 88.8,128 120,110" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,130 151.2,148 151.2,128 120,110" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="199.7,150 120,196 120,162 199.7,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,150 120,196 120,162 40.3,116" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><circle cx="79.4" cy="153.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="49.5" cy="147" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="75.6" cy="153.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="46.6" cy="123.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.3" cy="163.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="63" cy="136.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="92.7" cy="177.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="80" cy="164.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="93.9" cy="175.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="85" cy="159.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="54.4" cy="156.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="115.1" cy="160.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="49.9" cy="140.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="116.5" cy="187.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="73.7" cy="150.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="93.9" cy="171.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="53.9" cy="124.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="75.8" cy="162.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="83.9" cy="163.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="52.6" cy="130.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="68.3" cy="154.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="46.7" cy="122.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="59.3" cy="130.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="77.8" cy="163.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="88.4" cy="164.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="100.8" cy="162.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="51.2" cy="148.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="76.2" cy="167.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="44.1" cy="138.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94.6" cy="159.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="116.4" cy="182.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="75.2" cy="153.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="75.3" cy="141.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="76.2" cy="155.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="61.4" cy="154.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="99.5" cy="179.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="61.9" cy="136.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="108.7" cy="156.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="114.2" cy="163.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="99.9" cy="162.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="84.5" cy="174.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="66.1" cy="152.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="57.5" cy="146.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="95" cy="156.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="61.6" cy="129.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="40.9" cy="138.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87" cy="161.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="47.5" cy="120.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="76.7" cy="141.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.1" cy="161.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="50.3" cy="128.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="111.7" cy="182.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="42.3" cy="145.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="96.7" cy="158.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="92.9" cy="150.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="58.6" cy="132.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="53.8" cy="156.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="46.8" cy="153" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="83.1" cy="146.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="107.5" cy="183.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="79.7" cy="171" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="62.6" cy="146.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="45.4" cy="140.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="58.7" cy="150.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="103.3" cy="181.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="53.4" cy="157.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="90" cy="175.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="72.5" cy="164.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="78.4" cy="157.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="41" cy="124.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="173.3" cy="157.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="125.3" cy="179.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="147.2" cy="171.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123" cy="179.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="169.7" cy="150.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="124" cy="169.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="170.8" cy="145.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="144" cy="181.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="128" cy="166.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="130.8" cy="184.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="181" cy="149.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="132.8" cy="167.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="135.9" cy="175" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="174.4" cy="140" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="191.4" cy="130" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="159.3" cy="155.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="177.5" cy="143.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="197.7" cy="138.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="174.7" cy="163.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="163.6" cy="165" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="125" cy="162.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="155.4" cy="169.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="185.8" cy="128" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="185.9" cy="135.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="154.5" cy="164.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="138" cy="184.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="194.3" cy="120.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="145.5" cy="154" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="152.8" cy="145" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123.9" cy="189.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="181.5" cy="128.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="124.2" cy="161.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="186.9" cy="140.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="156.3" cy="173.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="184.8" cy="144.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="197.6" cy="136.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123" cy="177.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="148.7" cy="158.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="129.4" cy="182.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="134.6" cy="167.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="148.9" cy="147.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="194.6" cy="144.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="164.7" cy="146.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="158.6" cy="149.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="127.8" cy="163.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="186.7" cy="153.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="151.3" cy="170.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="141.5" cy="174.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="174.1" cy="158.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="180.2" cy="132.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><path d="M120,70L199.7,116L120,162L40.3,116ZM120,110L151.2,128L120,146L88.8,128Z" fill="light-dark(#ffffff, #202124)" fill-rule="evenodd" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="142.5,91 120,104 120,88 142.5,75" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="97.5,91 120,104 120,88 97.5,75" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,62 142.5,75 120,88 97.5,75" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="65.4,114.5 59.4,118 59.4,104 65.4,100.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="53.3,114.5 59.4,118 59.4,104 53.3,100.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="59.4,97 65.4,100.5 59.4,104 53.3,100.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="59.4,102.5 59.4,141.5 101.4,165.8 104.4,157" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.1" stroke-dasharray="3 2"/><polyline points="59.4,141.5 80.4,153.6" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.4"/><polygon points="86.7,157.3 78.7,156.6 82.1,150.7" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><polyline points="104.4,157 110.7,149.7" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.4"/><polygon points="115.5,144.2 113.3,151.9 108.1,147.5" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Hot-arid</span><span>Ground · 06</span></p><h4 id="card-arid-ground-title">Tempered lower level</h4><p class="mechanism">Test ground coupling</p><p>Earth sheltering can connect rooms to more stable ground temperatures. Assess soil temperature, groundwater, drainage, waterproofing, radon, and safe egress before adopting it. An earth-air duct introduces additional hygiene and condensation questions; a stable ground temperature alone does not establish a useful cooling system.</p><a href="./assets/diagrams/climate/arid-ground.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-arid-material" data-family="arid" aria-labelledby="card-arid-material-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="arid: material design principle"><title>arid: material design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="123.5,104 99.2,118 99.2,56 123.5,42" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="85.4,110 99.2,118 99.2,56 85.4,48" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="109.6,34 123.5,42 99.2,56 85.4,48" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><circle cx="96" cy="90.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94.8" cy="69" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="86.3" cy="51.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="96.2" cy="59.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="88.3" cy="94" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="90.5" cy="57.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94.7" cy="62.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="90.9" cy="90.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="96.1" cy="106.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="96.2" cy="81.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="93.3" cy="94.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="93.9" cy="110.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="91.3" cy="90.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="86.4" cy="79.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="88.4" cy="50.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="98.7" cy="80.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="88.6" cy="98" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="98.3" cy="103.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="95.1" cy="77.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="90.6" cy="61.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="86.4" cy="103.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="99.2" cy="72.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="97.2" cy="77.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="99.1" cy="117.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.7" cy="94.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="99" cy="56" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="85.5" cy="97" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="93" cy="77.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="86.8" cy="96.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="91.7" cy="109" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="92" cy="113" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="92.9" cy="71.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94.7" cy="57.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="89.3" cy="58.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94.4" cy="72.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="99.2" cy="111" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="89.6" cy="82.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="95.6" cy="80.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="95.8" cy="57" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="97.5" cy="103.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.6" cy="70.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="89.2" cy="63.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="89.9" cy="89.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="88.6" cy="93.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="97.9" cy="59.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="99" cy="99.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="89.5" cy="62" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="98.8" cy="71.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="88" cy="91.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94.9" cy="81.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="96.4" cy="82.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="89.2" cy="63" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="95.5" cy="65.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="95.5" cy="74.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="93.4" cy="113" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="96" cy="55.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="86.7" cy="82.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="91.2" cy="91" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.2" cy="89.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="88.6" cy="97.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.4" cy="103" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.4" cy="95.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="91.9" cy="93.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="86.6" cy="69.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.6" cy="107.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.4" cy="106.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="93.3" cy="95.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="92.2" cy="110.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="93.5" cy="63.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="98.3" cy="93.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="92.1" cy="75.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="87.2" cy="55.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="92.5" cy="99.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="91.8" cy="110.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="86.9" cy="72.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94.2" cy="104.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="96.1" cy="73" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="97.2" cy="95.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94.2" cy="80.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="95.5" cy="60.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="95.1" cy="92.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="97.2" cy="72.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94.9" cy="55.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="99.1" cy="113" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="94" cy="55.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="98.8" cy="102.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="85.9" cy="62.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="89" cy="72" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="97.9" cy="112.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="88.1" cy="63" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><polygon points="137.3,112 113.1,126 113.1,64 137.3,50" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="99.2,118 113.1,126 113.1,64 99.2,56" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="123.5,42 137.3,50 113.1,64 99.2,56" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><circle cx="104.9" cy="72.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="104.9" cy="109.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="102.1" cy="60" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="102.6" cy="76.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="100.1" cy="56.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="109" cy="115.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="111.1" cy="86.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="107.5" cy="107.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="111.2" cy="71.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="107" cy="69.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="103.9" cy="105.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="99.4" cy="89.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="109.1" cy="77.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="107.9" cy="100.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="105.9" cy="105.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="107.9" cy="83.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="110.3" cy="67.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="107.7" cy="83.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="108.1" cy="70.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="101.7" cy="105.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="109.4" cy="69.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="100.5" cy="74.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="100.8" cy="78.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="101.7" cy="99.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="103.5" cy="85.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="112" cy="94.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="103.1" cy="100.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="108" cy="76.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="112.3" cy="118" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="104.4" cy="108.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="104.6" cy="84.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="106.3" cy="69.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="110.2" cy="106.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="111.9" cy="99.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="112.5" cy="125.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="111.2" cy="67.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="106.7" cy="87.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="107.8" cy="65.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="112.1" cy="97.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="107.5" cy="99.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="110.7" cy="65" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="103.7" cy="109.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="105.2" cy="110.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="111.9" cy="98.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="104.3" cy="92.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="104.3" cy="102.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="102.1" cy="78.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="104.8" cy="83.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="109.3" cy="118.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="100" cy="56.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="109.8" cy="63.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="111.2" cy="71.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="110.1" cy="76.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="110.1" cy="69" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="100.7" cy="59.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="109.2" cy="104.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="110.2" cy="81.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="110" cy="80.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="102.1" cy="61.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="101" cy="75.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="102.3" cy="91.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="107.1" cy="121.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="100.8" cy="103.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="109.8" cy="91.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="101.3" cy="65.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="100.6" cy="76.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="109.5" cy="108.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="103" cy="69.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="104.8" cy="100.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="106" cy="61.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><polygon points="151.2,120 126.9,134 126.9,72 151.2,58" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.1,126 126.9,134 126.9,72 113.1,64" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="137.3,50 151.2,58 126.9,72 113.1,64" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><circle cx="113.7" cy="116.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="115" cy="88.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.9" cy="68.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="122.9" cy="100.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="125.8" cy="89.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="113.7" cy="102.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="113.6" cy="102.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="124.1" cy="125.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="126.3" cy="98.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.9" cy="119.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="114.5" cy="116.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="118.8" cy="77.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="126.8" cy="125.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="115.6" cy="113.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123.4" cy="97.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117" cy="87.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="118.2" cy="91.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.2" cy="126" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="121" cy="126.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="126.7" cy="94.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="118.5" cy="90.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="115.6" cy="84.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="118.2" cy="88.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="118.2" cy="89.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="119.4" cy="76.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="125" cy="132.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="120.8" cy="103.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123" cy="76" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123.9" cy="131.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.1" cy="108.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.2" cy="118.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="119.6" cy="129.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="125.6" cy="93" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="120.5" cy="70.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="116.8" cy="108.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123.3" cy="85.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123.7" cy="92.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="119.9" cy="111.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="114.6" cy="68.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.6" cy="95" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="119.9" cy="113.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="118.1" cy="93.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="120.5" cy="69.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="121.3" cy="96.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="124.5" cy="72.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123.4" cy="112.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="114.8" cy="95.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="124.7" cy="103.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="116.8" cy="75.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="119" cy="101.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123.2" cy="106.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="119.4" cy="72.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="124.6" cy="88.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="124.7" cy="125.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="121.8" cy="76.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="122.4" cy="92.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="119.8" cy="72.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="114.9" cy="123.3" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117" cy="94.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="113.4" cy="116" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.1" cy="79.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="126.8" cy="85.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123.7" cy="121.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="119.1" cy="105.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="115" cy="85.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="113.8" cy="108.6" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="125.7" cy="121.1" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="113.8" cy="91.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="116.2" cy="76" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="113.6" cy="91.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="114" cy="78.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="121.5" cy="121.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="115.3" cy="78" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="120.2" cy="90.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="120.5" cy="94.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="121.5" cy="115.5" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="123.3" cy="101.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.9" cy="102.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="122.9" cy="116.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="113.9" cy="84.8" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="118.2" cy="126" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="124.2" cy="124.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="124.3" cy="100.9" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="126" cy="85.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="116.1" cy="114.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.7" cy="107.7" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="118.4" cy="71.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="117.1" cy="75.4" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="126.4" cy="103.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="113.7" cy="73.2" r=".9" fill="light-dark(#1f6fa3, #8bcfff)"/><circle cx="44" cy="32" r="6" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="52.5,32 55.5,32" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="50,38 52.1,40.1" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="44,40.5 44,43.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="38,38 35.9,40.1" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="35.5,32 32.5,32" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="38,26 35.9,23.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="44,23.5 44,20.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="50,26 52.1,23.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><path d="M200 27a8 8 0 1 0 4 13a6.5 6.5 0 1 1-4-13Z" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="58,34 63.3,31.6 68.7,29.4 74.1,27.4 79.5,25.7 85.1,24.1 90.6,22.7 96.1,21.6 101.7,20.6 107.3,19.8 112.8,19.3 118.3,18.9 123.8,18.8 129.2,18.8 134.5,19 139.8,19.4 145,20.1 150.1,20.9 155,21.9 159.9,23.1 164.6,24.5 169.2,26.1 173.6,27.9 177.9,29.8 176.8,29.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.2" stroke-dasharray="3 2"/><polygon points="182.9,32.5 175.3,32.1 178.3,26.4" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Hot-arid</span><span>Materials · 07</span></p><h4 id="card-arid-material-title">Mass with a reset</h4><p class="mechanism">Store by day; release at night</p><p>Dense walls and floors can delay and reduce indoor temperature peaks. To repeat that benefit, discharge stored heat to cooler night air or another sink. Keep direct solar gains controlled and pair mass with suitable insulation. If nights stay warm, compare lighter construction and active cooling instead.</p><a href="./assets/diagrams/climate/arid-material.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-tropical-form" data-family="tropical" aria-labelledby="card-tropical-form-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="tropical: form design principle"><title>tropical: form design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="113.9,100.5 113.9,88.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="93.2,112.5 93.2,100.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="130.4,110 130.4,98" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="109.6,122 109.6,110" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="146.8,119.5 146.8,107.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="126.1,131.5 126.1,119.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polygon points="157.2,109.5 126.1,127.5 126.1,125.5 157.2,107.5" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="82.8,102.5 126.1,127.5 126.1,125.5 82.8,100.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,82.5 157.2,107.5 126.1,125.5 82.8,100.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="152,107.5 126.1,122.5 126.1,104.5 152,89.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="88,100.5 126.1,122.5 126.1,104.5 88,82.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,67.5 152,89.5 126.1,104.5 88,82.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,58.5 167.6,89.5 131.3,66.5 108.7,53.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="167.6,89.5 126.1,113.5 131.3,66.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="72.4,82.5 126.1,113.5 131.3,66.5 108.7,53.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="77.7,85.6 111,54.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="83.1,88.7 113.2,56.1" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="88.5,91.8 115.5,57.4" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="93.8,94.9 117.7,58.7" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="99.2,98 120,60" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="104.6,101.1 122.3,61.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="110,104.2 124.5,62.6" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="115.3,107.3 126.8,63.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="120.7,110.4 129,65.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="160.7,93.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="153.8,97.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="146.8,101.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="139.9,105.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="133,109.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="90.6,68 128.7,90" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polygon points="135.6,71 126.9,76 131.3,66.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.8"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Warm-humid</span><span>Form · 01</span></p><h4 id="card-tropical-form-title">Broad roof, shallow plan</h4><p class="mechanism">Shade while keeping air paths</p><p>A generous roof and protected verandas shade walls and occupied edges. A shallow plan can bring daylight and moving air to more rooms. Keep the roof ventilated or insulated as appropriate, and check low-angle sun: a large roof alone may leave east and west openings exposed.</p><a href="./assets/diagrams/climate/tropical-form.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-tropical-zoning" data-family="tropical" aria-labelledby="card-tropical-zoning-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="tropical: zoning design principle"><title>tropical: zoning design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><rect x="66" y="44" width="108" height="100" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width=".9"/><rect x="130" y="44" width="44" height="100" fill="light-dark(#d3e8f6, #2b4d63)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width=".9"/><path d="M134 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M138 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M142 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M146 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M150 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M154 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M158 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M162 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M166 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M170 46v96" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><path d="M131 50h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 58h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 66h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 74h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 82h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 90h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 98h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 106h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 114h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 122h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 130h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/><path d="M131 138h42" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".5"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Warm-humid</span><span>Zoning · 02</span></p><h4 id="card-tropical-zoning-title">Ventilated living edge</h4><p class="mechanism">Connect shaded spaces</p><p>Arrange frequently occupied spaces along shaded, breezy edges and provide short paths between air inlets and outlets. Separate strong heat and moisture sources where useful. A deep plan, closed internal doors, or dense screens can interrupt ventilation even when the facade looks open.</p><a href="./assets/diagrams/climate/tropical-zoning.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-tropical-rain" data-family="tropical" aria-labelledby="card-tropical-rain-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="tropical: rain design principle"><title>tropical: rain design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="113.9,100.5 113.9,88.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="93.2,112.5 93.2,100.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="130.4,110 130.4,98" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="109.6,122 109.6,110" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="146.8,119.5 146.8,107.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="126.1,131.5 126.1,119.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polygon points="157.2,109.5 126.1,127.5 126.1,125.5 157.2,107.5" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="82.8,102.5 126.1,127.5 126.1,125.5 82.8,100.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,82.5 157.2,107.5 126.1,125.5 82.8,100.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="152,107.5 126.1,122.5 126.1,104.5 152,89.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="88,100.5 126.1,122.5 126.1,104.5 88,82.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,67.5 152,89.5 126.1,104.5 88,82.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,58.5 167.6,89.5 131.3,66.5 108.7,53.5" fill="light-dark(#a3dde2, #2a7884)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="167.6,89.5 126.1,113.5 131.3,66.5" fill="light-dark(#a3dde2, #2a7884)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="72.4,82.5 126.1,113.5 131.3,66.5 108.7,53.5" fill="light-dark(#a3dde2, #2a7884)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="77.7,85.6 111,54.8" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="83.1,88.7 113.2,56.1" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="88.5,91.8 115.5,57.4" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="93.8,94.9 117.7,58.7" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="99.2,98 120,60" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="104.6,101.1 122.3,61.3" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="110,104.2 124.5,62.6" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="115.3,107.3 126.8,63.9" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="120.7,110.4 129,65.2" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="160.7,93.5 131.3,66.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="153.8,97.5 131.3,66.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="146.8,101.5 131.3,66.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="139.9,105.5 131.3,66.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="133,109.5 131.3,66.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polyline points="90.6,68 128.7,90" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.55"/><polygon points="135.6,71 126.9,76 131.3,66.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.8"/><polyline points="150,6 136.5,36" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="156.5,11 143,41" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="163,16 149.5,46" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="169.5,6 156,36" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="176,11 162.5,41" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="182.5,16 169,46" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="189,6 175.5,36" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="195.5,11 182,41" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="202,16 188.5,46" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="0.9" stroke-dasharray="3 2.5"/><polyline points="124.3,116.5 124.3,136.4" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.3"/><polygon points="124.3,143.5 121,136.4 127.6,136.4" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="70.6,85.5 70.6,105.4" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.3"/><polygon points="70.6,112.5 67.3,105.4 73.9,105.4" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Warm-humid</span><span>Rain + snow · 03</span></p><h4 id="card-tropical-rain-title">Roof and drying path</h4><p class="mechanism">Control frequent wetting</p><p>Use roof slopes, overhangs, gutters, splash protection, and a reliable discharge route to keep water away from vulnerable materials. Protect ventilation openings against wind-driven rain. Select assemblies that can drain and dry; humidity can slow drying even after visible rain has stopped.</p><a href="./assets/diagrams/climate/tropical-rain.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-tropical-air" data-family="tropical" aria-labelledby="card-tropical-air-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="tropical: air design principle"><title>tropical: air design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="113.9,100.5 113.9,88.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="93.2,112.5 93.2,100.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="130.4,110 130.4,98" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="109.6,122 109.6,110" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="146.8,119.5 146.8,107.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="126.1,131.5 126.1,119.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polygon points="157.2,109.5 126.1,127.5 126.1,125.5 157.2,107.5" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="82.8,102.5 126.1,127.5 126.1,125.5 82.8,100.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,82.5 157.2,107.5 126.1,125.5 82.8,100.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="152,107.5 126.1,122.5 126.1,104.5 152,89.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="88,100.5 126.1,122.5 126.1,104.5 88,82.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,67.5 152,89.5 126.1,104.5 88,82.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,58.5 167.6,89.5 131.3,66.5 108.7,53.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="167.6,89.5 126.1,113.5 131.3,66.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="72.4,82.5 126.1,113.5 131.3,66.5 108.7,53.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="77.7,85.6 111,54.8" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="83.1,88.7 113.2,56.1" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="88.5,91.8 115.5,57.4" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="93.8,94.9 117.7,58.7" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="99.2,98 120,60" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="104.6,101.1 122.3,61.3" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="110,104.2 124.5,62.6" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="115.3,107.3 126.8,63.9" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="120.7,110.4 129,65.2" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="160.7,93.5 131.3,66.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="153.8,97.5 131.3,66.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="146.8,101.5 131.3,66.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="139.9,105.5 131.3,66.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="133,109.5 131.3,66.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="90.6,68 128.7,90" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polygon points="135.6,71 126.9,76 131.3,66.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.8"/><polyline points="178.9,124 149.1,106.8" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.6"/><polygon points="142.5,103 150.9,103.7 147.3,109.9" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="166.8,127 136.9,109.8" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.6"/><polygon points="130.4,106 138.7,106.7 135.1,112.9" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="101.8,98.5 75.5,113.7" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.6"/><polygon points="68.9,117.5 73.7,110.6 77.3,116.8" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="115.7,110.5 91,124.7" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.6"/><polygon points="84.5,128.5 89.2,121.6 92.8,127.8" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="142.5,154 97.6,128" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.3"/><polygon points="91.4,124.5 99.2,125.2 95.9,130.9" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="120,54 121.3,33.9" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.8"/><polygon points="121.8,26 125.1,34.1 117.5,33.6" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Warm-humid</span><span>Air · 04</span></p><h4 id="card-tropical-air-title">Air movement for comfort</h4><p class="mechanism">Cool people; manage moisture</p><p>Cross ventilation and ceiling fans can increase heat loss from the body when conditions permit. Ventilation only removes indoor moisture when the incoming air has a lower moisture content. Humid outside air cannot dehumidify a cooled room; mechanical cooling and dehumidification may still be needed.</p><a href="./assets/diagrams/climate/tropical-air.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-tropical-sun" data-family="tropical" aria-labelledby="card-tropical-sun-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="tropical: sun design principle"><title>tropical: sun design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polyline points="187.5,155 187.1,151.1 186.6,147 185.8,142.9 184.8,138.7 183.7,134.4 182.4,130.1 181,125.8 179.3,121.4 177.5,117 175.6,112.6 173.4,108.2 171.2,103.9 168.8,99.5 166.3,95.3 163.6,91 160.8,86.9 157.9,82.8 154.9,78.8 151.9,74.9 148.7,71.2 145.4,67.5 142.1,64 138.7,60.6 135.3,57.4 131.8,54.3 128.3,51.4 124.8,48.7 121.2,46.2 117.7,43.8 114.1,41.7 110.6,39.8 107.1,38 103.6,36.5 100.2,35.2 96.8,34.1 93.5,33.3 90.3,32.7 87.1,32.3 84.1,32.1 81.1,32.2 78.3,32.4 75.5,33 72.9,33.7 70.4,34.7 68.1,35.9 65.9,37.3 63.8,38.9 61.9,40.8 60.1,42.8 58.6,45.1 57.1,47.5 55.9,50.1 54.8,53 53.9,55.9 53.2,59.1 52.7,62.4 52.4,65.9 52.2,69.4 52.2,73.2 52.5,77" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.8"/><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="113.9,100.5 113.9,88.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="93.2,112.5 93.2,100.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="130.4,110 130.4,98" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="109.6,122 109.6,110" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="146.8,119.5 146.8,107.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polyline points="126.1,131.5 126.1,119.5" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="1.6"/><polygon points="157.2,109.5 126.1,127.5 126.1,125.5 157.2,107.5" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="82.8,102.5 126.1,127.5 126.1,125.5 82.8,100.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,82.5 157.2,107.5 126.1,125.5 82.8,100.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="152,107.5 126.1,122.5 126.1,104.5 152,89.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="88,100.5 126.1,122.5 126.1,104.5 88,82.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,67.5 152,89.5 126.1,104.5 88,82.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,58.5 167.6,89.5 131.3,66.5 108.7,53.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="167.6,89.5 126.1,113.5 131.3,66.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="72.4,82.5 126.1,113.5 131.3,66.5 108.7,53.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="77.7,85.6 111,54.8" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="83.1,88.7 113.2,56.1" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="88.5,91.8 115.5,57.4" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="93.8,94.9 117.7,58.7" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="99.2,98 120,60" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="104.6,101.1 122.3,61.3" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="110,104.2 124.5,62.6" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="115.3,107.3 126.8,63.9" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="120.7,110.4 129,65.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="160.7,93.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="153.8,97.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="146.8,101.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="139.9,105.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="133,109.5 131.3,66.5" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polyline points="90.6,68 128.7,90" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="0.55"/><polygon points="135.6,71 126.9,76 131.3,66.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.8"/><circle cx="81.1" cy="32.2" r="6.5" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width=".8"/><polyline points="90.1,32.2 93.1,32.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="87.5,38.5 89.6,40.6" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="81.1,41.2 81.1,44.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="74.8,38.5 72.6,40.6" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="72.1,32.2 69.1,32.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="74.8,25.8 72.6,23.7" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="81.1,23.2 81.1,20.2" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="87.5,25.8 89.6,23.7" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1"/><polyline points="78.1,40.2 102.4,86" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.4"/><polygon points="105.7,92.4 99.4,87.6 105.4,84.4" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/><polyline points="105.3,91.5 134.8,65.4" fill="none" stroke="light-dark(#1f6fa3, #8bcfff)" stroke-width="1.2" stroke-dasharray="3 2"/><polygon points="140,60.8 137,67.8 132.7,63" fill="light-dark(#1f6fa3, #8bcfff)" stroke="none"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Warm-humid</span><span>Sun · 05</span></p><h4 id="card-tropical-sun-title">Continuous solar protection</h4><p class="mechanism">Shade glass and occupied space</p><p>Block direct sun with external screens, deep eaves, and shaded outdoor rooms. Near the equator, the sun can be north or south at different times of year, so test both sides and the roof. Preserve useful diffuse daylight and views while controlling glare and solar gains.</p><a href="./assets/diagrams/climate/tropical-sun.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-tropical-ground" data-family="tropical" aria-labelledby="card-tropical-ground-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="tropical: ground design principle"><title>tropical: ground design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="113.9,100.5 113.9,82.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="3"/><polyline points="93.2,112.5 93.2,94.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="3"/><polyline points="130.4,110 130.4,92" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="3"/><polyline points="109.6,122 109.6,104" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="3"/><polyline points="146.8,119.5 146.8,101.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="3"/><polyline points="126.1,131.5 126.1,113.5" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="3"/><polygon points="157.2,103.5 126.1,121.5 126.1,119.5 157.2,101.5" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="82.8,96.5 126.1,121.5 126.1,119.5 82.8,94.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,76.5 157.2,101.5 126.1,119.5 82.8,94.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="152,101.5 126.1,116.5 126.1,98.5 152,83.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="88,94.5 126.1,116.5 126.1,98.5 88,76.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,61.5 152,83.5 126.1,98.5 88,76.5" fill="light-dark(#f8fbfd, #222e37)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="113.9,52.5 167.6,83.5 131.3,60.5 108.7,47.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="167.6,83.5 126.1,107.5 131.3,60.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="72.4,76.5 126.1,107.5 131.3,60.5 108.7,47.5" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="77.7,79.6 111,48.8" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="83.1,82.7 113.2,50.1" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="88.5,85.8 115.5,51.4" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="93.8,88.9 117.7,52.7" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="99.2,92 120,54" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="104.6,95.1 122.3,55.3" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="110,98.2 124.5,56.6" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="115.3,101.3 126.8,57.9" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="120.7,104.4 129,59.2" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="160.7,87.5 131.3,60.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="153.8,91.5 131.3,60.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="146.8,95.5 131.3,60.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="139.9,99.5 131.3,60.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="133,103.5 131.3,60.5" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polyline points="90.6,62 128.7,84" fill="none" stroke="light-dark(#a6bdce, #6b879b)" stroke-width="0.55"/><polygon points="135.6,65 126.9,70 131.3,60.5" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.8"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Warm-humid</span><span>Ground · 06</span></p><h4 id="card-tropical-ground-title">Raised, protected floor</h4><p class="mechanism">Separate structure from wet ground</p><p>A raised floor can protect against damp ground and support airflow beneath the building. Height and structure must respond to actual flood, wind, and soil conditions. Provide drainage, durable connections, and pest protection. Elevation by itself does not establish flood resilience.</p><a href="./assets/diagrams/climate/tropical-ground.svg" download>Download SVG ↓</a></div></article>
<article class="principle-card" id="card-tropical-material" data-family="tropical" aria-labelledby="card-tropical-material-title"><div class="principle-figure"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 190" role="img" aria-label="tropical: material design principle"><title>tropical: material design principle</title><g fill="none" stroke-linejoin="round" stroke-linecap="round" font-family="Helvetica Neue,Helvetica,Arial,sans-serif"><polygon points="199.7,120 120,166 120,162 199.7,116" fill="light-dark(#bdd7e7, #315367)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="40.3,120 120,166 120,162 40.3,116" fill="light-dark(#eaf2f8, #293741)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,70 199.7,116 120,162 40.3,116" fill="light-dark(#ffffff, #202124)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="120,116 116.5,118 116.5,58 120,56" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="90.6,103 116.5,118 116.5,58 90.6,43" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="94,41 120,56 116.5,58 90.6,43" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="93.2,100.5 95.8,102 95.8,98.4 93.2,96.9" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="93.2,94.3 95.8,95.8 95.8,92.2 93.2,90.7" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="93.2,88.1 95.8,89.6 95.8,86 93.2,84.5" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="93.2,81.9 95.8,83.4 95.8,79.8 93.2,78.3" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="93.2,75.7 95.8,77.2 95.8,73.6 93.2,72.1" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="93.2,69.5 95.8,71 95.8,67.4 93.2,65.9" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="93.2,63.3 95.8,64.8 95.8,61.2 93.2,59.7" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="93.2,57.1 95.8,58.6 95.8,55 93.2,53.5" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="93.2,50.9 95.8,52.4 95.8,48.8 93.2,47.3" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="97.8,103.2 100.4,104.7 100.4,101.1 97.8,99.6" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="97.8,97 100.4,98.5 100.4,94.9 97.8,93.4" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="97.8,90.8 100.4,92.3 100.4,88.7 97.8,87.2" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="97.8,84.6 100.4,86.1 100.4,82.5 97.8,81" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="97.8,78.4 100.4,79.9 100.4,76.3 97.8,74.8" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="97.8,72.2 100.4,73.7 100.4,70.1 97.8,68.6" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="97.8,66 100.4,67.5 100.4,63.9 97.8,62.4" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="97.8,59.8 100.4,61.3 100.4,57.7 97.8,56.2" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="97.8,53.6 100.4,55.1 100.4,51.5 97.8,50" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="102.5,105.9 105.1,107.4 105.1,103.8 102.5,102.3" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="102.5,99.7 105.1,101.2 105.1,97.6 102.5,96.1" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="102.5,93.5 105.1,95 105.1,91.4 102.5,89.9" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="102.5,87.3 105.1,88.8 105.1,85.2 102.5,83.7" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="102.5,81.1 105.1,82.6 105.1,79 102.5,77.5" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="102.5,74.9 105.1,76.4 105.1,72.8 102.5,71.3" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="102.5,68.7 105.1,70.2 105.1,66.6 102.5,65.1" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="102.5,62.5 105.1,64 105.1,60.4 102.5,58.9" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="102.5,56.3 105.1,57.8 105.1,54.2 102.5,52.7" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="107.2,108.6 109.8,110.1 109.8,106.5 107.2,105" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="107.2,102.4 109.8,103.9 109.8,100.3 107.2,98.8" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="107.2,96.2 109.8,97.7 109.8,94.1 107.2,92.6" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="107.2,90 109.8,91.5 109.8,87.9 107.2,86.4" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="107.2,83.8 109.8,85.3 109.8,81.7 107.2,80.2" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="107.2,77.6 109.8,79.1 109.8,75.5 107.2,74" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="107.2,71.4 109.8,72.9 109.8,69.3 107.2,67.8" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="107.2,65.2 109.8,66.7 109.8,63.1 107.2,61.6" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="107.2,59 109.8,60.5 109.8,56.9 107.2,55.4" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="111.9,111.3 114.5,112.8 114.5,109.2 111.9,107.7" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="111.9,105.1 114.5,106.6 114.5,103 111.9,101.5" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="111.9,98.9 114.5,100.4 114.5,96.8 111.9,95.3" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="111.9,92.7 114.5,94.2 114.5,90.6 111.9,89.1" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="111.9,86.5 114.5,88 114.5,84.4 111.9,82.9" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="111.9,80.3 114.5,81.8 114.5,78.2 111.9,76.7" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="111.9,74.1 114.5,75.6 114.5,72 111.9,70.5" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="111.9,67.9 114.5,69.4 114.5,65.8 111.9,64.3" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="111.9,61.7 114.5,63.2 114.5,59.6 111.9,58.1" fill="light-dark(#ffffff, #202124)" stroke="none"/><polygon points="90.6,103 116.5,118 116.5,58 90.6,43" fill="none" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="158.1,128 155.9,129.3 155.9,77.3 158.1,76" fill="light-dark(#1f6fa3, #8bcfff)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="140.4,120.3 155.9,129.3 155.9,77.3 140.4,68.3" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polygon points="142.5,67 158.1,76 155.9,77.3 140.4,68.3" fill="light-dark(#5aa7d8, #3f8fc2)" stroke="light-dark(#507d96, #9bc6dd)" stroke-width="0.9"/><polyline points="147.7,62 79.1,96.1" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.6"/><polygon points="72.3,99.4 77.5,92.9 80.7,99.3" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/><polyline points="137.3,70 68.7,104.1" fill="none" stroke="light-dark(#007c9a, #6bd8f0)" stroke-width="1.6"/><polygon points="61.9,107.4 67.1,100.9 70.3,107.3" fill="light-dark(#007c9a, #6bd8f0)" stroke="none"/></g></svg></div><div class="principle-text"><p class="principle-lens"><span>Warm-humid</span><span>Materials · 07</span></p><h4 id="card-tropical-material-title">Light and quick to dry</h4><p class="mechanism">Avoid unnecessary heat storage</p><p>Lightweight, shaded construction can cool quickly when outdoor conditions improve. Permeable screens suit an open-air mode when rain, insects, security, and air quality permit it. Air-conditioned rooms instead need controlled air leakage and suitable vapor and moisture detailing to avoid condensation.</p><a href="./assets/diagrams/climate/tropical-material.svg" download>Download SVG ↓</a></div></article>
<!-- PRINCIPLES_END -->
</div>
<div class="family-notes"><!-- FAMILY_NOTES_START -->
<aside class="family-note" id="family-polar" data-family="polar" aria-label="Polar / very cold: climate context and precedent"><p class="eyebrow">THE CLIMATE FAMILY</p><h4>Polar / very cold</h4><p class="family-tag">Conserve heat. Shelter the threshold.</p><p>When the temperature difference is large and heating is prolonged, reduce heat transfer before seeking additional heat. A small exposed envelope, continuous insulation, and protected entrances work together. Daylight, fresh air, and moisture control still matter.</p><p class="eyebrow">READ THE PRECEDENT</p><p>The igloo. James Marston Fitch describes how the hemispherical dome offers the least resistance and obstruction to winter gales, exposes the least surface to their chilling effect, and encloses the largest volume with the smallest envelope, so the point source of an oil lamp can heat it. Snow has a low heat capacity. Lamp heat and the occupants glaze the inner surface with ice, which seals the pores of the shell and acts much like a radiant reflector. The lecture compares about −46°C outside with about +4°C inside. The snow construction is a specific cultural and material response; the transferable lesson is the relationship between enclosure, exposure, and heat loss.</p><p class="caption">J. M. Fitch, quoted in L. Heschong, Thermal Delight in Architecture (1979); ES1 lecture 4.</p></aside>
<aside class="family-note" id="family-temperate" data-family="temperate" aria-label="Temperate / seasonal: climate context and precedent"><p class="eyebrow">THE CLIMATE FAMILY</p><h4>Temperate / seasonal</h4><p class="family-tag">Admit in winter. Protect in summer.</p><p>A seasonal climate asks the same building to do different things over the year. Winter heat conservation, summer solar control, and usable shoulder-season ventilation must be reconciled with the program and the hours people occupy the space.</p><p class="eyebrow">READ THE PRECEDENT</p><p>The Schwarzwaldhaus is a byre-dwelling: people, animals, and the winter hay store share one section under a deep roof. It takes advantage of resource cycles. A 3 m layer of hay (λ ≈ 0.065 W/mK) gives the roof a U-value of roughly 0.022 W/m²K, and the stabled animals add heat; the lecture estimates twelve at about 1,500 W each. Through the winter the hay is fed to the animals and the store changes from fall to spring. Read it as spatial organization and resource use, then test those relationships against a contemporary program.</p><p class="caption">ES1 lecture 4, after the Black Forest farmhouse tradition, southwestern Germany.</p></aside>
<aside class="family-note" id="family-arid" data-family="arid" aria-label="Hot-arid: climate context and precedent"><p class="eyebrow">THE CLIMATE FAMILY</p><h4>Hot-arid</h4><p class="family-tag">Make shade. Use the cool part of the day.</p><p>Strong sun, low moisture, and a large day-night temperature swing can make shade and timed heat storage effective. Verify the daily cycle first: some hot-arid places have warm nights or humid seasons that sharply reduce these opportunities.</p><p class="eyebrow">READ THE PRECEDENT</p><p>The malqaf, or windcatcher, shows that a ventilation path can become architecture. Hassan Fathy documented how it captures wind above the dense, dusty street level and delivers it to rooms; the wind towers of the Isa bin Ali House in Muharraq, Bahrain, are a well-known example. Courtyards, thick walls, and shaded zones complete the strategy. Performance depends on available pressure differences, air temperature, dust, and the complete route from inlet to outlet.</p><p class="caption">H. Fathy, Natural Energy and Vernacular Architecture (1986); ES1 lecture 4.</p></aside>
<aside class="family-note" id="family-tropical" data-family="tropical" aria-label="Warm-humid: climate context and precedent"><p class="eyebrow">THE CLIMATE FAMILY</p><h4>Warm-humid</h4><p class="family-tag">Shade the room. Move air across people.</p><p>Warm nights and high outdoor moisture limit the ability to discharge heat or cool by evaporation. Prioritize solar protection, air movement, rain control, and drying. An open naturally ventilated building and a sealed, cooled building need different envelope and moisture strategies.</p><p class="eyebrow">READ THE PRECEDENT</p><p>The Batak Toba houses of North Sumatra stand on piles that protect the structure from heavy rainfall and animals. The great saddle roof shades the dwelling and sheds rain, and openings in its gables let air carry away heat and humidity. Charles Correa’s Kanchanjunga Apartments in Mumbai translate the same priorities into a tower: deep, two-story garden verandas shade the living spaces and protect them from monsoon rain. One example cannot establish a rule for every tropical location.</p><p class="caption">ES1 lecture 4; Charles Correa, Kanchanjunga Apartments, Mumbai (1983).</p></aside>
<!-- FAMILY_NOTES_END -->
</div>
</div>
</div>
<div class="principle-download"><a href="./assets/diagrams/climate/design-principles-atlas.svg" download class="button button-outline">Download the vector principles sheet <span aria-hidden="true">↓</span></a>
<p class="caption">28 original SVG drawings. Each card also has a separate vector download.</p>
</div>
<div class="design-note"><span>COMPARE</span>
<p>Compare <strong>materials</strong> in hot-arid and warm-humid climates. Heat storage needs a useful release cycle. Air movement can improve comfort without removing moisture. Explain why a heavy wall and a permanently open window are conditional strategies.</p>
</div>
</section>
<section class="reader-section" id="weather" aria-labelledby="weather-title">
<div class="section-heading"><span class="section-number">04</span><div><p class="eyebrow">WHAT THE NUMBERS REPRESENT</p><h2 id="weather-title">Know the weather file.</h2></div></div>
<p class="section-lead">Before making a plot, establish where the data came from, which period it represents, and what each column measures.</p>
<div class="reading-grid"><div><h3>A typical year is assembled</h3>
<p>A typical meteorological year (TMY) combines selected months from a longer record, at least 12 years, to represent recurring conditions with annual averages consistent with the long-term record. The hourly sequence preserves useful daily and seasonal variation, but January and February can come from different years. Strictly, such a file characterizes climate rather than recording weather. TMY3 and TMYx name datasets and methods, rather than a universal sequence of software upgrades.</p>
</div>
<div><h3>Choose data for the question</h3>
<p>Use a typical year to compare recurring design performance. Use an actual meteorological year (AMY) to study a specific event or to calibrate a model against measured energy use; several AMY files show year-to-year variation. Use design conditions and event sequences to examine equipment sizing and resilience. Use documented future scenarios to test performance over the building’s intended life. Choose a station close to the site or with similar conditions, and remember that airport stations sit outside the urban heat island.</p>
</div>
</div>
<div class="data-table-wrap"><table class="climate-table"><caption>Common EPW variables and the design questions they support</caption><thead><tr><th scope="col">Variable</th><th scope="col">Meaning and units</th><th scope="col">What to investigate</th></tr></thead><tbody>
<tr><th scope="row">Dry-bulb temperature</th><td>Shielded air temperature, °C.</td><td>Seasonal heating or cooling pressure; timing of cooler air.</td></tr>
<tr><th scope="row">Dew point + relative humidity</th><td>Dew point in °C; RH in %. RH depends on temperature as well as water vapor.</td><td>Moisture, condensation risk, and whether outside air can help remove indoor moisture.</td></tr>
<tr><th scope="row">GHI</th><td>Global horizontal radiation: total solar energy received on a horizontal surface, Wh/m² per interval.</td><td>Seasonal solar availability. A facade needs an orientation-specific calculation (<a href="./solar-radiation.html#irradiation">Chapter 05</a>).</td></tr>
<tr><th scope="row">DNI + DHI</th><td>Direct normal radiation follows a surface perpendicular to the solar beam. Diffuse horizontal radiation measures sky radiation on a horizontal surface.</td><td>Direct-sun control versus access to diffuse light. DNI and DHI cannot simply be added to obtain GHI.</td></tr>
<tr><th scope="row">Wind speed + direction</th><td>Speed in m/s; direction in degrees clockwise from north, describing where the wind comes from.</td><td>Seasonal shelter and ventilation. Station wind is modified by local terrain and buildings.</td></tr>
<tr><th scope="row">Sky cover + precipitation</th><td>EPW sky cover uses tenths, 0-10. Liquid precipitation depth uses mm over its reported accumulation period.</td><td>Cloudiness, wetting, and water management. Check availability and missing codes before summing rainfall.</td></tr>
</tbody></table>
</div>
<details class="method-detail"><summary>Read an EPW row without shifting the columns</summary><p>An EPW is comma-separated text with eight header lines. Count the raw columns from 1: year 1, month 2, day 3, hour 4, minute 5, <strong>source/uncertainty flags 6</strong>, dry bulb 7, dew point 8, RH 9, pressure 10, GHI 14, DNI 15, DHI 16, wind direction 21, wind speed 22. Omitting the flags column shifts every subsequent variable.</p>
<p>For a conventional hourly file, hour 1 covers the first interval, 00:00-01:00, in <strong>local standard time</strong>. Many files label its minute field 60; the bundled TMYx uses 0. This reader accepts either consistent convention for a full hourly file and uses the nominal hour slot. The plots below place that interval at 00:30. No daylight-saving correction is applied. Temperature and wind observations and interval-integrated radiation have different sampling meanings; align timestamps before combining weather and solar position.</p>
<p>Radiation of 500 Wh/m² accumulated over one hour corresponds to an average irradiance of 500 W/m² during that hour. The numerical equality depends on the one-hour interval. Missing codes such as 99.9 °C, 999% RH, and 9999 Wh/m² are not real observations.</p>
<p>For an unobstructed horizontal surface, GHI is approximately DNI × cos(zenith angle) + DHI when quantities and solar position refer to consistent intervals. Reflected ground radiation and tilted-surface geometry need separate treatment for a facade.</p>
</details>
<div class="design-note"><span>FILE CHECK</span>
<p>Record the station, coordinates, elevation, time zone, dataset, source period, and missing fields. Compare the station to the site. An airport at a different elevation or in open terrain can misrepresent an urban courtyard or a valley floor.</p>
</div>
</section>
<section class="reader-section" id="analysis" aria-labelledby="analysis-title">
<div class="section-heading"><span class="section-number">05</span><div><p class="eyebrow">WEATHER ANALYSIS</p><h2 id="analysis-title">Find the patterns.</h2></div></div>
<p class="section-lead">Move from the average day to every hour, then to sun and wind. Each view answers a different question. Switch between six bundled climates or open your own EPW.</p>
<div class="dataset-box"><div><p class="eyebrow">ACTIVE DATASET</p>
<h3 id="dataset-name">Ithaca Tompkins Rgnl AP</h3>
<p id="dataset-meta">SRC-TMYx · source period 2009-2023 · station 725155 · 42.483° N, 76.467° W · 335 m · UTC−5 standard time · 8,760 hours</p>
<p class="caption" id="dataset-quality"></p>
</div>
<div class="dataset-actions"><label for="dataset-main" class="sr-only">Weather file</label>
<select id="dataset-main" data-dataset-select><!-- DATASET_OPTIONS_START -->
<option value="fairbanks">Fairbanks, AK · Polar / very cold</option><option value="ithaca" selected>Ithaca, NY · Temperate / seasonal</option><option value="sanfrancisco">San Francisco, CA · Temperate / marine</option><option value="denver">Denver, CO · Cold, dry, high altitude</option><option value="phoenix">Phoenix, AZ · Hot-arid</option><option value="miami">Miami, FL · Warm-humid</option>
<!-- DATASET_OPTIONS_END --></select>
<label class="button button-outline" for="epw-input">Open your own EPW <span aria-hidden="true">↑</span></label>
<input type="file" id="epw-input" accept=".epw" class="sr-only">
</div>
<p class="caption">Your file is read in this browser and never uploaded. Use a complete hourly year; partial-year and subhourly files are not supported. Download EPW files from <a href="https://climate.onebuilding.org/" target="_blank" rel="noreferrer">Climate.OneBuilding.org</a> or <a href="https://energyplus.net/weather" target="_blank" rel="noreferrer">EnergyPlus</a>.</p>
<p id="file-status" role="status"></p>
</div>
<p class="mobile-chart-note">Scroll wide charts horizontally to read the labels and all twelve months.</p>
<div class="metric-strip climate-metrics"><div><span>ANNUAL MEAN</span><strong id="annual-mean">—</strong><small>outdoor dry bulb</small></div><div><span>HDD18</span><strong id="annual-hdd">—</strong><small>°C·days, base 18°C</small></div><div><span>CDD18</span><strong id="annual-cdd">—</strong><small>°C·days, base 18°C</small></div><div><span>HORIZONTAL SOLAR</span><strong id="annual-solar">—</strong><small>kWh/m² per year</small></div></div>
<p class="caption">Degree-days below use each day’s mean temperature: HDD18 = Σ max(0, 18 − Tday), CDD18 = Σ max(0, Tday − 18). They describe outdoor temperature exposure at an illustrative common base, rather than heating or cooling loads, comfort hours, or energy use. Szokolay uses 26°C as a cooling base; the choice of base changes the number.</p>
<div class="reasoning-example" id="climate-interpretation" aria-labelledby="interpretation-title"><!-- INTERPRETATION_START -->
<p class="eyebrow" id="interpretation-title">WORKED INTERPRETATION / ITHACA, NY</p><p><strong>Start with winter heat conservation.</strong> At the same illustrative 18°C base, the file has about 3,484 heating degree-days and 278 cooling degree-days. Test a compact, insulated, airtight envelope before relying on solar heat. This temperature comparison does not predict the building’s energy balance.</p><p><strong>Keep a summer strategy.</strong> July averages 21.9°C, and 390 outdoor hours exceed 26°C across the year. Test external shade and controlled ventilation against the studio’s occupancy and internal gains; inspect moisture before proposing night cooling.</p><p><strong>Be selective about winter sun.</strong> December receives about 40 kWh/m² on the horizontal plane, compared with 193 in July, and 38% of the annual horizontal total is diffuse. Preserve useful winter access, but evaluate window heat losses, glare, and actual facade irradiation before adding glass.</p>
<!-- INTERPRETATION_END -->
</div>
<article class="analysis-step" id="diurnal-averages"><div class="analysis-heading"><span>01 / AVERAGE DAY</span>
<h3>Read the monthly diurnal averages</h3>
</div>
<p>This is the chart ClimateStudio labels <em>Diurnal Avg</em> and Climate Consultant calls <em>Monthly Diurnal Averages</em>. Each column is the average day of one month, from midnight to midnight. Every point averages the same hour across all days of that month, so you see temperature, humidity, and sun move together through the day and through the year.</p>
<div class="chart-toolbar"><label for="dataset-diurnal">Weather file</label><select id="dataset-diurnal" data-dataset-select><!-- DATASET_OPTIONS_START -->
<option value="fairbanks">Fairbanks, AK · Polar / very cold</option><option value="ithaca" selected>Ithaca, NY · Temperate / seasonal</option><option value="sanfrancisco">San Francisco, CA · Temperate / marine</option><option value="denver">Denver, CO · Cold, dry, high altitude</option><option value="phoenix">Phoenix, AZ · Hot-arid</option><option value="miami">Miami, FL · Warm-humid</option>
<!-- DATASET_OPTIONS_END --></select><label class="quiet-button" for="epw-input">Open EPW ↑</label></div>
<div class="weather-figure chart-hover" id="diurnal-averages-chart"></div>
<div class="chart-key diurnal-key"><span><i class="key-temp"></i>Dry bulb</span><span><i class="key-temp-band"></i>Dry bulb, hourly 10th-90th percentile</span><span><i class="key-dewpoint"></i>Dew point</span><span><i class="key-rh"></i>Relative humidity</span><span><i class="key-ghi"></i>Global horizontal (GHI)</span><span><i class="key-dni"></i>Direct normal (DNI)</span><span><i class="key-dhi"></i>Diffuse horizontal (DHI)</span></div>
<p class="evidence-reading" id="diurnal-averages-reading" aria-live="polite"></p>
<ol class="reading-steps">
<li><strong>Seasons.</strong> Compare the height of the dry-bulb curves from January to July. Does the climate have a heating season, a cooling season, or both?</li>
<li><strong>Daily swing.</strong> Read the amplitude of each curve. A wide swing means clear, dry air and a cool night to work with; a flat curve means the night will not reset the building.</li>
<li><strong>Moisture.</strong> The dew point barely moves during the day, while relative humidity rises at night and falls in the afternoon. The air did not dry out; it warmed. Judge moisture by the dew point.</li>
<li><strong>Sun.</strong> The width of the radiation hump is day length, its height is intensity. When DNI towers over DHI, the sky is clear and the beam dominates; when DHI approaches GHI, the sky is mostly overcast.</li>
<li><strong>Coincidence.</strong> Do peak sun, peak temperature, and the hours people occupy the building fall together? That overlap is where shading and ventilation must work.</li>
</ol>
<p class="caption">As in ClimateStudio, the three quantities share one plot: temperature on the inner left axis, relative humidity on the outer left axis, and radiation on the right. Temperature fills the upper half and radiation the lower half, so the curves stay apart; the two share gridlines. The temperature axis fits the active file, so compare axis values, not curve heights, between climates. Hover for values.</p>
<div class="reading-grid"><div><h3>Night cooling needs a sink</h3>
<p>Cooler night air can remove heat from a building and its exposed mass. Check actual nighttime temperatures against indoor temperature, ventilation rates, and the following day’s gains. High outdoor moisture, noise, smoke, rain, or security restrictions can reduce the usable hours.</p>
</div>
<div><h3>Humidity changes the conclusion</h3>
<p>Dew point is the temperature at which air of a given moisture content reaches saturation. If that air meets a colder surface, condensation is possible. To assess moisture removal, compare outdoor and indoor humidity ratio or dew point at comparable pressure; RH percentages alone can mislead.</p>
</div>
</div>
<details class="method-detail"><summary>A humidity example: lower RH can still mean more moisture</summary><p>At roughly sea-level pressure, outdoor air at 30°C and 50% RH has a dew point near 18.4°C and a humidity ratio near 13.3 g/kg of dry air. Indoor air at 24°C and 60% RH has a dew point near 15.8°C and a humidity ratio near 11.2 g/kg. Bringing in the outdoor air adds moisture despite its lower relative humidity. These are illustrative psychrometric calculations, rather than values from the active weather file.</p>
</details>
</article>
<article class="analysis-step" id="hourly-heatmap"><div class="analysis-heading"><span>02 / EVERY HOUR</span>
<h3>Cycle through the hourly heatmap</h3>
</div>
<p>Averages hide sequences. The heatmap shows all 8,760 hours of the file: each column is a day, each row an hour, midnight at the top. Horizontal bands reveal the daily rhythm, vertical streaks reveal weather events such as a cold snap, a heat wave, or a cloudy week. Cycle through the variables and watch which patterns stay and which change.</p>
<div class="chart-toolbar"><label for="dataset-heatmap">Weather file</label><select id="dataset-heatmap" data-dataset-select><!-- DATASET_OPTIONS_START -->
<option value="fairbanks">Fairbanks, AK · Polar / very cold</option><option value="ithaca" selected>Ithaca, NY · Temperate / seasonal</option><option value="sanfrancisco">San Francisco, CA · Temperate / marine</option><option value="denver">Denver, CO · Cold, dry, high altitude</option><option value="phoenix">Phoenix, AZ · Hot-arid</option><option value="miami">Miami, FL · Warm-humid</option>
<!-- DATASET_OPTIONS_END --></select><label class="quiet-button" for="epw-input">Open EPW ↑</label></div>
<div class="variable-switch" role="group" aria-label="Heatmap variable"><div class="segmented" id="heatmap-variables"></div>
<button type="button" class="quiet-button" id="heatmap-next">Next variable →</button>
</div>
<div class="weather-figure chart-hover" id="heatmap-chart"></div>
<p class="evidence-reading" id="heatmap-reading" aria-live="polite"></p>
<p class="caption">Colors are binned into 16 steps on fixed scales, so a color means the same value in every file; values beyond a scale are clamped to its end. Temperature uses a diverging scale, neutral at the 18°C degree-day base. Radiation in each hour is reported in Wh/m², numerically equal to the mean W/m² over that hour. Use the arrow keys on the variable buttons to cycle.</p>
</article>
<article class="analysis-step"><div class="analysis-heading"><span>03 / SUN</span>
<h3>Distinguish availability from useful gain</h3>
</div>
<p>Monthly solar totals show when energy is available on a horizontal plane. The diffuse component helps explain why an overcast sky can provide daylight while offering little direct beam. Neither value tells you how much solar heat passes through a particular window.</p>
<div class="weather-figure" id="radiation-chart"></div>
<div class="chart-key"><span><i class="key-band"></i>Global horizontal total (GHI)</span><span><i class="key-line"></i>Diffuse horizontal total (DHI)</span></div>
<p class="evidence-reading" id="radiation-reading"></p>
<p class="measure">To decide on glazing or shading, combine hourly weather with facade orientation, the sun’s position, obstructions, glass area and properties, and occupancy. A high summer total suggests testing solar control; a low winter total limits what passive heating can supply. Use <a href="./sun-paths-shading.html#masks">sun-path diagrams and shading masks</a> to establish when the beam can reach the opening.</p>
</article>
<article class="analysis-step"><div class="analysis-heading"><span>04 / WIND</span>
<h3>Filter the season before orienting the opening</h3>
</div>
<p>An annual prevailing wind can hide different summer and winter directions. Each spoke below points toward the direction the wind <em>comes from</em>. Its length is the share of valid hours in that sector, with calm hours included in the denominator and reported separately.</p>
<div class="chart-toolbar"><label for="wind-season">Wind period</label><select id="wind-season"><option value="all">Whole year</option><option value="winter">December-February</option><option value="summer">June-August</option></select></div>
<div class="weather-figure" id="wind-chart"></div>
<div class="chart-key"><span><i class="wind-low"></i>0.5 to <2 m/s</span><span><i class="wind-mid"></i>2 to <5 m/s</span><span><i class="wind-high"></i>≥5 m/s</span></div>
<p class="evidence-reading" id="wind-reading" aria-live="polite"></p>
<p class="caption">Eight 45° sectors, centered on cardinal and intercardinal directions. The radial scale recalculates for each period; compare numeric percentages, rather than spoke lengths alone. At an airport, open-terrain wind can differ greatly from wind at a sheltered window.</p>
<div class="design-note"><span>TEST THE PATH</span>
<p>Propose a summer inlet and outlet, then trace air through the plan and section. Check pressure differences, openings, internal resistance, and controllability. A wind rose establishes a promising direction; it does not calculate indoor air speed or ventilation rate.</p>
</div>
</article>
<details class="method-detail"><summary>Inspect or download the monthly evidence</summary><p>Mean daily minima and maxima average each complete day’s lowest and highest temperatures. GHI and DHI are interval energy sums divided by 1,000. Missing values are excluded from means; incomplete solar or degree-day totals are reported as unavailable.</p>
<div class="data-table-wrap"><table class="climate-table" id="monthly-data"><caption>Monthly weather summary for the active file</caption><thead><tr><th scope="col">Month</th><th scope="col">Mean °C</th><th scope="col">Mean daily min °C</th><th scope="col">Mean daily max °C</th><th scope="col">GHI kWh/m²</th><th scope="col">DHI kWh/m²</th><th scope="col">HDD18 °C·d</th><th scope="col">CDD18 °C·d</th></tr></thead><tbody><!-- MONTHLY_TABLE_START -->
<tr><th scope="row">Jan</th><td>-3.6</td><td>-8.1</td><td>0.4</td><td>53.7</td><td>30.7</td><td>668.6</td><td>0.0</td></tr>
<tr><th scope="row">Feb</th><td>-1.8</td><td>-6.6</td><td>2.1</td><td>66.0</td><td>32.5</td><td>555.5</td><td>0.0</td></tr>
<tr><th scope="row">Mar</th><td>2.3</td><td>-3.4</td><td>8.2</td><td>111.2</td><td>53.4</td><td>486.3</td><td>0.0</td></tr>
<tr><th scope="row">Apr</th><td>7.6</td><td>2.4</td><td>12.9</td><td>144.2</td><td>56.6</td><td>310.9</td><td>0.0</td></tr>
<tr><th scope="row">May</th><td>14.9</td><td>9.3</td><td>20.7</td><td>183.7</td><td>61.7</td><td>118.2</td><td>22.7</td></tr>
<tr><th scope="row">Jun</th><td>18.6</td><td>13.0</td><td>24.0</td><td>182.2</td><td>59.9</td><td>38.8</td><td>56.6</td></tr>
<tr><th scope="row">Jul</th><td>21.9</td><td>15.0</td><td>28.4</td><td>192.6</td><td>63.4</td><td>0.6</td><td>122.2</td></tr>
<tr><th scope="row">Aug</th><td>19.4</td><td>13.6</td><td>25.3</td><td>164.3</td><td>51.5</td><td>11.9</td><td>55.6</td></tr>
<tr><th scope="row">Sep</th><td>16.5</td><td>10.4</td><td>22.2</td><td>121.0</td><td>40.3</td><td>61.9</td><td>16.8</td></tr>
<tr><th scope="row">Oct</th><td>11.3</td><td>7.0</td><td>15.8</td><td>77.3</td><td>34.9</td><td>210.6</td><td>3.8</td></tr>
<tr><th scope="row">Nov</th><td>2.8</td><td>-1.0</td><td>6.3</td><td>55.0</td><td>25.5</td><td>454.5</td><td>0.0</td></tr>
<tr><th scope="row">Dec</th><td>-0.3</td><td>-4.0</td><td>2.8</td><td>39.6</td><td>23.8</td><td>566.4</td><td>0.0</td></tr>
<!-- MONTHLY_TABLE_END --></tbody></table>
</div>
<button class="button button-outline" id="download-climate-csv">Download monthly CSV ↓</button>
<p>Download the bundled EPW files to open them in ClimateStudio or Climate Consultant: <!-- EPW_DOWNLOADS_START -->
<a href="./assets/weather/USA_AK_Fairbanks.Intl.AP.702610_TMYx.2009-2023.epw" download>Fairbanks, AK</a> · <a href="./assets/weather/USA_NY_Ithaca.Tompkins.Rgnl.AP.725155_TMYx.2009-2023.epw" download>Ithaca, NY</a> · <a href="./assets/weather/USA_CA_San.Francisco.Intl.AP.724940_TMYx.2009-2023.epw" download>San Francisco, CA</a> · <a href="./assets/weather/USA_CO_Denver.Intl.AP.725650_TMYx.2009-2023.epw" download>Denver, CO</a> · <a href="./assets/weather/USA_AZ_Phoenix-Sky.Harbor.Intl.AP.722780_TMYx.2009-2023.epw" download>Phoenix, AZ</a> · <a href="./assets/weather/USA_FL_Miami.Natl.Hurricane.Center.722020_TMYx.2009-2023.epw" download>Miami, FL</a>
<!-- EPW_DOWNLOADS_END --></p>
</details>
</section>
<section class="reader-section" id="decisions" aria-labelledby="decisions-title">
<div class="section-heading"><span class="section-number">06</span><div><p class="eyebrow">EVIDENCE → MECHANISM → TEST</p><h2 id="decisions-title">Make a design decision.</h2></div></div>
<p class="section-lead">A climate plot supports a hypothesis. A comparison with a baseline tells you whether the proposed design actually helps.</p>
<div class="data-table-wrap"><table class="climate-table decision-table"><caption>Turn a weather pattern into a testable architectural proposal</caption><thead><tr><th scope="col">If the evidence shows…</th><th scope="col">Propose…</th><th scope="col">Then test…</th></tr></thead><tbody>
<tr><th scope="row">A long cold season with limited winter solar availability.</th><td>A compact volume, continuous insulation, fewer thermal bridges, and a protected entrance; selective winter solar admission.</td><td>Heating demand and daylight against an equal-area baseline. Include window losses and infiltration, beyond solar gains.</td></tr>
<tr><th scope="row">Strong solar availability during warm occupied hours.</th><td>External shading, less exposed east/west glazing, and shaded outdoor circulation.</td><td>Transmitted solar gains, glare, useful daylight, and occupied overheating hours for the same weather and schedules.</td></tr>
<tr><th scope="row">Cooler summer nights with acceptable moisture and air quality.</th><td>Controllable night ventilation and exposed internal mass.</td><td>Hourly heat removal, next-day indoor peaks, airflow, and the number of nights the strategy can operate.</td></tr>
<tr><th scope="row">Warm nights and high outdoor dew points.</th><td>Reduce solar and internal gains, provide air movement for comfort, and plan appropriate moisture control.</td><td>Indoor operative temperature, humidity, condensation risk, and sensible plus latent cooling demand.</td></tr>
<tr><th scope="row">Summer breezes from a useful direction, but strong winter exposure.</th><td>Seasonal inlets/outlets with a sheltered, closable winter configuration.</td><td>Air paths and pressure differences in both modes, winter infiltration, and local entrance conditions.</td></tr>
<tr><th scope="row">Wet seasons, intense storms, or persistent damp ground.</th><td>A roof-to-ground drainage strategy, protected openings, and assemblies that drain and dry.</td><td>Local design rainfall and flood information, runoff paths, material wetting, and moisture behavior. TMY rainfall totals alone are insufficient.</td></tr>
</tbody></table>
</div>
<div class="reasoning-example"><p class="eyebrow">WRITE THE INFERENCE</p>
<p>“The July curve suggests cooler air overnight. I will test a shaded studio with exposed slab mass and controlled night ventilation. Against the same studio without night ventilation, I will compare occupied operative-temperature peaks and overheating hours. The strategy may fail during humid heatwaves or when openings must stay closed.”</p>
</div>
<p class="measure">Name a <strong>metric</strong>, a <strong>baseline</strong>, and a <strong>failure condition</strong>. Use the same program, area, weather, and schedules for both designs. Keep geometry, heat transfer, moisture, and comfort as distinct questions until a model explicitly connects them.</p>
</section>
<section class="reader-section" id="future" aria-labelledby="future-title">
<div class="section-heading"><span class="section-number">07</span><div><p class="eyebrow">BEYOND THE TYPICAL YEAR</p><h2 id="future-title">Test a changing climate.</h2></div></div>
<p class="section-lead">A building lasts longer than its weather file. Test whether the design still works when the conditions supporting it become less reliable.</p>
<div class="reading-grid"><div><h3>Typical performance and stress tests</h3>
<p>Use a documented typical file for a recurring-year comparison. Add a multi-day hot spell with warm nights, an appropriate cold event, and other site-relevant stresses. Inspect indoor conditions during the whole sequence, including recovery. A typical year’s maximum is the maximum in that file, rather than a return-period extreme.</p>
</div>
<div><h3>Future files carry assumptions</h3>
<p>Climate-file morphing modifies a baseline using projected changes; tools such as CCWorldWeatherGen (University of Southampton) apply climate-model projections to an existing EPW. Record the baseline, emissions scenario, climate model or ensemble, time horizon, variables changed, and method. A morphed TMY remains a constructed year and may not preserve future extremes or changing correlations between heat, humidity, and wind.</p>
</div>
</div>
<div class="stress-sequence"><div><span>01</span>
<h3>Typical year</h3>
<p>Does the design reduce recurring demand?</p>
</div>
<div><span>02</span>
<h3>Hot / cold event</h3>
<p>Does it remain usable during a sustained stress?</p>
</div>
<div><span>03</span>
<h3>Future scenarios</h3>
<p>Which strategies remain effective across plausible changes?</p>
</div>
</div>
<p class="measure">Climate zones themselves move: Rubel and Kottek’s Köppen–Geiger maps for 1901-2100 show warm types advancing poleward and upslope. A useful exercise is a climate analog: find today’s city whose weather resembles your site’s projected future, then open both files in section 05. An Ithaca TMY3 file can be compared with the same file morphed to a 2080 climate. Use such a pair to discuss sensitivity, while retaining its scenario and method as part of the evidence. Warmer conditions can reduce heating exposure and increase cooling pressure; they do not establish a specific future energy use without the building, schedules, and humidity response.</p>
</section>
<section class="reader-section" id="practice" aria-labelledby="practice-title">
<div class="section-heading"><span class="section-number">08</span><div><p class="eyebrow">REASON BEFORE YOU SPECIFY</p><h2 id="practice-title">Check your thinking.</h2></div></div>
<p class="section-lead">Make a prediction, then reveal the explanation.</p>
<details class="practice-question"><summary>Two places have the same annual mean temperature. Can they use the same envelope?</summary><p>No. One could have mild conditions all year and the other severe winter cold and summer heat. Compare monthly ranges, humidity, solar exposure, wind, and actual occupied hours. An annual mean does not describe a design season.</p>
</details>
<details class="practice-question"><summary>A hot-arid scheme has thick walls. What evidence would justify them?</summary><p>A useful daily temperature cycle, controlled solar gains, and a way to discharge stored heat. Examine actual overnight temperatures and the building’s heat balance. If nights remain warm, mass can retain unwanted heat.</p>
</details>
<details class="practice-question"><summary>Phoenix and Miami have nearly the same cooling degree-days. Should they use the same cooling strategy?</summary><p>No. Phoenix’s summer dew point averages about 13.5°C and its air is dry; Miami’s is about 23.6°C. In Phoenix, shading and evaporative strategies can work, although warm urban nights limit night flushing. In Miami, evaporation and ventilation cannot remove moisture, so reduce gains, move air across people, and plan for dehumidification. Degree-days measure temperature exposure, not humidity.</p>
</details>
<details class="practice-question"><summary>The afternoon RH is lower than the morning RH. Has the air become drier?</summary><p>Not necessarily. Warming air can lower RH without removing water vapor. Compare dew point or humidity ratio to assess changes in moisture content.</p>
</details>
<details class="practice-question"><summary>The annual wind rose points west. Where should the summer inlet go?</summary><p>First filter summer conditions and the hours when ventilation is useful. Then examine local shielding, pressure differences, air quality, and a complete inlet-to-outlet path. An annual direction alone cannot decide.</p>
</details>
<details class="practice-question"><summary>The TMY’s hottest hour is acceptable indoors. Is the heatwave problem resolved?</summary><p>No. A multi-day sequence with warm nights can prevent the building from releasing stored heat. Test suitable event weather, occupancy, and system availability, including recovery and power-outage behavior when relevant.</p>
</details>
</section>
<section class="reader-section" id="studio" aria-labelledby="studio-title">
<div class="section-heading"><span class="section-number">09</span><div><p class="eyebrow">A CLIMATE-TO-DESIGN STUDY</p><h2 id="studio-title">Take it into studio.</h2></div></div>
<p class="section-lead">Build a concise argument for three design moves. Each move needs weather evidence, a physical explanation, and a way to check the result.</p>
<ol class="studio-steps"><li><h3>Brief a client in one slide</h3>
<p>Open your hometown’s weather file in ClimateStudio or in section 05 and read the monthly diurnal averages. In a few bullet points, say whether the climate has seasons and whether it is sunny or cloudy, warm or cold, humid or dry. Point to the data that proves each claim, then propose first-order design principles with the seven lenses.</p>
</li>
<li><h3>Make a site section</h3>
<p>Show true north, slope, context, vegetation, sun access, wind exposure, and drainage. Mark the occupied spaces and times that matter.</p>
</li>
<li><h3>Document the file</h3>
<p>Identify station, coordinates, elevation, time zone, dataset, source period, and gaps. Explain what the file represents and how the site differs.</p>
</li>
<li><h3>Select evidence</h3>
<p>Use a seasonal temperature plot, a daily cycle, and at least one solar, wind, or moisture analysis. Caption every plot with units, filters, time convention, and the design question it answers.</p>
</li>
<li><h3>Draw three responses</h3>
<p>Use the seven lenses to develop a plan, a section, and an envelope or landscape detail. Tie each response to a pattern in the evidence and name its tradeoff.</p>
</li>
<li><h3>Compare and stress-test</h3>
<p>Define an equal-program baseline and a performance metric for each response. Test one seasonal failure condition and one documented future or extreme-weather scenario.</p>
</li>
</ol>
<a class="button button-outline" href="./assets/climate-study.md" download>Download the study brief ↓</a>
<p class="caption">Suggested studio exercise; grading, deadline, and submission requirements are set by the instructor.</p>
</section>
<section class="reader-section references-section" id="references" aria-labelledby="references-title">
<p class="eyebrow">SOURCES & MODEL NOTES</p><h2 id="references-title">Keep the assumptions visible.</h2>
<p>Course sources: Timur Dogan, <em>DesignPrinciples-converted_2</em> (2020), and ES1 lecture 4, <em>Climate analysis and vernacular design strategies</em>. The climate-family drawings are newly drawn SVGs that expand and qualify the original principles. The campus station image is used with its original authors credited above.</p>
<ol class="source-list">
<li><span>S. V. Szokolay, <em>Introduction to Architectural Science: The Basis of Sustainable Design</em>, 3rd ed. (Routledge, 2014), section 1.3 Climate</span><span>Measured climate elements, presentation of climatic data, degree-days, Köppen–Geiger, and the four climate types after Atkinson (1953).</span></li>
<li><span>N. Lechner, <em>Heating, Cooling, Lighting: Sustainable Design Methods for Architects</em>, 4th ed. (Wiley, 2015), chapter 5 Climate</span><span>Climate drivers, the six microclimate factors, urban heat islands, and climate anomalies; the Key West, Lugano, asphalt, and wall-irradiation figures quoted above.</span></li>
<li><span>I. Beausoleil-Morrison, <em>Fundamentals of Building Performance Simulation</em> (Routledge, 2021), chapter 8</span><span>Weather files and their limitations; choosing typical, actual, and extreme years.</span></li>
<li><span>L. Heschong, <em>Thermal Delight in Architecture</em> (MIT Press, 1979), quoting J. M. Fitch; H. Fathy, <em>Natural Energy and Vernacular Architecture</em> (University of Chicago Press, 1986)</span><span>Vernacular precedents: the igloo and the windcatcher.</span></li>
<li><a href="https://koeppen-geiger.vu-wien.ac.at/" target="_blank" rel="noreferrer">F. Rubel and M. Kottek (2010), observed and projected climate shifts 1901-2100 depicted by world maps of the Köppen–Geiger classification</a><span><em>Meteorologische Zeitschrift</em> 19, 135-141.</span></li>
<li><a href="https://climate.onebuilding.org/" target="_blank" rel="noreferrer">Climate.OneBuilding.org — building simulation weather data</a><span>The six bundled files are SRC-TMYx typical years for 2009-2023 at Fairbanks, Ithaca, San Francisco, Denver, Phoenix, and Miami; Ithaca acquired October 22, the others October 26, 2026. Their headers identify NCEI ISD / ERA5 source data. Source archive links and checksums are in assets/weather/README.md.</span></li>
<li><a href="https://www.solemma.com/climatestudio" target="_blank" rel="noreferrer">Solemma — ClimateStudio</a><span>The monthly diurnal average and hourly heatmap views in section 05 follow the layout of its climate analysis panel.</span></li>
<li><a href="https://github.com/NatLabRockies/EnergyPlus/blob/v24.2.0/doc/auxiliary-programs/src/weather-converter-program/energyplus-weather-file-epw-data-dictionary.tex" target="_blank" rel="noreferrer">EnergyPlus — EPW data dictionary source</a><span>Field order, units, interval conventions, source flags, and missing-value codes. Documentation is also available in the <a href="https://bigladdersoftware.com/epx/docs/26-1/auxiliary-programs/auxiliary-programs.html" target="_blank" rel="noreferrer">EnergyPlus documentation mirror</a>.</span></li>
<li><a href="https://digital.library.unt.edu/ark:/67531/metadc898522/" target="_blank" rel="noreferrer">NREL — Users Manual for TMY3 Data Sets (2008)</a><span>Typical-year construction and interpretation. A typical-year file does not establish extreme-event performance.</span></li>
<li><a href="https://basc.pnnl.gov/resource-guides/passive-and-low-energy-cooling" target="_blank" rel="noreferrer">PNNL / DOE — Passive and Low-Energy Cooling</a><span> Climate-dependent cooling mechanisms, solar control, night ventilation, and the limits of passive moisture control.</span></li>
</ol>
<details class="method-detail"><summary>Reader calculations and limits</summary><p>All analysis runs locally. Each bundled file has 8,760 hourly records; Ithaca is built into the page and the other five load on demand. The parser accepts full 8,760/8,784-hour calendar years with one record per hour, a consistent minute field of 0 or 60, and one data period. Missing codes and values outside the supported EPW ranges become unavailable, rather than zero. Temperature and wind means exclude unavailable values; degree-days require complete daily temperatures and solar totals require complete radiation records.</p>
<p>The diurnal curves average by calendar month and end-of-hour slot; the hourly heatmap plots every record without averaging. Plotted interval midpoints are a display convention. Wind sectors use valid speed and direction, with a calm threshold of 0.5 m/s; calm hours need no direction. No terrain correction, facade irradiation, indoor heat balance, airflow, psychrometric comfort boundary, or energy simulation is calculated here. Percentiles describe the active weather file, rather than design return periods.</p>
<p>The seven-lens principles describe mechanisms and questions to test. They are schematic, not construction details. Site investigation and project-specific calculations determine dimensions, assemblies, drainage, structural loads, and systems.</p>
</details>
<div class="chapter-next"><span>CONNECT THE CHAPTERS</span>
<a href="./sun-paths-shading.html#profile">Use sun paths and shading devices to test the shade <span aria-hidden="true">↗</span></a>
</div>
<p class="measure"><a href="./index.html">Continue to Chapter 02: Solar geometry ↗</a></p>
<div class="reader-end"><span>ES1 / ENVIRONMENTAL SYSTEMS I</span>
<a href="#top">BACK TO TOP ↑</a>
</div>
</section>
</main>
</body>
</html>