.review-notice{font:14px/1.5 var(--sans);padding:10px 24px;text-align:center;border-bottom:1px solid var(--border)}.masthead{max-width:1200px;flex-wrap:wrap}.masthead nav{gap:18px;flex-wrap:wrap}.home-intro{text-align:center;padding-bottom:32px}.home-intro .lede{text-align:left;margin-bottom:18px}.home-art{display:block;max-width:1440px;margin:0 auto}.home-art img{display:block;width:100%;height:auto}.contained .home-art{max-width:920px;padding:0 24px}.home-doors{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:2px solid var(--jade);padding-top:26px}.home-doors a{font:30px/1.2 var(--serif)}.home-doors span{display:block;font:16px/1.5 var(--sans);color:var(--secondary);margin-top:8px}.weather-draft{font:14px/1.6 var(--sans);color:var(--secondary)}.post-list{list-style:none;padding:0}.post-list li{padding:24px 0;border-bottom:1px solid var(--border)}.post-list a{font-size:30px}.footer{padding-inline:24px}.wrap>h1{text-align:center}img{max-width:100%}@media(max-width:640px){.home-doors{grid-template-columns:1fr}.home-art img{aspect-ratio:1122/1402;object-fit:contain}.masthead nav{gap:12px}.masthead{justify-content:center}.home-intro{padding-top:36px}.contained .home-art{padding:0 16px}}

