/* ==========================================================================
   Ready. Set. Grow! — the 2027 Symposium page, and its band on /events

   Loaded only where it is used, through the layout's `head` slot, so site.css
   carries none of it. Every colour is an existing token — `palette_check`
   reads this file too, so a mistyped one fails the build rather than rendering
   transparent.

   The campaign mark sets the palette: READY is --stage-1 (rose), SET is
   --stage-2 (orange), GROW is --stage-4 (green). The artwork's colours were
   within a few units of those tokens, and the traced logo uses them exactly.

   The page's one idea is a growth line. A stem runs down the centre through
   READY, SET and GROW; at the bottom of the light journey section it meets the
   night section below, and that boundary is the ground. Above it the line is a
   shoot. Below it the same line turns blue and branches into a neuron — the
   tree and the nervous system, drawn by one function. The only dark section on
   the page is the one below ground.
   ========================================================================== */

/* ----------------------------------------------------------------- the art */

.sx-limb, .sx-ground {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sx-ground { stroke-width: 2; opacity: .32; }
.sx-fill, .sx-node, .sx-soma { fill: currentColor; }
/* Leaves are the bare <path>s `SymposiumArt::leaf()` emits — filled, never stroked. */
.sx-plant path:not([class]) { fill: currentColor; }
.sx-soma-glow { fill: currentColor; opacity: .18; }

.sym-logo { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------- the hero */

/* The deliberate exception to `.hero.hero-sm`'s 350px cap, as the home page
   is. The cap exists so interior pages do not drift in height; a campaign
   page is not an interior page, and its mark is the size it is because it is
   the event's identity. Not `.hero` at all, in fact: that class means navy,
   and the mark was drawn for a light ground. */
.sym-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(60% 70% at 22% 40%, var(--stage-1-soft) 0%, transparent 70%),
        radial-gradient(50% 60% at 52% 30%, var(--stage-2-soft) 0%, transparent 70%),
        radial-gradient(60% 80% at 82% 55%, var(--stage-4-soft) 0%, transparent 72%),
        var(--surface);
    border-bottom: 1px solid var(--line);
}
.sym-hero .inner {
    max-width: 1200px; margin: 0 auto;
    padding: 64px 24px 72px;
    display: grid;
    grid-template-columns: 1.12fr 1fr;
    gap: 48px;
    align-items: center;
}
.sym-mark { margin: 0; }

.sym-kicker-pill {
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--brand-700);
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 6px 14px; border-radius: 99px;
}

.sym-theme {
    margin-top: 18px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(30px, 3.8vw, 48px);
    line-height: 1.04;
    letter-spacing: -.024em;
    color: var(--ink-900);
    text-wrap: balance;
}

/* Two programmes, two lines — the spec-bar idea from the event page, turned on
   its side: a label you scan past and a value you read. */
.sym-when { margin-top: 26px; display: grid; gap: 10px; }
.sym-when div {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
    align-items: baseline;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}
.sym-when dt {
    font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
    color: var(--ink-500);
}
.sym-when dd {
    margin: 0;
    font-size: 17px; font-weight: 600; color: var(--ink-900);
    font-variant-numeric: tabular-nums;
}
.sym-when dd small { font-weight: 500; color: var(--ink-500); font-size: 15px; }

.sym-cta-row { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* The growth colour is the action colour on this page — the same green the
   site nav already uses for its one call to action, with navy type because
   white on --stage-4 fails (1.69:1). */
.btn.sym-btn-grow {
    background: var(--stage-4);
    border-color: var(--stage-4);
    color: var(--brand-800);
    font-weight: 600;
}
.btn.sym-btn-grow:hover { background: var(--stage-4-mid); border-color: var(--stage-4-mid); color: var(--brand-900); }

/* Not a button: there is nothing to press yet, and a disabled button reads as
   broken rather than as "soon". */
.sym-soon {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 16px; min-height: 44px;
    border-radius: 99px;
    font-size: 14px; font-weight: 600;
    color: var(--ink-700);
    border: 1px dashed var(--ink-300);
    background: var(--surface);
}
.sym-soon::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--stage-2);
}

/* The one orchestrated moment: the mark settles in as the page opens. It is
   visible from the first frame — this moves it, it never hides it. */
