:root{--ink:#152f40;--blue:#234f67;--paper:#fafbf9;--accent:#c6e98d;--line:#ccd5d7}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.65}a{color:inherit}header,footer{max-width:1320px;margin:auto;padding:27px 6%;display:flex;justify-content:space-between;align-items:center}.brand{text-decoration:none;font-family:Georgia,serif;font-size:32px;display:flex;align-items:center;gap:15px}.brand span{font:12px Arial,sans-serif;letter-spacing:2px;border-left:1px solid var(--line);padding-left:15px}nav{display:flex;gap:30px}nav a{text-decoration:none;font-size:15px}nav a:hover{text-decoration:underline}.hero{display:grid;grid-template-columns:1.15fr 1fr;max-width:1320px;margin:auto;padding:42px 6% 64px;gap:50px;align-items:stretch}.eyebrow{font-size:12px;font-weight:600;letter-spacing:2px;margin:0 0 22px}h1,h2,h3{font-weight:400;line-height:1.08}h1,h2{font-family:Georgia,'Times New Roman',serif}h1{font-size:clamp(64px,7.5vw,105px);letter-spacing:-4px;margin:0 0 25px}h2{font-size:clamp(38px,4.3vw,59px);letter-spacing:-1.7px;margin:0 0 25px}h3{font-size:25px;line-height:1.25}.intro{font-size:20px;max-width:430px;line-height:1.6}.button,button{display:inline-block;background:var(--ink);color:white;padding:15px 24px;text-decoration:none;border:0;font:16px Arial,sans-serif;cursor:pointer;margin-top:20px}.hero-art{background:var(--blue);color:white;min-height:480px;display:flex;flex-direction:column;justify-content:center;padding:40px;position:relative;overflow:hidden}.house-number{font-family:Georgia,serif;font-size:clamp(95px,13vw,180px);line-height:1;letter-spacing:-8px}.hero-art p{font-size:13px;letter-spacing:3px;line-height:1.9}.rule{height:1px;background:#7696a7;width:100%;margin:16px 0}.hero-art .art-note{font-size:20px;letter-spacing:0}.ribbon{background:var(--ink);color:white;padding:21px 6%;display:flex;justify-content:center;gap:5vw;font-size:14px}.section{max-width:1162px;padding:85px 30px;margin:auto}.split{display:grid;grid-template-columns:1fr 1.25fr;gap:75px;border-bottom:1px solid var(--line)}p{margin:0 0 20px}.lead{font-size:25px;line-height:1.5}.facts{display:flex;gap:40px;border-top:1px solid var(--line);padding-top:23px;margin-top:30px;font-size:14px}.facts span{display:block;font-family:Georgia,serif;font-size:40px}.idea-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px}.index{font-size:14px;border-top:2px solid var(--ink);display:block;padding-top:15px}.idea-grid p{font-size:16px}.story{border-top:1px solid var(--line)}.garden{max-width:none;padding:75px max(8%,calc((100vw - 1102px)/2));background:var(--accent);margin:45px 0 0}.garden p:last-child{max-width:650px;font-size:21px}details{border-top:1px solid var(--line);padding:18px 0}details:last-child{border-bottom:1px solid var(--line)}summary{cursor:pointer;font-size:17px}details p{font-size:16px;margin:18px 0 0}.contact{background:var(--ink);color:white;padding:75px max(8%,calc((100vw - 1102px)/2))}.contact>p{max-width:650px}.contact-note{color:#c8d4da;font-size:15px}.contact button{background:var(--accent);color:var(--ink)}#copy-status{display:block;font-size:14px;margin-top:10px}footer p{font-size:14px;text-align:right;margin:0}.skip{position:absolute;top:-100px;background:white;padding:12px;z-index:10}.skip:focus{top:0}:focus-visible{outline:3px solid #d98a24;outline-offset:5px}@media(max-width:720px){header{padding:20px 6%;align-items:flex-start;gap:20px}.brand{font-size:29px;gap:10px}.brand span{font-size:10px;padding-left:10px;letter-spacing:1px}nav{gap:14px;flex-wrap:wrap;justify-content:flex-end}nav a{font-size:14px}.hero{grid-template-columns:1fr;padding-top:28px;gap:30px}.hero-art{min-height:290px;padding:28px}.house-number{font-size:110px}.hero-art .rule,.hero-art .art-note{display:none}h1{letter-spacing:-2px}.ribbon{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:12px}.section{padding:55px 6%}.split{grid-template-columns:1fr;gap:8px}.idea-grid{grid-template-columns:1fr;gap:15px;margin-top:25px}.facts{gap:25px}.garden{margin-top:0;padding:55px 6%}.contact{padding:55px 6%}footer{gap:25px;align-items:flex-start}footer p{font-size:12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.hero-photo{margin:0;display:flex;flex-direction:column;background:var(--ink);color:white}.hero-photo img{width:100%;height:470px;object-fit:cover;flex:1;min-height:0}.hero-photo figcaption{padding:15px 20px;font-size:13px}@media(max-width:720px){.hero-photo img{height:330px;flex:auto}}

.awning-story>p{max-width:780px}.awning-story h3{margin:52px 0 20px;font-family:Georgia,serif;font-size:32px}.awning-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:30px 0 46px}.awning-gallery figure{margin:0;min-width:0}.awning-gallery img{display:block;width:100%;height:360px;object-fit:contain;background:#e8edef}.awning-gallery figcaption{font-size:14px;line-height:1.5;margin-top:10px}.awning-gallery:has(>figure:only-child){grid-template-columns:1fr}.awning-gallery:has(>figure:only-child) img{height:500px}@media(max-width:720px){.awning-gallery{grid-template-columns:1fr}.awning-gallery img,.awning-gallery:has(>figure:only-child) img{height:auto;max-height:520px}.awning-story h3{font-size:28px}header nav{gap:10px}}

/* The story leads; three chapters hold the individual decisions. */
.hero h1{font-size:clamp(52px,6.2vw,84px);letter-spacing:-2.5px}.hero{grid-template-columns:1.1fr 1fr}.chapter{border-bottom:1px solid var(--line)}.chapter>.lead,.chapter-intro{max-width:790px}.chapter details{padding:23px 0}.chapter summary{font-size:21px;line-height:1.4}.chapter details p{max-width:800px;font-size:17px}.chapter details p+p{margin-top:16px}.efficiency{background:#eef3f5}.backyard-photo{margin:35px 0}.backyard-photo img{width:100%;max-height:570px;object-fit:cover}.backyard-photo figcaption{font-size:14px;margin-top:10px}.feature-story>.awning-story{padding-top:35px}.feature-story h2{font-size:44px}.ribbon a{text-decoration:none}.ribbon a:hover{text-decoration:underline}nav{gap:22px}.eyebrow{font-size:14px}.hero-photo figcaption{font-size:14px}details:target{scroll-margin-top:25px}.chapter summary:hover{color:var(--blue)}@media(max-width:720px){.hero{grid-template-columns:1fr}.hero h1{font-size:56px}.ribbon{grid-template-columns:1fr;font-size:14px;gap:10px}.chapter summary{font-size:19px}header{flex-wrap:wrap}header nav{justify-content:flex-start;gap:16px}.feature-story h2{font-size:36px}}