/* Moth and typographic wordmark; original art, not a replacement mark. */
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--text);white-space:nowrap;font:400 32px/1.1 var(--serif)}.brand img{width:42px;height:auto;display:block}.masthead nav a{color:var(--text);text-decoration:none;padding:9px 0;border-bottom:2px solid transparent}.masthead nav a[aria-current=page]{border-color:var(--jade)}.masthead nav a:hover{border-color:#ad7844}.inner-seal{width:80px;margin:18px auto 30px}.home-doors{gap:28px;border-top:0;max-width:1048px;margin:auto}.home-doors a{display:block;text-decoration:none;border:1px solid var(--border);padding:0 0 22px;overflow:hidden;text-align:center;color:var(--text);transition:transform .2s ease,border-color .2s ease}.home-doors a:hover,.home-doors a:focus-visible{transform:translateY(-5px);border-color:#ad7844}.home-doors .card-art{display:block;aspect-ratio:1/1;width:100%;margin:0 0 20px;background-image:url('/assets/doorway-art.webp');background-size:200% 200%;background-repeat:no-repeat;transition:filter .2s ease}.art-about{background-position:0 0}.art-porch{background-position:100% 0}.art-letters{background-position:0 100%}.art-mailbox{background-position:100% 100%}.home>.wrap:last-child{max-width:1120px}.home-doors a>span:last-child{padding:0 14px}.home-doors a:hover .card-art{filter:brightness(1.025)}@media(min-width:1100px){.home-doors{grid-template-columns:repeat(4,1fr)}}@media(max-width:640px){.brand{font-size:29px}.brand img{width:34px}.home-doors{grid-template-columns:1fr 1fr;gap:14px}.home-doors a{font-size:26px}.home-doors a>span:last-child{font-size:14px}}@media(prefers-reduced-motion:reduce){.home-doors a,.home-doors .card-art{transition:none}.home-doors a:hover,.home-doors a:focus-visible{transform:none}}

/* Transparent illustrations for the night porch. */
:root[data-theme=night] .home-doors .card-art{background-image:url("/assets/doorway-art-transparent.webp")}
@media(prefers-color-scheme:dark){:root:not([data-theme=day]) .home-doors .card-art{background-image:url("/assets/doorway-art-transparent.webp")}}

/* Optional porch utilities: no media or location request on arrival. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.porch-weather{font:15px/1.5 var(--sans);text-align:left;max-width:540px;margin:24px auto 0}.porch-weather summary{cursor:pointer;text-align:center;color:var(--secondary);padding:10px;list-style:none}.porch-weather summary::-webkit-details-marker{display:none}.porch-weather summary span{color:var(--link);margin-left:8px}.weather-panel{margin-top:12px;padding:22px;border:1px solid var(--border)}.utility-note{font:14px/1.5 var(--sans);color:var(--secondary)}.weather-controls{display:flex;gap:10px;margin:7px 0 8px}.weather-controls select{min-width:0;flex:1;font:16px var(--sans);padding:10px;border:1px solid var(--border);background:var(--ground);color:var(--text);border-radius:3px}.porch-weather button,.porch-radio button{font:14px/1.4 var(--sans);border:1px solid var(--border);background:transparent;color:var(--text);padding:10px 14px;min-height:44px;border-radius:3px;cursor:pointer}.porch-weather button:hover,.porch-radio button:hover{border-color:#ad7844}.porch-weather button:disabled{opacity:.6;cursor:wait}.porch-weather .text-button{padding-left:0;border:0;text-decoration:underline;text-underline-offset:4px;color:var(--link)}#weather-result{margin:16px 0;font:18px/1.5 var(--serif)}.porch-radio{max-width:1048px;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1.7fr;gap:40px;margin-top:12px}.eyebrow{font:12px/1.5 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--secondary);margin-bottom:12px}.radio-tracks{list-style:none;margin:0 0 22px;padding:0}.radio-tracks li{display:grid;grid-template-columns:24px 1fr auto;gap:14px;align-items:center;padding:18px 0;border-bottom:1px solid var(--border)}.radio-tracks li:first-child{padding-top:0}.track-number{font:14px var(--sans);color:var(--secondary)}.radio-tracks a{font:24px/1.2 var(--serif);color:var(--text);text-decoration:none}.radio-tracks a:hover{text-decoration:underline}.track-artist{display:block;font:14px/1.5 var(--sans);color:var(--secondary);margin-top:5px}.radio-tracks button[aria-pressed=true]{border-color:var(--jade);box-shadow:inset 0 -2px var(--jade)}.apple-player{width:100%;display:block;border:0;border-radius:10px;margin-bottom:12px}.radio-disclosure{margin-top:18px}#radio-status:empty{display:none}summary:focus-visible,select:focus-visible{outline:2px solid var(--jade);outline-offset:4px}button[hidden]{display:none}
@media(max-width:700px){.porch-radio{grid-template-columns:1fr;gap:10px;margin-inline:24px;padding-inline:0}.weather-controls{flex-wrap:wrap}.weather-controls select{flex-basis:100%}.radio-tracks li{grid-template-columns:20px 1fr;gap:10px}.radio-tracks button{grid-column:2;justify-self:start}.porch-weather{max-width:100%}}

/* Compact perched signature, with transparent edges in both themes. */
.brand{display:block;position:relative;flex:0 0 202px;width:202px;height:78px;overflow:hidden}.brand img.wordmark{position:absolute;width:220px;max-width:none;height:auto;left:-12px;top:-22px}:root[data-theme=night] .brand img.wordmark{filter:invert(.9) hue-rotate(180deg)}
@media(prefers-color-scheme:dark){:root:not([data-theme=day]) .brand img.wordmark{filter:invert(.9) hue-rotate(180deg)}}
@media(max-width:700px){.brand{flex-basis:180px;width:180px;height:69px}.brand img.wordmark{width:196px;left:-11px;top:-19px}.masthead nav{justify-content:center}}

/* Editorial rooms from Jade's September 17 handoff. */
.about-doors{margin-top:38px;border-top:2px solid var(--jade);padding-top:28px}.about-doors>p{margin-bottom:24px}.about-doors p>strong:first-child{display:block;font:400 30px/1.2 var(--serif);margin-bottom:9px}.glossary{margin:24px 0}.glossary>div{padding:24px 0;border-bottom:1px solid var(--border);scroll-margin-top:30px}.glossary dt{font:400 32px/1.2 var(--serif);margin-bottom:10px}.glossary dd{margin:0}.glossary dd p:last-child{margin-bottom:0}.mailbox-why{margin:30px 0;border-block:1px solid var(--border);padding:24px 0}.mailbox-why h2{font-size:30px}.mailbox-why p:last-child{margin:0}.house-links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 24px;margin:28px 0 0;font:15px/1.5 var(--sans)}.home>.wrap:has(.home-doors){max-width:1120px}.letter-body{font-size:23px;line-height:1.65}.letter-body>p:last-child{font-style:italic}.letter-citation{border-top:1px solid var(--border);padding-top:24px;margin-top:36px}.letter-citation h2{font-size:27px}.letter-citation p{font:16px/1.6 var(--sans)}.archive-feature{margin:35px 0}.archive-feature img{width:100%;height:auto;display:block;margin-bottom:25px}.archive-feature h2{font-size:36px}.porch-entry{margin:35px 0;border-block:1px solid var(--border);padding:28px 0}.site-map{padding-left:24px}.site-map li{padding:8px 0}.editorial h1{text-align:left}.editorial>.seal{margin-left:0;width:65px}.editorial>.rule{margin:22px 0}.editorial .letter-art{margin-inline:-32px}.editorial .letter-art figcaption{padding-inline:32px}@media(max-width:700px){.letter-body{font-size:21px}.editorial .letter-art{margin-inline:0}.editorial .letter-art figcaption{padding-inline:0}.editorial h1{font-size:44px}}

