/* Layout-only proposal. Original background and locked sprite files are unchanged. */
@media(min-width:601px){
 .glass-nav{top:0!important}
 header{left:0!important;top:0!important;transform:none!important;right:auto!important}
 header .name{left:8px;top:6px;font-size:20px}
 header #envLabel{position:absolute;left:8px;top:34px;font-size:12px}
 header .status{left:8px;top:53px;font-size:14px}
 main{left:64px!important;top:126px!important;transform:none!important;max-width:min(600px,55vw)!important}
 main .hey{font-size:24px;margin-bottom:14px}
 main h1{font-size:92px;line-height:.88;margin-bottom:22px}
 main h2{font-size:28px;margin-bottom:10px}
 main .tags{font-size:18px;word-spacing:3px}
 main blockquote{font-size:20px;line-height:1.35;margin-top:23px;padding-left:20px}
 main .actions{font-size:18px;gap:30px;margin-top:26px}
 main .actions .primary{padding:12px 24px}
 #sideCaption{left:59vw!important;top:145px!important;font-size:20px!important}
 #cornerQuote{left:auto!important;right:40px!important;top:auto!important;bottom:142px!important;font-size:18px!important}
 .settings-trigger.desktop-paw{top:0!important;right:16px!important}
 #oreo-home{top:var(--oreo-y,88px)!important;right:28px!important}
 .settings-panel{top:280px!important;max-height:calc(100vh - 296px)!important;right:16px!important;width:min(440px,40vw)!important}
 .header-clear-zone{display:none!important}
}
@media(min-width:601px) and (max-height:899px){
 :root .scroll-section{padding-top:150px!important;padding-bottom:270px!important;overflow-y:auto;overscroll-behavior:auto;scrollbar-width:none}
 :root .scroll-section h1{font-size:78px!important;margin-bottom:16px!important}
 :root .scroll-section .hey{font-size:22px!important;margin-bottom:10px!important}
 :root .scroll-section h2{font-size:25px!important}
 :root .scroll-section blockquote{font-size:19px!important;margin-top:20px!important}
 :root .scroll-section .actions{font-size:18px!important;margin-top:24px!important}
 main{top:112px!important}main h1{font-size:82px;margin-bottom:17px}main .hey{font-size:22px;margin-bottom:10px}main h2{font-size:25px}main blockquote{margin-top:19px;font-size:19px}main .actions{margin-top:22px}
}
@media(max-width:600px){
 .glass-nav{top:0!important}
 header{left:0!important;top:66px!important;transform:none!important}
 header .name{left:8px;top:0;font-size:19px}
 header #envLabel{position:absolute;left:8px;top:26px;font-size:11px}
 header .status{left:8px;top:44px;font-size:13px}
 main{top:177px!important}
 .settings-panel{top:210px!important;max-height:calc(100vh - 226px)!important}
}
/* Keep the secondary line below, never across, the phone action row. */
@media(max-width:600px){#sideCaption{left:auto!important;right:28px!important;top:550px!important;font-size:16px!important}}
@media(max-width:360px){#sideCaption{top:558px!important;right:24px!important}.glass-nav a{font-size:13px!important;letter-spacing:0}}
/* Tablet bridge: identity sits below navigation until there is room for both. */
@media(min-width:601px) and (max-width:1000px){
 .glass-nav{left:8px!important;right:auto!important;transform:none!important;width:calc(100% - 168px)!important;max-width:500px!important;gap:0!important}
 .glass-nav a{font-size:18px!important;padding:0 9px!important;flex:1;min-width:0!important}
 header{top:76px!important}header .name{top:0}header #envLabel{top:28px}header .status{top:47px}
 main{top:188px!important;left:32px!important;max-width:65vw!important}
 main h1{font-size:76px}
 #sideCaption{left:auto!important;right:32px!important;top:570px!important;font-size:18px!important}
 .settings-panel{width:min(440px,calc(100vw - 32px))!important}
}
@media(min-width:601px) and (max-width:720px){.glass-nav a{font-size:17px!important;padding:0 5px!important}main h1{font-size:68px}main .tags{font-size:16px}main blockquote{font-size:18px}main .actions{gap:20px;font-size:16px}}
@media(max-width:1000px){#cornerQuote{bottom:100px!important}}
@media(max-width:600px){.capsule button{font-size:14px!important;padding-left:2px!important;padding-right:2px!important}}
@media(max-width:360px){.capsule{padding:3px!important}.capsule button{font-size:12px!important;padding-left:0!important;padding-right:0!important}#cornerQuote{bottom:112px!important}}

@media(max-width:600px){.glass-nav{top:0!important;width:calc(100% - 16px)!important;padding:4px!important}.glass-nav a{font-size:16px!important;padding:0 5px!important;min-width:0!important;flex:1 1 0}.glass-nav .settings-trigger{min-width:40px!important;width:40px!important;margin-left:0!important}}
@media(max-width:360px){.glass-nav a{font-size:14px!important;padding:0 3px!important}}

/* Oreo sits to the left of the ceiling paw, then returns to the right mini lane on scroll. */
#oreo-home,#oreo-home.evening-sitting:not(.is-companion),#oreo-home.is-companion,#oreo-home.evening-sitting.is-walking:not(.is-companion){right:var(--oreo-right,52px)!important;top:var(--oreo-y,0px)!important}
@media(min-width:1001px){.settings-panel{top:174px!important;max-height:calc(100dvh - 190px)!important}}
@media(min-width:601px) and (max-width:1000px){.settings-panel{top:242px!important;max-height:calc(100dvh - 258px)!important}.glass-nav{width:calc(100% - 86px)!important}}
@media(max-width:600px){#oreo-home,#oreo-home.evening-sitting:not(.is-companion),#oreo-home.is-companion,#oreo-home.evening-sitting.is-walking:not(.is-companion){right:var(--oreo-right,66px)!important;top:var(--oreo-y,66px)!important}.settings-panel{top:190px!important;max-height:calc(100dvh - 206px)!important}}
/* CSS zoom scales vw units twice in Chromium; cap the scene to its containing block. */
.scene{max-width:100%!important}
/* Labels size against the actual bar, including CSS zoom, not the viewport. */
@media(max-width:600px){.glass-nav{container-type:inline-size}.glass-nav a{font-size:clamp(10px,3.65cqw,16px)!important;white-space:nowrap}}
/* Decorative captions use measured free space rather than two competing fixed offsets. */
#sideCaption{top:var(--caption-top,145px)!important}
#cornerQuote{top:var(--quote-top,auto)!important;bottom:var(--quote-bottom,142px)!important}
@media(max-width:600px){#sideCaption{font-size:14px!important;line-height:1.2!important}#cornerQuote{font-size:14px!important;line-height:1.2!important}}
@media(max-width:600px){
 main{container-type:inline-size}
 main .tags{white-space:normal;line-height:1.3;overflow-wrap:anywhere}
 main .actions{gap:12px;font-size:clamp(12px,5cqw,16px)}
 main .actions a{flex:1;min-width:0}
 main .actions .primary{padding:12px 14px}
 header{width:calc(100% - 180px)!important}
 header .name{white-space:normal;line-height:1;max-width:100%}
 header #envLabel{top:40px!important}
 header .status{top:56px!important}
}
/* Speech occupies its own upper lane on phones, never a bottom CTA toast. */
@media(max-width:600px){
 main{top:245px!important}
 #oreo-home:not(.is-companion) #oreo-bubble:not([hidden]),#oreo-home.evening-sitting:not(.is-companion) #oreo-bubble:not([hidden]){position:fixed!important;inset:62px 126px auto 14px!important;width:auto!important;max-width:none!important;min-height:48px;font-size:15px!important;line-height:1.25!important;padding:9px 12px!important}
}

/* Android cold-font and scaled-text safety. Same typefaces, art and palette. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.study-scrolled #sideCaption,body.study-scrolled #cornerQuote{visibility:hidden!important}
@media(max-width:600px){
 :root main h1{font-size:clamp(40px,17cqw,64px);line-height:.9;max-width:100%}
 :root main h1>span:first-child{white-space:nowrap}
 :root .scroll-section{padding-top:185px!important;padding-bottom:190px!important;overflow-y:auto;overscroll-behavior:auto;scroll-padding-top:20px;max-width:none!important;width:calc(100% - 50px);height:100dvh!important;overflow-wrap:break-word}
 :root .scroll-section h1{font-size:clamp(38px,15vw,64px);overflow-wrap:anywhere}
 :root #oreo-home#oreo-home{top:66px!important;right:12px!important;width:88px!important;height:88px!important}
 body.study-scrolled header .identity{visibility:hidden!important}

 :root .settings-panel{top:70px!important;bottom:auto!important;max-height:calc(100dvh - 82px - env(safe-area-inset-bottom))!important;width:calc(100% - 24px)!important;right:12px!important;padding:18px!important;overflow:auto!important;overscroll-behavior:contain;scrollbar-gutter:stable}
 :root .settings-panel .capsule{display:flex!important;container-type:inline-size;width:100%;min-width:0}
 :root .settings-panel .capsule button{flex:1 1 0;min-width:0;font-size:clamp(10px,4.2cqw,14px)!important;white-space:nowrap;padding:9px 0!important}
 .settings-panel .motion-row>span{min-width:0;overflow-wrap:anywhere}.settings-panel .motion-row input{flex-shrink:0;margin-left:10px}
}
@media(max-width:600px){
 :root .settings-panel:before,:root .settings-panel:after{display:none!important}
 :root #oreo-home #oreo-bubble:not([hidden]){position:fixed!important;inset:78px 112px auto 12px!important;width:auto!important;max-width:none!important;max-height:80px!important;min-height:0!important;overflow:auto!important;font-size:14px!important;line-height:1.15!important;padding:8px 10px!important}
 body:has(#oreo-bubble:not([hidden])) header .identity{visibility:hidden!important}

}
@media(max-width:600px){
 :root #oreo-home#oreo-home #oreo-bubble:not([hidden]){position:fixed!important;inset:78px 112px auto 12px!important;width:auto!important;max-width:none!important;max-height:80px!important;min-height:0!important;overflow:auto!important;line-height:1.15!important;padding:8px 10px!important}
}
/* Preview: retain the locked glass/grain and reserve Oreo's visible lane. */
@media(max-width:600px){
 :root[data-env] .settings-panel{top:170px!important;max-height:calc(100dvh - 182px - env(safe-area-inset-bottom))!important;background-color:var(--glass)!important;background-image:url(fine-glass-grain-subtle.png)!important;background-repeat:repeat!important;background-size:128px 128px!important}
 :root body:has(.settings-panel.open) #oreo-home{visibility:visible!important;z-index:60!important}
 body:has(.settings-panel.open) main,body:has(.settings-panel.open) .scroll-section,body:has(.settings-panel.open) #sideCaption,body:has(.settings-panel.open) #cornerQuote{visibility:hidden!important}
 body:has(.settings-panel.open) #oreo-bubble{display:none!important}
}
/* Preview: inner content scrolls above, never through, the locked skyline. */
@media(max-width:600px){:root .scroll-section{box-sizing:border-box!important;height:100dvh!important;padding-bottom:30px!important;scrollbar-gutter:stable}}

/* Phone Oreo lane: show the locked pixels larger without navbar/menu collisions. */
@media(max-width:600px){
 :root body #oreo-home#oreo-home{width:166px!important;height:132px!important;top:66px!important;right:12px!important}
 :root[data-env] .settings-panel{top:210px!important;max-height:calc(100dvh - 222px - env(safe-area-inset-bottom))!important}
 :root body #oreo-home #oreo-poster{width:100%!important;height:100%!important;left:0!important;top:0!important;object-fit:contain!important}
 :root[data-env=night] body #oreo-home #oreo-poster{width:205.05px!important;height:205.05px!important;left:-19.52px!important;top:-30.33px!important;object-fit:contain!important}
}

/* One visible-height target for every menu-open pose, not its transparent canvas. */
@media(max-width:600px){
 :root body:has(.settings-panel.open) #oreo-home#oreo-home{width:min(280px,calc(100vw - 24px))!important;height:132px!important}
 body:has(.settings-panel.open) header .identity{visibility:hidden!important}
}

/* Phone geometry stays consistent when leaving the menu too. */
@media(max-width:600px){
 :root body #oreo-home#oreo-home{width:240px!important;height:96px!important}
 :root body:has(.settings-panel.open) #oreo-home#oreo-home{width:min(280px,calc(100vw - 24px))!important;height:132px!important}
 :root body #oreo-home .oreo-z{display:block!important;left:5%!important;top:60%!important;font-size:20px!important;animation:oreo-phone-z 2.6s ease-out forwards!important}
 :root body #oreo-home#oreo-home #oreo-bubble:not([hidden]){inset:174px 12px auto 12px!important;max-height:60px!important}
 @keyframes oreo-phone-z{0%{opacity:0;transform:translate(0,8px) scale(.8)}15%,68%{opacity:1}100%{opacity:0;transform:translate(12px,-28px) scale(1.15)}}
}
/* Keep the desktop menu from covering the active Oreo player. */
@media(min-width:601px) and (max-width:1799px){
 :root body:has(.settings-panel.open) #oreo-home#oreo-home{top:70px!important;right:24px!important;width:280px!important;height:132px!important;z-index:60!important}
 :root body:has(.settings-panel.open) .settings-panel{top:218px!important;max-height:calc(100dvh - 230px)!important}
 body:has(.settings-panel.open) #oreo-bubble{display:none!important}
}

/* Hide the phone scroll indicator without disabling touch or keyboard scrolling. */
@media(max-width:600px){html,body,.scroll-section,.settings-panel{scrollbar-width:none!important;scrollbar-gutter:auto!important}html::-webkit-scrollbar,body::-webkit-scrollbar,.scroll-section::-webkit-scrollbar,.settings-panel::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}}

/* Larger invisible hit areas keep the approved visual controls unchanged. */
main .actions a{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.settings-close,.reader-back,.menu-socials a,.menu-socials button,.capsule button{position:relative}
.settings-close::after,.reader-back::after{content:'';position:absolute;min-width:44px;min-height:44px;width:100%;height:100%;left:50%;top:50%;transform:translate(-50%,-50%)}
.menu-socials a,.menu-socials button{min-height:44px!important;align-items:center}
.poem-lines[lang=hi]{font-family:system-ui,sans-serif;line-height:1.8;text-align:left;unicode-bidi:normal;font-size:20px}
/* Short landscape phones get a content scroll lane above the untouched skyline. */
@media(max-width:1000px) and (max-height:500px){
 :root main{top:86px!important;left:30px!important;width:calc(100% - 230px)!important;max-width:none!important;height:calc(100dvh - 212px)!important;min-height:120px;overflow-y:auto;overscroll-behavior:auto;padding-bottom:14px!important;scrollbar-width:none}
 :root main h1{font-size:48px!important;line-height:.9!important;margin-bottom:14px!important}
 :root main .hey{font-size:20px!important;margin-bottom:10px!important}
 :root main h2{font-size:22px!important}
 :root main blockquote{font-size:18px!important}
 :root .scroll-section{left:30px!important;width:calc(100% - 230px)!important;max-width:none!important;height:calc(100dvh - 126px)!important;padding-top:86px!important;padding-bottom:16px!important;overflow-y:auto!important;overscroll-behavior:auto;scrollbar-width:none;box-sizing:border-box!important}
 :root .scroll-section h1{font-size:48px!important;margin-bottom:16px!important}
 :root .scroll-section .hey{font-size:20px!important;margin-bottom:10px!important}
 :root .draft-body{font-size:18px!important}
 :root #sideCaption,:root #cornerQuote{display:none!important}
 :root header{top:66px!important}
 :root .settings-panel{top:166px!important;max-height:calc(100dvh - 178px)!important}
 :root body:has(.settings-panel.open) #oreo-home#oreo-home{top:64px!important;height:90px!important;width:190px!important}
 :root body:has(.settings-panel.open) .settings-panel{top:166px!important;max-height:calc(100dvh - 178px)!important}
 main::-webkit-scrollbar,.scroll-section::-webkit-scrollbar{display:none!important}
}
@media(max-width:1000px) and (max-height:500px){header .identity{visibility:hidden!important}#poemReader{max-height:calc(100dvh - 50px)}}

.project-card-link{display:block;color:inherit;text-decoration:none}.project-card-link:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:4px}

/* A stopped render must never remain visible under another pose. */
#oreo-home [hidden]{display:none!important}
.oreo-action-card[hidden]{display:none!important}
@media(max-width:1000px) and (max-height:500px){.settings-panel{scrollbar-width:none!important}.settings-panel::-webkit-scrollbar{display:none!important;width:0!important}}

/* Section guides use the clear upper-left lane, not the section text lane. */
@media(max-width:600px){:root body.study-scrolled #oreo-home#oreo-home #oreo-bubble:not([hidden]){inset:78px 188px auto 12px!important;max-height:80px!important;font-size:14px!important;line-height:1.15!important;min-height:0!important;padding:8px 10px!important;overflow:auto!important}}

/* Speech wraps at its lane limit but never stretches past its own text. */
@media(max-width:600px){:root body #oreo-home#oreo-home #oreo-bubble:not([hidden]){inset:62px auto auto 14px!important;width:max-content!important;max-width:calc(100vw - 215px)!important;max-height:none!important;overflow:visible!important}:root body.study-scrolled #oreo-home#oreo-home #oreo-bubble:not([hidden]){inset:62px auto auto 14px!important;max-width:calc(100vw - 215px)!important}}

/* A separate speech row also clears the wider sleeping pose on small phones. */
@media(max-width:600px){:root body.study-scrolled #oreo-home#oreo-home #oreo-bubble:not([hidden]){inset:62px auto auto 14px!important;max-width:calc(100vw - 215px)!important}:root .scroll-section{padding-top:245px!important}}

/* Wide desktop: two-column content so text uses the free right side and never reaches the foreground art */
@media(min-width:1100px){
 :root .scroll-section.content-draft{max-width:min(1120px,calc(100vw - 260px))!important}
 :root #about.scroll-section.content-draft{max-width:calc(100vw - 110px)!important}
 #about .about-cards{display:grid;grid-template-columns:1.15fr 0.9fr 1.1fr;gap:14px 96px;align-items:start;max-width:calc(100vw - 280px)}
 #about .about-card h2{font-size:26px}
 #about .about-card p{font-size:20px;line-height:1.34}
 #projects .project-list{display:grid;grid-template-columns:1fr 1fr;gap:20px 44px;max-width:940px}
 #projects .project-list article:nth-child(1){grid-column:1;grid-row:1}
 #projects .project-list article:nth-child(2){grid-column:2;grid-row:1}
 #projects .project-list article:nth-child(3){grid-column:2;grid-row:1/span 2;align-self:center}
 #resume .resume-body{display:grid;grid-template-columns:1fr 1.2fr 1.3fr;gap:20px 28px;align-items:start}
 #resume .resume-contact{grid-column:1/-1;margin-bottom:14px}
 #resume .resume-body{max-height:calc(100vh - 250px);overflow-y:auto;padding-right:10px}
 #resume .resume-body>.resume-card:nth-of-type(1){grid-row:2/4}
 #resume .resume-body>.resume-card:nth-of-type(2){grid-row:2/4}
 #resume .resume-body>.resume-card:nth-of-type(3){grid-column:3;grid-row:2}
 #resume .resume-download-grid{display:inline-flex;grid-column:3;grid-row:3;margin-top:8px;align-self:start;justify-self:stretch}
 #resume .resume-download-foot{display:none}
 #about .about-cards{max-height:calc(100vh - 225px);overflow-y:auto;padding-right:6px}
 main#home .home-extras{display:block;margin-top:18px}
 main#home .home-socials{display:flex;flex-wrap:wrap;gap:8px;margin:0}
 main#home .home-socials a,main#home .home-mini a{background:var(--pill);border:1px solid var(--glass-line);border-radius:999px;padding:4px 14px;font-size:16px;color:var(--ink);text-decoration:none}
 main#home .home-blurb{font-size:17px;line-height:1.32;color:var(--muted);max-width:520px;margin:10px 0 0}
 main#home .home-mini{display:flex;gap:10px;margin:10px 0 0}
 main#home{left:150px!important}
 main#home{background:var(--glass);background-image:url(fine-glass-grain-subtle.png);background-repeat:repeat;background-size:128px 128px;border:1px solid var(--glass-line);border-radius:30px;padding:24px 28px;backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);box-shadow:0 5px 20px #15121a12}
 #writing .writing-list{max-height:calc(100vh - 430px);overflow-y:auto;padding-right:8px}
 #writing.content-draft{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);column-gap:64px}
 #writing.content-draft>*{grid-column:1}
 #writing .writing-help{grid-column:2;grid-row:1/span 4;align-self:center}
}

/* Short wide screens: tighter writing rows so the list clears the trees; shift whole sections (title+content share one left edge) past the left tree cluster */
@media(min-width:1100px) and (max-height:899px){
 #writing .writing-list button{padding-top:9px;padding-bottom:9px}
 :root #about.scroll-section,:root #projects.scroll-section,:root #writing.scroll-section,:root #resume.scroll-section{margin-left:150px!important}
}

/* Very short landscape screens: shift content right past the tall left tree cluster */
@media(min-width:601px) and (max-height:700px){
 :root main{left:255px!important}
 :root main#home{left:300px!important}
 :root .scroll-section{left:255px!important}
}

/* Desktop: drop eyebrow labels + small sub-label headings; move title+content up below the navbar */
@media(min-width:601px){
 :root .content-draft .hey{display:none!important}
 :root .content-draft .stack-label{display:none!important}
 :root .scroll-section{padding-top:130px!important}
}

/* Corner quote: pin to the true bottom-right corner on every theme (was mid-screen left/top tuned to the 656px design frame, drifting over text while scrolling). */
:root #cornerQuote,:root[data-env=morning] #cornerQuote,:root[data-env=afternoon] #cornerQuote,:root[data-env=evening] #cornerQuote,:root[data-env=night] #cornerQuote{left:auto!important;top:auto!important;right:22px!important;bottom:18px!important;text-align:right}

/* Very short phone screens: the sideCaption already owns the lower-right area, so the corner quote has no free corner - hide it there to guarantee no overlap. */
@media (max-width:600px) and (max-height:700px){:root #cornerQuote{display:none!important}}

@media(min-width:601px){.quote-by{margin-top:1px;line-height:1.15}}

@media(min-width:601px) and (max-height:760px){:root .scene-quote{position:static;margin-top:30px;max-width:560px}}

/* Phone Home: content in a glass card like desktop; Oreo untouched */
@media(max-width:600px){main#home{background:var(--glass);background-image:url(fine-glass-grain-subtle.png);background-repeat:repeat;background-size:128px 128px;border:1px solid var(--glass-line);border-radius:26px;padding:16px 18px;backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);box-shadow:0 5px 20px #15121a12}}


/* Oreo pinned to the top lane, left of the paw button (desktop only, phone untouched). Applies in companion mode too: the scrolled-section cat IS the companion, and the user wants him top-left-of-paw on all pages and times of day. */
@media(min-width:601px) and (max-width:1799px){
 :root body #oreo-home#oreo-home{top:40px!important;right:66px!important;bottom:auto!important}
 :root body #oreo-home#oreo-home #oreo-bubble:not([hidden]){inset:auto!important;top:54px!important;right:calc(100% + 14px)!important;left:auto!important;bottom:auto!important;width:180px!important;max-width:180px!important;white-space:normal!important}
 :root body #oreo-home#oreo-home #oreo-bubble.above:not([hidden]){inset:auto!important;top:20px!important;right:calc(100% + 14px)!important;left:auto!important;bottom:auto!important}
}
@media(min-width:1250px) and (max-width:1799px){
 :root body #oreo-home#oreo-home #oreo-bubble:not([hidden]),
 :root body #oreo-home#oreo-home.evening-sitting #oreo-bubble:not([hidden]){inset:auto!important;top:-35px!important;right:calc(100% + 14px)!important;left:auto!important;bottom:auto!important;width:180px!important;max-width:180px!important;white-space:normal!important}
}

/* About cards mid tier (900-1399): symmetric 8vw margins, equal widths/heights, fluid body text (17px floor), card-internal scroll keeps rounded bottoms above the skyline. */
@media(min-width:900px) and (max-width:1399px){
 :root #about.scroll-section.content-draft{max-width:none!important;width:100%!important;left:0!important;right:0!important;margin-left:0!important;margin-right:0!important;padding-left:6vw!important;padding-right:6vw!important;padding-top:90px!important}
 :root #about.content-draft h1{margin-bottom:6px!important}
 :root #about .about-cards{display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:14px 28px!important;max-width:none!important;width:100%!important;align-items:stretch!important}
 :root #about .about-card{padding:12px 18px 12px!important;height:auto!important;margin-bottom:0!important;max-height:calc(76vh - 156px)!important;overflow-y:auto!important;scrollbar-width:thin!important;scrollbar-color:var(--muted) transparent!important}
 :root #about .about-card::-webkit-scrollbar{width:6px!important}
 :root #about .about-card::-webkit-scrollbar-thumb{background:var(--muted)!important;border-radius:999px!important}
 :root #about .about-card h2{font-size:clamp(26px,1.43vw + 7px,39px)!important;margin-bottom:6px!important;font-weight:700!important;letter-spacing:0.5px!important}
 :root #about .about-card h2.about-gap{margin-top:6px!important}
 :root #about .about-card p{font-size:clamp(17px,0.95vw + 5px,26px)!important;line-height:1.24!important;margin-bottom:5px!important}
}

/* About cards large tier (1400+): same symmetry, 18px+ fluid body, bigger headings, 1 inch gaps, card-internal scroll above the skyline. */
@media(min-width:1400px){
 :root #about.scroll-section.content-draft{max-width:none!important;width:100%!important;left:0!important;right:0!important;margin-left:0!important;margin-right:0!important;padding-left:6vw!important;padding-right:6vw!important;padding-top:90px!important}
 :root #about.content-draft h1{margin-bottom:6px!important}
 :root #about .about-cards{display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:14px 96px!important;max-width:none!important;width:100%!important;align-items:stretch!important}
 :root #about .about-card{padding:12px 20px 14px!important;height:auto!important;margin-bottom:0!important;max-height:calc(76vh - 146px)!important;overflow-y:auto!important;scrollbar-width:thin!important;scrollbar-color:var(--muted) transparent!important}
 :root #about .about-card::-webkit-scrollbar{width:6px!important}
 :root #about .about-card::-webkit-scrollbar-thumb{background:var(--muted)!important;border-radius:999px!important}
 :root #about .about-card h2{font-size:clamp(26px,1.43vw + 7px,39px)!important;margin-bottom:6px!important;font-weight:700!important;letter-spacing:0.5px!important}
 :root #about .about-card h2.about-gap{margin-top:6px!important}
 :root #about .about-card p{font-size:clamp(17px,0.95vw + 5px,26px)!important;line-height:1.24!important;margin-bottom:5px!important}
}

/* About on 1800+: opt out of the scaled 4K section box so the symmetric 3-card layout renders 1:1 with the fluid sizes above. */
@media(min-width:1800px){
 :root #about.scroll-section{transform:none!important;left:0!important;width:100%!important;max-width:none!important;height:100vh!important;margin-left:0!important}
}




/* About page only (601-1799): cat image overflows its host box ~29px below it, so nudge the top-pinned Oreo up enough that even the standing cat clears the cards; bubble stays left of him inside the viewport. */
@media(min-width:601px) and (max-width:1799px){
 :root body:has(#about.scroll-section.revealed) #oreo-home#oreo-home{top:10px!important}
 :root body:has(#about.scroll-section.revealed) #oreo-home#oreo-home #oreo-bubble:not([hidden]),
 :root body:has(#about.scroll-section.revealed) #oreo-home#oreo-home.evening-sitting #oreo-bubble:not([hidden]),
 :root body:has(#about.scroll-section.revealed) #oreo-home#oreo-home #oreo-bubble.above:not([hidden]){inset:auto!important;top:-6px!important;right:calc(100% + 14px)!important;left:auto!important;bottom:auto!important}
}


/* Section + card title colors per theme (desktop): morning green, afternoon darker sky blue, evening warm orange; night purple/cyan and phone untouched. Covers Home name, page titles, and card titles in About/Projects/Writing/Resume. */
@media(min-width:900px){
 :root[data-env=morning] main h1,:root[data-env=morning] .scroll-section h1,:root[data-env=morning] #about .about-card h2,:root[data-env=morning] #projects .project-list h2,:root[data-env=morning] #resume .resume-card h2,:root[data-env=morning] #writing .writing-list button>span{color:#1c7a38!important}
 :root[data-env=afternoon] main h1,:root[data-env=afternoon] .scroll-section h1,:root[data-env=afternoon] #about .about-card h2,:root[data-env=afternoon] #projects .project-list h2,:root[data-env=afternoon] #resume .resume-card h2,:root[data-env=afternoon] #writing .writing-list button>span{color:#a3246b!important}
 :root[data-env=evening] main h1,:root[data-env=evening] .scroll-section h1,:root[data-env=evening] #about .about-card h2,:root[data-env=evening] #projects .project-list h2,:root[data-env=evening] #resume .resume-card h2,:root[data-env=evening] #writing .writing-list button>span{color:#c4560a!important}
}


/* Section card titles + even card heights (desktop only): Projects/Writing/Resume match About's bigger bold title style; heights equalize per row/column. Colors untouched (pending user decision). */
@media(min-width:900px){
 :root #projects .project-list h2,:root #resume .resume-card h2{font-size:clamp(26px,1.43vw + 7px,39px)!important;font-weight:700!important;letter-spacing:0.5px!important}
 :root #writing .writing-list button>span{font-size:clamp(28px,1.6vw + 8px,36px)!important;font-weight:700!important;letter-spacing:0.5px!important}
 :root #projects .project-list{align-items:stretch!important}
 :root #projects .project-list>article{height:auto!important;margin-bottom:0!important}
 :root #resume .resume-body{align-items:stretch!important}
 :root #resume .resume-body>.resume-card{height:auto!important}
}

/* About cards 1+2 (desktop): distribute free space between paragraphs so the text fills the card evenly; card sizes unchanged. Card 3 keeps normal flow. */
@media(min-width:900px){
 :root #about .about-card:nth-child(1),:root #about .about-card:nth-child(2){display:flex!important;flex-direction:column!important;justify-content:space-between!important}
 :root #about .about-card:nth-child(1) p,:root #about .about-card:nth-child(2) p{margin-bottom:0!important}
 :root #about .about-card:nth-child(1) h2,:root #about .about-card:nth-child(2) h2{margin-bottom:0!important}
}

/* About afternoon (desktop): stronger glass behind text so the sun under the cards cannot hurt readability. */
@media(min-width:900px){
 :root[data-env=afternoon] #about .about-card{background:rgba(214,237,245,0.66)!important}
}

/* About on 1800+: vh-scaled reading sizes so the card block fills down to just above the skyline on big monitors. */
@media(min-width:1800px){
 :root #about .about-card p{font-size:clamp(24px,calc(1.72vw - 8px),40px)!important}
 :root #about .about-card h2{font-size:clamp(34px,calc(1.95vw - 2px),54px)!important;margin-bottom:8px!important}
 :root #about.scroll-section.content-draft{padding-top:64px!important}
}


/* Writing mid-desktop (1100-1799): the section grid's default align-content stretched the auto rows across the full 100vh box, leaving big gaps and pushing the poem rows down over the skyline. Pack rows from the top, same as the 1800+ layout; the scene-quote keeps its absolute position. */
@media(min-width:1100px) and (max-width:1799px){
 :root #writing.scroll-section{align-content:start!important}
}

/* Writing on 1800+: the section box kept the retired 4K 50vh height while the scale is gone, so the grid squeezed the scrollable writing-list and the second row painted as a sliver. Full-height box, rows packed from the top; the quote then sits at bottom:150 of the taller box and clears the afternoon sun. */
@media(min-width:1800px){
 :root #writing.scroll-section{height:100vh!important;align-content:start!important}
 :root #writing .scene-quote{bottom:300px!important}
}

/* Resume mid-desktop (1100-1440): rebalance column fractions so Education/Skills are not cramped, and let every grid item shrink so no long word squeezes a column. */
@media(min-width:1100px) and (max-width:1440px){
 :root #resume .resume-body{grid-template-columns:1.1fr 1.15fr 1.25fr!important;gap:18px 22px!important}
 :root #resume .resume-body>.resume-card{min-width:0!important}
}

/* Resume download pill (all desktop): never split the "Download PDF" phrase; the filename wraps whole onto the next line instead of stretching column 3. */
@media(min-width:1100px){
 :root #resume .resume-download-grid{min-width:0!important;flex-wrap:wrap!important;row-gap:2px!important}
 :root #resume .resume-download-grid>span{white-space:nowrap!important}
 :root #resume .resume-download-grid>small{overflow-wrap:anywhere!important}
}

/* Writing intro card (user request): the Writing title, intro paragraph and the "Things I observed" line sit inside one glassy, grainy, transparent card - the same recipe as the poem cards. Desktop only: on phones the wrapper is display:contents, so the phone layout is unchanged. */
@media(max-width:600px){
 .writing-head-card{display:contents}
}
@media(min-width:601px){
 :root .writing-head-card{background:var(--glass);background-image:url(fine-glass-grain-subtle.png);background-repeat:repeat;background-size:128px 128px;border:1px solid var(--glass-line);border-radius:26px;backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);box-shadow:0 5px 20px #15121a12;padding:22px 28px 24px;max-width:640px;margin-bottom:22px}
 :root .writing-head-card h1{margin-bottom:14px!important}
 :root .writing-head-card .section-note{max-width:none!important;margin-bottom:14px!important}
 :root .writing-head-card .section-intro{margin-bottom:0!important}
}

/* Card hover lift (user request, desktop only): every section card - About, Projects, Writing poem cards, the new Writing intro card, Resume - rises slightly under the cursor. A simple lift and a deeper shadow, nothing else. */
@media(min-width:601px) and (hover:hover) and (pointer:fine){
 :root .about-card,:root .project-list article,:root .writing-list button,:root .resume-card,:root .writing-head-card{transition:transform .18s ease,box-shadow .18s ease}
 :root .about-card:hover,:root .project-list article:hover,:root .writing-list button:hover,:root .resume-card:hover,:root .writing-head-card:hover{transform:translateY(-4px)!important;box-shadow:0 12px 28px #15121a24}
}

/* round5: clean section settling + night quote readability */
@media(max-width:600px){:root[data-env=night] .scroll-section .scene-quote,:root[data-env=night] .scene-quote{font-size:20px!important;color:#b48be1}}

/* Writing on short desktop screens (height 760 or less): the scrollable poem list collapsed to 0px high and the quote took its place, hiding the poem cards. Let the list keep its natural height; the section scrolls if needed. */
@media(min-width:601px) and (max-height:760px){
 :root #writing .writing-list{max-height:none!important;overflow:visible!important;min-height:max-content}
 :root #writing.content-draft{display:block!important}
 :root #writing .writing-head-card{margin-bottom:22px;max-width:600px}
 :root #writing .scene-quote{position:fixed!important;inset:auto 24px auto auto!important;top:410px!important;margin:0!important;width:min(320px,calc(100vw - 1000px))!important;max-width:none!important}
}
@media(min-width:601px){:root[data-env=evening] #cornerQuote{bottom:54px!important}}

/* Desktop Resume: no email line, heading + cards raised, clear of the morning sun/cloud (phone untouched) */
@media(min-width:601px){
 :root #resume .resume-contact{display:none!important}
 :root #resume h1{position:relative;top:-55px}
 :root #resume .resume-body{margin-top:-51px!important;max-height:calc(100vh - 150px)!important}
}
@media(min-width:601px){:root[data-env=evening] #cornerQuote{display:none!important}}
:root[data-env=evening] #cornerQuote{display:none!important}

@media(min-width:601px) and (max-height:760px){:root:not(.writing-in-view) #writing .scene-quote{visibility:hidden!important}}
@media(min-width:601px) and (max-height:760px){:root:not(.home-in-view) #home .home-extras{visibility:hidden!important}}

/* Phone Resume: email line removed (Home already has the Gmail chip) */
@media(max-width:600px){:root #resume .resume-contact{display:none!important}}

/* Phone: drop eyebrow labels above section headings (matches desktop) */
@media(max-width:600px){:root .content-draft .hey{display:none!important}}

/* Phone: same afternoon (magenta) and evening (warm orange) title colors as desktop; morning and night untouched */
@media(max-width:899px){
 :root[data-env=afternoon] main h1,:root[data-env=afternoon] .scroll-section h1,:root[data-env=afternoon] #about .about-card h2,:root[data-env=afternoon] #projects .project-list h2,:root[data-env=afternoon] #resume .resume-card h2,:root[data-env=afternoon] #writing .writing-list button>span{color:#a3246b!important}
 :root[data-env=evening] main h1,:root[data-env=evening] .scroll-section h1,:root[data-env=evening] #about .about-card h2,:root[data-env=evening] #projects .project-list h2,:root[data-env=evening] #resume .resume-card h2,:root[data-env=evening] #writing .writing-list button>span{color:#c4560a!important}
}

/* Feeding "here's the resume" popup: frosted glass + micrograin in each theme (desktop and phone) */
:root #feeding-resume{background-color:var(--glass)!important;background-image:url(fine-glass-grain-subtle.png)!important;background-repeat:repeat!important;background-size:128px 128px!important;backdrop-filter:blur(12px) saturate(120%)!important;-webkit-backdrop-filter:blur(12px) saturate(120%)!important;border:1px solid var(--glass-line)!important;border-radius:28px!important;box-shadow:inset 0 1px 0 #ffffff55,0 5px 20px #15121a12!important}
:root #feeding-resume a{border-radius:999px!important;box-shadow:inset 0 1px 0 #ffffff66,0 2px 8px #15121a1f}

/* Resume Download button: paper resume card (folded corner, accent name bar, faint text lines). Stays paper-white in every mode, accent from the mode. */
:root #resume a.resume-download{position:relative!important;overflow:hidden!important;isolation:isolate;padding-left:88px!important;background:#fffdf6!important;background-image:none!important;color:#2b2326!important;border:1px solid #0000001f!important;border-radius:12px!important;transform:rotate(-1.2deg);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)!important;box-shadow:0 8px 18px #0000003a!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease!important}
:root #resume a.resume-download span,:root #resume a.resume-download small{color:#2b2326!important}
:root #resume a.resume-download::before{content:"";position:absolute;left:18px;right:auto;top:50%;height:56px;width:52px;transform:translateY(-50%);background:linear-gradient(var(--accent),var(--accent)) 0 0/60% 9px no-repeat,repeating-linear-gradient(180deg,#cfc6b8 0 3px,transparent 3px 9px) 0 18px/100% 38px no-repeat;border-radius:0;z-index:1;pointer-events:none;animation:none}
:root #resume a.resume-download::after{content:"";position:absolute;left:auto;right:0;top:0;bottom:auto;width:28px;height:28px;transform-origin:100% 0;background:linear-gradient(to top right,#e6dcc8 50%,transparent 50%);box-shadow:-2px 2px 4px #00000022;z-index:1;pointer-events:none;animation:none;transition:transform .2s ease}
@media(hover:hover){:root #resume a.resume-download:hover{transform:rotate(0deg) translateY(-2px);box-shadow:0 12px 22px #00000040!important}:root #resume a.resume-download:hover::after{transform:scale(1.18)}}
:root #resume a.resume-download:active{transform:rotate(0deg) translateY(2px) scale(.985);box-shadow:0 3px 8px #00000038!important;transition-duration:.08s}
:root #resume a.resume-download:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){:root #resume a.resume-download,:root #resume a.resume-download::after{transition:none!important}}
@media(max-width:600px){:root #resume a.resume-download{flex-direction:column!important;flex-wrap:nowrap!important;align-items:flex-start!important;justify-content:center!important;row-gap:3px!important;padding:14px 16px 14px 84px!important}:root #resume a.resume-download>span{white-space:nowrap!important}:root #resume a.resume-download>small{font-size:13px!important;overflow-wrap:anywhere}:root #resume a.resume-download::before{left:16px}}

/* Resume Download button: same paper-card structure (size, folded corner, doc icon, text, position), material changed to transparent frosted glass with the site's light grain. */
:root #resume a.resume-download{background-color:var(--glass)!important;background-image:url(fine-glass-grain-subtle.png)!important;background-repeat:repeat!important;background-size:128px 128px!important;color:var(--ink)!important;border:1px solid var(--glass-line)!important;backdrop-filter:blur(12px) saturate(120%)!important;-webkit-backdrop-filter:blur(12px) saturate(120%)!important;box-shadow:inset 0 1px 0 #ffffff55,0 5px 20px #15121a12!important}
:root #resume a.resume-download span,:root #resume a.resume-download small{color:var(--ink)!important}
:root #resume a.resume-download::before{background:linear-gradient(var(--accent),var(--accent)) 0 0/60% 9px no-repeat,repeating-linear-gradient(180deg,color-mix(in srgb,var(--ink) 38%,transparent) 0 3px,transparent 3px 9px) 0 18px/100% 38px no-repeat!important}
:root #resume a.resume-download::after{background:linear-gradient(to top right,#ffffff80 50%,transparent 50%)!important;box-shadow:-2px 2px 4px #15121a22!important}
@media(hover:hover){:root #resume a.resume-download:hover{box-shadow:inset 0 1px 0 #ffffff66,0 8px 22px #15121a1c!important}}
:root #resume a.resume-download:active{box-shadow:inset 0 1px 0 #ffffff44,0 2px 8px #15121a18!important}
:root[data-env=afternoon] #resume a.resume-download::before{background:linear-gradient(#a3246b,#a3246b) 0 0/60% 9px no-repeat,repeating-linear-gradient(180deg,color-mix(in srgb,var(--ink) 38%,transparent) 0 3px,transparent 3px 9px) 0 18px/100% 38px no-repeat!important}

/* Phone content clips below the fixed navigation during internal card scrolling. */
@media(max-width:600px){
 :root body .scroll-section{scroll-padding-top:70px!important;clip-path:inset(64px 0 0)}
 :root body .scroll-section h1{scroll-margin-top:70px}
 :root body.phone-oreo-collision #oreo-home,:root body.phone-oreo-collision #oreo-home *{visibility:hidden!important}
 :root body.phone-celestial-collision #phone-celestial-object,:root body.phone-celestial-collision #phone-celestial-fx,:root body.phone-celestial-collision #celestial-fx{visibility:hidden!important}
}

/* Native desktop scroll: no invisible viewport-sized section can trap a gesture.
   Individual long cards retain their own scroll as before. */
@media(min-width:1100px){:root body .scroll-section{overflow-y:visible!important}}
@media(min-width:601px){:root body.desktop-bubble-collision #oreo-bubble{visibility:hidden!important}}

/* The companion shrink rules must win over the later phone menu geometry. */
@media(max-width:600px){
 :root body:not(:has(.settings-panel.open)) #oreo-home#oreo-home.is-companion{width:96px!important;height:78px!important;top:auto!important;bottom:24px!important;right:14px!important;left:auto!important}
 :root body:not(:has(.settings-panel.open)) #oreo-home#oreo-home.is-companion #oreo-bubble:not([hidden]){position:absolute!important;inset:auto calc(100% + 8px) 0 auto!important;width:170px!important;max-width:170px!important;max-height:100px!important;font-size:13px!important}
}
/* Use the available laptop height instead of an arbitrary 76vh card cap. */
@media(min-width:900px){:root #about .about-card{max-height:calc(100dvh - 210px)!important}:root #about .about-cards{max-height:none!important;overflow:visible!important}}
/* Compact phone: keep the primary action in the first viewport. */
@media(max-width:600px) and (max-height:650px){
 :root body main#home{top:126px!important;padding:12px 14px!important}
 :root main .hey{font-size:16px!important;margin-bottom:8px!important}
 :root main h1{font-size:40px!important;line-height:.88!important;margin-bottom:10px!important}
 :root main h2{font-size:17px!important;line-height:1.1!important;margin-bottom:6px!important}
 :root main .tags{font-size:12px!important;line-height:1.2!important}
 :root main blockquote{font-size:14px!important;line-height:1.2!important;margin-top:12px!important;padding-left:12px!important}
 :root main .actions{margin-top:14px!important;font-size:12px!important;gap:8px!important}
 :root main .actions .primary{padding:8px 10px!important}
}
/* Readable material when the engine has no backdrop blur. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 :root{--glass:#f6f1df;--glass-line:#b5b5a0}
 :root[data-env=afternoon]{--glass:#c4e7f3;--glass-line:#8eb8cd}
 :root[data-env=evening]{--glass:#f3c4a6;--glass-line:#ca9b80}
 :root[data-env=night]{--glass:#182139;--glass-line:#424e6c}
 :root .settings-panel,:root main#home,:root .about-card,:root .project-list article,:root .writing-list button,:root .resume-card{background-color:var(--glass)!important}
}

/* A slow scene load must never put the new text palette on the old dark sky. */
:root.theme-committing .locked-environment{background:var(--bg)!important}
:root.theme-committing .locked-environment canvas,:root.theme-committing #ambient-layer,:root.theme-committing #celestial-fx,:root.theme-committing #phone-celestial-object,:root.theme-committing #phone-celestial-fx{visibility:hidden!important}
:root.theme-loading .capsule .chosen{opacity:.6}

/* Menu text must stay readable even if a webview advertises blur but fails to paint it. */
:root[data-env] body .settings-panel{background-color:var(--bg)!important}
:root.theme-committing #oreo-home{visibility:hidden!important}