/* Hours: each inner page gets its own hour of the day.
   One full-width band sits where the page turns from its last pale section into the dark closing block.
   It is built from the home page's own sun: a soft chalk disc sinking into haze. The time is set as a serif
   figure with one sentence under it; the sun sits on a thin arc (6 am at the left foot, 6 pm at the right),
   the part of the day already gone drawn solid and the rest dotted.
   The hour changes the picture, not just the position. hours_finish.py writes these numbers on each band:
     --hr-x, --hr-y    where the sun sits in the arc box (0 to 1)
     --hr-kx, --hr-ky  which way it drifts as the page scrolls
     --hr-alt          how high the sun is (0 on the horizon, 1 at midday): a high sun gives a shorter band
     --hr-deep         how deep the sky is (0 palest at midday, 1 deepest at the end of the day)
     --hr-size         width of the disc in px on a desktop (small at midday, largest late in the day)
     --hr-soft         how full the bloom around the disc is (tight in the morning, wide late in the day)
     --hr-gw, --hr-gh, --hr-ga   width, height and strength of the light around the sun
   Colours are chalk, carbon and warm greys between them only. Nothing here is ember. */

.hr-band {
  --hr-p: 0;                                              /* scroll position through the band, -1 to 1. hours.js sets it. 0 is the still state. */
  --hr-h: calc(320px - 40px * var(--hr-alt, 0));          /* height of the band: 280 px at midday, 320 px at either end of the day */
  --hr-d: calc(var(--hr-size, 100) * 1px);                /* disc width */
  --hr-r: calc(var(--hr-d) / 2);
  --hr-hz: calc(var(--hr-h) * .8);                        /* the horizon, measured down from the top of the sky */
  --hr-clear: 22px;                                       /* clear sky above the disc at midday */
  --hr-up: 0px;                                           /* how far the sky reaches up behind the words (phone only) */
  --hr-g0: 0%;                                            /* the sky ramp starts this far down the band */
  --hr-gk: 1;                                             /* and is squeezed by this much (a phone keeps the words on the pale part) */
  position: relative; display: block; box-sizing: border-box;
  height: var(--hr-h); margin: 0; padding: 0; overflow: hidden; isolation: isolate;
  /* Chalk at the top (the pale section above), carbon at the bottom (the closing block below), warm greys between:
     red is never below green and green never below blue until the last step into carbon.
     Each step sits lower at midday (a pale sky that only darkens at the ground) and higher late in the day (a deep sky). */
  background: linear-gradient(180deg, #F5F2EC 0,
    #F5F2EC calc(var(--hr-g0) + var(--hr-gk) * (0% + 4% * var(--hr-deep, 0))),
    #EAE6DE calc(var(--hr-g0) + var(--hr-gk) * (8% + 4% * var(--hr-deep, 0))),
    #DAD5CB calc(var(--hr-g0) + var(--hr-gk) * (20% + 1% * var(--hr-deep, 0))),
    #C2BCB1 calc(var(--hr-g0) + var(--hr-gk) * (44% - 12% * var(--hr-deep, 0))),
    #A49E93 calc(var(--hr-g0) + var(--hr-gk) * (62% - 20% * var(--hr-deep, 0))),
    #837D73 calc(var(--hr-g0) + var(--hr-gk) * (74% - 23% * var(--hr-deep, 0))),
    #625D56 calc(var(--hr-g0) + var(--hr-gk) * (82% - 23% * var(--hr-deep, 0))),
    #45413C calc(var(--hr-g0) + var(--hr-gk) * (88% - 21% * var(--hr-deep, 0))),
    #2A2826 calc(var(--hr-g0) + var(--hr-gk) * (93% - 18% * var(--hr-deep, 0))),
    #171716 calc(var(--hr-g0) + var(--hr-gk) * (97% - 15% * var(--hr-deep, 0))),
    #0B0D0E calc(var(--hr-g0) + var(--hr-gk) * (100% - 12% * var(--hr-deep, 0))), #0B0D0E 100%);
}

/* The same centred column as the rest of the page: 1208 px wide on a desktop, 20 px from the edges on a phone. */
.hr-band .hr-col {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin-inline: auto;
  width: min(1208px, calc(100% - 2 * clamp(20px, 4vw, 56px)));
}

/* The time and its sentence: top left, in carbon on the pale part of the sky. */
.hr-band .hr-words { z-index: 2; pointer-events: none; }
body .hr-band .hr-caption { position: absolute; left: 0; top: 30px; margin: 0; padding: 0; max-width: 440px; color: #0B0D0E; }
body .hr-band .hr-fig {
  display: block; margin: 0; white-space: nowrap; color: #0B0D0E;
  font: 400 56px/1.04 "Newsreader", Georgia, "Times New Roman", serif; font-optical-sizing: auto; font-synthesis: none;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.015em; text-transform: none;
}
body .hr-band .hr-line {
  display: block; margin: 0; color: #0B0D0E; text-wrap: balance;
  font: 400 34px/1.12 "Newsreader", Georgia, "Times New Roman", serif; font-optical-sizing: auto; letter-spacing: -.01em; text-transform: none;
}

/* The sky holds the arc and the disc. It fades out smoothly around the horizon, so a low sun dissolves into
   the ground with no line across it. */
.hr-band .hr-sky {
  --hr-m0: calc(var(--hr-up) + var(--hr-hz) - var(--hr-r) * .55);
  --hr-mf: calc(var(--hr-r) * 1.3);
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 0, #000 var(--hr-m0), rgb(0 0 0 / .97) calc(var(--hr-m0) + var(--hr-mf) * .1),
    rgb(0 0 0 / .88) calc(var(--hr-m0) + var(--hr-mf) * .22), rgb(0 0 0 / .72) calc(var(--hr-m0) + var(--hr-mf) * .35),
    rgb(0 0 0 / .5) calc(var(--hr-m0) + var(--hr-mf) * .5), rgb(0 0 0 / .28) calc(var(--hr-m0) + var(--hr-mf) * .65),
    rgb(0 0 0 / .12) calc(var(--hr-m0) + var(--hr-mf) * .78), rgb(0 0 0 / .03) calc(var(--hr-m0) + var(--hr-mf) * .9),
    transparent calc(var(--hr-m0) + var(--hr-mf)));
  mask-image: linear-gradient(#000 0, #000 var(--hr-m0), rgb(0 0 0 / .97) calc(var(--hr-m0) + var(--hr-mf) * .1),
    rgb(0 0 0 / .88) calc(var(--hr-m0) + var(--hr-mf) * .22), rgb(0 0 0 / .72) calc(var(--hr-m0) + var(--hr-mf) * .35),
    rgb(0 0 0 / .5) calc(var(--hr-m0) + var(--hr-mf) * .5), rgb(0 0 0 / .28) calc(var(--hr-m0) + var(--hr-mf) * .65),
    rgb(0 0 0 / .12) calc(var(--hr-m0) + var(--hr-mf) * .78), rgb(0 0 0 / .03) calc(var(--hr-m0) + var(--hr-mf) * .9),
    transparent calc(var(--hr-m0) + var(--hr-mf)));
}

/* The box the arc is drawn in: to the right of the words, feet on the horizon, inset by half a disc so the
   disc never crosses the column edge. */
.hr-band .hr-arcbox {
  position: absolute;
  left: calc(404px + var(--hr-r)); right: var(--hr-r);
  top: calc(var(--hr-up) + var(--hr-clear) + var(--hr-r));
  height: calc(var(--hr-hz) - var(--hr-clear) - var(--hr-r));
}
.hr-band .hr-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hr-band .hr-arc path { fill: none; vector-effect: non-scaling-stroke; }
.hr-band .hr-trail .hr-arc path { stroke: rgb(11 13 14 / .44); stroke-width: 1px; }
.hr-band .hr-ahead .hr-arc path { stroke: rgb(11 13 14 / .4); stroke-width: 1.5px; stroke-linecap: round; stroke-dasharray: .01 7; }

/* The orbit is the same size as the arc box, so moving it by a share of itself moves the disc along the arc.
   Transform only: no layout, no paint. */
.hr-band .hr-orbit {
  position: absolute; inset: 0;
  transform: translate3d(calc(var(--hr-p) * var(--hr-kx, 0) * 100%), calc(var(--hr-p) * var(--hr-ky, 0) * 100%), 0);
  will-change: transform; backface-visibility: hidden;
}

/* Motion, 14 Oct 2026 ("like Apple would do it"). Where the browser has scroll-driven animations, hours.js marks the
   band data-hr-motion="css" and the drift runs on the band's own view timeline: the graphics thread moves the disc
   in step with the scroll, so a busy page never makes it stutter. The drift eases out of rest and settles
   (cubic-bezier(.25, 0, .75, 1), a gentle ease-in-out whose steepest point is a third under linear's, so even a
   fast scroll moves the disc a few px a frame). Elsewhere hours.js writes --hr-p with the same curve and a light
   follow. Without the script nothing here applies, so the disc rests on its hour. */
.hr-band[data-hr-motion="css"] { view-timeline: --hr-view block; }
.hr-band[data-hr-motion="css"] .hr-orbit {
  animation: hr-orbit linear both; animation-timeline: --hr-view; animation-range: cover 0% cover 100%;
  animation-timing-function: cubic-bezier(.25, 0, .75, 1);
}
.hr-band[data-hr-motion="css"] .hr-in {
  animation: hr-in linear both; animation-timeline: --hr-view; animation-range: cover 0% cover 100%;
  animation-timing-function: cubic-bezier(.25, 0, .75, 1);
}
@keyframes hr-orbit {
  from { transform: translate3d(calc(var(--hr-kx, 0) * -100%), calc(var(--hr-ky, 0) * -100%), 0); }
  to { transform: translate3d(calc(var(--hr-kx, 0) * 100%), calc(var(--hr-ky, 0) * 100%), 0); }
}
@keyframes hr-in {
  from { transform: translate3d(calc(var(--hr-kx, 0) * 100%), calc(var(--hr-ky, 0) * 100%), 0); }
  to { transform: translate3d(calc(var(--hr-kx, 0) * -100%), calc(var(--hr-ky, 0) * -100%), 0); }
}
/* Two windows ride with the sun: one shows the arc behind it (solid), one the arc ahead (dotted). Each holds a
   copy of the arc that moves the opposite way by the same amount, so the arc itself stays put. */
.hr-band .hr-trail { position: absolute; top: -40%; bottom: -40%; left: -100%; right: calc((1 - var(--hr-x, .5)) * 100%); overflow: hidden; }
.hr-band .hr-ahead { position: absolute; top: -40%; bottom: -40%; left: calc(var(--hr-x, .5) * 100%); right: -100%; overflow: hidden; }
.hr-band .hr-in {
  position: absolute; top: calc(100% * 4 / 18); height: calc(100% * 10 / 18);
  transform: translate3d(calc(var(--hr-p) * var(--hr-kx, 0) * -100%), calc(var(--hr-p) * var(--hr-ky, 0) * -100%), 0);
  will-change: transform; backface-visibility: hidden;
}
.hr-band .hr-trail .hr-in { left: calc(100% / (1 + var(--hr-x, .5))); width: calc(100% / (1 + var(--hr-x, .5))); }
.hr-band .hr-ahead .hr-in { left: calc(var(--hr-x, .5) * -100% / (2 - var(--hr-x, .5))); width: calc(100% / (2 - var(--hr-x, .5))); }

/* The disc. A low sun rests with its middle half a radius above the horizon and fades below that. */
.hr-band .hr-sun {
  position: absolute; left: calc(var(--hr-x, .5) * 100%);
  top: min(calc(var(--hr-y, 0) * 100%), calc(100% - var(--hr-r) * .5));
  width: var(--hr-d); aspect-ratio: 1; border-radius: 50%;
  margin: calc(var(--hr-r) * -1) 0 0 calc(var(--hr-r) * -1);
}
/* The light around the sun: long and low in the morning, tight at midday, wide and full late in the day.
   A warm chalk falling off along a smooth curve (one minus smoothstep, 17 stops): the old six stops met at sharp
   corners, which the eye reads as rings. It is static and rides with the disc, so it is painted once. */
.hr-band .hr-sun::before {
  content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%;
  width: calc(var(--hr-gw, 3) * 100%); height: calc(var(--hr-gh, 3) * 100%); transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgb(246 239 226 / var(--hr-ga, .25)) 0%, rgb(246 239 226 / calc(var(--hr-ga, .25) * .9888)) 6.25%,
    rgb(246 239 226 / calc(var(--hr-ga, .25) * .957)) 12.5%, rgb(246 239 226 / calc(var(--hr-ga, .25) * .9077)) 18.75%,
    rgb(246 239 226 / calc(var(--hr-ga, .25) * .8438)) 25%, rgb(246 239 226 / calc(var(--hr-ga, .25) * .7681)) 31.25%,
    rgb(246 239 226 / calc(var(--hr-ga, .25) * .6836)) 37.5%, rgb(246 239 226 / calc(var(--hr-ga, .25) * .5933)) 43.75%,
    rgb(246 239 226 / calc(var(--hr-ga, .25) * .5)) 50%, rgb(246 239 226 / calc(var(--hr-ga, .25) * .4067)) 56.25%,
    rgb(246 239 226 / calc(var(--hr-ga, .25) * .3164)) 62.5%, rgb(246 239 226 / calc(var(--hr-ga, .25) * .2319)) 68.75%,
    rgb(246 239 226 / calc(var(--hr-ga, .25) * .1562)) 75%, rgb(246 239 226 / calc(var(--hr-ga, .25) * .0923)) 81.25%,
    rgb(246 239 226 / calc(var(--hr-ga, .25) * .043)) 87.5%, rgb(246 239 226 / calc(var(--hr-ga, .25) * .0112)) 93.75%,
    rgb(246 239 226 / 0) 100%);
}
/* The disc: a true circle with a crisp, antialiased edge at every pixel density, and a faint warm limb. The
   hour still changes it: late in the day it sits in a wider, fuller bloom (a soft shadow of light, static, painted
   once) where it used to blur its own edge. */
