/* ============================================================
   BASE — reset, document defaults, stacking layers
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-weight:300;font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.72;color:var(--tx);background:var(--mint);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

/* ============================================================
   LAYERS — flat colour wash (0), WebGL ribbons (1), content (2)
   ============================================================ */
#backdrop{position:fixed;inset:0;z-index:0;background:var(--mint);transition:background-color 1s var(--ease)}
body[data-theme="mint"]   #backdrop{background:var(--mint)}
body[data-theme="paper"]  #backdrop{background:var(--paper)}
body[data-theme="turq"]   #backdrop{background:var(--turq)}
body[data-theme="yellow"] #backdrop{background:var(--yellow)}
body[data-theme="pink"]   #backdrop{background:var(--pink)}
#field{position:fixed;inset:0;z-index:1;pointer-events:none}
#page{position:relative;z-index:2}

/* ============================================================
   LAYOUT — section shell
   ============================================================ */
.sec{position:relative;padding:clamp(90px,12vh,150px) var(--pad)}
.wrap{max-width:var(--maxw);margin:0 auto;width:100%}
.on-color{color:var(--ink)}

/* an eyebrow + heading intro block, held to a comfortable measure */
.sec-head{max-width:44ch}
.sec-head--wide{max-width:46ch}
.sec-head .lead{margin-top:1.2rem}

/* frosted glass — ribbons stay visible, type stays readable */
.panel,.day-card,.cell,.card,footer{
  background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}
.panel{border-radius:4px;padding:clamp(22px,2.8vw,38px)}
.panel .em{color:var(--turq-deep)}
.panel .eyebrow{color:var(--tx-muted)}
.panel .eyebrow::before{background:var(--turq)}
.panel .muted{color:var(--tx-muted)}
.panel .sec-head{max-width:none;padding:0}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .panel,.day-card,.cell,.card,footer{background:rgba(255,255,255,.88)}
}

.icons{position:absolute;left:0;top:0;width:0;height:0;overflow:visible;pointer-events:none}
.wa-icon{width:1.1em;height:1.1em;flex:none;display:block}

footer{padding:2rem var(--pad) 2.6rem;font-size:.72rem;letter-spacing:.06em;color:var(--tx-muted);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;position:relative;
  border-radius:0;border-left:0;border-right:0;border-bottom:0}

footer a{color:inherit;text-decoration:none;border-bottom:1px solid var(--turq);padding-bottom:1px}
footer a:hover{color:var(--turq-deep)}