/* 10 · bar: the frame every page shares. The mark and who it is for, and only three controls on the whole page
   that are buttons of the frame: the switch, "Pull a free card" here, and "Sign up" in the hero. No menu. */

.rw-bar{position:relative;z-index:20;display:flex;align-items:center;gap:12px 22px;flex-wrap:wrap}
.rw-mark{font-family:var(--f-display);font-size:24px;font-weight:700;color:var(--rw-mark-ink);text-decoration:none}
.rw-mark__well{color:var(--rw-mark-accent)}
/* the mark's dot: the first l of well wears one, a full stop raised over the stem, in the accent */
.rw-mark__l--dot{position:relative}
.rw-mark__l--dot::after{content:"";position:absolute;left:50%;top:-.16em;width:.17em;height:.17em;border-radius:50%;background:currentColor;transform:translateX(-50%)}

/* who it is for: one line, the lit "and" links to the manifesto */
.rw-tagline{font-family:var(--f-data);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rw-tagline-ink);display:flex;flex-wrap:wrap;gap:.6ch}
.rw-tagline__and{color:var(--rw-and-ink);font-weight:700;text-decoration:none;letter-spacing:.18em;
  text-shadow:0 0 10px var(--rw-and-glow),0 0 22px color-mix(in srgb,var(--rw-and-glow) 50%,transparent)}

/* the door: the main action, white on its wine at night, ink on its white rose by day (--rw-door-lit-ink) */
.rw-bar__end{margin-left:auto;display:flex;align-items:center;gap:10px}
.rw-bar .rw-door{align-self:center}   /* its look is the Button type, 06-button.css --door */
.rw-bar__end .rw-toggle{margin-left:8px}

/* theme: a plain switch, on is night (wine-cherry), off is day (rose-white) */
.rw-toggle{position:relative;width:44px;height:26px;flex:none;border:0;border-radius:999px;padding:0;background:var(--rw-toggle-off);transition:background-color var(--t2) var(--e)}
.rw-toggle__knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--rw-toggle-knob);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform var(--t2) var(--e)}
.rw-toggle[aria-checked="true"]{background:var(--rw-toggle-on)}
.rw-toggle[aria-checked="true"] .rw-toggle__knob{transform:translateX(18px)}

/* narrow: the tagline takes its own line; the switch keeps the top right corner, level with the mark */
@media (max-width:760px){
  .rw-bar{padding-right:56px}
  .rw-bar__end .rw-toggle{position:absolute;top:4px;right:0;margin:0}
  .rw-tagline{order:5;width:100%}
}