/* One reading composition in both themes. Theme branches only set colour
   variables; geometry, type, spacing and responsive rules are shared. */
.studio{
 --glass-panel:rgba(242,248,255,.68);
 --glass-panel-line:rgba(235,246,255,.42);
 --glass-ink:#10283d;
 --glass-muted:#223e55;
 --glass-link:#203c55;
 --glass-line:rgba(16,40,61,.20);
 --glass-prose:rgba(242,248,255,.74);
 --glass-about:linear-gradient(115deg,rgba(242,248,255,.68),rgba(242,248,255,.76));
 --glass-aperture:#c7d9e8;
 --glass-header:rgba(237,246,255,.82);
 --glass-header-line:rgba(237,246,255,.4);
 --glass-navigation:rgba(235,246,255,.20);
 --glass-nav-line:rgba(27,53,76,.20);
 --glass-active:rgba(255,255,255,.42);
 --glass-active-line:rgba(255,255,255,.65);
 --glass-menu:rgba(239,247,255,.92);
 --glass-menu-hover:#dbe9f480;
 --glass-menu-line:rgba(239,247,255,.60);
 --glass-focus:#173e5c;
 --glass-mist:rgba(187,213,239,.12);
 --glass-reflection:#ffffff38;
 --glass-reflection-strong:#ffffff60;
 --glass-shadow:#020c181a;
 --glass-menu-shadow:#020c1838;
}
.studio.reading-dark{
 --glass-panel:rgba(9,22,38,.80);
 --glass-panel-line:rgba(195,216,239,.18);
 --glass-ink:#eef3fa;
 --glass-muted:#b3c6da;
 --glass-link:#c3dcf5;
 --glass-line:rgba(181,200,229,.20);
 --glass-prose:rgba(9,22,38,.86);
 --glass-about:linear-gradient(115deg,rgba(9,22,38,.80),rgba(14,30,47,.86));
 --glass-aperture:#15283c;
 --glass-header:rgba(9,22,38,.86);
 --glass-header-line:rgba(195,216,239,.16);
 --glass-navigation:rgba(109,150,191,.10);
 --glass-nav-line:rgba(195,216,239,.18);
 --glass-active:rgba(115,151,190,.20);
 --glass-active-line:rgba(195,216,239,.22);
 --glass-menu:rgba(9,22,38,.94);
 --glass-menu-hover:#29435b80;
 --glass-menu-line:rgba(195,216,239,.22);
 --glass-focus:#c3dcf5;
 --glass-mist:rgba(187,213,239,0);
 --glass-reflection:#d5e9ff14;
 --glass-reflection-strong:#d5e9ff21;
 --glass-shadow:#00000030;
 --glass-menu-shadow:#00000050;
}
.studio.landscape-mode #blogContent{
 background:transparent;
 border:0;
 box-shadow:none;
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
 --reading-ink:var(--glass-ink);
 --reading-muted:var(--glass-muted);
 --leaf:var(--glass-link);
 --paper-line:var(--glass-line);
}
.studio .blog-content .reading-shell{
 background:transparent;
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
}
/* Static, low-opacity cloud-light at the sides of inner pages. No extra layer,
   blur, animation or hit target; the homepage hero and opening are untouched. */
.studio.inside-blog:not(.opening-active) #blogContent{
 background-image:
  radial-gradient(ellipse 82% 360px at 0 180px,var(--glass-mist),transparent 76%),
  radial-gradient(ellipse 72% 440px at 100% 720px,var(--glass-mist),transparent 78%);
 background-repeat:no-repeat;
}
/* The same existing reading surfaces in both themes. Rows inside a surface
   never receive additional glass or blur. */
