/* ==========================================================================
   Weight scale (#scale): the load-cell scale's reading on its own, between the
   farm readings and the Telegram section on the five pages that carry the board.
   Markup farm-live/weight.html, script assets/farm-weight.js, prefix fw-.

   A deep forest band (the board bar's colour, carried to full bleed) with the
   reading set as large as the site's other figures and standing on a drawn
   weighing platform. The light along the platform's front edge is the status,
   in the board's own colours: sand for sample data, sage for live, amber when
   the reading is late, dim while there is none.
   ========================================================================== */
.fw{
  --fw-ink:#F5EFE5;
  --fw-ink-2:rgba(245,239,229,.8);
  --fw-ink-3:rgba(245,239,229,.62);
  --fw-line:rgba(245,239,229,.14);
  --fw-acc:#C9A96B;
  --fw-led:#C9A96B;
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(88px,13vh,150px) var(--pad,24px) clamp(78px,11vh,130px);
  background:
    radial-gradient(56% 52% at 50% 62%,rgba(201,169,107,.14),transparent 72%),
    radial-gradient(42% 48% at 94% 0%,rgba(124,145,77,.18),transparent 70%),
    linear-gradient(160deg,#1E2813 0%,#29351A 48%,#1A2210 100%);
  color:var(--fw-ink)}
.fw[data-s="live"]{--fw-led:#AEBE8C}
.fw[data-s="delayed"]{--fw-led:#E7C88A}
.fw[data-s="awaiting"],.fw[data-s="down"]{--fw-led:rgba(245,239,229,.3)}
/* the site's dotted field, in light dots */
.fw::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(245,239,229,.06) .55px,transparent .65px);background-size:3px 3px}
.fw ::selection{background:var(--fw-acc);color:#12160A}
.fw-wrap{max-width:var(--maxw,1340px);margin:0 auto;position:relative}

/* ------------------------------ the head ------------------------------ */
.fw-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:22px clamp(32px,5vw,90px);
  align-items:end}
.fw .kicker{color:var(--fw-acc);margin-bottom:20px}
.fw-h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,4.6vw,3.9rem);
  line-height:1.04;letter-spacing:-.022em;color:var(--fw-ink);max-width:13ch;text-wrap:balance}
.fw-lede{margin:0;font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.72;color:var(--fw-ink-2);max-width:52ch}

/* ------------------------------ the stage ------------------------------ */
.fw-stage{position:relative;margin:clamp(40px,6vh,72px) 0 0;
  padding:clamp(20px,2.4vw,32px) clamp(18px,3vw,44px) clamp(20px,2.4vw,30px);
  border:1px solid var(--fw-line);border-radius:28px;
  background:linear-gradient(180deg,rgba(245,239,229,.055),rgba(245,239,229,.012) 70%)}
.fw-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.fw-farm{margin:0;display:flex;align-items:baseline;gap:12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--fw-ink-3)}
.fw-farm b{font-family:var(--display);font-weight:400;font-size:1.3rem;letter-spacing:.01em;
  text-transform:none;color:var(--fw-ink)}
.fw-st{margin:0;display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:9px 18px 9px 14px;
  border:1px solid var(--fw-line);border-radius:999px;background:rgba(12,16,8,.32);
  font-size:.88rem;line-height:1.35}
.fw-st i{position:relative;width:10px;height:10px;border-radius:50%;flex:none;background:var(--fw-led)}
.fw-st b{font-weight:600;color:var(--fw-ink)}
.fw-st span{color:var(--fw-ink-3)}
.fw-st span:not(:empty)::before{content:"\00b7";margin-right:10px}
.fw[data-s="delayed"] .fw-st b{color:#E7C88A}
.fw[data-s="awaiting"] .fw-st i,.fw[data-s="down"] .fw-st i{background:transparent;
  box-shadow:inset 0 0 0 1.5px rgba(245,239,229,.5)}
.fw[data-s="live"] .fw-st i::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid var(--fw-led);animation:fw-pulse 2.4s ease-out infinite}
@keyframes fw-pulse{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}

/* the reading, standing on the platform: the figure's foot overlaps the plate's
   top face by about half its depth, so it reads as resting on it */
.fw-scale{position:relative;display:flex;flex-direction:column;align-items:center;
  margin-top:clamp(22px,3.6vh,40px)}
.fw-read{--fw-k:1;position:relative;z-index:2;display:flex;align-items:baseline;justify-content:center;
  gap:.14em;margin:0 0 calc(-.112 * min(100%, 980px));white-space:nowrap;
  font-family:var(--display);font-weight:300;line-height:.84;letter-spacing:-.045em;
  font-size:calc(clamp(4.6rem,14vw,11.5rem) * var(--fw-k));
  font-variant-numeric:lining-nums tabular-nums}
