/* Other pages keep the shared blue; postcard washes follow the selected painting. */
@property --wash-base{syntax:'<color>';inherits:true;initial-value:#a4baff}
@property --wash-mid{syntax:'<color>';inherits:true;initial-value:#b3d8ff}
@property --wash-haze{syntax:'<color>';inherits:true;initial-value:#c2e5fd95}
@property --wash-edge{syntax:'<color>';inherits:true;initial-value:#d7eef945}
@property --wash-left{syntax:'<color>';inherits:true;initial-value:#77b6ffa6}
@property --wash-right{syntax:'<color>';inherits:true;initial-value:#a99fff98}
@property --wash-floor{syntax:'<color>';inherits:true;initial-value:#b7ccffb3}
body[data-postcard-theme='sage']{--wash-base:#becdb1;--wash-mid:#d5dfc5;--wash-haze:#e4e8cc95;--wash-edge:#efebd445;--wash-left:#adc4a59e;--wash-right:#d6ccab8c;--wash-floor:#cbd9b7ad}
body[data-postcard-theme='peach']{--wash-base:#d8b7b0;--wash-mid:#edd3bd;--wash-haze:#eae0d195;--wash-edge:#f2e8d945;--wash-left:#b6ccc99e;--wash-right:#edc0a78c;--wash-floor:#e4cbbcad}
/* Fuller paint colors keep each artwork's hues and a pale transition into paper. */
body[data-postcard-current='hello-from-amsterdam']{--wash-base:#b1c2b1;--wash-mid:#d6dfc9;--wash-haze:#e5e9db95;--wash-edge:#eff1e945;--wash-left:#9ab4bdb3;--wash-right:#d5c094a8;--wash-floor:#cad7c1b8}
body[data-postcard-current='loving-more-than-the-city']{--wash-base:#cfa993;--wash-mid:#edceae;--wash-haze:#f0e0d195;--wash-edge:#f4ede545;--wash-left:#a3b1c1b3;--wash-right:#e3af86a8;--wash-floor:#e3c1a8b8}
body[data-postcard-current='same-table']{--wash-base:#a8b6ca;--wash-mid:#ced5de;--wash-haze:#e2e5ea95;--wash-edge:#eff0f245;--wash-left:#96a9c2b3;--wash-right:#d9cbb7a8;--wash-floor:#c1cbd9b8}
body[data-postcard-current='a-little-pause']{--wash-base:#b6c39c;--wash-mid:#d9dfc3;--wash-haze:#e6e9db95;--wash-edge:#eff0e745;--wash-left:#a4b889b3;--wash-right:#dabc93a8;--wash-floor:#ccd5b4b8}
body[data-postcard-current='one-more-song']{--wash-base:#d2a28d;--wash-mid:#edcbad;--wash-haze:#efdecf95;--wash-edge:#f4ece445;--wash-left:#97b7b3b3;--wash-right:#e6a77da8;--wash-floor:#e4bea3b8}
body[data-postcard-current='got-invited-by-anthropic']{--wash-base:#d7a685;--wash-mid:#eed0af;--wash-haze:#f0e2d295;--wash-edge:#f4ede545;--wash-left:#aac0d2b3;--wash-right:#df9564a8;--wash-floor:#e6c5a3b8}
body[data-postcard-current='going-to-an-ashram']{--wash-base:#b6bd81;--wash-mid:#d5d4aa;--wash-haze:#e4dfc795;--wash-edge:#eee9d845;--wash-left:#95ad83b3;--wash-right:#cb9575a8;--wash-floor:#c7c699b8}
/* Work and notes share one palette; notes gives the paper more breathing room. */
body.site-atmosphere.work-page,body.site-atmosphere.notes-page{
 --wash-base:#9baff7;--wash-mid:#abd2fb;--wash-haze:#c2e5fd95;--wash-edge:#d7eef945;
 --wash-left:#6daef9b3;--wash-right:#a18febaa;--wash-floor:#b0c4f7b8;
 --atmosphere-nav:#46526a;
}
body.site-atmosphere.notes-page{--atmosphere-strength:.5}
body.site-atmosphere{
 --atmosphere-paper:#f8f8f8;
 --atmosphere-nav:#5d6981;
 --atmosphere-nav-active:#253249;
 --atmosphere-height:clamp(260px,38svh,430px);
 --atmosphere-bottom:-60px;
 transition:--wash-base .8s,--wash-mid .8s,--wash-haze .8s,--wash-edge .8s,--wash-left .8s,--wash-right .8s,--wash-floor .8s;
 background:var(--atmosphere-paper);background-blend-mode:normal;
 color:var(--body-ink,#404040);isolation:isolate;overflow-x:clip;
}
body.site-atmosphere::before,.site-atmosphere-water{
 position:fixed;inset:auto -8vw var(--atmosphere-bottom);height:var(--atmosphere-height);
 z-index:-1;pointer-events:none;contain:layout style;
 opacity:var(--atmosphere-strength,1);
}
body.site-atmosphere::before{
 content:'';
 background:
  radial-gradient(ellipse 92% 80% at 54% 104%,var(--wash-base,#a4baff) 0%,var(--wash-mid,#b3d8ff) 28%,var(--wash-haze,#c2e5fd95) 64%,transparent 90%),
  radial-gradient(ellipse 66% 68% at 4% 96%,var(--wash-mid,#b3d8ff) 0%,var(--wash-edge,#d7eef945) 44%,transparent 84%),
  linear-gradient(to top,var(--wash-floor,#b7ccffb3) 0%,var(--wash-edge,#d7eef945) 42%,transparent 84%);
 filter:blur(20px);
}
.site-atmosphere-water{overflow:visible}
/* Offset, translucent pools leave paper between the colors instead of a solid stripe. */
.site-atmosphere-water::before,.site-atmosphere-water::after{
 content:'';position:absolute;inset:0 -4% -22%;
 transform-origin:50% 100%;
}
.site-atmosphere-water::before{
 background:
  radial-gradient(ellipse 34% 88% at 20% 68%,var(--wash-left,#77b6ffa6) 0% 22%,transparent 86%),
  radial-gradient(ellipse 44% 78% at 80% 83%,var(--wash-right,#a99fff98) 0% 26%,transparent 90%);
 filter:blur(21px);
 transform:translate3d(1%,-1%,0) rotate(-3deg) scale(1.04);
 animation:site-atmosphere-undertow 29s ease-in-out infinite alternate;
}
.site-atmosphere-water::after{
 background:
  radial-gradient(ellipse 46% 72% at 0% 96%,var(--wash-base,#a4baff) 0% 24%,transparent 88%),
  radial-gradient(ellipse 28% 94% at 57% 96%,var(--wash-right,#a99fff98) 0% 24%,transparent 88%),
  radial-gradient(ellipse 40% 74% at 104% 70%,var(--wash-left,#77b6ffa6) 0% 18%,transparent 88%);
 filter:url(#site-atmosphere-water-filter);opacity:.92;
 transform:translate3d(-1%,1%,0) scale(1.04);
 animation:site-atmosphere-tide 23s ease-in-out infinite alternate;
}
.site-atmosphere-filter{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.site-atmosphere.is-atmosphere-paused .site-atmosphere-water::before,.site-atmosphere.is-atmosphere-paused .site-atmosphere-water::after{animation-play-state:paused}
@keyframes site-atmosphere-undertow{
 from{transform:translate3d(1%,-1%,0) rotate(-3deg) scale(1.04)}
 to{transform:translate3d(-1.5%,2%,0) rotate(1deg) scale(1.08)}
}
@keyframes site-atmosphere-tide{
 from{transform:translate3d(-1%,1%,0) scale(1.04)}
 to{transform:translate3d(1.5%,-2%,0) scale(1.08)}
}

/* Keep the paper and navigation in the same visual family as the postcard. */
.site-atmosphere .footer-navigation{gap:32px}
.site-atmosphere .footer-navigation a{
 color:var(--atmosphere-nav);min-height:44px;min-width:44px;
 justify-content:center;font-size:.875rem;text-decoration:none;
}
.site-atmosphere .footer-navigation a:hover,.site-atmosphere .footer-navigation a[aria-current]{color:var(--atmosphere-nav-active)}
.site-atmosphere .notes-window{
 border:1px solid #0000000c;border-radius:14px;
 box-shadow:0 20px 38px -10px #29384926,0 1px 2px #26324112;
}
.site-atmosphere .notes-sidebar{background:#f3f4f6;border-right-color:#e7e9ed}
.site-atmosphere .story-card{
 background:#f3f3f6;border:0;border-radius:28px;box-shadow:none;
}
.site-atmosphere .story-card h2{font-size:1.125rem}
.site-atmosphere .story-card-heading>p{font-size:1rem}
.site-atmosphere.story-page .story-topbar{
 background:linear-gradient(var(--atmosphere-paper) 70%,#f8f8f800);
}
.site-atmosphere.story-page .story-topbar a,.site-atmosphere.story-page .story-topbar button{color:var(--atmosphere-nav)}
.site-atmosphere.story-page .story-topbar a:hover,.site-atmosphere.story-page .story-topbar button:hover{color:var(--atmosphere-nav-active)}
.site-atmosphere .story-progress span{background:#8093b4}
.site-atmosphere.not-found-page .retro-browser{box-shadow:0 20px 48px -12px #29384938,0 1px 2px #2632411a}

/* Keep navigation on the same bottom baseline on tall tablets and phones too.
   The content keeps its established stage height and centred position. */
.site-atmosphere .site-frame{
 grid-template-rows:minmax(0,1fr) 44px;align-content:normal;align-items:center;
}
.site-atmosphere .site-frame>.site-stage{height:var(--site-stage-height)}

/* Larger desktop windows, without changing the established note reading size. */
@media(min-width:951px){
 .site-atmosphere .site-frame{
  --site-stage-height:min(670px,calc(100svh - 220px));
  --site-gap:36px;
  padding-top:60px;padding-bottom:max(24px,env(safe-area-inset-bottom));
 }
 .site-atmosphere .site-frame>.site-stage{width:min(100%,1040px);height:var(--site-stage-height)}
 .site-atmosphere .stories-index.site-frame{--site-stage-height:min(520px,calc(100svh - 220px))}
 .site-atmosphere .story-stack{--stack-unit:clamp(.3px,calc((var(--site-stage-height) - 198px) / 300),1.13px)}
}
@media(max-width:950px){
 .site-atmosphere.notes-page .site-frame>.site-stage{width:min(100%,920px)}
}
@media(min-width:768px) and (max-width:950px) and (min-height:501px){
 .site-atmosphere .stories-index.site-frame{--site-stage-height:min(440px,calc(100svh - 180px))}
}
@media(max-width:639px){
 body.site-atmosphere{--atmosphere-height:clamp(270px,39svh,340px);--atmosphere-bottom:-58px}
 .site-atmosphere .footer-navigation{gap:28px}
 .site-atmosphere .notes-window{border-radius:12px}
 .site-atmosphere .notes-sidebar{border-bottom-color:#e7e9ed}
 .site-atmosphere .story-card{border-radius:20px}
 .site-atmosphere .story-card h2{font-size:1rem}
 .site-atmosphere .story-card-heading>p{font-size:.8125rem}
}
@media(min-width:951px) and (max-height:600px){
 .site-atmosphere .site-frame{--site-stage-height:calc(100svh - 132px);--site-gap:20px;padding-top:28px;padding-bottom:20px}
 .site-atmosphere .stories-index.site-frame{--site-stage-height:calc(100svh - 132px)}
 .site-atmosphere .story-card{padding:20px;gap:8px}
 .site-atmosphere .story-stack{--stack-unit:clamp(.3px,calc((var(--site-stage-height) - 150px) / 300),.8px)}
}
@media(prefers-reduced-motion:reduce){body.site-atmosphere{transition:none}.site-atmosphere-water::before,.site-atmosphere-water::after{animation:none;transform:none}}
@media print{
 body.site-atmosphere{background:#fff;isolation:auto}
 body.site-atmosphere::before,.site-atmosphere-water,.site-atmosphere-filter{display:none}
}