/* ============================================================================
   Hero figures for the single-subject pages — /amazon, /advertising, /reports.
   ----------------------------------------------------------------------------
   These three pages carried the site's best writing and none of its motion, so
   next to the homepage they read as an older, flatter site. Each now opens with
   one drawing that makes the page's own argument before the reader has finished
   the first paragraph:

     /amazon       the order feed drifting away from the settlement
     /advertising  a payback curve crossing break-even long after day seven
     /reports      the week's read arriving on its own

   ADDITIVE, on the same contract as the homepage. The finished drawing is what
   the markup renders. The folded-away start state is scoped to html.js, which
   assets/sitefigure.js sets before first paint, so a reader with no JavaScript
   sees every line drawn and every label in place. Reduced motion likewise.

   Values are literal rather than var(), matching assets/sitepage.css and
   assets/sitenav.css: these pages do not all define a palette, and a figure
   must not depend on one that may not be there.
   ========================================================================== */

/* text-align is explicit: /reports centres its hero, and an email that
   arrives centred does not read as an email. */
.sfig{position:relative;margin:34px 0 4px;padding:22px 24px 18px;
  border:1px solid #E8E6F2;border-radius:20px;background:#FBFAFE;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  max-width:1120px;text-align:left;}
.sfig svg{display:block;width:100%;height:auto;overflow:visible;}

.sfig-cap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;
  margin-top:14px;padding-top:13px;border-top:1px solid #EFEDF7;}
.sfig-key{display:flex;align-items:center;gap:7px;
  font:500 12px/1.4 'JetBrains Mono',ui-monospace,monospace;color:#5F5980;}
.sfig-key i{width:15px;height:3px;border-radius:2px;flex:none;}
.sfig-note{font-size:13.5px;color:#5F5980;margin:0;flex:1 1 240px;min-width:0;}
.sfig-note b{color:#161232;font-weight:600;}

/* Labels drawn inside the figure. */
.sfig text{font-family:'JetBrains Mono',ui-monospace,monospace;}
.sfig .t-lab{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  fill:#8A84A8;}
.sfig .t-val{font-size:13px;font-weight:500;fill:#161232;}
.sfig .t-small{font-size:10.5px;fill:#8A84A8;}

/* ---------- the animation ----------
   Every drawn path carries pathLength="1", so one rule covers paths of any
   real length: the dash is the whole path, and the offset runs 1 -> 0. */
html.js .sfig [data-draw]{stroke-dasharray:1;stroke-dashoffset:1;}
html.js .sfig.in [data-draw]{stroke-dashoffset:0;
  transition:stroke-dashoffset 1.25s cubic-bezier(.32,.7,.35,1);
  transition-delay:calc(var(--i,0) * 260ms);}

html.js .sfig [data-fade]{opacity:0;}
html.js .sfig.in [data-fade]{opacity:1;
  transition:opacity .55s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(420ms + var(--i,0) * 170ms);}

html.js .sfig [data-rise]{opacity:0;transform:translateY(9px);}
html.js .sfig.in [data-rise]{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.22,1,.36,1),
             transform .55s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i,0) * 130ms);}

@media (prefers-reduced-motion:reduce){
  html.js .sfig [data-draw],html.js .sfig.in [data-draw]{stroke-dashoffset:0;transition:none;}
  html.js .sfig [data-fade],html.js .sfig.in [data-fade],
  html.js .sfig [data-rise],html.js .sfig.in [data-rise]{
    opacity:1;transform:none;transition:none;}
}

/* ---------- /reports: the week's read arriving ---------- */
.sfig-mail{border:1px solid #E4E1F1;border-radius:14px;background:#fff;
  padding:15px 17px 14px;box-shadow:0 6px 18px rgba(22,18,50,.06);}
.sfig-mail .m-top{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.11em;text-transform:uppercase;color:#8A84A8;}
.sfig-mail .m-sub{font-size:16px;font-weight:700;letter-spacing:-.01em;
  color:#161232;margin-top:9px;}
.sfig-mail .m-rows{margin-top:12px;display:grid;gap:1px;background:#EFEDF7;
  border-radius:9px;overflow:hidden;}
.sfig-mail .m-row{display:flex;justify-content:space-between;gap:14px;
  background:#fff;padding:9px 12px;font-size:13.5px;}
.sfig-mail .m-row .k{color:#5F5980;}
.sfig-mail .m-row .v{font:500 13.5px 'JetBrains Mono',ui-monospace,monospace;
  color:#161232;}
.sfig-mail .m-note{margin-top:12px;padding:11px 13px;border-radius:10px;
  background:#F1F0FF;font-size:13.5px;line-height:1.6;color:#453F63;}
.sfig-mail .m-note b{color:#161232;}
/* Two more issues stacked behind it, so "every week" is shown rather than
   asserted. They sit ABOVE the card in the stack and the mail sits on top of
   them, rather than behind the figure's own background where nothing was
   visible at all. */
.sfig-stack{position:relative;padding-top:16px;}
.sfig-stack .sfig-mail{position:relative;z-index:2;}
.sfig-stack::before,.sfig-stack::after{content:"";position:absolute;
  height:26px;border:1px solid #E4E1F1;border-bottom:0;
  border-radius:14px 14px 0 0;background:#fff;z-index:1;}
.sfig-stack::before{left:16px;right:16px;top:8px;}
.sfig-stack::after{left:34px;right:34px;top:0;opacity:.7;z-index:0;}

/* ---------- narrow screens ----------
   The drawings are 1000 units wide. Scaled to fit a 390px phone that is a
   factor of about 0.34, which rendered the 10.5px labels at roughly four
   pixels -- present, and unreadable. So below 720px the drawing keeps a
   working minimum width and scrolls inside its OWN box (the page body still
   never scrolls sideways), and the label sizes are raised to compensate for
   what is left of the scaling. The prose underneath does not scroll and
   carries the same point in words. */
.sfig-scroll{overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;}

@media (max-width:720px){
  .sfig{padding:16px 15px 14px;margin-top:26px;}
  .sfig-cap{gap:7px 14px;}
  .sfig-mail .m-row{font-size:12.5px;}

  /* 580px is chosen, not rounded to. On a 390px phone the card's inner width
     is about 330px, which shows 330/580 of the 1000-unit drawing -- units 0 to
     about 570. The moment both charts are built around (the crossing at unit
     495, and the point the shading changes colour) therefore lands ON screen
     before any scrolling. At 660px it fell just outside it. */
  .sfig-scroll svg{min-width:580px;}
  .sfig .t-lab{font-size:17px;letter-spacing:.1em;}
  .sfig .t-val{font-size:21px;}
  .sfig .t-small{font-size:17px;}
  .sfig-scroll::after{content:"scroll to see the whole shape";display:block;
    font:400 11px 'JetBrains Mono',ui-monospace,monospace;color:#8A84A8;
    padding-top:6px;}
}