/* assets/dcr-page-seasons.css · The Desert Camel Report, Chapter 4 · Seasons (/desert-camel-report/seasons).
   Loaded after assets/dcr.css and before assets/dcr-light.css on that page only. Owned by the seasons lane.

   THE YEAR STRIP  one 365-column CSS grid (--ss-n days): the Gregorian rail, the week columns (stacked by kind, from zero),
                   the postings row, the marker lanes and the Hijri rail. HTML, not SVG, so every label is a translation
                   unit and the page reads with the script off. Phones scroll the strip inside its panel (never the page).
   COLOUR          one hue per kind on every page, from the shared map (DCR.kindColors in assets/dcr-viz-core.js, the
                   .ss-k--<kind> classes in assets/dcr-light.css; this file sets no kind colour): funding dv-1, new
                   leader dv-2, launch dv-3, expansion dv-4, other dv-5. Magenta (--dv-highlight) once: the whole busiest
                   counted column; its value label is ink.
                   The Lens lights the lensed share of a column (--lit, set by assets/dcr-viz-seasons.js) and the rest
                   recedes to dv-6; nothing hides. Hatch (45° silver on ghost) plus words is the only empty state.
   MOTION          UI tier: the Hijri rail slides 11 days into register as the strip enters (CSS scroll timeline, with the
                   [data-reveal] .is-in fallback), columns rise 560ms left to right, markers fade last; all off under
                   prefers-reduced-motion. */

