/* web.vi v2, plate 7: WordPress keeps phones waiting. One chart: 100 WordPress sites as small windows, and how many have
   started sending the page by 0.8 s, the most Google counts as good (Chrome data via HTTP Archive). Then three facts,
   and one paragraph on the login page.
   Phone: claim, chart, facts, then the login paragraph. Desktop (>=900px landscape): claim | chart, then the facts
   in a row, then the login paragraph.
   wait.js sets .is-armed (motion allowed, before the run), .is-late (the clock reached 0.8 s) and .is-on (on screen);
   a started window gets .is-in. Without .is-armed (no JS, reduced motion) the plate is the finished still. */
.wt{padding:96px var(--g) calc(env(safe-area-inset-bottom) + 104px);overflow:clip;color:var(--marble)}
.plate.wt{background:radial-gradient(90% 60% at 72% 34%,#0B4A47 0%,rgba(11,74,71,0) 70%),var(--sea)}
.wt-in{display:grid;grid-template-columns:minmax(0,1fr);max-width:1400px;margin:0 auto}

.wt-h{font:300 clamp(46px,13vw,72px)/.92 var(--didone);font-stretch:62.5%;letter-spacing:-.008em;max-width:13ch;text-wrap:balance}
.wt-lede{margin-top:22px;max-width:32ch;font:400 19px/1.45 var(--garamond);color:var(--marble-2);text-wrap:pretty}

/* the chart */
.wt-chart{margin:56px 0 0}
.wt-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px;font:500 14px/1.2 var(--mono);color:var(--foam)}
.wt-clock{font:500 22px/1 var(--mono);color:var(--flame);font-variant-numeric:tabular-nums;white-space:nowrap}
.wt-clock small{margin-left:.2em;font-size:.68em}
.is-armed:not(.is-late) .wt-clock{color:var(--marble)}

/* one window per site: a frame with a title bar. Waiting windows are drawn in flame with a loading bar */
.wt-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(5px,1.6vw,9px)}
.wt-grid i{--c:var(--flame);position:relative;aspect-ratio:4/3;border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--c);
  transition:background-color .25s linear,box-shadow .25s linear,opacity .2s linear}
.wt-grid i::before{content:"";position:absolute;left:0;right:0;top:0;height:26%;border-radius:3px 3px 0 0;background:var(--c);opacity:.4}
.wt-grid .s::after{content:"";position:absolute;left:20%;right:20%;bottom:26%;height:12%;border-radius:1px;background:var(--c);transform:scaleX(.45);transform-origin:left}
.wt-grid .f{--c:rgba(169,196,190,.5);background:rgba(169,196,190,.3)}
.is-on .wt-grid .s::after{animation:wt-load 1.8s ease-in-out calc(var(--i) * -53ms) infinite alternate}
@keyframes wt-load{from{transform:scaleX(.1)}to{transform:scaleX(.85)}}
/* before the clock runs, every window is loading */
.is-armed .wt-grid i{--c:rgba(169,196,190,.42);background:none}
.is-armed .wt-grid .f::after{content:"";position:absolute;left:20%;right:20%;bottom:26%;height:12%;border-radius:1px;background:var(--c);transform:scaleX(.3);transform-origin:left}
.is-armed .wt-grid .f.is-in{--c:rgba(169,196,190,.5);background:rgba(169,196,190,.3)}
.is-armed .wt-grid .f.is-in::after{content:none}
.is-armed.is-late .wt-grid .s{--c:var(--flame)}
/* hovering either group lights it and dims the other */
@media (hover:hover){
  .wt-grid:has(.s:hover) .f,.wt-grid:has(.f:hover) .s{opacity:.25}
}