.fw-v{padding:0 .04em .07em;color:var(--fw-ink);
  background:linear-gradient(180deg,#FFFBF3 10%,#F5EFE5 50%,#C9A96B 126%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 16px 36px rgba(8,10,6,.55))}
.fw-u{font-family:var(--display);font-weight:400;font-size:.3em;letter-spacing:.01em;color:var(--fw-acc)}
.fw-u:empty{display:none}

.fw-plat{display:block;width:min(100%,980px);height:auto;overflow:visible}
.fw-floor{fill:#050703;opacity:.5}
.fw-feet rect{fill:#0D1107}
.fw-inset{fill:none;stroke:rgba(245,239,229,.09);stroke-width:1.2}
.fw-contact{fill:#050703;opacity:.42;transform-box:fill-box;transform-origin:center}
.fw-ripple{fill:none;stroke:var(--fw-led);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center}
.fw-lip{fill:none;stroke:rgba(245,239,229,.22);stroke-width:1.2}
.fw-led{fill:var(--fw-led);transition:fill .6s var(--ease,ease)}
.fw-led-glow{fill:var(--fw-led);opacity:.9;transition:fill .6s var(--ease,ease)}
.fw-plate{transform-box:fill-box;transform-origin:50% 100%}

.fw-meta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 28px;
  margin-top:clamp(18px,2.8vh,30px);padding-top:16px;border-top:1px solid var(--fw-line)}
.fw-when{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fw-ink-3)}
.fw-when time{color:var(--fw-ink)}
.fw-note{font-size:.8rem;line-height:1.55;color:var(--fw-ink-3);max-width:60ch}
.fw-ns{margin:14px 0 0;font-size:.85rem;color:var(--fw-ink-3);text-align:center}

.fw-foot{display:flex;justify-content:flex-end;margin-top:clamp(16px,2.6vh,28px)}
.fw-go{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--body);
  font-weight:600;font-size:14px;color:var(--accent-hover,#F0752E);text-decoration:none}
.fw-go::after{content:"\2192";transition:transform .4s var(--ease,ease)}
.fw-go:hover::after{transform:translateX(4px)}
.fw-go:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}

/* ------------------------------ the landing ------------------------------
   The reading drops onto the plate, the plate gives a little and comes back,
   the shadow under the figure gathers, and one ring spreads across the face. */
.js .fw:not(.fw-in) .fw-read{opacity:0}
.fw.fw-land .fw-read{animation:fw-drop 1.05s var(--ease,ease) both}
.fw.fw-land .fw-plate{animation:fw-dip 1.05s var(--ease,ease) both}
.fw.fw-land .fw-contact{animation:fw-contact 1.05s var(--ease,ease) both}
.fw.fw-land .fw-ripple{animation:fw-ripple 1.5s .42s ease-out both}
@keyframes fw-drop{0%{opacity:0;transform:translateY(-46px)}48%{opacity:1;transform:translateY(5px)}
  70%{transform:translateY(-2px)}100%{opacity:1;transform:none}}
@keyframes fw-dip{0%,36%{transform:none}50%{transform:translateY(4px)}72%{transform:translateY(-1px)}100%{transform:none}}
@keyframes fw-contact{0%,30%{opacity:0;transform:scaleX(.55)}56%{opacity:.5}100%{opacity:.42;transform:none}}
@keyframes fw-ripple{0%{opacity:.75;transform:scale(.22)}100%{opacity:0;transform:scale(1.05)}}

@media (max-width:860px){
  .fw-head{grid-template-columns:1fr;align-items:start}
}
@media (max-width:600px){
  .fw-read{font-size:calc(clamp(4.6rem,25vw,7rem) * var(--fw-k))}
  .fw-stage{border-radius:22px}
  .fw-top{flex-direction:column;align-items:flex-start}
  /* the status word and its note on two lines, the note under the word, no dot between */
  .fw-st{border-radius:18px;row-gap:2px}
  .fw-st span{flex-basis:100%;padding-left:20px}
  .fw-st span:not(:empty)::before{content:none}
  .fw-meta{flex-direction:column}
  .fw-foot{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .fw.fw-land .fw-read,.fw.fw-land .fw-plate,.fw.fw-land .fw-contact,.fw.fw-land .fw-ripple{animation:none}
  .fw[data-s="live"] .fw-st i::after{animation:none;opacity:0}
  .fw-led,.fw-led-glow,.fw-go::after{transition:none}
}
@media print{
  .fw{background:#fff!important;color:#111!important;padding:24px 0}
  .fw::before{display:none}
  .fw-h2,.fw-farm b,.fw-st b,.fw-when time{color:#111!important}
  .fw-v{background:none;-webkit-text-fill-color:#111;color:#111;filter:none}
  .fw .kicker,.fw-u{color:#2D6E57!important}
  .fw-lede,.fw-note,.fw-when,.fw-st span,.fw-farm{color:#333!important}
  .fw-stage,.fw-st,.fw-meta{border-color:#ccc!important;background:none!important}
  .fw-plat,.fw-go{display:none}
  .fw-read{margin-bottom:0}
}