/* The Dial: sticky translucent nav and footer.
   Standalone (no tokens, no global resets) so every page can use it, including
   the dashboard and the unsubscribe page. Fonts are loaded by each page. */
.dnav, .dnav *, .dfoot, .dfoot * { box-sizing:border-box; }
.dnav a, .dfoot a { text-decoration:none; }
/* Page content sits in a centred 1240px column with a gutter either side. The nav and footer
   use the same edge so the wordmark and buttons line up with the content on wide screens. */
:root { --dwrap:1240px; --dedge:max(clamp(20px,4vw,56px), calc((100% - 1240px) / 2)); }
.dnav, .dfoot { font-family:'EB Garamond',Georgia,serif; }
/* Sticky translucent nav (every page) */
.dnav { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px var(--dedge); background:rgba(14,20,56,0.72);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid rgba(251,250,246,0.12); }
.dnav a { color:#FBFAF6; }
.dnav-mark { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:20px; letter-spacing:0.3em; white-space:nowrap; }
.dnav a.dnav-mark:hover { color:#F3EBA6; }
.dnav-links { display:flex; align-items:center; gap:clamp(14px,2.4vw,32px); flex-wrap:wrap; justify-content:flex-end; }
.dnav-links a { font-size:12px; letter-spacing:0.24em; text-transform:uppercase; white-space:nowrap; }
.dnav-links a:hover { color:#F3EBA6; }
.dnav-links a[aria-current="page"] { color:#F3EBA6; border-bottom:1px solid #F3EBA6; padding-bottom:2px; }
.dnav-links a.dnav-join { color:#16255E; background:#FBFAF6; padding:10px 16px; }
.dnav-links a.dnav-join:hover { background:#F3EBA6; color:#16255E; }
.dnav-break { display:none; }
.dnav-toggle { display:none; }
@media (max-width:620px) {
  html { scroll-padding-top:76px; }
  .dnav { padding-top:14px; padding-bottom:14px; }
  .dnav-mark { font-size:18px; }

  /* Without JavaScript the links simply wrap onto a second row */
  .dnav:not(.has-menu) { flex-wrap:wrap; gap:10px 16px; }
  .dnav:not(.has-menu) .dnav-links { width:100%; justify-content:space-between; gap:12px; }

  /* With JavaScript: a Menu button that opens the links as a panel under the bar */
  .dnav.has-menu .dnav-toggle { display:inline-flex; align-items:center; border:1px solid rgba(251,250,246,0.55); background:transparent; color:#FBFAF6;
    font-family:'EB Garamond',Georgia,serif; font-size:12px; letter-spacing:0.24em; text-transform:uppercase; padding:10px 16px; cursor:pointer; }
  .dnav.has-menu .dnav-toggle:hover, .dnav.has-menu.is-open .dnav-toggle { background:rgba(251,250,246,0.12); }
  .dnav.has-menu .dnav-links { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:0;
    padding:4px 0 20px; background:rgba(14,20,56,0.97); border-bottom:1px solid rgba(251,250,246,0.12); }
  .dnav.has-menu.is-open .dnav-links { display:flex; }
  .dnav.has-menu .dnav-links a { padding:17px clamp(20px,4vw,56px); font-size:13px; border-bottom:1px solid rgba(251,250,246,0.1); }
  .dnav.has-menu .dnav-links a[aria-current="page"] { padding-bottom:17px; }
  .dnav.has-menu .dnav-links a.dnav-join { margin:20px clamp(20px,4vw,56px) 0; padding:15px 16px; text-align:center; border-bottom:0; }
}

/* Footer (light pages) */
.dfoot { padding:30px var(--dedge); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:#6A7398; }
.dfoot-mark { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:15px; letter-spacing:0.3em; color:#16255E; white-space:nowrap; }
.dfoot-links { display:flex; gap:24px; flex-wrap:wrap; }
.dfoot-links a { color:#6A7398; }
.dfoot-links a:hover { color:#1B3FC9; }