.wt-cap{margin-top:22px}
.wt-big{max-width:30ch;font-size:19px;line-height:1.45;color:var(--marble-2);text-wrap:pretty}
.wt-big b{display:block;margin-bottom:6px;font:300 66px/.9 var(--didone);font-stretch:62.5%;letter-spacing:-.01em;color:var(--flame)}
.wt-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;font:500 14px/1.2 var(--mono);color:var(--foam)}
.wt-key span{display:flex;align-items:center;gap:8px}
.wt-key span::before{content:"";width:16px;height:12px;border-radius:2px;box-shadow:inset 0 0 0 1.5px var(--flame)}
.wt-key span+span::before{box-shadow:inset 0 0 0 1.5px rgba(169,196,190,.5);background:rgba(169,196,190,.3)}
.wt-src{margin-top:12px;font-size:15px;line-height:1.4;color:var(--ash)}

/* three facts, set like the speed plate's */
.wt-facts{margin:72px 0 0;padding:0;list-style:none}
.wt-facts li{padding:22px 0 26px;border-top:1px solid rgba(169,196,190,.24)}
.wt-facts b{display:block;margin-bottom:10px;font:300 66px/.9 var(--didone);font-stretch:62.5%;letter-spacing:-.01em;color:var(--marble)}
.wt-facts span{display:block;max-width:30ch;font-size:19px;line-height:1.45;color:var(--foam);text-wrap:pretty}

.wt-door{margin-top:48px;max-width:34ch;font-size:19px;line-height:1.45;color:var(--marble-2);text-wrap:pretty}

/* a dated dispatch: the newest reason, set apart by a flame rule */
.wt-news{margin-top:56px;max-width:40ch}
.wt-news-head{padding-top:20px;border-top:2px solid var(--flame)}
.wt-news-date{font:500 14px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--flame)}
.wt-news-h{margin-top:14px;font:400 44px/.95 var(--didone);font-stretch:62.5%;letter-spacing:-.008em;color:var(--marble);text-wrap:balance}
.wt-news p:not([class]){margin-top:16px;font-size:19px;line-height:1.45;color:var(--foam);text-wrap:pretty}
.wt-news .wt-src{margin-top:16px}

@media (min-width:900px) and (orientation:landscape){
  .wt{padding:13svh var(--g) 15svh}
  .wt-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(48px,6vw,120px);align-items:start}
  .wt-head{grid-column:1;grid-row:1;padding-top:clamp(0px,2svh,24px)}
  .wt-h{font-size:clamp(62px,4.9vw,96px)}
  .wt-lede{margin-top:clamp(22px,3svh,34px);font-size:clamp(20px,1.3vw,24px)}
  .wt-chart{grid-column:2;grid-row:1;justify-self:end;width:100%;max-width:calc((86svh - 230px) * 1.43);margin:0}
  .wt-clock{font-size:clamp(22px,1.6vw,30px)}
  .wt-cap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:start}
  .wt-big{grid-row:1 / 3;font-size:clamp(19px,1.15vw,22px)}
  .wt-big b{font-size:clamp(56px,4.2vw,80px)}
  .wt-key{flex-direction:column;margin-top:8px}
  .wt-src{grid-column:2;margin-top:14px;max-width:18ch;font-size:14px}
  .wt-facts{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(32px,4vw,80px);margin-top:clamp(64px,11svh,120px)}
  .wt-facts b{font-size:clamp(56px,4.2vw,80px)}
  .wt-facts span{font-size:clamp(18px,1.1vw,21px)}
  .wt-door{grid-column:1;margin-top:clamp(40px,7svh,72px);font-size:clamp(19px,1.15vw,22px)}
  /* on the facts' three columns: the dated heading, then one paragraph in each of the other two */
  .wt-news{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:clamp(32px,4vw,80px);max-width:none;
    margin-top:clamp(56px,9svh,96px);border-top:1px solid rgba(169,196,190,.24)}
  .wt-news-head{grid-row:1 / 3;margin-top:-1px;padding-top:22px}
  .wt-news-h{font-size:clamp(44px,3.2vw,60px)}
  .wt-news p:not([class]){margin-top:0;padding-top:22px;max-width:34ch;font-size:clamp(18px,1.1vw,21px)}
  .wt-news > p:first-of-type{grid-row:1 / 3}
  .wt-news .wt-src{grid-column:3;max-width:none;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .wt-grid i::after{animation:none!important}
}