.studio .blog-content :is(
 .studio-work,.studio-notes,.creative-signature,.page-heading,
 .about-prose,.about-visual,.essay-main,.archive-year,.tag-index,
 .project-showcase,.article-heading,.article-prose,.article-tags,
 .article-footer,.next-essay,.comments-section,.friends-empty,
 .site-card,.subscribe-layout,.project-page-prose,.carousel-caption,
 .album-toolbar
),
.studio .extras-shell>.essay-list{
 background:var(--glass-panel);
 border:1px solid var(--glass-panel-line);
 border-radius:18px;
 box-shadow:inset 0 1px 0 var(--glass-reflection),0 14px 38px var(--glass-shadow);
 padding:clamp(22px,3vw,36px);
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
 color:var(--glass-ink);
}
.studio .blog-content .creative-signature{padding-top:36px}
.studio .blog-content .about-visual{padding:0 0 24px}
.studio .blog-content .about-visual>p{color:var(--glass-muted)}
.studio .blog-content .type-art{--type-bg:var(--glass-aperture);opacity:1}
.studio .blog-content .type-aperture{border-color:var(--glass-line)}
.studio .blog-content .article-prose{background:var(--glass-prose);box-sizing:border-box}
.studio .blog-content :is(.article-tags,.article-footer,.album-toolbar){padding:15px 22px}
.studio .blog-content :is(.site-card,.carousel-caption){margin-top:24px}
.studio .blog-content .sample-note{opacity:1}
.studio .reading-shell>.sample-note,
.studio .blog-content :is(.album-source,.breadcrumb,.back-to-essays),
.studio .project-page>.quiet-link{
 width:fit-content;
 max-width:100%;
 padding:12px 16px;
 border-radius:10px;
 background:var(--glass-panel);
 color:var(--glass-muted);
 box-sizing:border-box;
}
.studio .blog-content .back-to-essays,
.studio .project-page>.quiet-link{display:inline-flex;margin-top:20px}
.studio .blog-content .empty-page{
 background:var(--glass-panel);
 padding:36px;
 border:1px solid var(--glass-panel-line);
 border-radius:18px;
}
/* Only compact navigation and menus use bounded blur. Existing positioning,
   widths and navigation layout are unchanged. */