.hr-band .hr-sun::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, #F8F6F1 0, #F5F2EC 58%, #EFEAE0 100%);
  box-shadow: 0 0 calc(var(--hr-d) * (.06 + var(--hr-soft, .1) * .7)) calc(var(--hr-d) * var(--hr-soft, .1) * .05)
    rgb(246 239 226 / calc(.3 + var(--hr-soft, .1) * 1.2));
}


/* Phone and small tablet: the words sit above, the sky below them. */
@media (max-width: 760px) {
  .hr-band {
    --hr-skyh: calc(108px - 12px * var(--hr-alt, 0));
    --hr-d: calc(var(--hr-size, 100) * .58px);
    --hr-hz: calc(var(--hr-skyh) * .8);
    --hr-clear: 4px;
    --hr-up: 96px;
    --hr-g0: 20%; --hr-gk: .8;
    height: auto;
  }
  .hr-band .hr-words { position: relative; }
  body .hr-band .hr-caption { position: static; max-width: none; padding: 22px 0 4px; }
  body .hr-band .hr-fig { font-size: 36px; }
  body .hr-band .hr-line { margin-top: 0; font-size: 24px; line-height: 1.15; }
  /* The sky reaches up behind the words, so the light around the sun is not cut off at their edge. */
  .hr-band .hr-sky { position: relative; inset: auto; box-sizing: border-box; height: calc(var(--hr-skyh) + var(--hr-up)); margin-top: calc(var(--hr-up) * -1); }
  .hr-band .hr-arcbox { left: var(--hr-r); }
}

