/* The Aluna Foundry: shared base for every page (reset, grain, type utilities, links, footer). */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--black);scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--black);color:var(--white);font-family:var(--micro);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--gold);outline-offset:5px}
body::after{content:'';position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
.u{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size .55s var(--ease),color .3s}
.u:hover{background-size:0 1px}
footer .sig{font-family:var(--display);font-size:18px}
footer nav{display:flex;gap:26px;flex-wrap:wrap}
footer nav a:hover{color:var(--white)}
footer .legal{flex-basis:100%;margin-top:14px;color:rgba(246,242,234,.4)}
/* the header stays with the visitor on every page: clear at the top, a quiet bar once the page moves */
header.top{position:fixed;transition:background-color .4s ease,padding .4s ease,border-color .4s ease,opacity .5s ease,visibility 0s;border-bottom:1px solid transparent}
header.top.stuck{padding-top:14px;padding-bottom:14px;background:color-mix(in srgb,var(--black) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:var(--hair)}
/* phones: an app-like bar at the bottom, in thumb reach (Services · A · Book a call); the top header steps aside */
.mbar,.msheet{display:none}
@media (max-width:860px){
  header.top,.topright{display:none!important}
  .mbar{position:fixed;z-index:80;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    padding:10px 20px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--black) 92%,transparent);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--hair);transition:transform .35s ease}
  .mbar.away{transform:translateY(100%)}
  .mbar a,.mbar button{font-family:var(--micro);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--white);padding:10px 0}
  .mbar .mb-r{justify-self:end;color:var(--gold)}
  .mbar .mb-a{display:block;width:30px;height:32px;padding:0;margin:0 24px;background:url("../img/brand/a-mark.png") center/contain no-repeat}
  .mbar button{justify-self:start;background:none;border:0;cursor:pointer;text-align:left}
  /* the menu panel slides up from the bar, in the page's own ground */
  .msheet{display:block;position:fixed;z-index:79;inset:0;background:color-mix(in srgb,var(--black) 70%,transparent);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
  .msheet.ms-open{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
  .ms-in{position:absolute;left:0;right:0;bottom:0;padding:34px 20px calc(84px + env(safe-area-inset-bottom));background:var(--black);border-top:1px solid var(--hair);
    transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .msheet.ms-open .ms-in{transform:none}
  .ms-k{margin:22px 0 6px;font-family:var(--display);font-style:italic;font-size:17px;color:var(--gold)}
  .ms-k:first-child{margin-top:0}
  .ms-big{display:block;padding:6px 0;font-family:var(--display);font-size:30px;line-height:1.15;letter-spacing:-.02em;color:var(--white)}
  .ms-mail{display:block;padding:6px 0;font-family:var(--micro);font-size:14px;color:var(--white)}
  html.ms-lock{overflow:hidden}
  footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
}