/* HOMEFRONT Compass Outdoor Nightlight Lab. Conceptual after-dark visual education.
 * No actual sightline geometry or photometric computations.
 * Text floor: 12px everywhere on this page, 14px for limits and disclaimers.
 */
.hf-nightlight{--nl-navy:var(--hf-navy,#1e3341);--nl-night:var(--hf-night,#13232e);--nl-gold:var(--hf-gold,#eaca92);--nl-brass:var(--hf-brass,#bb9259);--nl-cream:var(--hf-cream,#f4f0e8);color:var(--nl-navy);background:var(--nl-cream)}
.hf-nightlight *,.hf-nightlight *:before,.hf-nightlight *:after{box-sizing:border-box}
.hf-nightlight button{cursor:pointer;font:inherit}
.hf-nightlight :is(h1,h2,h3,h4){text-wrap:balance}.hf-nightlight p{text-wrap:pretty}
.hf-nightlight [hidden]{display:none!important}
.hf-nightlight :is(a,button):focus-visible{outline:3px solid #1e3341;outline-offset:3px}
.hf-nightlight :is(.nl-hero,.nl-illustration,.nl-sources) :is(a,button):focus-visible{outline-color:#ffe1ae}
.hf-nightlight .eyebrow{font-size:12px;letter-spacing:.14em}
.nl-hero .hf-crumb{font-size:12px}
.nl-hero{background:linear-gradient(135deg,#0c1d32,#1a3545 61%,#273f52);color:#f4f0e8}
.nl-hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:7%;align-items:center;padding-block:113px 90px}
.nl-hero .hf-crumb,.nl-hero .hf-crumb a{color:#e5e9e6}
.nl-hero .eyebrow{margin-top:42px;color:#eaca92}
.nl-hero h1{font:500 clamp(52px,6.1vw,90px)/1.02 Editorial,Georgia,serif;letter-spacing:-.035em;margin:18px 0 26px}
.nl-hero h1 em{color:#eaca92;font-style:normal}
.nl-hero p:not(.eyebrow){font:400 16px/1.82 Manrope,Arial,sans-serif;max-width:580px;color:#e6e7e3}
.nl-hero-button{display:inline-flex;gap:37px;align-items:center;padding:13px 22px;background:#eaca92;color:#122d3b;border-radius:24px;font:700 12px Manrope,Arial,sans-serif;text-decoration:none;min-height:46px;margin-top:27px}
.nl-hero .nl-hero-note{margin-top:27px;font:700 12px/1.65 Manrope,Arial,sans-serif!important;letter-spacing:.1em;color:#eaca92!important}
.nl-hero-art{height:387px;position:relative;overflow:hidden;border:1px solid #bfa57a8f;background:#142d42;box-shadow:17px 19px 0 #07182c91}
.nl-hero-sky{height:60%;position:relative;background:linear-gradient(#0e233a,#29425e)}
.nl-hero-sky span{position:absolute;right:19%;top:23%;border-radius:100%;width:51px;height:51px;background:#ddd6ba;box-shadow:0 0 40px #dcd4a155}
.nl-hero-sky i{position:absolute;width:3px;height:3px;border-radius:100%;background:#eaca92}
.nl-hero-sky i:nth-child(2){top:18%;left:23%}.nl-hero-sky i:nth-child(3){top:38%;left:47%}.nl-hero-sky i:nth-child(4){top:26%;left:73%}
.nl-hero-garden{position:absolute;bottom:0;left:0;right:0;height:41%;background:linear-gradient(#254b44,#162d34);display:flex;align-items:center;justify-content:space-evenly}
.nl-hero-garden b{width:21%;height:74%;background:linear-gradient(#44634e,#193f38);border-radius:50% 50% 0 0;border:1px solid #708274}
.nl-hero-garden b:nth-child(2){height:92%;box-shadow:0 0 35px #f5dba05d}
.nl-hero-art>small{position:absolute;bottom:15px;left:20px;color:#e6ca8e;font:700 12px Manrope,Arial,sans-serif;letter-spacing:.1em}
.nl-preface{display:grid;grid-template-columns:.2fr .34fr .46fr;gap:25px;padding-block:78px 86px}
.nl-preface>.eyebrow{color:#865f31}
.nl-preface h2,.nl-lab-heading h2,.nl-reading-header h2,.nl-sources h2{font:500 clamp(38px,4.5vw,61px)/1.08 Editorial,Georgia,serif;letter-spacing:-.028em;margin:0}
.nl-preface>p:last-child{font:400 16px/1.8 Manrope,Arial,sans-serif;color:#425461;margin:0}
.nl-preface>p:last-child a{color:#1e3341}
.nl-lab{background:#ece5d9;padding-block:83px 103px}
.nl-lab-heading{max-width:830px}
.nl-lab-heading .eyebrow{color:#6f5131}
.nl-lab-heading h2{margin:15px 0}
.nl-lab-heading>p:last-child{font:400 15px/1.8 Manrope,Arial,sans-serif;color:#425461}
.nl-view-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:36px 0 18px}
.nl-view-buttons button{background:#faf6ed;border:1px solid #c6b9a8;color:#1e3341;padding:19px;text-align:left;min-height:132px;display:flex;flex-direction:column;gap:10px}
.nl-view-buttons button:hover{border-color:#8c6d47}
.nl-view-buttons button[aria-pressed=true]{background:#e4d2b4;border-color:#9c723b;box-shadow:inset 0 0 0 2px #bb9259}
.nl-view-buttons small{font:700 12px Manrope,Arial,sans-serif;letter-spacing:.1em;color:#6b4e2c}
.nl-view-buttons strong{font:500 27px/1.1 Editorial,Georgia,serif}
.nl-view-buttons span{font:400 13px/1.6 Manrope,Arial,sans-serif;color:#425461}
.nl-view-buttons button[aria-pressed=true] small{color:#5c4226}
.nl-view-buttons button[aria-pressed=true] span{color:#33424c}
.nl-exhibit{display:grid;grid-template-columns:1.06fr .94fr;border:1px solid #a58d67;min-height:577px}
.nl-illustration{background:linear-gradient(135deg,#152b3a,#0c1b2e);color:#f4f0e8;margin:0;padding:27px;display:flex;flex-direction:column;min-width:0}
.nl-model-label{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;font:700 12px/1.5 Manrope,Arial,sans-serif;letter-spacing:.08em;color:#eaca92}
.nl-yard{position:relative;max-width:640px;width:100%;height:375px;margin:auto;background:linear-gradient(125deg,#1d3b42,#1b3346);border:1px solid #7d9d988a;overflow:hidden;isolation:isolate}
.nl-sky-stars{position:absolute;inset:0;pointer-events:none}
.nl-sky-stars i{position:absolute;width:3px;height:3px;background:#e8d5a9;border-radius:50%}
.nl-sky-stars i:nth-child(1){top:10%;left:20%}.nl-sky-stars i:nth-child(2){top:28%;left:56%}.nl-sky-stars i:nth-child(3){top:61%;left:12%}.nl-sky-stars i:nth-child(4){top:79%;left:86%}.nl-sky-stars i:nth-child(5){top:15%;left:85%}
.nl-neighbor{position:absolute;right:3%;top:8%;width:24%;height:28%;border:2px solid #758b96;background:#263c51;display:flex;justify-content:center;align-items:start;padding-top:12px;color:#e8e7d9;font:700 12px Manrope,Arial,sans-serif;letter-spacing:.04em}
.nl-neighbor i{position:absolute;top:42%;width:51%;height:38%;background:#314c5b;border:2px solid #b2aaa0}
.nl-fence{position:absolute;right:29%;top:0;bottom:0;border-right:3px dashed #bdb29d83}
.nl-fence span{position:absolute;bottom:9px;left:6px;writing-mode:vertical-rl;color:#e5d09e;font:700 12px Manrope,Arial,sans-serif;letter-spacing:.06em}
.nl-home{position:absolute;left:4%;bottom:7%;width:30%;height:43%;display:flex;justify-content:center;align-items:center;background:#334f5d;border:3px solid #a6b7b1;font:700 12px Manrope,Arial,sans-serif;letter-spacing:.08em}
.nl-walk{position:absolute;left:33%;bottom:5%;width:12%;height:57%;border:2px solid #a1a48e;background:#405e56;color:#dce2d5;writing-mode:vertical-rl;font:700 12px Manrope,Arial,sans-serif;letter-spacing:.08em;display:flex;align-items:center;justify-content:center}
.nl-patio{position:absolute;left:48%;bottom:9%;width:19%;height:39%;background:#435450;border:1px dashed #b7a77e;display:flex;align-items:center;justify-content:center;color:#e2d5b9;font:700 12px Manrope,Arial,sans-serif;letter-spacing:.06em}
.nl-yard :is(.nl-neighbor,.nl-home,.nl-walk,.nl-patio)>span{position:relative;z-index:6;background:#0f1f29e6;padding:2px 5px;border-radius:2px}
.nl-fence span{z-index:6;background:#0f1f29e6;padding:5px 2px;border-radius:2px}
.nl-lamp{position:absolute;left:45%;top:37%;width:19px;height:19px;border-radius:50%;border:3px solid #d4aa65;background:#f2ddb1;z-index:4;transition:transform .25s}
.nl-lamp:before{position:absolute;content:"";left:5px;top:17px;height:29px;width:2px;background:#d9bb80}
.nl-light-pool{position:absolute;left:44%;top:36%;width:61%;height:76%;border-radius:50%;background:radial-gradient(ellipse at 22% 37%,#ffdd9182,transparent 71%);transform:translate(-19%,-11%);z-index:3;pointer-events:none;opacity:.92;transition:width .25s,height .25s,transform .25s,background .25s}
.nl-yard[data-mode="target"] .nl-light-pool{width:39%;height:49%;transform:translate(-3%,8%);background:radial-gradient(ellipse at 30% 30%,#f4d28c93,transparent 67%)}
.nl-yard[data-view="patio"] .nl-lamp{left:50%;top:50%}
.nl-yard[data-view="patio"] .nl-light-pool{left:47%;top:47%}
.nl-yard[data-view="neighbor"] .nl-lamp{left:58%;top:33%}
.nl-yard[data-view="neighbor"] .nl-light-pool{left:53%;top:28%}
/* Targeted light lands where each view's text says: on the path, on the patio, and on the home side of the fence. */
.nl-yard[data-view="entry"][data-mode="target"] .nl-light-pool{left:27%;top:38%;width:24%;height:56%;transform:none;background:radial-gradient(ellipse at 50% 45%,#f4d28c93,transparent 67%)}
.nl-yard[data-view="patio"][data-mode="target"] .nl-light-pool{left:46%;top:50%;width:23%;height:44%;transform:none;background:radial-gradient(ellipse at 50% 45%,#f4d28c93,transparent 67%)}
.nl-yard[data-view="neighbor"][data-mode="target"] .nl-light-pool{left:50%;top:34%;width:18%;height:40%;transform:none;background:radial-gradient(ellipse at 50% 40%,#f4d28c93,transparent 67%)}
.nl-yard[data-view="entry"] .nl-walk{outline:3px solid #eaca92}
.nl-yard[data-view="patio"] .nl-patio{outline:3px solid #eaca92}
.nl-yard[data-view="neighbor"] .nl-neighbor{outline:3px solid #eaca92}
.nl-sightline{display:none;position:absolute;right:14%;top:28%;width:47%;border-top:2px dashed #eaca92;transform:rotate(22deg);transform-origin:100% 0;z-index:4;pointer-events:none}
.nl-yard[data-view="neighbor"] .nl-sightline{display:block}
.nl-lamp-label{position:absolute;left:43%;top:29%;color:#fff0cd;font:700 12px Manrope,Arial,sans-serif;letter-spacing:.06em;z-index:6;background:#0f1f29e6;padding:1px 5px;border-radius:2px;transform:translateX(-30%)}
.nl-yard[data-view="patio"] .nl-lamp-label{left:48%;top:42%}
.nl-yard[data-view="neighbor"] .nl-lamp-label{left:auto;right:44%;top:30%;transform:none}
.hf-nightlight .nl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nl-illustration figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;color:#eaca92;font:700 12px/1.6 Manrope,Arial,sans-serif;letter-spacing:.08em;margin-top:14px}
.nl-illustration figcaption small{font:500 12px/1.6 Manrope,Arial,sans-serif;letter-spacing:.04em;color:#e5e2d2}
.nl-panel{background:#f8f5ef;padding:clamp(29px,3.5vw,47px);min-width:0}
.nl-panel .eyebrow{color:#6f5131}
.nl-panel h3{font:500 clamp(36px,3.7vw,51px)/1.12 Editorial,Georgia,serif;margin:18px 0}
.nl-subtitle{font:400 16px/1.7 Manrope,Arial,sans-serif;color:#425461}
.nl-mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:26px 0}
.nl-mode-buttons button{min-height:48px;padding:12px 14px;border:1px solid #a58d67;background:#fdf9f2;color:#1e3341;text-align:left;font:700 13px/1.4 Manrope,Arial,sans-serif!important;letter-spacing:.03em}
.nl-mode-buttons button[aria-pressed=true]{background:#e5d3b2;border-color:#6f5131;box-shadow:inset 0 0 0 1px #6f5131}
.nl-difference{background:#ebe3d6;padding:20px;border-left:3px solid #bb9259}
.nl-difference .eyebrow{color:#5f4527!important}
.nl-difference h4{font:500 25px/1.2 Editorial,Georgia,serif;margin:12px 0}
.nl-difference p:not(.eyebrow){font:400 15px/1.7 Manrope,Arial,sans-serif;color:#3d4c56}
.nl-explanation{font:400 16px/1.75 Manrope,Arial,sans-serif;color:#2f3f4a;margin-top:23px}
.nl-status{margin:16px 0 0;font:600 14px/1.6 Manrope,Arial,sans-serif;color:#3d4c56}
.nl-limit{margin-top:20px;padding-top:15px;border-top:1px solid #d7c8b5}
.nl-limit strong{color:#6f5131;font:700 12px Manrope,Arial,sans-serif;letter-spacing:.08em}
.nl-limit p,.nl-reflection{font:400 14px/1.75 Manrope,Arial,sans-serif;color:#425461}
.nl-reflection{margin-top:12px}
.nl-panel>a{display:inline-block;color:#6b4e2c;font:700 14px Manrope,Arial,sans-serif;margin-top:13px;padding-block:4px}
.nl-local{font:400 14px/1.75 Manrope,Arial,sans-serif;color:#425461;margin-top:20px;max-width:900px}
.nl-nojs{background:#fff5de;color:#1e3341;padding:20px}
.nl-reading{padding-block:97px 102px}.nl-reading-header{max-width:780px}.nl-reading-header h2{margin:16px 0}
.nl-reading-header>p:not(.eyebrow){font:400 15px/1.8 Manrope,Arial,sans-serif;color:#425461}
.nl-reading-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:36px}
.nl-reading-card{border:1px solid #d9d0c3;background:#faf7f1;padding:28px}
.nl-reading-card h3{font:500 28px/1.15 Editorial,Georgia,serif;margin:15px 0}
.nl-reading-card .eyebrow{color:#6b4e2c}
.nl-reading-card>p:not(.eyebrow){font:400 15px/1.75 Manrope,Arial,sans-serif;color:#3d4c56;margin:0 0 12px}
.nl-reading-card strong{display:block;margin:15px 0;color:#5f4527;font:600 14px/1.7 Manrope,Arial,sans-serif}
.nl-reading-card a{display:inline-block;margin-top:17px;color:#6b4e2c;font:700 14px Manrope,Arial,sans-serif;padding-block:4px}
.nl-sources{background:#142b39;color:#f4f0e8;padding-block:90px 75px}
.nl-sources .eyebrow{color:#eaca92}
.nl-sources h2{margin:15px 0 36px}
.nl-source-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.nl-source-grid a{padding:24px;background:#294653;color:#f4f0e8;border:1px solid #eaca9269;display:flex;flex-direction:column;gap:15px;text-decoration:none}
.nl-source-grid strong{font:650 15px/1.5 Manrope,Arial,sans-serif}
.nl-source-grid span{font:400 14px/1.7 Manrope,Arial,sans-serif;color:#dbe4e5}
.nl-source-grid b{font:700 16px Manrope,Arial,sans-serif;color:#eaca92}
.nl-disclaimer{margin-top:30px;padding-top:22px;border-top:1px solid #eaca9255;max-width:910px;font:400 15px/1.75 Manrope,Arial,sans-serif;color:#dbe4e5}
.nl-sources nav{display:flex;flex-wrap:wrap;gap:12px 24px;margin:25px 0}.nl-sources nav a{color:#eaca92;font:700 14px Manrope,Arial,sans-serif;text-decoration:none;padding-block:4px}
.nl-sources small{font:400 13px Manrope,Arial,sans-serif;color:#ccd8dc}
@media(max-width:1070px){.nl-hero-grid,.nl-exhibit{grid-template-columns:1fr}.nl-hero-grid{padding-block:94px 68px}.nl-hero-art{height:310px;margin-top:45px;max-width:620px}.nl-preface{grid-template-columns:1fr 1fr}.nl-preface .eyebrow{grid-column:1/-1}.nl-reading-grid,.nl-source-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.nl-hero-grid{padding-block:82px 57px}.nl-hero h1{font-size:clamp(44px,11vw,65px)}.nl-hero-art{height:221px}.nl-preface{display:block;padding-block:58px}.nl-preface h2{margin:15px 0}.nl-lab{padding-block:62px 68px}.nl-view-buttons{grid-template-columns:1fr;gap:8px}.nl-view-buttons button{min-height:85px;padding:15px;gap:5px}.nl-view-buttons strong{font-size:22px}.nl-illustration{padding:17px}.nl-yard{height:279px}.nl-neighbor{width:27%;padding-top:8px;letter-spacing:0}.nl-panel{padding:26px 21px}.nl-mode-buttons button{font-size:12px!important;padding:10px 12px;min-height:48px}.nl-reading{padding-block:65px}.nl-reading-grid,.nl-source-grid{grid-template-columns:1fr}.nl-sources{padding-block:65px}}
@media(max-width:350px){.nl-yard{height:250px}.nl-neighbor{width:27%}.nl-mode-buttons{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.hf-nightlight *,.hf-nightlight *:before,.hf-nightlight *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.nl-hero,.nl-lab{display:none!important}.nl-reading-grid{display:block}.nl-reading-card{break-inside:avoid;margin-bottom:16px}.nl-sources{background:white;color:#111}.nl-source-grid a{color:#111;background:white}}