/* Stillness: reduced motion, or the site's own pause switch. The disc rests exactly on its hour. */
@media (prefers-reduced-motion: reduce) { .hr-band :is(.hr-orbit, .hr-in) { transform: none !important; animation: none !important; } }
html[data-solva-motion="paused"] .hr-band :is(.hr-orbit, .hr-in) { transform: none !important; animation: none !important; }

/* The same time, small, as the first line of the page's opening: above the headline, or above the
   "A product by" line where there is one. It takes up no room, so nothing in the opening moves. */
header.hero .hr-hour { display: block; position: relative; height: 0; margin: 0; padding: 0; border: 0; pointer-events: none; }
body header.hero .hr-hour time {
  position: absolute; left: 0; bottom: 12px; margin: 0; white-space: nowrap;
  font: 600 12px/18px Manrope, system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase;
  color: rgb(245 242 236 / .9);
}
body header.hero .hr-hour.hr-hour-solo time { bottom: 21px; }
/* On a phone some openings start close under the menu bar, so the hour sits nearer its headline. */
@media (max-width: 760px) { body header.hero .hr-hour.hr-hour-solo time { bottom: 10px; } }

/* The hero light also agrees with the hour: from the left in the morning, overhead at midday, from the right
   in the afternoon. hours_finish.py writes the two values onto each page's opening. */

/* On a product page the hour shares the "A product by" line, after a thin rule. */
body header.hero .p9-by .hr-hour.hr-hour-inline { display: inline-flex; position: static; height: auto; margin: 0 0 0 5px; padding: 0 0 0 14px; border-left: 1px solid rgb(245 242 236 / .42); pointer-events: none; }
body header.hero .p9-by .hr-hour.hr-hour-inline time { position: static; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; white-space: nowrap; }