/* GAJRA Earth: the garland, at every scale.
   Night ground because the aurora needs the dark. Jasmine and marigold at
   human scale, auroral green and oxygen red at planetary scale.
   Committed single-theme design: this site lives at night, deliberately.
   House rules: AU English, no em dashes, no analytics, readable without JS. */

:root {
  --night:        #0B0E15;
  --night-raised: #111623;
  --night-deep:   #070A10;
  --jasmine:      #F4F1E7;
  --jasmine-dim:  #B9BBAE;
  --faint:        #838878;
  --marigold:     #F2A93B;
  --marigold-hi:  #FFD98A;
  --thread:       #C9A24B;
  --aurora:       #5FE8A9;
  --aurora-soft:  rgba(95, 232, 169, 0.14);
  --oxygen:       #FF7A76;
  --violet:       #A493F5;
  --line:         #232B3A;

  /* One type scale. Every size on this site is one of these steps: the
     alternative was 26 hand-picked sizes that no two sections agreed on. */
  --t-sm:    0.95rem;
  --t-label: 1rem;
  --t-body:  1.125rem;
  --t-md:    1.3rem;
  --t-lg:    1.6rem;
  /* capped so the association name holds one line in the masthead: it is
     the longest heading on the site, so it sets the ceiling for all of them */
  --t-hero:  clamp(2.1rem, 6vw, 3.1rem);

  --display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", "DejaVu Sans Mono", monospace;

  --maxw: 46rem;
  --wide: 62rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--jasmine);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- night sky ---------- */

.sky {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(244,241,231,.5), transparent 55%),
    radial-gradient(1px 1px at 31% 8%,  rgba(244,241,231,.35), transparent 55%),
    radial-gradient(1.5px 1.5px at 47% 30%, rgba(244,241,231,.4), transparent 55%),
    radial-gradient(1px 1px at 63% 12%, rgba(244,241,231,.45), transparent 55%),
    radial-gradient(1px 1px at 78% 26%, rgba(244,241,231,.3), transparent 55%),
    radial-gradient(1.5px 1.5px at 88% 7%, rgba(244,241,231,.4), transparent 55%),
    radial-gradient(1px 1px at 22% 55%, rgba(244,241,231,.22), transparent 55%),
    radial-gradient(1px 1px at 70% 62%, rgba(244,241,231,.18), transparent 55%),
    linear-gradient(180deg, var(--night-deep) 0%, var(--night) 38%, var(--night) 100%);
}

/* the aurora: a garland the Sun strings around the planet's crown */
.aurora {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 72vh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -10%;
  right: -10%;
  height: 90%;
  filter: blur(42px);
  opacity: .8;
}
.aurora::before {
  background: linear-gradient(104deg,
    transparent 8%,
    rgba(95, 232, 169, 0.16) 30%,
    rgba(164, 147, 245, 0.10) 55%,
    rgba(255, 122, 118, 0.07) 74%,
    transparent 92%);
  transform: skewY(-4deg);
  animation: sway 26s ease-in-out infinite alternate;
}
.aurora::after {
  background: linear-gradient(80deg,
    transparent 12%,
    rgba(95, 232, 169, 0.09) 42%,
    rgba(95, 232, 169, 0.05) 60%,
    transparent 88%);
  transform: skewY(3deg);
  animation: sway 34s ease-in-out infinite alternate-reverse;
}
@keyframes sway {
  from { transform: translateX(-3%) skewY(-4deg); }
  to   { transform: translateX(3%)  skewY(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora::before, .aurora::after { animation: none; }
}
.aurora.low { height: 38vh; }
.aurora.low::before, .aurora.low::after { opacity: .5; }

/* ---------- layout ---------- */

.wrap  { max-width: var(--maxw); margin: 0 auto; padding: 0 1.35rem; }
.wrapw { max-width: var(--wide); margin: 0 auto; padding: 0 1.35rem; }

main { position: relative; }

/* ---------- header ---------- */

header.top {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 14, 21, 0.7);
}
.top-in {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0.85rem 1.35rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--jasmine);
  font-family: var(--display);
  font-size: var(--t-body);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.brand svg { display: block; }
nav.primary {
  display: flex;
  gap: 1.05rem;
  flex-wrap: wrap;
  margin-left: auto;
  font-size: var(--t-label);
}
nav.primary a {
  color: var(--jasmine-dim);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 1px solid transparent;
}
nav.primary a:hover { color: var(--jasmine); }
nav.primary a[aria-current="page"] {
  color: var(--marigold);
  border-bottom-color: var(--thread);
}

/* ---------- type ---------- */

.kicker {
  font-family: var(--body);
  font-size: var(--t-body);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--thread);
}

/* The masthead. Three voices, one lockup, in a hierarchy you can read from
   across the room: the invitation, the name it invites you into, and the
   line that says what the name is for. The moving colour belongs to the
   three words, because the three words are the entire point of the site. */