/* Lowercase wordmark uses the site's actual EB Garamond; illustration is separate. */
.masthead .brand{display:inline-flex;position:relative;align-items:center;flex:0 0 auto;width:auto;min-width:155px;height:65px;overflow:visible;padding:12px 35px 0 0;letter-spacing:-.035em}.brand-word{font:400 38px/1 var(--serif);color:var(--text);white-space:nowrap}.brand-end{display:inline-block;position:relative}.masthead .brand img.brand-moth{position:absolute;display:block;width:58px;max-width:none;height:auto;left:-10px;top:-17px;filter:none;pointer-events:none}.reply-thread{margin-top:48px;border-top:2px solid var(--jade);padding-top:28px}.reply-thread h2{font-size:32px}.reply-cta{display:inline-block;padding:10px 18px;border:1px solid var(--border);font:16px/1.5 var(--sans);text-decoration:none;color:var(--text)}.reply-cta:hover{border-color:var(--jade)}.porch-post-art{display:block;width:100%;height:auto;margin-bottom:24px}
@media(max-width:700px){.masthead .brand{min-width:145px;height:58px;padding-right:32px}.brand-word{font-size:35px}.masthead .brand img.brand-moth{width:54px;top:-16px;left:-9px}}

/* Reuse the approved watercolor doors on their own pages. */
.page-art{width:220px;max-width:60vw;aspect-ratio:1;margin:20px auto 32px;background-image:url('/assets/doorway-art-transparent.webp');background-size:200% 200%;background-repeat:no-repeat}