@media (prefers-reduced-motion: no-preference) {
    .sym-hero .sym-logo { animation: sym-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes sym-rise { from { transform: translateY(14px) scale(.985); } to { transform: none; } }

/* ------------------------------------------------------------ the statement */

.sym-intro { padding: 88px 0 40px; }
.sym-intro .inner { max-width: 820px; margin: 0 auto; padding: 0 24px; text-align: center; }
.sym-statement {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(26px, 3.6vw, 42px);
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--ink-900);
    text-wrap: balance;
}
.sym-statement em { font-style: normal; color: var(--stage-4-deep); }
.sym-copy {
    margin-top: 26px;
    font-size: 18px;
    line-height: 1.72;
    color: var(--ink-700);
    text-wrap: pretty;
}
.sym-copy p + p { margin-top: 16px; }
.sym-copy strong { color: var(--ink-900); }

/* -------------------------------------------------------------- the journey */

.sym-journey {
    position: relative;
    padding: 56px 0 96px;
    /* The ground. Everything above this section's bottom edge is growth. */
    border-bottom: 3px solid var(--stage-4-figure);
}
.sym-journey .inner { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* The stem: rose at the root of the journey, orange through the middle, green
   as it reaches the ground — the three words of the mark, in order. It runs on
   past the last stage to the section's bottom edge, where the neuron's stem
   takes over in the next section. */
.sym-stem {
    position: absolute;
    left: 50%; top: 0; bottom: -96px;
    width: 4px; margin-left: -2px;
    border-radius: 4px;
    background: linear-gradient(to bottom,
        var(--stage-1-figure) 0%,
        var(--stage-1-figure) 18%,
        var(--stage-2-figure) 42%,
        var(--stage-2-figure) 58%,
        var(--stage-4-figure) 82%,
        var(--stage-4-figure) 100%);
}

.sym-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 132px 1fr;
    align-items: center;
    gap: 0 40px;
    padding: 44px 0;
}
.sym-stage-text { grid-column: 1; text-align: right; }
.sym-stage-node { grid-column: 2; }
.sym-stage-art  { grid-column: 3; }
/* SET sits the other way round, so the eye zig-zags down the spine. */
.sym-stage.is-flip .sym-stage-text { grid-column: 3; grid-row: 1; text-align: left; }
.sym-stage.is-flip .sym-stage-art  { grid-column: 1; grid-row: 1; }

/* The plant sits on the stem, on a white disc so the line passes behind it. */
.sym-stage-node {
    position: relative;
    z-index: 1;
    width: 132px; height: 132px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--line);
    display: grid; place-items: center;
}
.sym-stage-node .sx-plant { width: 104px; height: auto; }
.sym-stage[data-stage="ready"] .sym-stage-node { color: var(--stage-1-figure); }
.sym-stage[data-stage="set"]   .sym-stage-node { color: var(--stage-2-figure); }
.sym-stage[data-stage="grow"]  .sym-stage-node { color: var(--stage-4-figure); }

.sym-word {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(44px, 5.6vw, 72px);
    line-height: .95;
    letter-spacing: -.03em;
}
.sym-stage[data-stage="ready"] .sym-word { color: var(--stage-1-deep); }
.sym-stage[data-stage="set"]   .sym-word { color: var(--stage-2-deep); }
.sym-stage[data-stage="grow"]  .sym-word { color: var(--stage-4-deep); }

.sym-stage h3 {
    margin-top: 8px;
    font-size: clamp(20px, 2.2vw, 25px);
    letter-spacing: -.015em;
    color: var(--ink-900);
}
.sym-stage .sym-lead {
    margin-top: 14px;
    font-size: 17px; font-weight: 600; color: var(--ink-900);
}
.sym-stage-text p:not(.sym-lead) {
    margin-top: 10px;
    font-size: 16.5px; line-height: 1.68; color: var(--ink-700);
}

/* The child for each stage, from the campaign mark, on that stage's own soft
   ground and standing on a line — the mark's wave, simplified. */
.sym-stage-art {
    border-radius: var(--radius-xl);
    padding: 30px 30px 0;
    min-height: 260px;
    display: flex; align-items: flex-end; justify-content: center;
    position: relative;
    overflow: hidden;
}
.sym-stage-art::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 30px;
    background: currentColor;
    opacity: .9;
    border-radius: 60% 60% 0 0 / 100% 100% 0 0;
}
.sym-kid { position: relative; z-index: 1; width: auto; height: 210px; margin-bottom: 22px; }
.sym-kid-grow { height: 200px; }
.sym-stage[data-stage="ready"] .sym-stage-art { background: var(--stage-1-soft); color: var(--stage-1); }
.sym-stage[data-stage="set"]   .sym-stage-art { background: var(--stage-2-soft); color: var(--stage-2); }
.sym-stage[data-stage="grow"]  .sym-stage-art { background: var(--stage-4-soft); color: var(--stage-4); }