.ss-card{ gap:16px; }
.ss-head{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px 16px; }
.ss-head > div{ display:grid; gap:6px; }
.ss-chip{ font:500 var(--fs-micro, 11px)/1.4 var(--font-mono); letter-spacing:var(--track-label, .08em); text-transform:uppercase;
  color:var(--ink-muted); padding:6px 10px; border-radius:999px; background:var(--ghost-white, #F8F8FA); white-space:nowrap; }
.ss-chip[hidden]{ display:none; }
.ss-fig{ margin:0; min-inline-size:0; }
.ss-take{ display:inline; font:600 var(--fs-body, 16px)/1.6 var(--font-sans); color:var(--ink); }
.ss-cap-text{ max-inline-size:none; font-size:var(--fs-small, 14px); }
.ss-note{ margin:4px 0 0; max-inline-size:72ch; font:400 var(--fs-small, 14px)/1.6 var(--font-sans); color:var(--ink-muted); }
.ss-note[hidden]{ display:none; }
.ss-note--founder{ color:var(--ink); }
.ss-ico{ inline-size:16px; block-size:16px; flex:none; vertical-align:-3px; }

/* ---------------------------------------------------------------- series colours: the shared map only (dcr-light.css) */
.ss-key{ display:flex; flex-wrap:wrap; gap:6px 16px; font:500 var(--fs-micro, 11px)/1.6 var(--font-mono); letter-spacing:.02em; color:var(--ink-muted); }
.ss-key__i{ display:inline-flex; align-items:center; gap:7px; }
.ss-sw{ display:inline-block; flex:none; inline-size:12px; block-size:12px; border-radius:2px; background:var(--c, var(--dv-6)); }
.ss-sw.dcr-hatch{ background-color:var(--ghost-white); box-shadow:inset 0 0 0 1px var(--hairline); }
.ss-sw--mk{ border-radius:50%; background:var(--ghost-white); box-shadow:inset 0 0 0 2px var(--ink); }
.ss-sw--mk.ss-mk--expected{ box-shadow:inset 0 0 0 2px var(--ink), 0 0 0 3px var(--gold-100, #FFEDCA); }
.ss-sw--mk.ss-mk--reported{ box-shadow:inset 0 0 0 2px var(--slate-400, #A4A4C7); background:#fff; }

/* ---------------------------------------------------------------- the strip grid */
.ss-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:thin;
  margin-inline:calc(-1 * clamp(18px, 2.2vw, 28px)); padding-inline:clamp(18px, 2.2vw, 28px); }
.ss-scroll:focus-visible{ outline:3px solid var(--purple); outline-offset:2px; }
.ss-strip{ --ss-n:365; --ss-weekh:168px; display:grid; gap:4px 0; min-inline-size:calc(var(--ss-n, 365) * 4px); direction:ltr; }   /* 4px a day (28px weeks): at 3px two weeks' job-post counts touched ("205188") */
/* desktop: 6px a day, so the panel opens on the counted window (August to the edition) with the weeks ahead
   scrolling in from the right; the hatched year no longer takes most of the figure (review, 11 Nov 2026) */
@media (min-width:1024px){ .ss-strip{ min-inline-size:calc(var(--ss-n, 365) * 6px); } }
.ss-row{ display:grid; grid-template-columns:repeat(var(--ss-n), minmax(0, 1fr)); align-items:end; min-inline-size:0; }
.ss-rail{ block-size:30px; align-items:stretch; }
.ss-rail__c{ display:flex; align-items:center; min-inline-size:0; padding-inline:5px; border-inline-start:1px solid var(--hairline);
  font:500 var(--fs-micro, 11px)/1.3 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-muted);
  white-space:nowrap; overflow:hidden; gap:4px; }
.ss-rail__c:first-child{ border-inline-start:0; }
.ss-rail__n{ color:var(--ink); }
.ss-rail--greg{ border-block-end:1px solid var(--hairline); }
.ss-rail--hijri{ border-block-start:1px solid var(--hairline); margin-block-start:6px; }

/* the week columns: bars from zero, the busiest week's cap in magenta (the one insight), hatched where not counted */
.ss-weeks{ block-size:var(--ss-weekh); align-items:end; margin-block-start:40px; }
.ss-weeks > *{ grid-row:1; }
.ss-week{ position:relative; display:grid; grid-template-rows:auto 1fr; align-items:end; justify-items:center; block-size:100%; min-inline-size:0; }
/* an uncounted week: the hatch drawn with the same care as a column (full width less the gutter, rounded the same) */
.ss-week--none{ display:flex; align-items:flex-end; justify-content:center; }
.ss-nc{ display:block; inline-size:calc(100% - 2px); block-size:100%; border-radius:2px 2px 0 0; background-color:var(--ghost-white, #F8F8FA);
  box-shadow:inset 0 0 0 1px var(--hairline); }
.ss-nc-l{ position:relative; z-index:1; align-self:center; justify-self:start; display:flex; justify-content:flex-start; min-inline-size:0; padding-inline-start:12px; pointer-events:none; }
/* a counted week after the moves register's last sweep: the hatch stands the full height behind the column, and any
   row already dated in it is drawn on top */
.ss-week--ns > .ss-nc--ns{ position:absolute; inset-inline:1px; inset-block:0; inline-size:auto; block-size:auto; }
.ss-week--ns > :not(.ss-nc--ns){ position:relative; }
.ss-ns{ display:block; font:500 var(--fs-micro, 11px)/1.3 var(--font-mono); letter-spacing:var(--track-label, .08em); text-transform:uppercase; color:var(--ink-muted); }
.ss-stamps{ display:flex; flex-wrap:wrap; gap:4px 20px; }
.ss-stamps > .dcr-stamp{ margin:0; }
.ss-nc-l > span{ padding:6px 10px; border-radius:999px; background:#fff; box-shadow:var(--shadow-card, 0 1px 2px rgba(0,0,0,.06));
  font:500 var(--fs-micro, 11px)/1.3 var(--font-mono); letter-spacing:.02em; color:var(--ink-muted); white-space:nowrap; }
.ss-val{ font:500 var(--fs-micro, 11px)/1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink-muted); margin-block-end:4px; }
.ss-week--hi .ss-val{ color:var(--ink); font-weight:600; }
.ss-col{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; inline-size:calc(100% - 4px); block-size:100%; min-block-size:0; }
.ss-seg{ display:block; flex:none; block-size:calc(var(--n, 0) / var(--ss-top, 1) * (var(--ss-weekh) - 22px)); min-block-size:2px;
  margin-block-start:2px; border-radius:2px; background:var(--c, var(--dv-6)); }
.ss-seg:first-child{ margin-block-start:0; border-radius:2px; }
.ss-seg:last-child{ border-radius:2px 2px 0 0; }
.ss-seg:only-child{ border-radius:2px 2px 0 0; }
/* the Lens: the lensed share stays in the kind's colour, the rest recedes (never hides) */
.ss-strip.is-lensed .ss-seg, .ss-multi.is-lensed .ss-bar__f{ background:linear-gradient(to top, var(--c, var(--dv-6)) 0 calc(var(--lit, 0) * 100%), var(--dv-6) calc(var(--lit, 0) * 100%) 100%); }
/* the shared kind classes are main.dcr.hubr-scoped: the insight has to outrank them, or the busiest column draws in
   its kinds' colours and the page loses its one magenta insight */
main.dcr.hubr .ss-week--hi .ss-seg{ --c:var(--dv-highlight); }
.ss-week--cur::after{ content:""; position:absolute; inset-inline:0; inset-block-end:-4px; block-size:2px; background:var(--purple); }
/* the page's one Square Peg note, pointing at the magenta cap (hand-ink purple on light; it carries no data) */
.ss-hand{ position:absolute; inset-block-end:calc(100% + 2px); inset-inline-start:50%; inset-inline-end:auto; display:flex; align-items:flex-end;
  gap:2px; z-index:2; white-space:nowrap; color:var(--hand-ink, #3B06D4); font-size:var(--fs-hand, 24px); line-height:1; pointer-events:none; }
.ss-hand__a{ flex:none; order:-1; inline-size:40px; block-size:26px; }
.ss-posts{ block-size:16px; margin-block-start:2px; }
.ss-post{ text-align:center; font:500 var(--fs-micro, 11px)/1.3 var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.03em; color:var(--ink-muted); }
.ss-post__l{ padding-inline-start:6px; font:400 var(--fs-micro, 11px)/1.3 var(--font-sans); color:var(--ink-muted); white-space:nowrap; }

/* the markers: rounded nodes with Lucide icons on lanes; the expected ones carry the ±1-day band */
.ss-lanes{ display:grid; grid-template-columns:repeat(var(--ss-n), minmax(0, 1fr)); grid-auto-rows:26px; row-gap:4px; margin-block:10px 4px; }
.ss-mk{ position:relative; z-index:1; display:flex; align-items:center; gap:5px; min-inline-size:0; block-size:26px; color:var(--ink); }
.ss-mk--end{ flex-direction:row-reverse; justify-content:flex-start; }
.ss-mk__bar{ align-self:end; block-size:4px; border-radius:2px; background:var(--ink); opacity:.22; }
.ss-mk__bar--reported{ background:repeating-linear-gradient(90deg, var(--slate-400, #A4A4C7) 0 6px, transparent 6px 10px); opacity:1; }
.ss-mk__node{ flex:none; display:grid; place-items:center; inline-size:22px; block-size:22px; border-radius:50%; background:#fff; color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--ink); }
.ss-mk__node .ss-ico{ inline-size:13px; block-size:13px; }
.ss-mk__l{ font:500 var(--fs-micro, 11px)/1.3 var(--font-mono); letter-spacing:.02em;
  color:var(--ink); white-space:nowrap; overflow:visible; }
.ss-mk--expected .ss-mk__node{ box-shadow:inset 0 0 0 2px var(--ink), 0 0 0 3px var(--gold-100, #FFEDCA); }
.ss-band{ display:block; block-size:26px; border-radius:var(--radius-card, 12px); background:var(--gold-100, #FFEDCA); }
.ss-mk--reported .ss-mk__node{ box-shadow:inset 0 0 0 2px var(--slate-400, #A4A4C7); color:var(--slate-700, #565675); }
.ss-mk--reported .ss-mk__l{ color:var(--ink-muted); }
/* the Lens on markers: the lensed market's markers stay, the others recede */
/* a dimmed marker keeps its label legible (ink-muted at full opacity); its node recedes */
main.dcr.hubr .ss-mk.is-dim{ opacity:1; }
main.dcr.hubr .ss-mk.is-dim .ss-mk__node{ opacity:.45; }
main.dcr.hubr .ss-mk.is-dim .ss-mk__l{ color:var(--ink-muted); }
main.dcr.hubr .ss-strip.is-lensed .ss-mk__bar{ opacity:.12; }
main.dcr.hubr .ss-mk.is-lit .ss-mk__node{ background:var(--ink); color:#fff; }

/* motion: columns rise left to right, the Hijri rail slides into register, markers fade last */
@media (prefers-reduced-motion:no-preference){
  html.js .ss-fig[data-ss-strip] .ss-week{ --i:0; }
  html.js .ss-card:not(.is-in) .ss-col{ transform:scaleY(0); }
  html.js .ss-card .ss-col{ transform-origin:50% 100%; transition:transform var(--dur-slow, 560ms) var(--ease-emphasized, ease-out); transition-delay:calc(var(--i, 0) * 18ms); }
  html.js .ss-card:not(.is-in) :is(.ss-mk, .ss-band, .ss-mk__bar, .ss-nc-l){ opacity:0; }
  html.js .ss-card :is(.ss-mk, .ss-band, .ss-mk__bar, .ss-nc-l){ transition:opacity var(--dur-base, 320ms) var(--ease-standard, ease) 560ms; }
  html.js .ss-card:not(.is-in) .ss-nc{ transform:scaleY(0); }
  html.js .ss-card .ss-nc{ transform-origin:50% 100%; transition:transform var(--dur-slow, 560ms) var(--ease-standard, ease) 280ms; }
  html.js .ss-card:not(.is-in) .ss-rail--hijri{ transform:translateX(calc(100% * 11 / var(--ss-n, 365))); }
  html.js .ss-card .ss-rail--hijri{ transition:transform var(--dur-base, 320ms) var(--ease-standard, ease); }
  @supports (animation-timeline: view()){
    html.js .ss-card .ss-rail--hijri, html.js .ss-card:not(.is-in) .ss-rail--hijri{ transform:none; transition:none;
      animation:ss-register linear both; animation-timeline:view(); animation-range:entry 0% entry 100%; }
  }
}
@keyframes ss-register{ from{ transform:translateX(calc(100% * 11 / var(--ss-n, 365))); } to{ transform:none; } }
.ss-seedata{ margin-block-start:12px; }
.ss-seedata .dcr-table-wrap + .dcr-table-wrap{ margin-block-start:var(--dcr-gap, 20px); }

/* ---------------------------------------------------------------- by kind, by month: four small multiples */
.ss-multi__grid{ display:grid; gap:var(--dcr-gap, 20px); grid-template-columns:repeat(2, minmax(0, 1fr)); }
/* four kinds: four across where 200px each fits, else two by two (auto-fit left 3 + 1 at 720-1000px) */
.ss-multi{ container-type:inline-size; }
@container (min-width:860px){ .ss-multi__grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.ss-panel{ display:grid; grid-template-rows:auto 1fr; gap:10px; padding:14px 16px 12px; border-radius:var(--radius-card, 12px); background:var(--ghost-white, #F8F8FA); }
.ss-panel > .ss-bars{ align-self:end; }   /* a title on two lines ("New sales / leader" at 390) no longer drops its bars 18px below the neighbour's */
.ss-panel__h{ margin:0; display:flex; align-items:center; gap:8px; font:600 var(--fs-small, 14px)/1.3 var(--font-sans); color:var(--ink); }
.ss-bars{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:8px; align-items:end; block-size:150px; }
.ss-bar{ display:grid; grid-template-rows:auto 1fr auto; justify-items:center; align-items:end; block-size:100%; min-inline-size:0; }
.ss-bar__v{ font:500 var(--fs-micro, 11px)/1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink); margin-block-end:4px; }
.ss-bar__t{ display:flex; align-items:flex-end; inline-size:min(100%, 40px); block-size:100%; border-radius:2px 2px 0 0; }
.ss-bar__t.dcr-hatch{ border-radius:2px 2px 0 0; }
.ss-bar__f{ display:block; inline-size:100%; block-size:calc(var(--n, 0) / var(--ss-top, 1) * 100%); min-block-size:2px; border-radius:2px 2px 0 0;
  background:var(--c, var(--dv-6)); }
.ss-bar--part .ss-bar__f{ opacity:.7; }
.ss-bar__m{ margin-block-start:6px; font:500 var(--fs-micro, 11px)/1.3 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-muted); }

/* ---------------------------------------------------------------- what the trackers say: one figure tile, then the hatched markets */
.ss-tiles{ list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(4, minmax(0, 1fr)); }
.ss-tile{ display:grid; gap:8px; align-content:start; padding:16px 18px; border-radius:var(--radius-card, 12px); background:var(--ghost-white, #F8F8FA); }
.ss-tile > p{ margin:0; }
.ss-tile--fig{ grid-column:span 2; grid-template-columns:auto 1fr; column-gap:20px; align-items:baseline; }
.ss-tile--fig > *{ grid-column:2; }
.ss-tile--fig > .ss-tile__v{ grid-column:1; grid-row:1 / span 4; align-self:start; }
.ss-tile__m{ font:600 var(--fs-small, 14px)/1.3 var(--font-sans); color:var(--ink); }
.ss-tile__v{ font:600 var(--fs-display-m, 40px)/1.05 var(--font-mono); letter-spacing:-.03em; color:var(--ink); white-space:nowrap; }
.ss-tile__f{ font:500 var(--fs-micro, 11px)/1.4 var(--font-mono); letter-spacing:var(--track-label, .08em); text-transform:uppercase; color:var(--ink-muted); text-wrap:balance; }
.ss-tile__n{ font:400 var(--fs-small, 14px)/1.5 var(--font-sans); color:var(--ink-muted); text-wrap:balance; }   /* "No tracker / figure yet" at 390, not "yet" alone */
.ss-tile .dcr-cite{ margin:0; font-size:var(--fs-micro, 11px); }
.ss-tile--none{ min-block-size:120px; align-content:end; }
.ss-mkts{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.ss-mkt{ padding:4px 10px; border-radius:999px; background:#fff; font:500 12px/1.4 var(--font-sans); color:var(--ink); }
main.dcr.hubr .ss-tile .ss-mkts > .ss-mkt.is-lit{ background-color:var(--ink); color:#fff; box-shadow:none; }   /* a chip, not a card: outranks the shell's lit card rule */
main.dcr.hubr .ss-mkt.is-dim{ opacity:1; color:var(--ink-muted); }
main.dcr.hubr .ss-tile.is-dim{ opacity:1; color:var(--ink-muted); }
main.dcr.hubr .ss-tile.is-dim :is(b, .k-num, span, p, time, a){ color:var(--ink-muted); }
main.dcr.hubr .ss-tile.is-dim :is(img, .ss-tile__fig, rect, path, circle){ opacity:.45; }
/* a lit tile takes the shell's left rule on a purple tint (dcr-light.css): no ring, cards have no border */
@media (max-width:1023px){ .ss-tiles{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:559px){ .ss-tile--fig{ grid-template-columns:1fr; } .ss-tile--fig > *, .ss-tile--fig > .ss-tile__v{ grid-column:1; grid-row:auto; } }

/* ---------------------------------------------------------------- what to watch: the next date in each city (photo cards) */
.ss-watch{ list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ss-wt{ display:grid; grid-template-rows:auto 1fr; border-radius:var(--radius-card, 12px); background:var(--ghost-white, #F8F8FA); overflow:hidden;
  transition:transform var(--dur-instant, 120ms) var(--ease-standard, ease); }
.ss-wt p{ margin:0; }
.ss-wt__ph{ aspect-ratio:4 / 3; border-radius:var(--radius-card, 12px) var(--radius-card, 12px) 0 0; }
/* the text block spans the card's lower half, so the dark hold rises from the foot instead of the corner */
.ss-wt__ph.dcr-photo--depth::before{ background:linear-gradient(to top, rgba(0,0,0,.86) 0 34%, rgba(0,0,0,.45) 58%, transparent 80%); }
.ss-wt__ph img{ transition:transform var(--dur-slow, 560ms) var(--ease-standard, ease); }
.ss-wt__on{ gap:2px; padding:18px 20px; }
.ss-wt__c{ display:flex; align-items:baseline; gap:8px; font:600 var(--fs-h4, 20px)/1.2 var(--font-sans); color:#fff; }
.ss-wt__c span{ font:500 var(--fs-micro, 11px)/1.4 var(--font-mono); letter-spacing:var(--track-label, .08em); text-transform:uppercase; color:var(--on-duo-muted, #D1D1D9); }
.ss-wt__d{ font:600 var(--fs-display, 64px)/1.05 var(--font-mono); letter-spacing:-.03em; color:#fff; word-spacing:-.4em; }   /* the space before "days" is a 64px mono cell (38px): one fifth of an em instead */
.ss-wt__d b{ font-weight:600; font-variant-numeric:tabular-nums; }
.ss-wt__u{ font:500 var(--fs-small, 14px)/1 var(--font-mono); letter-spacing:.02em; color:var(--on-duo-muted, #D1D1D9); }
.ss-wt__t{ font:600 var(--fs-body, 16px)/1.3 var(--font-sans); color:#fff; }
.ss-wt__b{ display:grid; gap:4px; align-content:start; padding:14px 20px 16px; }
.ss-wt__k{ display:flex; align-items:center; gap:6px; font:500 var(--fs-micro, 11px)/1.4 var(--font-mono); letter-spacing:var(--track-label, .08em); text-transform:uppercase; color:var(--ink-muted); }
.ss-wt__w{ font:500 var(--fs-micro, 11px)/1.5 var(--font-mono); letter-spacing:.02em; color:var(--ink); }
.ss-wt__s{ font:400 var(--fs-micro, 11px)/1.5 var(--font-sans); color:var(--ink-muted); overflow-wrap:anywhere; }
.ss-wt.ss-mk--expected .ss-wt__k{ color:var(--gold-700, #725400); }
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ss-wt:hover{ transform:translateY(-2px); }
  .ss-wt:hover .ss-wt__ph img{ transform:scale(1.03); }
}
main.dcr.hubr .ss-wt.is-dim{ opacity:1; color:var(--ink-muted); }
main.dcr.hubr .ss-wt.is-dim :is(b, .k-num, span, p){ color:var(--ink-muted); }
main.dcr.hubr .ss-wt.is-dim .ss-wt__ph{ opacity:.45; }
/* a lit city card: the shell's left rule on a purple tint, no ring (cards have no border) */
.ss-today{ margin:4px 0 0; font:500 var(--fs-micro, 11px)/1.5 var(--font-mono); letter-spacing:.02em; color:var(--ink-muted); }
.ss-today[hidden], .ss-from [hidden]{ display:none; }
[dir="rtl"] :is(.ss-wt__d, .ss-tile__v, .ss-val, .ss-bar__v, .ss-post){ direction:ltr; unicode-bidi:isolate; }

/* ---------------------------------------------------------------- tell us when you scale: the secondary (ink-outline) form */
.ss-form{ display:grid; gap:0; }
.ss-form .rf-grid{ gap:0 16px; align-items:end; }   /* side by side, the company field and the two selects share one bottom line */
/* a form narrower than 520px (a half-width card at 720-1100px) stacks its fields: side by side the selects were 83px and
   56px wide at 768 ("Mor", the year cut away) */
.ss-form{ container-type:inline-size; }
@container (max-width:519px){ .ss-form .rf-grid{ grid-template-columns:minmax(0, 1fr); } }
.ss-form .k-btn{ justify-self:start; }
/* the month and the year: two selects under one legend (no browser fieldset border; the legend reads as a label) */
.ss-when{ border:0; margin:0 0 16px; padding:0; min-inline-size:0; }
.ss-when > legend{ padding:0; margin-block-end:6px; font:500 var(--fs-small, 14px)/1.3 var(--font-sans); color:var(--rf-ink, var(--ink)); }
.ss-when__row{ display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); gap:8px; }
@media (max-width:719px){ .ss-form .rf-grid{ grid-template-columns:1fr; } .ss-form .k-btn{ inline-size:100%; } }

/* ---------------------------------------------------------------- ask the room: leader-seat member faces */
.ss-faces{ display:grid; gap:12px; }
.ss-faces__l{ list-style:none; margin:0; padding:0; display:grid; gap:14px 16px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.ss-faces__l li{ display:flex; align-items:center; gap:12px; min-inline-size:0; }
.ss-face{ flex:none; inline-size:64px; block-size:64px; border-radius:50%; object-fit:cover; background:var(--ghost-white, #F8F8FA); }
.ss-face__w{ display:grid; gap:1px; min-inline-size:0; }
.ss-face__w b{ font:600 var(--fs-small, 14px)/1.3 var(--font-sans); color:var(--ink); }
.ss-face__w span{ font:400 12px/1.4 var(--font-sans); color:var(--ink-muted); overflow-wrap:anywhere; }   /* wraps: a title and company were clipped at 1440 */
.ss-faces__p, .ss-signals{ margin:0; font:400 var(--fs-body, 16px)/1.6 var(--font-sans); color:var(--ink-muted); }
.ss-faces__p .k-link, .ss-signals .k-link{ display:inline-flex; }

/* ---------------------------------------------------------------- sources and questions */
.ss-sources > summary{ font:600 var(--fs-body, 16px)/1.3 var(--font-sans); }
.ss-src{ font-weight:600; }
/* the questions sit in the wrap itself, so the kit lays them in two columns as on the other chapters */
main.dcr[data-dcr-page="seasons"] .k-wrap > .k-qa{ margin-block-start:clamp(24px, 3vw, 40px); }
html:not(.js) .ss-seedata::details-content, html:not(.js) .ss-sources::details-content{ content-visibility:visible; block-size:auto; }

/* phones: the strip scrolls inside its panel, the key wraps, the multiples stack two by two */
@media (max-width:719px){
  .ss-strip{ --ss-weekh:112px; }
  .ss-hand{ font-size:20px; }
  .ss-multi__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .ss-bars{ block-size:120px; gap:6px; }
  .ss-wt__d{ font-size:var(--fs-display-m, 40px); }
  .ss-wt__ph{ aspect-ratio:16 / 11; }
}
/* the three cities side by side from 700px (auto-fit left Dubai alone under Cairo and Riyadh at 700-900px);
   below 1024px a card is ~200-280px wide: a square photo and the phone-size day count keep the words inside the photo */
@media (min-width:700px){ .ss-watch{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width:700px) and (max-width:1023px){ .ss-wt__ph{ aspect-ratio:1; } .ss-wt__d{ font-size:var(--fs-display-m, 40px); } .ss-wt__on{ padding:16px; } .ss-wt__b{ padding:12px 16px 14px; } }