/* Progressive enhancement: the approved poster remains the no-motion default. */
.hero-scene{position:relative;max-width:1440px;margin:0 auto;overflow:hidden;isolation:isolate}
.hero-poster img{display:block;width:100%;height:auto}.hero-canvas{display:none;position:relative;aspect-ratio:1671/941;transform-origin:65% 55%;will-change:transform}
.hero-plate{display:block;width:100%;height:auto}.hero-scene.motion-ready .hero-poster{display:none}.hero-scene.motion-ready .hero-canvas{display:block}
.hero-flight{position:absolute;left:48.5%;top:29%;width:17%;transform-origin:50% 22%;transform:rotate(-19deg)}
.hero-moth{display:block;width:100%;height:auto;transform-origin:50% 25%;filter:drop-shadow(1px 3px 2px #17291b33)}
.residual{position:absolute;left:73%;top:15%;width:9%;aspect-ratio:1;border-radius:48% 62% 44% 58%;opacity:0;background:radial-gradient(ellipse at 45% 48%,#fff9dccc 0%,#f6e5a970 10%,#bad9bd66 25%,#8ebac340 42%,#b09bd344 58%,transparent 73%);filter:blur(3px);mix-blend-mode:screen}
.residual:after{content:'';position:absolute;inset:-20% 20% 0 -5%;border:7px solid #acd2c733;border-left-color:#c7abd344;border-radius:57% 30% 62% 37%;filter:blur(5px);transform:rotate(35deg)}
.jar-glow{position:absolute;left:59%;top:62%;width:10%;aspect-ratio:1;background:radial-gradient(ellipse,#fff1c090,#b7d5ba50 28%,#a694c638 47%,transparent 72%);opacity:0;filter:blur(5px);mix-blend-mode:screen}
.hero-scene.is-playing .hero-flight{animation:moth-arrival 6s cubic-bezier(.22,.61,.36,1) both}
.hero-scene.is-playing .hero-moth{animation:moth-wings 1.2s ease-in-out 4, moth-settle 1.2s 4.8s ease-out forwards}
.hero-scene.is-playing .residual{animation:residual-arrival 6s 0.3s ease-in-out both}
.hero-scene.is-playing .residual-two{animation-delay:1.1s;left:80%;top:4%;width:7%}.hero-scene.is-playing .residual-three{animation-delay:1.8s;left:76%;top:11%;width:6%}
.hero-scene.is-playing .jar-glow{animation:jar-wake 3s 4.8s ease-out both}
.hero-scene.is-paused *{animation-play-state:paused!important}
.hero-motion-toggle{position:absolute;right:16px;bottom:16px;background:var(--paper,#f4f0e8);color:#1c1b1a;border:1px solid #867f70;padding:8px 14px;font:14px var(--sans);border-radius:3px;z-index:2}
@keyframes moth-arrival{0%{transform:translate(-360%,-15%) rotate(13deg)}35%{transform:translate(-170%,-23%) rotate(-9deg)}68%{transform:translate(-35%,-16%) rotate(-24deg)}88%{transform:translate(1%,-2%) rotate(-17deg)}100%{transform:translate(0,0) rotate(-19deg)}}
@keyframes moth-wings{0%,100%{transform:scaleX(.94)}50%{transform:scaleX(.67)}}
@keyframes moth-settle{to{transform:scaleX(.93)}}
@keyframes residual-arrival{0%{opacity:0;transform:translate(45%,-40%) scale(.65)}22%{opacity:.95}62%{opacity:.8;transform:translate(-110%,175%) scale(.8)}85%{opacity:.5;transform:translate(-140%,280%) scale(.65)}100%{opacity:0;transform:translate(-150%,360%) scale(.35)}}
@keyframes jar-wake{from{opacity:0}to{opacity:.7}}
@media(max-width:640px){.hero-scene.motion-ready{aspect-ratio:4/5}.hero-scene.motion-ready .hero-canvas{width:222.2%;max-width:none;position:absolute;left:-91%;top:0;height:100%}.hero-plate{height:100%;object-fit:fill}.hero-flight{width:17%}.hero-motion-toggle{right:10px;bottom:10px}}
@media(prefers-reduced-motion:reduce){.hero-scene.motion-ready .hero-poster{display:block}.hero-scene.motion-ready .hero-canvas,.hero-motion-toggle{display:none!important}}

/* The approved video replaces the earlier CSS flight prototype. */
.hero-film{aspect-ratio:1276/720;background:var(--paper,#f4f0e8)}
.hero-film .hero-poster,.hero-film video{width:100%;height:100%;margin:0}
.hero-film .hero-poster img{width:100%;height:100%;object-fit:contain}
.hero-film video{display:block;object-fit:contain}
.hero-film [hidden]{display:none!important}
.hero-film .hero-motion-toggle{background:#f4f0e8;color:#1c1b1a}

/* A quiet window surround, with no bars over the artwork. */
.porch-window{box-sizing:border-box;width:calc(100% - 64px);max-width:1200px;margin:18px auto 52px;padding:10px;border:1px solid #b9ab94;border-radius:18px;background:linear-gradient(145deg,#f5efe2,#d8cebb);box-shadow:0 2px 0 #fff9 inset,0 -3px 0 #b6a48766 inset,0 18px 42px #463d2d1a,0 3px 8px #463d2d14}
.porch-window .hero-film{border:1px solid #766e5b;border-radius:8px;box-shadow:0 0 0 1px #fff6;max-width:none}
:root[data-theme=night] .porch-window{background:linear-gradient(145deg,#344039,#222a26);border-color:#59675a;box-shadow:0 2px 0 #77847440 inset,0 -3px 0 #101a1466 inset,0 18px 42px #0005}
@media(prefers-color-scheme:dark){:root:not([data-theme=day]) .porch-window{background:linear-gradient(145deg,#344039,#222a26);border-color:#59675a;box-shadow:0 2px 0 #77847440 inset,0 -3px 0 #101a1466 inset,0 18px 42px #0005}}
@media(max-width:640px){.porch-window{width:calc(100% - 24px);padding:6px;border-radius:12px;margin:8px auto 30px}.porch-window .hero-film{border-radius:5px}.porch-window .hero-motion-toggle{font-size:12px;padding:6px 9px;right:8px;bottom:8px}}

/* Watercolor editorial archive: newest feature, then square image stories. */
.porch-stories{margin-top:42px}.wrap:has(.porch-stories){max-width:1120px}.porch-feature{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;padding-bottom:40px;border-bottom:1px solid var(--border)}.porch-feature img{display:block;width:100%;height:auto;border-radius:3px}.porch-feature h2{font:400 42px/1.08 var(--serif);margin:12px 0 18px}.porch-feature h2 a{color:var(--text);text-decoration:none}.story-byline{font:14px/1.5 var(--sans);color:var(--secondary)}.porch-story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:32px 0}.porch-tile a{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:3px;background:#233b30}.porch-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.porch-tile a:after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(20,29,24,.87))}.porch-tile h2{position:absolute;bottom:0;left:0;right:0;margin:0;padding:22px;color:#f4f0e8;font:400 32px/1.1 var(--serif);z-index:1}.porch-tile a:hover img{transform:scale(1.035)}.post-watercolor{margin:32px 0 40px}.post-watercolor img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain}.porch-feature a:focus-visible,.porch-tile a:focus-visible{outline:3px solid var(--jade);outline-offset:5px}
@media(max-width:700px){.masthead{align-items:center;flex-direction:column;gap:12px}.masthead .brand{min-width:0;justify-content:center;padding-right:0;width:auto;align-self:center;margin:0}.masthead nav{display:flex;justify-content:center;gap:8px 16px;width:100%}.masthead nav button{margin:0 20%}.porch-feature{grid-template-columns:1fr;gap:20px}.porch-feature h2{font-size:36px}.porch-story-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.porch-tile h2{font-size:25px;padding:16px}}
@media(prefers-reduced-motion:reduce){.porch-tile img{transition:none}.porch-tile a:hover img{transform:none}}

.hero-film.needs-play .hero-motion-toggle{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);min-height:48px;min-width:180px;padding:12px 18px;box-shadow:0 3px 16px #0003;cursor:pointer}

/* Reduced motion stops autoplay, but never removes an explicit play choice. */
@media(prefers-reduced-motion:reduce){.hero-film .hero-motion-toggle:not([hidden]){display:block!important}}

/* Native video is always in the page; no hidden poster/video swap on phones. */
.hero-film{position:relative}.hero-film video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}.hero-film video:focus-visible{outline:2px solid var(--jade);outline-offset:2px}
.porch-feature{border:1px solid var(--border);padding:24px;gap:30px;border-radius:5px}.porch-feature img{border:1px solid var(--border)}
@media(max-width:700px){.masthead{position:relative;padding-top:25px}.masthead #theme-toggle{position:absolute;left:0;top:34px;margin:0;width:40px;height:40px;min-height:40px;padding:0;font-size:0;border:0}.masthead #theme-toggle:before{content:'☾';font-size:27px;line-height:1}.masthead #theme-toggle[aria-pressed=true]:before{content:'☀';font-size:24px}.masthead .brand{margin-bottom:8px}.porch-feature{padding:16px;gap:18px}}

/* Weather rests between the illustrated doors and porch radio. */
.weather-strip{max-width:1048px;margin:0 auto 34px;padding:24px 28px;border:1px solid var(--border);border-radius:5px;box-sizing:border-box}.weather-overview{display:flex;align-items:center;gap:22px}.weather-strip #weather-icon{font-size:44px;line-height:1;color:var(--jade)}.weather-strip h2{font:14px/1.5 var(--sans);margin:0;color:var(--secondary)}.weather-strip #weather-result{font:24px/1.4 var(--serif);margin:6px 0 0}.weather-strip .weather-options{margin:14px 0 0}.weather-strip summary{text-align:left;padding:0;color:var(--link);text-decoration:underline;text-underline-offset:4px}.weather-strip form{margin-top:15px;max-width:520px}.weather-strip>.utility-note{margin:14px 0 0;font-size:12px}@media(max-width:1100px){.weather-strip{margin-inline:24px}}@media(max-width:640px){.weather-strip{padding:20px;margin-inline:24px}.weather-overview{gap:15px;align-items:flex-start}.weather-strip #weather-result{font-size:22px}}

/* Playback controls sit outside the artwork; no browser dimming overlay. */
.film-control{display:block;margin:10px auto 0;padding:8px 16px;min-height:44px;border:0;background:transparent;color:var(--text);font:14px/1.4 var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer}.film-control[hidden]{display:none}.film-control:focus-visible{outline:2px solid var(--jade);outline-offset:2px}.film-control:disabled{cursor:wait;opacity:.7}