/* ═══════════════════════════════════════════════════════════════════
   THE CROSSING · THE MENU

   One masthead for every page of the site, old build or new. It is
   loaded last so it wins over a page's own .topbar rules, and every
   colour resolves through var() fallbacks so it reads correctly in
   both token worlds: the new pages' blend palette (--caps, --accent,
   --door, --panel-line) and the older pages' shared/ephemeris.css
   palette (--sub, --violet/--wine, --gilt, --hair).

   The singing bowl and the sect toggle live together in .topbar-tools,
   a single instrument cluster at the masthead's right hand: they are
   the two things on this site you can play, and they belong side by
   side rather than adrift among the links.
   ═══════════════════════════════════════════════════════════════════ */

/* A page's SVG filter holder is an inline element: left unstyled it
   contributes a line box and silently pushes that page's masthead
   ~26px lower than every other page's. Taken out of flow here so the
   headroom below is the same everywhere. */
.filter-defs { position:absolute; width:0; height:0; overflow:hidden; }

.topbar { position:relative; z-index:30; }
.topbar-inner {
  max-width:72rem; margin:0 auto;
  /* the masthead is given air above it: half an inch more than the
     old build's 1.2rem, declared here so every page breathes the
     same regardless of what its own stylesheet asks for */
  padding:4.2rem clamp(1.2rem,4vw,2.4rem) 1.2rem;
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
@media (max-width:640px) {
  .topbar-inner { padding-top:3rem; }
}

/* the mark and the name */
.topbar .wordmark {
  font-family:var(--display,Georgia,serif); font-size:1.35rem;
  color:var(--ink,#37312C); text-decoration:none; font-kerning:none;
  margin-right:auto; display:inline-flex; align-items:center; gap:.5rem;
  border:0;
}
.topbar .wordmark em { font-style:italic; color:var(--accent,var(--violet,#6847E8)); }
.topbar .mark { width:2.9rem; height:auto; flex:none; }
html[data-sect="nocturnal"] .topbar .mark { filter:invert(1) hue-rotate(180deg); }

/* the links */
.topbar nav { display:flex; gap:clamp(.85rem,1.9vw,1.5rem); align-items:center; }
.topbar nav a {
  font-family:var(--caps,var(--sub,sans-serif));
  font-size:var(--caps-xs,.57rem); letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink,#37312C); text-decoration:none;
  padding-bottom:.25rem; border-bottom:1px solid transparent;
  transition:border-color .18s ease, color .18s ease;
}
.topbar nav a:hover,
.topbar nav a[aria-current] {
  border-bottom-color:var(--accent,var(--violet,#6847E8));
  color:var(--accent-text,var(--wine,#5535C9));
}
/* the old build gave one link a filled pill; the new masthead keeps
   every destination equal and lets the page's own buttons do the asking */
.topbar nav a.nav-cta { background:none; padding:0 0 .25rem; border-radius:0; }

/* ═══ the instruments: bowl and sect, kept together ═══ */
.topbar-tools { display:flex; align-items:center; gap:.5rem; }
/* older pages nudge .sect with a negative margin of their own; the
   cluster sets its own spacing so the pair reads identically sitewide */
.topbar-tools > .bell, .topbar-tools > .sect { margin:0; }

.topbar .bell {
  all:unset; width:2rem; height:2rem; box-sizing:border-box;
  display:inline-grid; place-items:center;
  border:1px solid var(--hair,#DCD2C9); border-radius:50%;
  cursor:pointer; transition:border-color .2s ease;
}
.topbar .bell:hover, .topbar .bell:focus-visible {
  border-color:var(--door,var(--gilt,#8A6524));
}
.topbar .bell:focus-visible {
  outline:2px solid var(--accent,var(--violet,#6847E8)); outline-offset:3px;
}
.topbar .bell svg { width:1.05rem; height:1.05rem; overflow:visible; }
.topbar .bell .bell-bowl {
  fill:color-mix(in srgb, var(--door,var(--gilt,#8A6524)) 18%, transparent);
  stroke:var(--door,var(--gilt,#8A6524)); stroke-width:1.4;
}
.topbar .bell .bell-rim {
  stroke:var(--door,var(--gilt,#8A6524)); stroke-width:1.4; stroke-linecap:round;
}
.topbar .bell .bell-mallet {
  fill:none; stroke:var(--dim,var(--muted,#5A5248)); stroke-width:1.3;
  stroke-linecap:round;
}

.topbar .sect {
  font-family:var(--caps,var(--sub,sans-serif));
  font-size:var(--caps-xs,.57rem); letter-spacing:.2em;
  text-transform:uppercase; padding:.6rem 1.1rem; border-radius:99px;
  border:1px solid var(--hair,#DCD2C9); color:var(--ink,#37312C);
  background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem;
  transition:border-color .18s ease, color .18s ease;
}
.topbar .sect:hover {
  border-color:var(--accent,var(--violet,#6847E8));
  color:var(--accent-text,var(--wine,#5535C9));
}
.topbar .sect-glyph { font-size:.95em; line-height:1; }

.topbar .menu-toggle {
  display:none; font-family:var(--caps,var(--sub,sans-serif));
  font-size:var(--caps-xs,.57rem); letter-spacing:.2em; text-transform:uppercase;
  background:none; border:1px solid var(--ink,#37312C); color:var(--ink,#37312C);
  padding:.45rem .8rem; cursor:pointer; border-radius:0;
}

@media (max-width:860px) {
  .topbar .menu-toggle { display:block; }
  .topbar nav {
    display:none; order:4; flex-basis:100%; flex-direction:column;
    align-items:flex-start; gap:.9rem; padding-top:1rem;
  }
  .topbar.is-open nav { display:flex; }
  .topbar .bell { width:1.8rem; height:1.8rem; }
  .topbar .bell svg { width:.95rem; height:.95rem; }
}

/* ═══ THE FOOTER'S COLUMNS ═══
   The quick-links column was retired, so the grid's fourth track would
   otherwise sit empty and pull the brand column narrow. Declared here,
   after each page's own stylesheet, so every page counts the same
   three columns: the brand, then Navigate and Follow. */
.foot-inner { grid-template-columns:1.6fr 1fr 1fr; }
@media (max-width:900px) { .foot-inner { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .foot-inner { grid-template-columns:1fr; } }

/* ═══ DIVIDED GRIDS ROUND AS ONE BLOCK ═══
   .quadrants and .square-chart are grids whose 1px gaps ARE the
   hairlines: the container's background shows through them. Rounding
   each cell therefore carved a curve on every inner corner too, and
   where four of them met at the centre they pinched into a small
   notch, which is what stopped the block reading as truly rounded.
   The corner belongs to the block, not the cell: the container takes
   the radius and clips, the cells stay square, and the hairline cross
   runs clean to the edges. Declared here so every page that uses this
   pattern agrees. */
.quadrants, .square-chart { border-radius:14px; }
.quad, .sc-cell { border-radius:0; }
/* Clipping the container was the obvious way to round it, and it was
   wrong: the chart's ASC/MC/DSC/IC labels hang deliberately outside the
   box, and overflow:hidden cut them in half. So nothing is clipped.
   Only the four corner CELLS take an outside corner each, which rounds
   the block's silhouette while the interior stays square and the
   hairline cross still runs clean to the edges. */
.quadrants > .quad:nth-child(1) { border-top-left-radius:14px; }
.quadrants > .quad:nth-child(2) { border-top-right-radius:14px; }
.quadrants > .quad:nth-child(3) { border-bottom-left-radius:14px; }
.quadrants > .quad:nth-child(4) { border-bottom-right-radius:14px; }
.square-chart > .sc-cell--tl { border-top-left-radius:14px; }
.square-chart > .sc-cell--tr { border-top-right-radius:14px; }
.square-chart > .sc-cell--bl { border-bottom-left-radius:14px; }
.square-chart > .sc-cell--br { border-bottom-right-radius:14px; }

/* ═══ THE CARDS THE SWEEP FOUND ═══ boxes that carry both an edge and
   a fill are cards, and cards round at 14px wherever they appear. */
.inc-cell, .lesson, .bene, .isnt-col, .enrol-card, .enrol-terms,
.mapgate, .next-card, .draw-slip, .win-card, .slip, .tcard,
.mod-card, .notes { border-radius:14px; }
.btn, .btn--lg, .btn--sm, .btn--ghost { border-radius:999px; }


/* ═══ MOBILE ERGONOMICS ══════════════════════════════════════════════
   From a phone audit of every page in both sects. This sheet is linked
   last in every head, so these floors win the cascade sitewide.
   Desktop is untouched: everything here lives behind one media query. */
@media (max-width: 640px) {
  /* The caps tokens are deliberately left alone: a legibility bump to
     9.6px was tried here and, with Mattone's wide letterspacing, read
     as big and clunky on a phone. The dainty size is the design.
     Only the touch areas below are enlarged, which changes nothing
     visually. */

  /* Thumb targets. Apple's floor is 44px; these were 27 to 29px tall.
     Padding grows the touchable box without changing the visual size:
     the negative margin cancels the layout shift. */
  .topbar .bell { padding: .55rem; margin: -.35rem; box-sizing: content-box; }
  .topbar .menu-toggle { padding: .7rem .9rem; margin: -.35rem -.4rem; }

  /* Footer links rendered as 12px-tall full-width slivers, stacked:
     mis-taps guaranteed. Give each row real height. */
  .foot-col a { display: inline-block; padding: .52rem 0; }

  /* The readings page's Book-a-reading text links had a 17px tap box. */
  .format-row-cta { display: inline-block; padding: .55rem 0; margin: -.35rem 0; }
}

/* ═══ LINK INK ═══ the colour of written-through links, sitewide.
   Two tokens, one per sect, editable from the Studio's Design tab.
   Scoped to links inside running text on purpose: buttons, cards,
   nav and footer keep their own dress. ═══ */
:root { --link-day:#5535C9; --link-night:#A899FF; --link-ink:var(--link-day); }
html[data-sect="diurnal"] { --link-ink:var(--link-day); }
html[data-sect="nocturnal"] { --link-ink:var(--link-night); }
main p a:not(.btn):not(.affiliate), main li a:not(.btn),
main blockquote a, main figcaption a, .article-body a,
main .stand a, .post-tip a {
  color: var(--link-ink);
}