/* Vanilla Cycles: how much of each homepage is photograph. Two measured pages
   as cell mosaics, same scale, hung from one top line like specimens. */
.viz-vanilla{
  --vc-cream:#f4ebd8;--vc-panel:#fbf6ec;--vc-sand:#efe2c7;--vc-ink:#211c17;--vc-teal:#14555f;--vc-rust:#cc4702;--vc-cyan:#0287cc;
  --vc-stripe-a:#e3d3b0;--vc-stripe-b:#f1e7d2;--vc-frame:rgba(242,241,235,.34);--vc-ease:cubic-bezier(.65,0,.35,1)
}
/* In an article, keep the prose column's paragraph and list spacing out of the figure.
   (0,1,1) + later source order beats `.prose p`; figure rules that need a margin use two classes. */
.viz-vanilla p,.viz-vanilla li{margin:0}
.viz-vanilla ul,.viz-vanilla ol{padding:0}
.viz-vanilla table.viz-sr-only{width:1px;margin:-1px}
.viz-vanilla .vc-controls{grid-area:ct;margin:24px 0 0;gap:10px 18px}
.vc-hint{margin:0;font:10px/1.5 var(--mono);color:var(--viz-muted)}
.viz-vanilla .vc-switch{display:inline-flex;align-items:center;gap:10px;padding:9px 13px 9px 10px}
.vc-switch-track{position:relative;width:26px;height:14px;border:1px solid var(--viz-muted);flex:none;transition:background .3s var(--vc-ease),border-color .3s}
.vc-switch-track span{position:absolute;top:2px;left:2px;width:8px;height:8px;background:var(--viz-ink);transition:transform .35s var(--vc-ease),background .3s}
.viz-vanilla .vc-switch[aria-checked=true]{border-color:var(--viz-muted)}
.vc-switch[aria-checked=true] .vc-switch-track{background:var(--viz-accent);border-color:var(--viz-accent)}
.vc-switch[aria-checked=true] .vc-switch-track span{transform:translateX(12px);background:var(--viz-bg)}

.vc-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:44px;
  grid-template-areas:"hh vh" "hp vp" "ct vp" "as vp";grid-template-rows:auto auto auto 1fr}
.vc-head--horizon{grid-area:hh}.vc-head--vanilla{grid-area:vh}
.vc-spec--horizon{grid-area:hp}.vc-spec--vanilla{grid-area:vp}
.vc-aside{grid-area:as;align-self:start;max-width:330px;padding-top:22px}
.viz-vanilla .vc-aside-note{margin:0 0 16px;padding-left:12px;border-left:1px solid var(--viz-line);font-size:12px;line-height:1.55;color:var(--viz-muted);max-width:36ch}
.vc-aside-note b{font-weight:500;color:var(--viz-ink);font-variant-numeric:tabular-nums}
.vc-head{display:flex;flex-direction:column;min-width:0}
.viz-vanilla .vc-name{margin:0 0 10px;font:10px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--viz-muted)}
.vc-stat{margin:0;display:flex;align-items:baseline;gap:9px;font-variant-numeric:tabular-nums;transition:opacity .5s var(--vc-ease),color .5s}
.vc-stat span{font:10px/1.4 var(--mono);letter-spacing:.04em;color:var(--viz-muted)}
.vc-stat b{font-weight:500;font-family:var(--sans);position:relative}
.vc-stat--photo b{font-size:46px;line-height:1.02;letter-spacing:-1.6px}
.viz-vanilla .vc-stat--rest{margin-top:4px;color:var(--viz-muted)}
.vc-stat--rest b{font-size:19px;line-height:1.3;letter-spacing:-.3px}
.vc-stat--photo b:after{content:'';position:absolute;left:-2px;right:-2px;top:55%;height:2px;background:var(--viz-accent);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--vc-ease) .15s}
.viz-vanilla.is-off .vc-stat--photo{opacity:.42}
.viz-vanilla.is-off .vc-stat--photo b:after{transform:scaleX(1)}
.viz-vanilla.is-off .vc-stat--rest{color:var(--viz-ink)}
.viz-vanilla.is-off .vc-stat--rest span{color:var(--viz-ink)}