.studio.inside-blog .site-header.header{
 background:var(--glass-header);
 border-color:var(--glass-header-line);
 box-shadow:0 8px 30px var(--glass-shadow),inset 0 -1px 0 var(--glass-reflection);
 backdrop-filter:blur(8px);
 -webkit-backdrop-filter:blur(8px);
 color:var(--glass-ink);
}
.studio.inside-blog .site-header.header .glass-nav{
 background:var(--glass-navigation);
 border-color:var(--glass-nav-line);
 box-shadow:inset 0 1px 0 var(--glass-reflection-strong);
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
}
.studio.inside-blog .site-header.header .glass-nav>a,
.studio.inside-blog .site-header.header .brand-note,
.studio.inside-blog .site-header.header .theme-toggle,
.studio.inside-blog .site-header.header .more-button,
.studio.inside-blog .site-header.header .music-toggle,
.studio.inside-blog .site-header.header .header-actions>.icon-button{color:var(--glass-muted)}
.studio.inside-blog .site-header.header .glass-nav>a[aria-current]{color:var(--glass-ink)}
.studio.inside-blog .site-header.header .nav-indicator{
 background:var(--glass-active);
 border-color:var(--glass-active-line);
 box-shadow:0 3px 10px var(--glass-shadow),inset 0 1px 0 var(--glass-reflection-strong);
}
.studio :is(.site-tools,.more-menu){
 --reading-ink:var(--glass-ink);
 --reading-muted:var(--glass-muted);
 --leaf:var(--glass-link);
 --paper-line:var(--glass-line);
 background:var(--glass-menu);
 color:var(--glass-ink);
 border-color:var(--glass-menu-line);
 box-shadow:inset 0 1px 0 var(--glass-reflection-strong),0 20px 55px var(--glass-menu-shadow);
 backdrop-filter:blur(6px);
 -webkit-backdrop-filter:blur(6px);
}
.studio .more-menu>a{color:var(--glass-ink)}
.studio .more-menu>a:hover,
.studio .more-menu>a:focus-visible{color:var(--glass-ink);background:var(--glass-menu-hover)}
.studio .more-menu small{color:var(--glass-muted)}
.studio .blog-content :is(a,button,input,textarea):focus-visible{outline:2px solid var(--glass-focus);outline-offset:4px}
@media(max-width:700px){
 .studio .blog-content :is(
  .studio-work,.studio-notes,.creative-signature,.page-heading,
  .about-prose,.essay-main,.archive-year,.tag-index,.project-showcase,
  .article-heading,.article-prose,.article-tags,.article-footer,
  .next-essay,.comments-section,.friends-empty,.site-card,.subscribe-layout,
  .project-page-prose,.carousel-caption
 ),
 .studio .extras-shell>.essay-list{padding:22px 18px;border-radius:14px}
 .studio .blog-content .album-toolbar{padding:14px 16px}
 .studio .blog-content .article-prose{font-size:17px}
}
/* About is one continuous composition in BOTH themes. */
.studio .blog-content .about-shell{
 background:var(--glass-about);
 border:1px solid var(--glass-panel-line);
 border-radius:24px;
 box-shadow:inset 0 1px 0 var(--glass-reflection-strong),0 20px 60px var(--glass-shadow);
 margin-top:48px;
 margin-bottom:80px;
 padding:48px clamp(28px,4vw,60px) 56px;
 box-sizing:border-box;
}
.studio .blog-content .about-shell :is(.page-heading,.about-visual,.about-prose){
 background:none;
 border:0;
 border-radius:0;
 box-shadow:none;
 padding:0;
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
}
.studio .about-shell .page-heading{margin-bottom:52px}
.studio .about-shell .page-heading h1{margin-bottom:0}
.studio .about-shell .about-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,68px);align-items:center}
.studio .about-shell .about-visual{align-self:center;min-width:0}
.studio .about-shell .about-visual .type-art{--orbit-radius:96px;height:320px}
.studio .about-shell .about-prose{min-width:0}
.studio .about-shell .about-prose p{font-size:15px;line-height:2.05;margin-bottom:22px}
.studio .about-shell .about-prose .about-placeholder{font-size:13px}
.studio .about-shell .art-controls{flex-wrap:wrap;gap:8px 18px}
.studio .about-shell .about-visual>p{margin:24px 0 0;text-align:center;letter-spacing:1px}
@media(max-width:900px){
 .studio .about-shell .about-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:30px}
 .studio .about-shell .about-visual .type-art{--orbit-radius:78px;height:270px}
 .studio .about-shell .about-prose h2{font-size:26px}
}
@media(max-width:700px){
 .studio .blog-content .about-shell{margin-top:24px;margin-bottom:40px;padding:30px 24px 36px;border-radius:20px}
 .studio .about-shell .page-heading{margin-bottom:32px}
 .studio .about-shell .page-heading h1{font-size:29px}
 .studio .about-shell .about-layout{display:flex;flex-direction:column-reverse;gap:28px}
 .studio .about-shell .about-prose h2{font-size:24px}
 .studio .about-shell .about-visual .type-art{--orbit-radius:83px;height:270px}
 .studio .about-shell .about-visual>p{margin-top:16px}
}
@media(prefers-reduced-transparency:reduce){
 .studio{--glass-panel:#e5eef7;--glass-prose:#e5eef7;--glass-about:#e5eef7;--glass-header:#e5eef7;--glass-menu:#e5eef7;--glass-mist:transparent}
 .studio.reading-dark{--glass-panel:#0b1828;--glass-prose:#0b1828;--glass-about:#0b1828;--glass-header:#0b1828;--glass-menu:#0b1828;--glass-mist:transparent}
 .studio.inside-blog .site-header.header,
 .studio :is(.site-tools,.more-menu){backdrop-filter:none;-webkit-backdrop-filter:none}
}