.assoc-eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.5;
  color: var(--marigold-hi);
  margin: 0 0 0.7rem;
  max-width: none;
  text-wrap: balance;
}
.hero.tall h1.assoc-hero,
.assoc-hero {
  font-family: var(--display);
  font-weight: 400;
  /* sized so the three words hold one line on a desktop width: they are the
     name, and breaking them mid-name reads as scaffolding, not as a title */
  font-size: var(--t-hero);
  line-height: 1.04;
  letter-spacing: -0.014em;
  color: var(--jasmine);
  text-wrap: balance;
  margin: 0;
  max-width: 15em;
}
.ah-earth {
  /* its own line, white and quieter, so the shimmer above stays the subject */
  display: block;
  font-size: 0.56em;
  letter-spacing: -0.005em;
  line-height: 1.5;
  color: var(--jasmine);
}
.beyondline {
  /* the lyric the site is named after. Second voice, not a footnote: bigger
     than any body text on the page, and lit rather than dimmed. */
  font-family: var(--display);
  font-size: var(--t-lg);
  line-height: 1.3;
  color: var(--jasmine);
  margin: 1.1rem 0 0;
  max-width: 30rem;
  text-wrap: balance;
}
.beyondword {
  color: var(--marigold-hi);
  font-style: italic;
}
@media (max-width: 34rem) {
  /* on a phone the name wraps, so on Earth has to grow and the tagline has
     to give way, or the lockup inverts and the tagline outranks the name */
  .assoc-eyebrow { letter-spacing: 0.14em; }
  .ah-earth { font-size: 0.68em; }
  .beyondline { font-size: var(--t-md); }
}

h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-hero);
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0.9rem 0 0;
}
h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.22;
  letter-spacing: -0.008em;
  text-wrap: balance;
  margin: 0 0 1rem;
}
h3 {
  font-family: var(--body);
  font-weight: 600;
  /* Never below the paragraph size. Body is 18px and the rem is 16px, so
     1.125rem is the floor for anything that calls itself a heading. */
  font-size: var(--t-md);
  line-height: 1.35;
  margin: 0 0 0.5rem;
}
.lead {
  font-family: var(--display);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--jasmine-dim);
  max-width: 36rem;
  margin: 1.1rem 0 0;
}
/* two leads in a row (the hero opener) need a real gap between them,
   not the tight 1.1rem that separates a lead from the headline above it */
.lead + .lead { margin-top: 1.6rem; }
p { margin: 0 0 1rem; max-width: var(--maxw); }
.muted { color: var(--jasmine-dim); }
.faint { color: var(--faint); }
a { color: var(--aurora); text-underline-offset: 0.18em; }
a:hover { color: var(--marigold-hi); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--marigold);
  outline-offset: 3px;
  border-radius: 2px;
}
strong { color: var(--jasmine); font-weight: 600; }
blockquote {
  margin: 1.5rem 0;
  padding: 1.1rem 1.35rem;
  border-left: 2px solid var(--thread);
  background: var(--night-raised);
  font-family: var(--display);
  font-size: var(--t-body);
  line-height: 1.6;
}
blockquote p:last-child { margin-bottom: 0; }
code {
  font-family: var(--mono);
  font-size: 0.95em;
  background: var(--night-raised);
  border: 1px solid var(--line);
  padding: 0.08em 0.4em;
  border-radius: 3px;
}
pre {
  background: var(--night-raised);
  border: 1px solid var(--line);
  padding: 1rem 1.2rem;
  overflow-x: auto;
  border-radius: 4px;
  font-size: var(--t-label);
  line-height: 1.55;
}
pre code { background: none; border: none; padding: 0; }
hr.rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 3.2rem auto;
  max-width: var(--wide);
}

/* ---------- sections ---------- */

.hero  { padding: 5rem 0 3.4rem; position: relative; }
.pad   { padding: 3.4rem 0; }
.pad-s { padding: 2.2rem 0; }

.notice h2 { font-size: var(--t-md); margin-top: 0.6rem; }

/* ---------- chips: the honesty labels, all one size ---------- */

.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-label);
  text-decoration: none;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--jasmine-dim);
  vertical-align: middle;
}
.chip.record     { border-color: var(--thread);  color: var(--marigold-hi); }
.chip.proposal   { border-color: var(--violet);  color: var(--violet); }
.chip.invitation { border-color: var(--aurora);  color: var(--aurora); }
.chip.archived   { border-color: var(--oxygen);  color: var(--oxygen); }

/* ---------- the watch: one entry, one heading ----------
   Each logged item is its own article with a real heading, so the page can be
   skimmed by body or country and read by a screen reader as a list of things
   rather than one undifferentiated run of paragraphs. */

.entry {
  padding-top: 1.15rem;
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--line);
}
.entry:first-of-type { padding-top: 0; border-top: 0; }
.entry h3 {
  margin: 0 0 0.45rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem;
}
.entry p { margin: 0 0 0.45rem; }
.entry .src {
  font-family: var(--mono);
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  margin: 0;
}
.chip.q {
  padding: 0.1rem 0.5rem;
  border-color: var(--violet);
  color: var(--violet);
  vertical-align: baseline;
}