.vc-bar{position:relative;margin:14px 0 0;max-width:360px;min-height:34px}
.vc-bar:empty{display:none}
.vc-bar svg{display:block;overflow:visible}
.vc-bar rect[data-k]{cursor:default}
.vc-bar-note{position:absolute;top:20px;right:0;margin:0;font:10px/1.4 var(--mono);color:var(--viz-muted);white-space:nowrap}
.vc-bar-note:before{content:'';position:absolute;top:-7px;right:var(--tick,1px);width:1px;height:5px;background:var(--viz-muted)}
.vc-notes{display:grid;margin-top:4px}
.vc-note{grid-area:1/1;margin:0;font-size:12px;line-height:1.55;color:var(--viz-muted);max-width:40ch;transition:opacity .28s var(--vc-ease)}
/* Sequential crossfade: the outgoing note clears before the incoming one appears. */
.viz-vanilla:not(.is-off) .vc-note[data-vc-note=on],.viz-vanilla.is-off .vc-note[data-vc-note=off]{transition-delay:.28s}
.vc-note[data-vc-note=off]{opacity:0}
.viz-vanilla.is-off .vc-note[data-vc-note=on]{opacity:0}
.viz-vanilla.is-off .vc-note[data-vc-note=off]{opacity:1;color:var(--viz-ink)}

.vc-spec{display:flex;align-items:flex-start;margin-top:20px;min-width:0}
.vc-dim,.vc-chain{flex:none;display:block}
.vc-dim line,.vc-chain line{stroke:var(--viz-faint);stroke-width:1;shape-rendering:crispEdges}
.vc-dim text{font-size:9px;fill:var(--viz-faint);letter-spacing:.04em}
.vc-chain text{font-size:10px;fill:var(--viz-muted);transition:fill .15s}
.vc-chain .is-on text{fill:var(--viz-ink)}
.vc-chain rect{fill:transparent}
.vc-frame{position:relative;flex:none;outline:1px solid var(--vc-frame);outline-offset:0;cursor:crosshair;touch-action:pan-y}
.vc-frame:focus-visible{outline:2px solid var(--viz-accent);outline-offset:3px}
.vc-frame canvas{display:block}
.vc-frame .vc-overlay{position:absolute;inset:0;pointer-events:none}

.vc-legend{gap:7px 16px}
.vc-legend .vc-sw{width:16px;height:10px;outline:1px solid rgba(242,241,235,.2)}
.vc-legend .vc-sw--photo{background:linear-gradient(90deg,#8f7459 0 25%,#cfd8da 0 50%,#8d9ea6 0 75%,#4a3f35 0) top/100% 50% no-repeat,linear-gradient(90deg,#4a3f35 0 25%,#8f7459 0 50%,#cfd8da 0 75%,#8d9ea6 0) bottom/100% 50% no-repeat}
.vc-legend .vc-sw--placeholder{background:repeating-linear-gradient(135deg,var(--vc-stripe-a) 0 2px,var(--vc-stripe-b) 2px 4px)}
.vc-legend .vc-sw--type{background:repeating-linear-gradient(180deg,var(--vc-cream) 0 2px,var(--vc-ink) 2px 3px)}
.vc-legend .vc-sw--colour{background:linear-gradient(90deg,var(--vc-cream) 0 30%,var(--vc-sand) 30% 45%,var(--vc-ink) 45% 65%,var(--vc-teal) 65% 80%,var(--vc-rust) 80% 90%,var(--vc-cyan) 90%)}
.vc-legend .vc-sw--white{background:#fff}
.vc-aside .viz-legend{margin-top:0}

.vc-tip{width:max-content;max-width:230px}
.vc-tip b{display:block;font-weight:500}
.vc-tip span{display:block;opacity:.72}
.vc-tip.is-below{transform:translate(-50%,16px)}

/* Narrow figure (phones, or a narrow article column): toggle above both pages, notes below. */
@container viz (max-width:600px){
  .viz-vanilla .vc-controls{margin-top:22px;justify-content:space-between}
  .vc-stage{column-gap:14px;grid-template-areas:"hh vh" "ct ct" "hp vp" "as as";grid-template-rows:auto auto auto auto}
  .viz-vanilla .vc-name{min-height:3.2em;margin-bottom:6px}
  .vc-stat{flex-direction:column;align-items:flex-start;gap:2px}
  .vc-stat--photo b{font-size:34px;letter-spacing:-1.2px}
  .viz-vanilla .vc-stat--rest{margin-top:8px}
  .vc-stat--rest b{font-size:17px}
  .vc-note{font-size:11px}
  .vc-aside{max-width:none;padding-top:22px}
  .vc-bar-note{font-size:9px}
  .vc-tip{max-width:190px}
}
@media(prefers-reduced-motion:reduce){
  .viz-vanilla *,.viz-vanilla *:before,.viz-vanilla *:after{transition:none!important}
}