/* ------------------------------------------------- below ground: the seminar */

.sym-icpa {
    position: relative;
    background: linear-gradient(180deg, var(--brand-900) 0%, var(--brand-800) 100%);
    color: #fff;
    padding: 0 0 96px;
    overflow: hidden;
}
.sym-icpa .inner { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Centred, so its stem continues the spine from the section above. */
.sym-neuron-wrap { color: var(--stage-5); display: flex; justify-content: center; }
.sx-neuron { width: min(520px, 100%); height: auto; display: block; }
.sx-neuron .sx-node { opacity: .9; }

.sym-icpa-head { text-align: center; max-width: 760px; margin: 8px auto 0; }
.sym-icpa .sym-kicker {
    font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--stage-5);
}
.sym-icpa h2 {
    margin-top: 12px;
    color: #fff;
    font-size: clamp(30px, 4.2vw, 50px);
    line-height: 1.04;
    letter-spacing: -.024em;
    text-wrap: balance;
}
.sym-icpa .sym-subtitle {
    margin-top: 16px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(18px, 2vw, 23px);
    color: var(--stage-5);
    text-wrap: balance;
}
.sym-pills { margin-top: 22px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.sym-pill {
    padding: 6px 14px; border-radius: 99px;
    font-size: 13.5px; font-weight: 600;
    background: rgba(132, 157, 235, .14);
    border: 1px solid rgba(132, 157, 235, .34);
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.sym-icpa-body {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
}
.sym-icpa-body p { font-size: 16.5px; line-height: 1.7; color: rgba(255, 255, 255, .8); }
.sym-icpa-body p + p { margin-top: 14px; }
.sym-icpa-body .sym-lead { font-size: 19px; font-weight: 600; color: #fff; line-height: 1.5; }
.sym-icpa-body h3 { color: #fff; font-size: 21px; margin-bottom: 16px; }

/* The learning points, each on its own node. */
.sym-explore { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sym-explore li {
    display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start;
    font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .88);
}
.sx-bullet { width: 24px; height: 24px; color: var(--stage-5); margin-top: 1px; }
.sym-footnote { margin-top: 18px; font-size: 13.5px; color: rgba(255, 255, 255, .58); font-style: italic; }

/* --------------------------------------------------- both: the week at a glance */

.sym-both { padding: 96px 0 72px; }
.sym-both .inner { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.sym-both-head { text-align: center; max-width: 720px; margin: 0 auto; }
.sym-eyebrow {
    font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
    color: var(--brand-600);
}
.sym-both h2, .sym-community h2, .sym-join h2, .sym-rates h2 {
    margin-top: 10px;
    font-size: clamp(28px, 3.4vw, 40px);
    letter-spacing: -.022em;
    color: var(--ink-900);
    text-wrap: balance;
}
.sym-both-head p { margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--ink-700); }

/* Five days, two programmes, booked separately. A calendar answers "can I do
   both?" faster than a paragraph, and shows what the copy never says: the
   Symposium runs Friday to Sunday and the seminar follows on the Monday. */
.sym-week {
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.sym-day {
    border-radius: var(--radius-lg);
    padding: 16px 10px 14px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.sym-day .dow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.sym-day .num { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1; }
.sym-day .mon { display: block; margin-top: 4px; font-size: 12.5px; }
.sym-day.is-symposium { background: var(--stage-4-soft); color: var(--stage-4-deep); }
.sym-day.is-icpa      { background: var(--stage-5-soft); color: var(--stage-5-deep); }

.sym-week-bars {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 8px;
    margin-top: 8px;
}
.sym-week-bars div {
    border-radius: 99px;
    padding: 9px 16px;
    font-size: 13.5px; font-weight: 600;
    text-align: center;
}
.sym-week-bars .is-symposium { background: var(--stage-4); color: var(--brand-800); }
.sym-week-bars .is-icpa      { background: var(--stage-5-deep); color: #fff; }

.sym-together {
    margin-top: 40px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(20px, 2.4vw, 27px);
    color: var(--ink-900);
    text-wrap: balance;
}

/* -------------------------------------------------------------- community */

.sym-community { padding: 72px 0; background: var(--mist); }
.sym-community .inner {
    max-width: 1040px; margin: 0 auto; padding: 0 24px;
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start;
}
.sym-community p { font-size: 16.5px; line-height: 1.72; color: var(--ink-700); }
.sym-community p + p { margin-top: 14px; }
.sym-community .sym-lead { font-size: 19px; color: var(--ink-900); font-weight: 600; line-height: 1.5; margin-top: 18px; }

.sym-who { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sym-who li {
    padding: 8px 14px; border-radius: 99px;
    background: var(--surface); border: 1px solid var(--line);
    font-size: 14px; font-weight: 600; color: var(--ink-900);
}
.sym-who li:nth-child(1) { border-color: var(--stage-1); }
.sym-who li:nth-child(2) { border-color: var(--stage-2); }
.sym-who li:nth-child(3) { border-color: var(--stage-4); }
.sym-who li:nth-child(4) { border-color: var(--stage-5); }

.sym-motto {
    margin-top: 26px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 2.8vw, 32px);
    letter-spacing: -.02em;
    color: var(--stage-4-deep);
}

/* ---------------------------------------------------------------- join us */

.sym-join { padding: 96px 0 40px; }
.sym-join .inner, .sym-rates .inner { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.sym-join-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }

.sym-events { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sym-event {
    border-radius: var(--radius-xl);
    border: 1px solid var(--line);
    background: var(--surface);
    padding: 28px;
    display: flex; flex-direction: column;
    border-top: 6px solid var(--accent, var(--brand-600));
}
.sym-event.is-symposium { --accent: var(--stage-4-figure); }
.sym-event.is-icpa      { --accent: var(--stage-5-deep); }
.sym-event .tag {
    font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
    color: var(--accent);
}
.sym-event h3 { margin-top: 10px; font-size: 23px; letter-spacing: -.016em; color: var(--ink-900); text-wrap: balance; }
.sym-event .sub { margin-top: 6px; font-size: 15.5px; font-weight: 600; color: var(--ink-700); text-wrap: balance; }
.sym-event .date {
    margin-top: 18px;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 17px; font-weight: 600; color: var(--ink-900);
    font-variant-numeric: tabular-nums;
}
.sym-event .date svg { width: 18px; height: 18px; color: var(--accent); }
.sym-event p.blurb { margin-top: 10px; font-size: 15.5px; line-height: 1.65; color: var(--ink-700); flex: 1; }
.sym-event .act { margin-top: 22px; }

.sym-note { margin: 22px auto 0; max-width: 720px; text-align: center; font-size: 14.5px; line-height: 1.65; color: var(--ink-500); }

/* ------------------------------------------------------------------ rates */

.sym-rates { padding: 56px 0 96px; scroll-margin-top: 80px; }
.sym-rates-head { text-align: center; margin-bottom: 32px; }
.sym-rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.sym-rate {
    border-radius: var(--radius-xl);
    border: 1px solid var(--line);
    padding: 26px 28px 20px;
    background: var(--surface);
}
.sym-rate.is-early {
    background: var(--stage-4-soft);
    border-color: var(--stage-4);
}
.sym-rate-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sym-rate h3 { font-size: 20px; color: var(--ink-900); }
.sym-rate .closes {
    padding: 5px 12px; border-radius: 99px;
    font-size: 12.5px; font-weight: 600;
    background: var(--stage-4); color: var(--brand-800);
}
.sym-rate .closes.is-closed { background: var(--surface-neutral); color: var(--ink-700); }

.sym-rate table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.sym-rate td {
    padding: 13px 0;
    border-top: 1px solid var(--line);
    font-size: 15.5px; color: var(--ink-700);
}
.sym-rate.is-early td { border-top-color: rgba(104, 117, 53, .22); }
.sym-rate td.amt {
    text-align: right;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    color: var(--ink-900);
    /* Proportional, not tabular: Radio Canada Big gives the comma a full figure
       slot under tabular-nums, which printed "R6 , 000". The column is
       right-aligned and every amount has four digits, so nothing needs the
       fixed widths anyway. */
    letter-spacing: -.01em;
}

.sym-rate-note { margin-top: 18px; text-align: center; font-size: 14.5px; color: var(--ink-500); }

/* ---------------------------------------------------------------- closing */

/* Light, like the hero — the page opens and closes on the mark's own ground. */
.sym-close {
    position: relative;
    text-align: center;
    padding: 88px 0 96px;
    background:
        radial-gradient(55% 70% at 20% 70%, var(--stage-1-soft) 0%, transparent 70%),
        radial-gradient(45% 60% at 50% 40%, var(--stage-2-soft) 0%, transparent 70%),
        radial-gradient(55% 80% at 82% 60%, var(--stage-4-soft) 0%, transparent 72%),
        var(--surface);
    border-top: 1px solid var(--line);
}
.sym-close .inner { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.sym-close h2 { color: var(--ink-900); font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -.022em; text-wrap: balance; }
.sym-close p { margin-top: 16px; font-size: 17.5px; line-height: 1.7; color: var(--ink-700); }
.sym-close-mark { width: min(420px, 82%); margin: 34px auto 0; }
.sym-close .sym-tagline { margin-top: 10px; font-size: 17px; font-weight: 600; color: var(--ink-900); }
.sym-close .sym-sign { margin-top: 26px; font-size: 14.5px; color: var(--ink-500); }
.sym-close .sym-cta-row { justify-content: center; }

/* ============================================================ the /events band

   A light card at the top of the list section. The events page hero directly
   above is navy, so a light card stands clear of it — and the mark was drawn
   for a light ground anyway. As a card it reads as the first thing in the list,
   which is what it is. */

.sym-band {
    border-radius: var(--radius-xl);
    border: 1px solid var(--line);
    background:
        radial-gradient(60% 90% at 12% 50%, var(--stage-1-soft) 0%, transparent 70%),
        radial-gradient(50% 80% at 40% 40%, var(--stage-2-soft) 0%, transparent 70%),
        radial-gradient(60% 100% at 85% 60%, var(--stage-4-soft) 0%, transparent 72%),
        var(--surface);
    padding: 32px 36px;
    margin-bottom: 48px;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 36px;
    align-items: center;
}
.sym-band-mark { display: block; }
.sym-band .kicker {
    font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
    color: var(--brand-600);
}
.sym-band .theme {
    margin-top: 8px;
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--ink-900);
}
.sym-band .dates { margin-top: 14px; display: grid; gap: 4px; font-size: 15px; color: var(--ink-700); font-variant-numeric: tabular-nums; }
.sym-band .dates strong { color: var(--ink-900); }
.sym-band p.blurb { margin-top: 12px; font-size: 15.5px; line-height: 1.65; color: var(--ink-700); max-width: 54ch; }
.sym-band .row { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sym-band .early {
    padding: 6px 13px; border-radius: 99px;
    font-size: 13px; font-weight: 600;
    background: var(--stage-4-soft);
    border: 1px solid var(--stage-4);
    color: var(--stage-4-deep);
}

/* ------------------------------------------------------------------ narrow */

@media (max-width: 900px) {
    .sym-hero .inner { grid-template-columns: 1fr; gap: 28px; padding: 36px 24px 52px; }
    .sym-mark { max-width: 520px; }
    .sym-when div { grid-template-columns: 1fr; gap: 2px; }

    /* The spine moves to the left edge and the stages stack beside it. */
    .sym-stem { left: 46px; }
    .sym-stage,
    .sym-stage.is-flip {
        grid-template-columns: 52px 1fr;
        gap: 0 20px;
        align-items: start;
        padding: 30px 0;
    }
    .sym-stage-node,
    .sym-stage.is-flip .sym-stage-node { grid-column: 1; grid-row: 1; width: 52px; height: 52px; margin-left: -2px; }
    .sym-stage-node .sx-plant { width: 44px; }
    .sym-stage-text,
    .sym-stage.is-flip .sym-stage-text { grid-column: 2; grid-row: 1; text-align: left; }
    .sym-stage-art,
    .sym-stage.is-flip .sym-stage-art { grid-column: 2; grid-row: 2; margin-top: 22px; min-height: 0; padding: 22px 22px 0; }
    .sym-kid { height: 150px; margin-bottom: 18px; }
    .sym-kid-grow { height: 140px; }
    .sym-stage-art::after { height: 22px; }

    /* Below ground the stem still has to land where the spine left off.
       The spine's centre is 46px into `.inner` (its padding box); the wrap
       starts 24px in (the padding). The neuron's stem is at half its width,
       so at 300px wide: 46 − 24 − 150 = −128. The section clips the part of
       the root system that falls off the left edge, which reads as roots
       running on beyond the frame. */
    .sym-neuron-wrap { justify-content: flex-start; }
    .sx-neuron { width: 300px; flex-shrink: 0; margin-left: -128px; }

    .sym-icpa-body,
    .sym-community .inner,
    .sym-events,
    .sym-rate-grid { grid-template-columns: 1fr; gap: 28px; }

    .sym-band { grid-template-columns: 1fr; padding: 24px 22px 26px; gap: 18px; }
    .sym-band-mark { max-width: 360px; }
}

@media (max-width: 560px) {
    .sym-week { gap: 5px; }
    .sym-day { padding: 12px 2px 10px; }
    .sym-day .num { font-size: 26px; }
    .sym-day .dow { font-size: 10.5px; letter-spacing: .06em; }
    .sym-day .mon { font-size: 11px; }
    .sym-week-bars div { font-size: 12px; padding: 8px 6px; }
}