/* Keywords: a fixed vocabulary, so the archive stays searchable as it grows.
   Quiet by design. They are for finding things, not for reading. */
.keys {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
  margin: 0.55rem 0 0;
}
.keys span {
  font-family: var(--mono);
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.05rem 0.4rem;
}

/* ---------- ahead: the forward calendar ----------
   Date first, because the date is what you are scanning for. */

.ev {
  padding-top: 1.15rem;
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--line);
}
.ev:first-of-type { padding-top: 0; border-top: 0; }
.ev h3 { margin: 0.15rem 0 0.3rem; }
.ev p { margin: 0 0 0.45rem; }
.ev-date {
  font-family: var(--mono);
  font-size: var(--t-sm);
  letter-spacing: 0.03em;
  color: var(--marigold-hi);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}
.ev-in { color: var(--faint); }
.ev-where {
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--jasmine-dim);
}
.ev-where::before { content: "at "; color: var(--faint); }
.chip.door {
  padding: 0.1rem 0.5rem;
  border-color: var(--aurora);
  color: var(--aurora);
  vertical-align: baseline;
}
.ev.past { opacity: 0.72; }

/* Archive filter: progressive enhancement. With no JS the box is hidden and
   every entry stays on the page, which is the behaviour that matters. */
.kfilter { display: none; margin: 0 0 1.4rem; }
.js .kfilter { display: block; }
.kfilter label { display: block; margin: 0 0 0.4rem; }
.kfilter input {
  font-family: var(--body);
  font-size: var(--t-label);
  width: 100%;
  max-width: 22rem;
  padding: 0.5rem 0.7rem;
  color: inherit;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.kfilter input:focus { outline: 2px solid var(--thread); outline-offset: 2px; }
.entry[hidden] { display: none; }

/* ---------- cards ---------- */

.card {
  background: var(--night-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.35rem 1.5rem;
}
.card h3 { margin-top: 0.35rem; }
.card p:last-child { margin-bottom: 0; }
.grid {
  display: grid;
  gap: 1rem;
  /* 20rem rather than 15: a third column only appears when there is room to
     read in it, so tall narrow screens get two comfortable columns instead of
     three cramped ones */
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  max-width: var(--wide);
}

.notice {
  border: 1px solid var(--oxygen);
  border-radius: 4px;
  background: rgba(255, 122, 118, 0.05);
  padding: 1.35rem 1.5rem;
  max-width: var(--maxw);
}
.notice p:last-child { margin-bottom: 0; }

/* ---------- the three not-equals ---------- */

.neq {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  max-width: var(--wide);
}
.neq .card { border-top: 2px solid var(--thread); }
.neq .word {
  font-family: var(--display);
  font-size: var(--t-lg);
  display: block;
}
.neq .not {
  font-family: var(--body);
  font-size: var(--t-body);
  color: var(--oxygen);
  display: block;
  margin-top: 0.3rem;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--body);
  font-weight: 600;
  font-size: var(--t-label);
  text-decoration: none;
  padding: 0.7rem 1.35rem;
  border-radius: 4px;
  border: 1px solid var(--thread);
  color: var(--night);
  background: var(--marigold);
}
.btn:hover { background: var(--marigold-hi); color: var(--night); }
.btn.ghost {
  background: transparent;
  color: var(--jasmine);
  border-color: var(--line);
}
.btn.ghost:hover { border-color: var(--thread); color: var(--marigold-hi); }
.btnrow { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* ---------- garland divider: a woven gajra ----------
   Six strands wound as one coil and projected side on: four of flowers, and
   two of light set opposite each other so the weave stays balanced as it
   turns. Each strand's depth is the cosine of its phase, which sets size,
   brightness and above all paint order. Far half first, near half last, so
   the strands pass through each other rather than merely cross. */

.garland {
  position: relative;
  width: 100%;
  height: 120px;
  margin: 3.4rem 0;
  overflow: hidden;
}
.garland svg { display: block; width: 100%; height: 120px; }

.gw-far, .gw-near, .gl-rgb, .gl-white, .glspark { fill: none; stroke-linecap: round; }
.gw-far  { stroke: #7A6234; stroke-width: 1.3; opacity: 0.5; }
.gw-near { stroke: #C9A24B; stroke-width: 2.1; }
.garland .gw-near { filter: drop-shadow(0 0 3px rgba(242, 169, 59, 0.5)); }

/* the two light braids: a dim continuous fibre with a bright spark running it */
.gl-rgb   { stroke: url(#lrgb); }
.gl-white { stroke: #FFF6E2; }
.gl-rgb-far, .gl-white-far   { stroke-width: 1.6; opacity: 0.3; }
.gl-rgb-near, .gl-white-near { stroke-width: 2.6; opacity: 0.62; }

.glspark {
  stroke-dasharray: 30 210;
  stroke-linecap: round;
}
.glspark-near { stroke-width: 3.4; opacity: 1; }
.glspark-far  { stroke-width: 2; opacity: 0.5; }
.garland .glspark-near { filter: drop-shadow(0 0 5px rgba(255, 246, 226, 0.7)); }
html.js .glspark { animation: garlandspark 4.5s linear infinite; }
/* the two lights chase each other rather than travelling in lockstep */
html.js .gl-white-near.glspark, html.js .gl-white-far.glspark { animation-duration: 6.5s; animation-direction: reverse; }
@keyframes garlandspark { to { stroke-dashoffset: -240; } }

html.js .gar-weave { animation: garlandweave 34s linear infinite; }
@keyframes garlandweave { to { transform: translateX(240px); } }

@media (prefers-reduced-motion: reduce) {
  html.js .gar-weave, html.js .glspark { animation: none; }
}

/* ---------- definition block ---------- */

.defword {
  font-family: var(--display);
  font-size: var(--t-lg);
  letter-spacing: 0.01em;
}
.defword .pos { font-size: var(--t-label); color: var(--faint); font-style: italic; }
/* a real dictionary entry, quoted and sourced, so each word starts from what
   it already means to everybody rather than from what this site wants it to */
.defentry {
  border-left: 2px solid var(--thread);
  padding: 0.1rem 0 0.1rem 1.1rem;
  margin: 0 0 1.6rem;
  max-width: var(--maxw);
}
.defentry .defword { margin: 0 0 0.35rem; }
.defsense { font-family: var(--display); color: var(--jasmine); margin: 0 0 0.35rem; }
.defsrc { font-size: var(--t-label); color: var(--faint); margin: 0; }

/* ---------- scales ladder ---------- */

.rung {
  position: relative;
  border-left: 1px solid var(--line);
  padding: 0 0 2.6rem 1.75rem;
  max-width: var(--maxw);
}
.rung:last-child { padding-bottom: 0.5rem; }
.rung::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.45rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--marigold);
  box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.18);
}
.rung.green::before { background: var(--aurora); box-shadow: 0 0 0 3px var(--aurora-soft); }
.rung .scale-name {
  font-family: var(--body);
  font-size: var(--t-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--thread);
}
.rung h3 { font-family: var(--display); font-weight: 400; font-size: var(--t-md); margin: 0.3rem 0 0.5rem; }

/* ---------- questions ---------- */

.q {
  border-top: 1px solid var(--line);
  padding: 1.6rem 0;
  max-width: var(--maxw);
}
.q:last-of-type { border-bottom: 1px solid var(--line); }
.q .qnum {
  font-family: var(--mono);
  font-size: var(--t-body);
  color: var(--aurora);
  letter-spacing: 0.06em;
}
.q h3 { font-family: var(--display); font-weight: 400; font-size: var(--t-md); margin: 0.35rem 0 0.6rem; }
.q .counts {
  margin: 0.8rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--night-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: var(--t-label);
  color: var(--jasmine-dim);
}
.q .counts b { color: var(--aurora); font-weight: 600; }

/* ---------- tables ---------- */

.tablewrap { overflow-x: auto; max-width: var(--wide); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-label); }
th, td {
  text-align: left;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
}

/* ---------- reveal (progressive enhancement only) ---------- */

.reveal { opacity: 1; transform: none; }
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- footer ---------- */

footer.end {
  margin-top: 4.5rem;
  border-top: 1px solid var(--line);
  background: var(--night-deep);
  padding: 2.6rem 0 3rem;
  font-size: var(--t-label);
}
.end-in {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 1.35rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
footer.end h4 {
  font-family: var(--body);
  font-size: var(--t-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0.7rem;
  font-weight: 500;
}
footer.end ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
footer.end a { color: var(--jasmine-dim); text-decoration: none; }
footer.end a:hover { color: var(--marigold-hi); }
.colophon {
  max-width: var(--wide);
  margin: 2.4rem auto 0;
  padding: 1.6rem 1.35rem 0;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: var(--t-label);
  line-height: 1.8;
}

/* ---------- the cosmos canvas: stars, Earth, aurora ---------- */

/* the sky lives inside the hero, so it can never sit behind the reading */
.hero {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 9.5rem;
}
.hero.tall { padding: 8rem 0 14rem; }

canvas.cosmos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero .aurora {
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: 0;
}
html.cosmos-on .aurora { display: none; }

/* readability scrim: dark where the words are, clear where the Earth is */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(11, 14, 21, 0.50) 0%,
    rgba(11, 14, 21, 0.20) 42%,
    rgba(11, 14, 21, 0) 68%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero h1, .hero .lead, .hero .kicker, .hero .beyondline, .hero .assoc-eyebrow {
  text-shadow: 0 2px 30px rgba(4, 6, 12, 0.9);
}

/* skip link for keyboard and screen reader users */
.skip {
  position: absolute;
  left: -999px;
  background: var(--marigold);
  color: var(--night);
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border-radius: 4px;
  z-index: 100;
}
.skip:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
}

/* subpage heroes wear the still frame of the same sky */
.hero.still {
  background:
    linear-gradient(180deg, rgba(11, 14, 21, 0.78) 0%, rgba(11, 14, 21, 0.62) 55%, rgba(11, 14, 21, 0.9) 100%),
    url("aurora-iss-poster.jpg") center 32% / cover no-repeat;
}

/* the real sky: NASA ISS footage behind the hero, poster-first */
.skyfilm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* kintsugi seams: the crack shown in gold, drawn on approach.
   Pattern shared with Scan to Twin and the Native Nations chapter:
   each seam is a unique inline-SVG crack; pathLength="1" makes the draw
   a plain dashoffset transition; once drawn, a small light keeps flowing
   along the seam. Fully drawn and static without JS or under reduced motion. */
.kintsugi-seam {
  position: relative;
  width: min(100%, var(--wide));
  height: 2.6rem;
  margin: clamp(1.6rem, 3.4vw, 2.6rem) auto;
}
.kintsugi-seam svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.32));
}
.seam-path {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s ease;
}
.seam-branch {
  stroke-width: 1.4;
  opacity: 0.68;
  transition-duration: 0.9s;
  transition-delay: 1.1s;
}
.kintsugi-seam.is-drawn .seam-path { stroke-dashoffset: 0; }
.seam-light {
  fill: none;
  stroke: #FFF7E6;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 0.05 0.95;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: opacity 0.8s ease 1.8s;
}
.kintsugi-seam.is-drawn .seam-light {
  opacity: 0.75;
  animation: seam-flow 8s linear infinite;
  animation-delay: 2s;
}
@keyframes seam-flow {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: -1; }
}
html:not(.js) .seam-path { stroke-dashoffset: 0; transition: none; }
html:not(.js) .seam-light { display: none; }
@media (prefers-reduced-motion: reduce) {
  .seam-path { stroke-dashoffset: 0 !important; transition: none; }
  .seam-light { display: none; }
}
.kintsugi-seam + footer.end { margin-top: 0; }

/* next and previous, so the site can be read straight through */
.end-nav {
  max-width: var(--wide);
  margin: 0 auto 1.6rem;
  padding: 0 1.35rem;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 1rem;
}
.end-nav a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-decoration: none;
  color: var(--jasmine-dim);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 1.1rem;
  max-width: 22rem;
}
.end-nav a:hover { border-color: var(--thread); color: var(--jasmine); }
.en-next { text-align: right; }
.en-dir {
  font-family: var(--body);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--thread);
}
.en-prev .en-dir::before { content: "←  "; }
.en-next .en-dir::after  { content: "  →"; }
.en-name { font-family: var(--display); font-size: var(--t-md); line-height: 1.2; }
@media (max-width: 34rem) {
  .end-nav { flex-direction: column; }
  .end-nav a { max-width: none; }
  .en-next { text-align: left; }
}

/* the way home and the way back up, both plain links so they work
   with everything switched off */
.end-top {
  max-width: var(--wide);
  margin: 0 auto 2.2rem;
  padding: 0 1.35rem 1.3rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--body);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.end-top a {
  color: var(--thread);
  text-decoration: none;
  padding: 0.3rem 0;
}
.end-top a:hover { color: var(--marigold-hi); }
.totop::after { content: " \2191"; }


/* one word wearing the aurora, with a safe fallback colour */
.aurtext { color: var(--marigold-hi); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .aurtext {
    background: linear-gradient(90deg, #5FE8A9, #8FF7C6, #A493F5, #E91E8C, #F2A93B, #5FE8A9);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: aurshift 18s linear infinite;
  }
}
@keyframes aurshift {
  from { background-position: 0% 0; }
  to   { background-position: 300% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aurtext { animation: none; }
}
@media (forced-colors: active) {
  .aurtext { background: none; color: CanvasText; animation: none; }
}

/* the sky arrives: a two-second bloom instead of a slow fade-in-place */
canvas.cosmos { animation: cosmosin 1.8s ease both; }
@keyframes cosmosin {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  canvas.cosmos { animation: none; }
}

/* pause control for the sky: WCAG 2.2.2 */
.skypause {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 3;
  font-family: var(--body);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: var(--jasmine-dim);
  background: rgba(11, 14, 21, 0.55);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
}
.skypause:hover { color: var(--marigold-hi); border-color: var(--thread); }

/* if reveal.js ever fails to load, nothing stays hidden */
html.js .reveal { animation: forceviz 0.6s ease 1.8s forwards; }
@keyframes forceviz { to { opacity: 1; transform: none; } }

/* dawn rising from the footer horizon */
footer.end {
  background:
    radial-gradient(60% 130px at 50% 0%, rgba(242, 169, 59, 0.09), transparent 70%),
    var(--night-deep);
}

/* the chakra spine on the scales ladder */
.rung:nth-of-type(1)::before { background: #FF5A5F; box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.18); }
.rung:nth-of-type(2)::before { background: #F2A93B; box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.18); }
.rung:nth-of-type(3)::before { background: #FFD166; box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.18); }
.rung:nth-of-type(4)::before { background: #5FE8A9; box-shadow: 0 0 0 3px rgba(95, 232, 169, 0.18); }
.rung:nth-of-type(5)::before { background: #4FC3F7; box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.18); }
.rung:nth-of-type(6)::before { background: #A493F5; box-shadow: 0 0 0 3px rgba(164, 147, 245, 0.18); }

/* the heart with the molecule inside: the sign-on emblem */
.heartmark { display: block; margin: 0 auto 1.2rem; }

/* heard by screen readers, invisible to everyone else */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* the closing question */
.bigq {
  font-size: var(--t-hero);
  margin: 0;
}

/* trinity words as real headings */
.neq h3.word {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-lg);
  margin: 0;
}

/* the pair-failure cards: a heading, and the pairing folded into the
   paragraph as a bold lead-in, so it can never be set smaller than the prose */
.failname {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-md);
  line-height: 1.25;
  margin: 0 0 0.8rem;
  text-wrap: balance;
}


/* touchable things answer back */
.btn { transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(242, 169, 59, 0.28); }
.btn.ghost:hover { box-shadow: 0 8px 28px rgba(95, 232, 169, 0.16); }
.card { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.card:hover { transform: translateY(-3px); border-color: rgba(95, 232, 169, 0.45); box-shadow: 0 10px 34px rgba(4, 6, 12, 0.5); }
@media (prefers-reduced-motion: reduce) {
  .btn, .card { transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------- v5: the words stand clear, the film gets its own stage ---------- */

.hero.text { padding: 6.5rem 0 4.5rem; }
.hero.text::after { display: none; }

.filmband {
  position: relative;
  height: min(66vh, 540px);
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.filmband .skyfilm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 76%;
}
.filmcap {
  position: absolute;
  left: 1rem;
  bottom: 0.85rem;
  z-index: 2;
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  color: rgba(244, 241, 231, 0.82);
  background: rgba(7, 10, 16, 0.6);
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  max-width: min(78%, 34rem);
}

/* ---------- the solar system over the headline ---------- */

.hero .solar {
  position: absolute;
  top: -46px;
  right: -70px;
  width: min(420px, 58vw);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}
.solar .orb {
  transform-origin: 0 0;
  animation: spin var(--T, 30s) linear infinite;
}
.solar .sun { transform-origin: 0 0; animation: sunpulse 6s ease-in-out infinite alternate; }
.solar .sunhalo { transform-origin: 0 0; animation: sunpulse 6s ease-in-out infinite alternate-reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sunpulse { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (max-width: 46rem) { .hero .solar { opacity: 0.3; right: -34vw; } }
@media (prefers-reduced-motion: reduce) {
  .solar .orb, .solar .sun, .solar .sunhalo { animation: none; }
}

/* ---------- the sign-on composer ---------- */

.so-form { margin-top: 1.6rem; }
.so-grid {
  display: grid;
  gap: 1.1rem 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.so-field { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.so-field.so-wide { grid-column: 1 / -1; }
.so-field label {
  font-family: var(--body);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--thread);
}
.so-opt { text-transform: none; letter-spacing: 0; color: var(--faint); font-style: italic; }
.so-field input,
.so-field select,
.so-field textarea {
  font-family: var(--body);
  font-size: var(--t-label);
  color: var(--jasmine);
  background: var(--night-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  width: 100%;
}
.so-field textarea { resize: vertical; line-height: 1.55; }
.so-field textarea[readonly] {
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--faint);
  background: rgba(6, 9, 16, 0.65);
}
.so-field input:focus-visible,
.so-field select:focus-visible,
.so-field textarea:focus-visible {
  outline: 2px solid var(--aurora);
  outline-offset: 1px;
  border-color: var(--aurora);
}
.so-hint { font-size: var(--t-label); color: var(--faint); line-height: 1.5; }
.so-check label {
  font-family: var(--body);
  font-size: var(--t-label);
  letter-spacing: 0;
  text-transform: none;
  color: var(--jasmine);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.so-check input { width: auto; }
.so-status {
  margin: 1.2rem 0 0;
  font-size: var(--t-label);
  color: var(--aurora);
}
.so-status.warn { color: var(--marigold); }
.so-more { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.so-more summary {
  cursor: pointer;
  font-family: var(--body);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--thread);
}
.so-more summary:focus-visible { outline: 2px solid var(--aurora); outline-offset: 3px; }
.so-more > *:not(summary) { margin-top: 0.9rem; }
[data-send][aria-disabled="true"] { opacity: 0.42; pointer-events: none; }

/* ---------- folds: jargon tucked away so plain English never breaks
   (the pattern is borrowed from the Straddie twin explainer) ---------- */

.fold {
  border: 1px solid var(--line);
  border-left: 2px solid var(--aurora);
  border-radius: 6px;
  background: var(--night-raised);
  padding: 0.9rem 1.1rem;
}
.fold summary {
  cursor: pointer;
  font-family: var(--body);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aurora);
}
.fold summary:focus-visible { outline: 2px solid var(--aurora); outline-offset: 3px; }
.fold[open] summary { margin-bottom: 0.8rem; }
.fold p { margin: 0 0 0.7rem; }
.fold p:last-child { margin-bottom: 0; }

/* ---------- the listening station list ---------- */

.st-list { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.st-row {
  position: relative;
  padding: 0.9rem 6.5rem 0.9rem 1rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--thread);
  border-radius: 6px;
  background: var(--night-raised);
  margin-bottom: 0.6rem;
}
.st-del {
  position: absolute;
  top: 0.8rem; right: 0.8rem;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}
.st-del:hover { color: var(--jasmine); border-color: var(--thread); }
.st-del:focus-visible { outline: 2px solid var(--aurora); outline-offset: 2px; }

/* ---------- the earth map: one planet, no borders ---------- */

.em {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 34rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 60%, #0d1424 0%, #060910 70%);
  touch-action: none;
}
.em-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.em-canvas:active { cursor: grabbing; }
.em-canvas:focus-visible { outline: 2px solid var(--aurora); outline-offset: -2px; }
.em-pins { position: absolute; inset: 0; pointer-events: none; }
.em-pin {
  position: absolute;
  top: 0; left: 0;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--jasmine);
  background: var(--marigold);
  box-shadow: 0 0 0 4px rgba(242, 169, 59, 0.22), 0 0 14px rgba(242, 169, 59, 0.5);
  cursor: pointer;
  pointer-events: auto;
}
.em-pin.away { opacity: 0; pointer-events: none; }
.em-pin:focus-visible { outline: 2px solid var(--aurora); outline-offset: 3px; }
.em-ui {
  position: absolute;
  top: 0.8rem; right: 0.8rem;
  display: flex; gap: 0.4rem;
  z-index: 2;
}
.em-btn {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jasmine);
  background: rgba(6, 9, 16, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
}
.em-btn[aria-pressed="true"] { border-color: var(--thread); color: var(--thread); }
/* not a third view, so it sits apart from the pair */
.em-reset { margin-left: 0.5rem; color: var(--jasmine-dim); }
.em-reset:hover { color: var(--marigold-hi); border-color: var(--thread); }
.em-card {
  position: absolute;
  left: 0.8rem; bottom: 0.8rem;
  max-width: min(24rem, calc(100% - 1.6rem));
  background: rgba(10, 14, 24, 0.92);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem 2.4rem 0.9rem 1rem;
  font-size: var(--t-label);
  z-index: 3;
}
.em-card strong { display: block; margin-top: 0.35rem; }
.em-card .em-place { display: block; color: var(--faint); font-size: var(--t-label); margin-top: 0.15rem; }
.em-card p { margin: 0.5rem 0 0.3rem; }
.em-close {
  position: absolute;
  top: 0.3rem; right: 0.45rem;
  background: none; border: 0;
  color: var(--faint);
  font-size: var(--t-md);
  cursor: pointer;
}
.em-fallback img { width: 100%; border-radius: 10px; border: 1px solid var(--line); }

/* ---------- the ticker: the garland as a moving thread ---------- */

.gajra-ticker {
  position: relative;
  overflow: hidden;
  padding-block: 0.85rem;
  border-block: 1px solid rgba(201, 162, 75, 0.35);
  background: rgba(13, 18, 32, 0.6);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: tickermove 44s linear infinite;
}
.gajra-ticker span {
  padding-right: 2.6rem;
  color: var(--thread);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gajra-ticker span::after {
  content: "\273F";
  margin-left: 2.6rem;
  color: var(--marigold);
}
.gajra-ticker span:nth-child(3n)::after { color: var(--aurora); }
.gajra-ticker span:nth-child(3n+1)::after { color: var(--jasmine); }
@keyframes tickermove { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- cards, brought to life ---------- */

@keyframes linemove {
  from { background-position: 0% 0; }
  to   { background-position: 220% 0; }
}
.card {
  position: relative;
  background: linear-gradient(165deg, #161c30 0%, #0d1220 100%);
  border: 1px solid #2A3348;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #FF5A5F, #F2A93B, #FFD166, #5FE8A9, #4FC3F7, #A493F5, #E91E8C, #FF5A5F);
  background-size: 220% 100%;
  opacity: 0.9;
}
html.js .card::before { animation: linemove 12s linear infinite; }
.card:hover {
  transform: translateY(-5px);
  border-color: #3B4763;
  box-shadow: 0 18px 44px rgba(4, 6, 12, 0.6), 0 0 26px rgba(95, 232, 169, 0.10);
}
.neq .card { border-top: 1px solid #2A3348; }
.neq .card:nth-child(1)::before { background: linear-gradient(90deg, #FFD166, #F2A93B, #FFD166); background-size: 220% 100%; }
.neq .card:nth-child(2)::before { background: linear-gradient(90deg, #4FC3F7, #A493F5, #4FC3F7); background-size: 220% 100%; }
.neq .card:nth-child(3)::before { background: linear-gradient(90deg, #5FE8A9, #8FF7C6, #5FE8A9); background-size: 220% 100%; }
.neq .card:nth-child(1) .word { color: #FFD166; }
.neq .card:nth-child(2) .word { color: #4FC3F7; }
.neq .card:nth-child(3) .word { color: #5FE8A9; }
.neq .card:nth-child(1):hover { box-shadow: 0 18px 44px rgba(4, 6, 12, 0.6), 0 0 26px rgba(255, 209, 102, 0.16); }
.neq .card:nth-child(2):hover { box-shadow: 0 18px 44px rgba(4, 6, 12, 0.6), 0 0 26px rgba(79, 195, 247, 0.16); }
.neq .card:nth-child(3):hover { box-shadow: 0 18px 44px rgba(4, 6, 12, 0.6), 0 0 26px rgba(95, 232, 169, 0.16); }
@media (prefers-reduced-motion: reduce) {
  html.js .card::before { animation: none; }
  .card:hover { transform: none; }
}

/* ---------- the seam light runs rainbow, not white ---------- */

.kintsugi-seam .seam-light {
  stroke: url(#gsA);
  stroke-width: 3;
  stroke-dasharray: 0.12 0.88;
}

/* ---------- reveals, with more life ---------- */

html.js .reveal {
  transform: translateY(22px);
  transition: opacity 0.75s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- forward calendar ----------
   Drawn by ahead-calendar.js from the entries below it. With no JavaScript the
   container keeps its written fallback, so nothing here is load bearing. The
   colours follow the page: aurora is a door, marigold is a meeting, violet is
   today, matching the door chip and the date line. */

.cal { margin: 0 0 1.6rem; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.4rem 1.6rem;
}
.cal-m { width: 100%; border-collapse: collapse; font-family: var(--mono); }
.cal-m caption {
  text-align: left;
  font-family: var(--display);
  font-size: var(--t-label);
  color: var(--marigold-hi);
  padding: 0 0 0.45rem;
  letter-spacing: 0.02em;
}
.cal-m th {
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--faint);
  padding: 0 0 0.3rem;
  text-align: center;
}
.cal-m td {
  text-align: center;
  padding: 1px;
  font-size: 0.78rem;
  line-height: 1;
}
.cal-n {
  display: block;
  padding: 0.34rem 0;
  border-radius: 4px;
  color: var(--jasmine-dim);
}
.cal-m td.cal-x .cal-n { color: transparent; }
.cal-m td a { text-decoration: none; display: block; }
.cal-m td a:hover .cal-n,
.cal-m td a:focus-visible .cal-n { outline: 1px solid var(--marigold-hi); }

/* A door that is open: tinted run. The day it shuts: solid. */
.cal-open  .cal-n { background: var(--aurora-soft); color: var(--jasmine); }
.cal-close .cal-n { background: var(--aurora); color: var(--night); font-weight: 700; }
/* A meeting: first day solid, the rest of its run tinted. */
.cal-start .cal-n { background: var(--marigold); color: var(--night); font-weight: 700; }
.cal-span  .cal-n { background: rgba(242, 169, 59, 0.22); color: var(--jasmine); }

.cal-today .cal-n { box-shadow: inset 0 0 0 1px var(--violet); }

.cal-key { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 1.2rem 0 0.5rem; }
.cal-k {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--jasmine-dim);
  display: inline-flex;
  align-items: center;
}
.cal-k::before {
  content: "";
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 3px;
  margin-right: 0.4rem;
  background: var(--line);
}
.cal-k-close::before { background: var(--aurora); }
.cal-k-open::before  { background: var(--aurora-soft); }
.cal-k-start::before { background: var(--marigold); }
.cal-k-today::before { background: transparent; box-shadow: inset 0 0 0 1px var(--violet); }

.cal-note {
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--faint);
  margin: 0.35rem 0 0;
}

@media (max-width: 420px) {
  .cal-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .cal-m td { font-size: 0.82rem; }
  /* One column means there is room to make the days a real tap target.
     A 24px square is not one, on any thumb. */
  .cal-m .cal-n { padding: 0.95rem 0; }
}

/* ---------- print: the garland on paper ---------- */

@media print {
  .sky, .aurora { display: none; }
  body { background: #fff; color: #1a1c17; }
  header.top, footer.end, .btnrow { display: none; }
  a { color: #1a1c17; }
}