/* =========================================================================
   The showpiece layer.

   Everything in style.css still applies; this is loaded after it and only
   adds. Same colours, same faces, same words.

   Every idea in it comes from this business and is used nowhere else:

   - FROM PAWS TO HOOVES, walked. A trail of prints leaves the first screen
     and walks down the page beside the reader: paws, then hooves where the
     page is about horses, and both arriving together at "Meet Amber first".
     It is the strapline, drawn.
   - THE VALLEY. The first screen is the engraved artwork with ridges of
     the same hills behind it that slide at different speeds, so the valley
     has depth as the page moves.
   - THE SCRAPBOOK. Photographs sit on the page as prints stuck in an
     album, and the reasons to book her are notes taped to it in her
     handwriting. The Walk album already works this way; now the home
     page does too.
   - THE LANE. The villages she covers are stops along a dotted lane
     rather than a sentence.

   Scoped to the home page.
   ========================================================================= */

/* A phone showed five pixels of sideways scroll where a tilted photograph
   stuck out past the screen. Found by measuring; it is on the live site. */
main{ overflow-x: clip; }

/* ------------------------------------------------------------------ *
 * The bar: hers, kept, and finished
 * ------------------------------------------------------------------ */

/* It stays with you down the page, because seven plain links you can see
   are worth more to somebody on a phone in a field than a clever menu. */
.site-head{
  position: sticky;
  top: 0;
  transition: box-shadow .25s ease, background-color .25s ease;
}
.site-head[data-moved]{
  box-shadow: 0 6px 24px -14px rgba(60,38,18,.45);
}

/* The page you are on, and the one you are pointing at, underlined the
   way you would with a pencil: one stroke, not quite straight. */
@media (min-width: 62em){
  .nav a:not(.nav-cta){
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.5 C 22 1.5, 44 7, 62 4 S 100 2.5, 118 5' fill='none' stroke='%23474E29' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")
      left bottom / 0 7px no-repeat;
    padding-bottom: .5rem;
    transition: background-size .28s ease;
  }
  .nav a:not(.nav-cta):hover,
  .nav a:not(.nav-cta)[aria-current="page"]{
    background-size: 100% 7px;
  }
}

/* ------------------------------------------------------------------ *
 * The valley
 * ------------------------------------------------------------------ */

.page-home .hero{
  --p: 0;                        /* how far the first screen has been scrolled away */
  /* How tall the artwork stands. Never shorter than its own shape at this
     width (it is three wide to one high), or the top of it is cropped and
     the horse loses her ears. */
  --art: max(clamp(13rem, 40vh, 28rem), calc(100vw / 3));
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 4.75rem);
  isolation: isolate;
}

.page-home .hero-in{
  order: 1;
  padding-block: clamp(2.5rem, 8vh, 5.5rem) 1.5rem;
}
.page-home .hero-in::before{ content: none; }

.page-home .hero h1{
  font-size: clamp(2.75rem, 1rem + 6.4vw, 6.5rem);
  line-height: .97;
  letter-spacing: -.02em;
  max-width: 13ch;
}
.page-home .hero .lede{
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  max-width: 30ch;
  color: var(--ink);
  margin-top: 1.4rem;
}
.page-home .hero .btn-row{ margin-top: 1.75rem; }
.page-home .hero .btn{ min-height: 56px; padding-inline: 1.6rem; font-size: 1.0625rem; }

/* The artwork along the foot of the screen. Multiplied, so its own paper
   lets the ridges behind it show through. */
.page-home .hero-art{
  order: 3;
  margin-top: auto;
  max-height: none;
  width: 100%;
  height: var(--art);
  object-fit: cover;
  object-position: right bottom;
  mix-blend-mode: multiply;
  /* no top edge: the artwork's own paper fades into the sky */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.5%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 2.5%);
  transform: translate(calc(var(--mx, 0) * -30px), calc(var(--p) * 3rem));
  transition: transform .5s ease-out;
}

/* Three ridges of the same hills, further and paler each time, each one
   moving a little less than the one in front of it. */
.sp-ridges{
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.sp-ridges i{
  position: absolute;
  left: -6%; right: -6%;
  height: 12rem;
  -webkit-mask: url("/img/horizon.webp") bottom center / cover no-repeat;
  mask: url("/img/horizon.webp") bottom center / cover no-repeat;
  will-change: transform;
}
.sp-ridges i:nth-child(1){
  bottom: calc(var(--art) * .6);
  background: var(--sage-pale);
  opacity: .8;
  transform: translate(calc(var(--p) * -3% + var(--mx, 0) * -6px), calc(var(--p) * 9rem)) scaleX(1.5);
  transition: transform .5s ease-out;
}
.sp-ridges i:nth-child(2){
  bottom: calc(var(--art) * .44);
  background: var(--sage);
  opacity: .62;
  transform: translate(calc(var(--p) * 4% + var(--mx, 0) * -12px), calc(var(--p) * 6rem)) scaleX(-1.25);
  transition: transform .5s ease-out;
}
.sp-ridges i:nth-child(3){
  bottom: calc(var(--art) * .28);
  background: var(--olive-mid);
  opacity: .5;
  transform: translate(calc(var(--p) * -2% + var(--mx, 0) * -20px), calc(var(--p) * 3.5rem)) scaleX(1.1);
  transition: transform .5s ease-out;
}

@media (min-width: 60em){
  .page-home .hero{ display: flex; }
  .page-home .hero-in{ display: block; padding-block: clamp(3rem, 9vh, 6rem) 0; }
  .page-home .hero-copy{ max-width: none; }
  /* Wide: the words are on the left and the animals on the right, so the
     artwork can stand at the foot of the screen behind the words and the
     whole of it, horse's ears to grass, is there on arrival. */
  .page-home .hero{
    --art: max(clamp(14rem, 44vh, 30rem), calc(100vw / 3));
    min-height: max(calc(100svh - 5rem), calc(var(--art) + 15rem));
  }
  .page-home .hero-art{
    position: absolute;
    left: 0; bottom: 0;
    margin: 0;
  }
  /* The words now stand in front of the far hills, so they carry a little
     of the sky with them to stay easy to read. */
  .page-home .hero .lede{
    text-shadow: 0 0 .5rem var(--cream), 0 0 1.1rem var(--cream), 0 0 1.6rem var(--cream);
    font-weight: 500;
  }
}

/* ------------------------------------------------------------------ *
 * From paws to hooves: the trail
 * ------------------------------------------------------------------ */

main{ position: relative; }

.sp-trail{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

/* On a wide screen it walks down the left margin. On a phone there is no
   margin, so it is small and keeps to the right-hand edge, where lines of
   text end short, and steps round anything that fills the width. */
.sp-trail{ display: block; }
.sp-trail[data-small] svg{ width: 1.15rem; height: 1.15rem; }
.sp-trail[data-small] svg[data-hoof]{ width: 1.35rem; height: 1.35rem; }
.sp-trail[data-small] svg[data-down]{ opacity: .3; }
/* the few that come in across the valley are full size everywhere */
.sp-trail svg[data-walk-in]{ width: 1.9rem; height: 1.9rem; }
.sp-trail svg[data-walk-in][data-down]{ opacity: .62; }

.sp-trail svg{
  position: absolute;
  width: 2.1rem; height: 2.1rem;
  fill: var(--olive);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--turn)) scale(.6);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.9,.3,1.3);
}
.sp-trail svg[data-hoof]{ width: 2.5rem; height: 2.5rem; fill: var(--brown); }
.sp-trail svg[data-down]{
  opacity: .36;
  transform: translate(-50%, -50%) rotate(var(--turn));
}
/* On the dark bands it would vanish; there, it is cream. */
.sp-trail svg[data-dark]{ fill: var(--cream); }
.sp-trail svg[data-dark][data-down]{ opacity: .32; }

/* ------------------------------------------------------------------ *
 * Scale, on the home page
 * ------------------------------------------------------------------ */

/* main only: the footer has headings of its own, and they are small. */
.page-home main h2{
  font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.page-home .eyebrow{ font-size: .875rem; letter-spacing: .14em; }
.page-home .section{ padding-block: clamp(4.5rem, 11vw, 8.5rem); }
.page-home .section-head{ max-width: 52rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.page-home .section-head > p:last-child,
.page-home .prose p{ font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.55; }

/* The four promises are why somebody hands over their keys. */
.page-home .trust{ padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.page-home .trust li{ font-size: clamp(1.0625rem, .9rem + .7vw, 1.5rem); font-family: var(--f-display); }
.page-home .trust .tick{ width: 38px; height: 38px; }

/* ------------------------------------------------------------------ *
 * The scrapbook
 * ------------------------------------------------------------------ */

/* Amber, as a print stuck in the album: white edge, a strip of tape,
   and not quite square to the page. */
@media (min-width: 48em){
  .page-home .person{ grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
  .page-home .portrait{ max-width: none; }
}
.page-home .portrait{
  position: relative;
  overflow: visible;
  padding: .7rem .7rem 3.2rem;
  background: var(--white);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(60,38,18,.12), 0 22px 40px -18px rgba(60,38,18,.4);
  transform: rotate(-2.2deg);
}
.page-home .portrait img{ width: 100%; border-radius: 1px; }
.page-home .portrait::before,
.page-home .hour-shot::before,
.page-home .reasons li::before{
  content: "";
  position: absolute;
  top: -.85rem; left: 50%;
  width: 6.5rem; height: 1.7rem;
  background: rgba(227,196,137,.78);
  box-shadow: 0 1px 2px rgba(60,38,18,.14);
  transform: translateX(-50%) rotate(-3deg);
  z-index: 2;
}
/* Her name under her own photograph, the way you would write it in. */
.page-home .portrait::after{
  content: "Amber";
  position: absolute;
  left: 0; right: 0; bottom: .55rem;
  text-align: center;
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: 2rem; line-height: 1;
  color: var(--brown-mid);
}
.page-home .person-copy p{ font-size: 1.125rem; }

/* The reasons to book her, as notes taped to the page in her hand. */
.page-home .reasons{
  gap: clamp(2.25rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1rem;
}
.page-home .reasons li{
  position: relative;
  padding: 2rem 1.5rem 1.6rem;
  border: 0;
  background: var(--white);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(60,38,18,.1), 0 16px 30px -18px rgba(60,38,18,.38);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.page-home .reasons li:nth-child(6n+1){ --tilt: -1.6deg; }
.page-home .reasons li:nth-child(6n+2){ --tilt: 1.1deg; }
.page-home .reasons li:nth-child(6n+3){ --tilt: -.7deg; }
.page-home .reasons li:nth-child(6n+4){ --tilt: 1.5deg; }
.page-home .reasons li:nth-child(6n+5){ --tilt: -1.2deg; }
.page-home .reasons li:nth-child(6n){ --tilt: .8deg; }
.page-home .reasons li:hover{
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 4px 8px rgba(60,38,18,.12), 0 26px 44px -20px rgba(60,38,18,.45);
}
.page-home .reasons li::before{ width: 5rem; height: 1.5rem; }
.page-home .reasons li:nth-child(even)::before{ transform: translateX(-50%) rotate(2.5deg); }
.page-home .reasons h3{
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--olive);
  margin-bottom: .6rem;
}
.page-home .reasons p{ font-size: 1.0625rem; color: var(--ink); }

/* ------------------------------------------------------------------ *
 * The day: each hour a spread in the album
 * ------------------------------------------------------------------ */

.page-home .day-head h2{ font-size: clamp(3rem, 1.4rem + 7vw, 7rem); }
.page-home .day-head p:last-child{ font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); }

.page-home .hour-clock{
  font-size: clamp(3rem, 1.5rem + 6vw, 6.5rem);
  line-height: .92;
  color: var(--band-ink);
  margin-bottom: 1rem;
  text-wrap: balance;
}
.page-home .hour h3{ font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); }
.page-home .hour-body{ font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); color: var(--band-ink); max-width: 40ch; }
.page-home .hour-link{ font-size: 1.125rem; }

.page-home .hour-shot{
  position: relative;
  overflow: visible;
  padding: .6rem .6rem 2.4rem;
  background: var(--white);
  border-radius: 3px;
  transform: rotate(-1.6deg);
}
.page-home .hour:nth-child(even) .hour-shot{ transform: rotate(1.6deg); }
.page-home .hour:nth-child(even) .hour-shot::before{ transform: translateX(-50%) rotate(3deg); }

@media (min-width: 52em){
  .page-home .hour-in{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); }
}

/* ------------------------------------------------------------------ *
 * Three steps, along a lane
 * ------------------------------------------------------------------ */

.page-home .steps{ gap: clamp(2rem, 4vw, 3.5rem); }
.page-home .steps li{ padding-top: 5.25rem; }
.page-home .steps li::before{
  width: 3.9rem; height: 3.9rem;
  font-size: 2rem;
  box-shadow: 0 0 0 6px var(--cream);
  z-index: 1;
}
/* the lane between one step and the next */
@media (min-width: 52em){
  .page-home .steps li:not(:last-child)::after{
    content: "";
    position: absolute;
    top: 1.9rem; left: 3.9rem;
    width: calc(100% + clamp(2rem, 4vw, 3.5rem) - 3.9rem);
    border-top: 3px dotted var(--sage);
  }
}
.page-home .steps h3{ font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); }
.page-home .steps p{ font-size: 1.0625rem; color: var(--ink); }

/* ------------------------------------------------------------------ *
 * The lane through the villages. See showpiece.js.
 * ------------------------------------------------------------------ */

.page-home .prose:has(.sp-lane){ max-width: none; }

.sp-lane{ margin: 0 0 2.5rem; }
.sp-lane h3{
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: 1.75rem; font-weight: 600; line-height: 1;
  color: var(--olive);
  margin: 0 0 .9rem;
}
.sp-lane ol{
  list-style: none;
  margin: 0 0 2rem; padding: 0;
  display: flex; flex-wrap: wrap;
  row-gap: .9rem;
  font-family: var(--f-display);
  font-size: clamp(1.375rem, 1rem + 1.5vw, 2.125rem);
  line-height: 1.1;
}
.sp-lane li{ display: inline-flex; align-items: center; margin: 0; color: var(--brown); }
/* a stretch of dotted lane before each place, and a milestone at the start */
.sp-lane li::before{
  content: "";
  width: clamp(1.25rem, 3vw, 2.75rem);
  margin-inline: .55em;
  border-top: 3px dotted var(--sage);
}
.sp-lane li:first-child::before{
  width: .7em; height: .7em;
  margin-inline: 0 .5em;
  border: 0;
  border-radius: 50%;
  background: var(--olive);
}
.sp-lane ol[data-far] li{ color: var(--brown-mid); }
.sp-lane ol[data-far] li:first-child::before{ background: var(--sage); }

/* ------------------------------------------------------------------ *
 * The close
 * ------------------------------------------------------------------ */

.page-home .cta-band{ padding-block: clamp(5rem, 13vw, 9.5rem); }
.page-home .cta-band h2{ font-size: clamp(3rem, 1.4rem + 7vw, 7rem); }
.page-home .cta-band p{ font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); max-width: 40ch; color: #EEE7D3; }
.page-home .cta-band .btn{ min-height: 60px; font-size: 1.125rem; padding-inline: 1.9rem; }

@media (prefers-reduced-motion: reduce){
  .sp-trail svg, .page-home .reasons li, .site-head, .nav a{ transition: none !important; }
  .sp-trail svg{ opacity: .36; transform: translate(-50%, -50%) rotate(var(--turn)); }
}

/* ------------------------------------------------------------------ *
 * The valley, right now
 *
 * The site already knows the weather in Newton Abbot and the hour of the
 * day, and showed them in a band under the first screen. This puts them
 * in it. The sky over the valley is today's sky; if it is raining in
 * Newton Abbot it is raining on the first screen; and the forecast is a
 * note taped to the corner, in the same hand as everything else in the
 * album. Nobody else's site has their own valley under their own weather.
 * ------------------------------------------------------------------ */

.page-home .hero{
  --sky-a: var(--cream);
  --sky-b: var(--cream);
  background: linear-gradient(to bottom, var(--sky-a) 0%, var(--sky-b) 46%, var(--cream) 78%);
  transition: background 1.2s ease;
}
:root[data-sky="clear"] .page-home .hero{ --sky-a:#CFE0EA; --sky-b:#F2F1E4; }
:root[data-sky="cloud"] .page-home .hero{ --sky-a:#D5D7D2; --sky-b:#F4F1E6; }
:root[data-sky="rain"]  .page-home .hero{ --sky-a:#AFB5B6; --sky-b:#DDDCD2; }
:root[data-sky="fog"]   .page-home .hero{ --sky-a:#D2D2CC; --sky-b:#E9E6DC; }
:root[data-sky="snow"]  .page-home .hero{ --sky-a:#DCE2E6; --sky-b:#F7F6F1; }
:root[data-sky="storm"] .page-home .hero{ --sky-a:#8E9494; --sky-b:#C9C7BC; }

/* Swallows, crossing now and then. Not in the rain, and not for anybody
   who has asked for less motion. */
.sp-birds{
  position: absolute; inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.sp-birds svg{
  position: absolute;
  left: -3rem;
  width: 1.9rem;
  fill: none;
  stroke: var(--brown);
  stroke-width: 1.7;
  stroke-linecap: round;
  opacity: 0;
  animation: sp-cross 34s linear infinite, sp-flap .5s ease-in-out infinite alternate;
}
.sp-birds svg:nth-child(1){ top: 20%; animation-delay: 3s, 0s; }
.sp-birds svg:nth-child(2){ top: 26%; width: 1.4rem; animation-delay: 4.4s, .2s; animation-duration: 36s, .46s; }
.sp-birds svg:nth-child(3){ top: 13%; width: 1.2rem; animation-delay: 21s, .1s; animation-duration: 42s, .54s; }
@keyframes sp-cross{
  0%{ translate: 0 0; opacity: 0; }
  3%{ opacity: .6; }
  45%{ translate: 55vw -5vh; opacity: .6; }
  60%{ translate: 110vw 2vh; opacity: 0; }
  100%{ translate: 110vw 2vh; opacity: 0; }
}
@keyframes sp-flap{ from{ scale: 1 1; } to{ scale: 1 .35; } }
:root[data-sky="rain"] .sp-birds,
:root[data-sky="storm"] .sp-birds,
:root[data-sky="snow"] .sp-birds,
:root[data-daypart="night"] .sp-birds{ display: none; }

/* Where there is room, the weather band becomes the whole first screen:
   its rain falls across the valley, and its words are a taped note. */
@media (min-width: 60em){
  .page-home .now{
    position: absolute;
    top: 0; left: 0; right: 0;
    height: calc(100svh - 4.75rem);
    z-index: 4;
    background: none;
    border: 0;
    overflow: visible;
    pointer-events: none;
  }
  .page-home .now-horizon{ display: none; }
  .page-home .now-in{
    position: absolute;
    top: clamp(.9rem, 3vh, 2.75rem);
    right: max(var(--gutter), calc((100vw - 76rem) / 2));
    width: 17.5rem;
    max-width: none;
    margin: 0;
    display: block;
    padding: 2rem 1.5rem 1.3rem;
    background: var(--white);
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(60,38,18,.1), 0 20px 36px -18px rgba(60,38,18,.42);
    transform: rotate(2.2deg);
    pointer-events: auto;
  }
  /* the tape */
  .page-home .now-in::before{
    content: "";
    position: absolute;
    top: -.8rem; left: 50%;
    width: 5.5rem; height: 1.6rem;
    background: rgba(227,196,137,.78);
    box-shadow: 0 1px 2px rgba(60,38,18,.14);
    transform: translateX(-50%) rotate(-4deg);
  }
  .page-home .now-eyebrow{ color: var(--olive-mid); font-size: .75rem; }
  .page-home .now-line{
    font-family: "Caveat", "Segoe Script", cursive;
    font-size: 1.75rem; line-height: 1.1;
    color: var(--brown);
    max-width: none;
  }
  .page-home .now-right{ text-align: left; margin-top: .9rem; display: flex; align-items: baseline; gap: .8rem; }
  .page-home .now-temp{ font-size: 3.25rem; color: var(--olive); }
  .page-home .now-at{ color: var(--brown-mid); margin: 0; }
}

@media (prefers-reduced-motion: reduce){
  .sp-birds{ display: none; }
  .sp-ridges i, .page-home .hero-art{ transition: none !important; }
}

/* ------------------------------------------------------------------ *
 * More of the weather
 *
 * The valley already took the colour of today's sky and the rain. Now it
 * takes the rest: cloud drifts across when it is overcast, fog lies in
 * the valley, snow falls and settles, frost whitens the grass when the
 * troughs need breaking, and the heat puts a haze on it. The trail of
 * prints goes muddy in the rain and is pressed into snow. The note says
 * what is coming, and each hour of her day says what today is doing at
 * that hour. All of it is the real weather in Newton Abbot.
 * ------------------------------------------------------------------ */

.sp-weather{
  position: absolute; inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.sp-weather i{ position: absolute; display: none; }

/* Cloud: three banks of it, going over slowly. */
.sp-cloud{
  top: 6%;
  left: -40%;
  width: 46rem; height: 9rem;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(255,253,248,.95), rgba(255,253,248,0) 100%) 12% 60% / 46% 90% no-repeat,
    radial-gradient(closest-side, rgba(255,253,248,.92), rgba(255,253,248,0) 100%) 46% 30% / 52% 100% no-repeat,
    radial-gradient(closest-side, rgba(255,253,248,.9), rgba(255,253,248,0) 100%) 84% 62% / 44% 84% no-repeat;
  filter: blur(6px);
  animation: sp-drift 90s linear infinite;
}
.sp-cloud:nth-child(2){ top: 20%; width: 34rem; height: 7rem; animation-duration: 120s; animation-delay: -50s; opacity: .8; }
.sp-cloud:nth-child(3){ top: 1%; width: 56rem; height: 11rem; animation-duration: 150s; animation-delay: -95s; opacity: .7; }
@keyframes sp-drift{ from{ translate: 0 0; } to{ translate: 190vw 0; } }
:root[data-sky="cloud"] .sp-cloud,
:root[data-sky="rain"] .sp-cloud,
:root[data-sky="storm"] .sp-cloud,
:root[data-sky="snow"] .sp-cloud{ display: block; }
/* rain cloud is heavier */
:root[data-sky="rain"] .sp-cloud,
:root[data-sky="storm"] .sp-cloud{ filter: blur(8px) brightness(.8); }

/* Fog: lying in the valley, moving a little. */
.sp-fog{
  left: -25%; right: -25%;
  bottom: 14%;
  height: 46%;
  background: linear-gradient(to bottom, rgba(233,230,220,0), rgba(233,230,220,.92) 45%, rgba(233,230,220,.75) 75%, rgba(233,230,220,0));
  animation: sp-lie 26s ease-in-out infinite alternate;
}
.sp-fog:nth-child(5){ bottom: 2%; height: 34%; animation-duration: 34s; animation-direction: alternate-reverse; opacity: .8; }
@keyframes sp-lie{ from{ translate: -6% 0; } to{ translate: 6% 0; } }
:root[data-sky="fog"] .sp-fog{ display: block; }
/* in fog the fog is in front of the valley, not behind it */
:root[data-sky="fog"] .sp-weather{ z-index: 1; }

/* Snow: two depths of it, falling. */
.sp-snow{
  inset: -50% 0 0 0;
  background-image:
    radial-gradient(2.5px 2.5px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 90px 120px, #fff 50%, transparent 51%),
    radial-gradient(3px 3px at 150px 70px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 200px 180px, #fff 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 60px 210px, #fff 50%, transparent 51%);
  background-size: 240px 240px;
  animation: sp-fall 11s linear infinite;
}
.sp-snow:nth-child(7){ background-size: 170px 170px; opacity: .6; animation-duration: 17s; }
@keyframes sp-fall{ from{ translate: 0 0; } to{ translate: 24px 240px; } }
:root[data-sky="snow"] .sp-snow{ display: block; }
:root[data-sky="snow"] .sp-weather{ z-index: 1; }

/* Frost, when it is cold enough that the troughs need breaking: the
   grass goes white from the ground up. Snow settles the same way. */
.sp-frost{
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(255,255,255,.72), rgba(255,255,255,.3) 55%, rgba(255,255,255,0));
  mix-blend-mode: screen;
}
:root[data-cold] .sp-frost,
:root[data-sky="snow"] .sp-frost{ display: block; }
:root[data-cold] .sp-weather,
:root[data-sky="snow"] .sp-weather{ z-index: 1; }
:root[data-cold] .page-home .hero-art,
:root[data-sky="snow"] .page-home .hero-art{ filter: saturate(.72) brightness(1.06); }

/* Heat: when walks go early. A haze low over the valley. */
:root[data-hot] .page-home .hero{ --sky-a: #F0D9A6; --sky-b: #FBEFD9; }
:root[data-hot] .page-home .hero-art{ filter: saturate(1.12) sepia(.12); }

/* The trail takes the weather too. Mud in the rain; pressed into snow. */
:root[data-sky="rain"] .sp-trail svg:not([data-dark]),
:root[data-sky="storm"] .sp-trail svg:not([data-dark]){ fill: #5B4630; }
:root[data-sky="rain"] .sp-trail svg[data-down]:not([data-dark]),
:root[data-sky="storm"] .sp-trail svg[data-down]:not([data-dark]){ opacity: .5; }
:root[data-sky="snow"] .sp-trail svg:not([data-dark]){
  fill: var(--white);
  filter: drop-shadow(0 1.5px 0 rgba(107,86,63,.55));
}
:root[data-sky="snow"] .sp-trail svg[data-down]:not([data-dark]){ opacity: .95; }

/* What is coming, and the daylight, on the note. */
.sp-next{
  margin: .7rem 0 0;
  padding-top: .6rem;
  border-top: 1px dashed var(--line);
  font-family: var(--f-body);
  font-size: .9375rem; line-height: 1.4;
  color: var(--brown);
}
.sp-next b{ display: block; font-weight: 700; }
.sp-next span{ color: var(--brown-mid); }

/* What today is doing at each hour of her day. */
.sp-today{
  display: inline-block;
  margin: 0 0 .9rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  background: rgba(255,253,248,.72);
  font-family: var(--f-body);
  font-size: .875rem; font-weight: 700;
  letter-spacing: .02em;
  color: var(--brown);
}
.hour[data-time="night"] .sp-today{ background: rgba(242,236,220,.16); color: #F2ECDC; }

/* Cloud and fog only drift for show, so they hold still when the phone asks
   for less motion. Snow keeps falling: it is the weather, and a phone in
   battery saver asks for less motion without its owner ever choosing to. */
@media (prefers-reduced-motion: reduce){
  .sp-cloud, .sp-fog{ animation: none !important; }
  .sp-snow{ animation-duration: 16s !important; }
}

/* ------------------------------------------------------------------ *
 * The weather note, on a phone
 *
 * On a wide screen the weather is a note taped to the corner of the
 * valley. A phone still had it as a band underneath. It is the same
 * taped note now, stuck across the foot of the artwork so it overlaps
 * the grass, a little crooked the other way.
 *
 * The band's own rain was drawn on a canvas that only covers the band,
 * so on a phone the rain over the valley is drawn here instead.
 * ------------------------------------------------------------------ */

@media (max-width: 59.99em){
  .page-home .now{
    position: relative;
    z-index: 4;
    /* over the grass at the foot of the picture, not over the animals */
    margin-top: -1.6rem;
    padding: 0 var(--gutter) 2rem;
    background: none;
    border: 0;
    overflow: visible;
  }
  .page-home .now-rain,
  .page-home .now-horizon{ display: none; }

  .page-home .now-in{
    position: relative;
    display: block;
    width: min(100%, 21rem);
    max-width: none;
    margin: 0 0 0 auto;
    padding: 1.9rem 1.35rem 1.15rem;
    background: var(--white);
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(60,38,18,.1), 0 20px 36px -18px rgba(60,38,18,.45);
    transform: rotate(-1.8deg);
  }
  /* the tape */
  .page-home .now-in::before{
    content: "";
    position: absolute;
    top: -.8rem; left: 50%;
    width: 5.5rem; height: 1.6rem;
    background: rgba(227,196,137,.78);
    box-shadow: 0 1px 2px rgba(60,38,18,.14);
    transform: translateX(-50%) rotate(3deg);
  }
  .page-home .now-eyebrow{ color: var(--olive-mid); font-size: .75rem; }
  .page-home .now-line{
    font-family: "Caveat", "Segoe Script", cursive;
    font-size: 1.75rem; line-height: 1.1;
    color: var(--brown);
    max-width: none;
  }
  .page-home .now-right{ text-align: left; margin-top: .8rem; display: flex; align-items: baseline; gap: .8rem; }
  .page-home .now-temp{ font-size: 3rem; color: var(--olive); }
  .page-home .now-at{ color: var(--brown-mid); margin: 0; }

  /* Rain over the valley: two depths of short strokes, unevenly placed. */
  .sp-rainfall{
    inset: -30% -10% 0 -10%;
    background-image:
      radial-gradient(1px 9px at 18px 26px, rgba(52,60,50,.6) 50%, transparent 52%),
      radial-gradient(1px 11px at 71px 118px, rgba(52,60,50,.5) 50%, transparent 52%),
      radial-gradient(1px 8px at 133px 64px, rgba(52,60,50,.55) 50%, transparent 52%),
      radial-gradient(1px 10px at 176px 171px, rgba(52,60,50,.45) 50%, transparent 52%),
      radial-gradient(1px 9px at 104px 203px, rgba(52,60,50,.5) 50%, transparent 52%);
    background-size: 211px 229px;
    transform: rotate(7deg);
    animation: sp-pour .62s linear infinite;
  }
  .sp-rainfall:last-child{ background-size: 157px 173px; opacity: .55; animation-duration: .85s; }
  :root[data-sky="rain"] .sp-rainfall,
  :root[data-sky="storm"] .sp-rainfall{ display: block; }
  :root[data-sky="rain"] .sp-weather,
  :root[data-sky="storm"] .sp-weather{ z-index: 1; }
}
/* each depth falls exactly one of its own tiles, so the loop has no seam */
@keyframes sp-pour{ from{ background-position: 0 0; } to{ background-position: 0 var(--drop, 229px); } }
.sp-rainfall:last-child{ --drop: 173px; }

/* Rain still falls in battery saver, for the same reason as the snow.
   style.css shortens every animation to nothing in that mode, so its
   length is put back here. */
@media (prefers-reduced-motion: reduce){
  .sp-rainfall{ animation-duration: .7s !important; }
  .sp-rainfall:last-child{ animation-duration: .95s !important; }
}

/* ------------------------------------------------------------------ *
 * Every other page
 *
 * The home page had the valley, the weather, the trail and the scrapbook,
 * and every page behind it was a small heading over a column of text. Each
 * of them now opens on a strip of the same valley under the same sky as
 * the home page, with its own engraving standing in it: the dog on the dog
 * walking page, the horse on the horse page. The trail walks every page
 * (hooves all the way down the horse one), the weather note is taped
 * beside the words, and the asides in the text are notes taped in.
 * ------------------------------------------------------------------ */

body:not(.page-home) .page-head{
  --sky-a: var(--cream);
  --sky-b: var(--cream);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: none;
  margin: 0;
  padding: clamp(2.25rem, 7vh, 4.5rem) max(var(--gutter), calc((100vw - 76rem) / 2 + var(--gutter))) clamp(9.5rem, 22vw, 6rem);
  min-height: clamp(18rem, 46vh, 27rem);
  background: linear-gradient(to bottom, var(--sky-a) 0%, var(--sky-b) 52%, var(--cream) 88%);
  transition: background 1.2s ease;
}
:root[data-sky="clear"] .page-head{ --sky-a:#CFE0EA; --sky-b:#F2F1E4; }
:root[data-sky="cloud"] .page-head{ --sky-a:#D5D7D2; --sky-b:#F4F1E6; }
:root[data-sky="rain"]  .page-head{ --sky-a:#AFB5B6; --sky-b:#DDDCD2; }
:root[data-sky="fog"]   .page-head{ --sky-a:#D2D2CC; --sky-b:#E9E6DC; }
:root[data-sky="snow"]  .page-head{ --sky-a:#DCE2E6; --sky-b:#F7F6F1; }
:root[data-sky="storm"] .page-head{ --sky-a:#8E9494; --sky-b:#C9C7BC; }

body:not(.page-home) .page-head h1{
  font-size: clamp(2.5rem, 1rem + 5vw, 5.25rem);
  line-height: .98;
  letter-spacing: -.02em;
  max-width: 17ch;
  text-wrap: balance;
}
body:not(.page-home) .page-head .eyebrow{ font-size: .875rem; letter-spacing: .12em; margin-bottom: 1rem; }

/* a ridge of her hills along the foot of it */
body:not(.page-home) .page-head::before{
  content: "";
  position: absolute;
  left: -4%; right: -4%; bottom: 0;
  height: 9.5rem;
  z-index: -1;
  background: var(--sage-pale);
  opacity: .85;
  -webkit-mask: url("/img/horizon.webp") bottom center / cover no-repeat;
  mask: url("/img/horizon.webp") bottom center / cover no-repeat;
}
/* and that page's own engraving standing in it */
body:not(.page-home) .page-head::after{
  content: "";
  position: absolute;
  right: max(0px, calc((100vw - 76rem) / 2));
  bottom: 0;
  width: min(74vw, 30rem);
  height: 10rem;
  z-index: -1;
  background: url("/img/hero-800.webp") right bottom / cover no-repeat;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
  mask-image: linear-gradient(to right, transparent 0, #000 22%);
}
body.page-dog-walking .page-head::after,
body.page-puppy-care .page-head::after{ background-image: url("/img/dog-walking-640.webp"); }
body.page-horse-care .page-head::after{ background-image: url("/img/horse-care-640.webp"); }
body.page-pet-sitting .page-head::after,
body.page-small-animal-visits .page-head::after,
body.page-overnight-and-house-sitting .page-head::after{ background-image: url("/img/cat-small-animal-640.webp"); }
body.page-dog-walking .page-head::after,
body.page-puppy-care .page-head::after,
body.page-horse-care .page-head::after,
body.page-pet-sitting .page-head::after,
body.page-small-animal-visits .page-head::after,
body.page-overnight-and-house-sitting .page-head::after{
  width: min(46vw, 13.5rem);
  height: min(46vw, 13.5rem);
  background-size: contain;
  background-position: center bottom;
  /* the engraving's own square of paper fades out, so it stands in the
     valley rather than on a tile */
  -webkit-mask-image: radial-gradient(closest-side, #000 68%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 68%, transparent 100%);
}

@media (min-width: 60em){
  body:not(.page-home) .page-head{
    padding-bottom: clamp(3rem, 8vh, 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body:not(.page-home) .page-head::after{ width: min(40vw, 34rem); height: 13rem; }
  body.page-dog-walking .page-head::after,
  body.page-puppy-care .page-head::after,
  body.page-horse-care .page-head::after,
  body.page-pet-sitting .page-head::after,
  body.page-small-animal-visits .page-head::after,
  body.page-overnight-and-house-sitting .page-head::after{
    width: min(34vw, 24rem);
    height: min(34vw, 24rem);
    max-height: 100%;
  }
  /* her bar now stays at the top, so the sidebar sits under it */
  .sidebar{ top: 6.5rem; }
}

/* The words on those pages, a size up. */
body:not(.page-home) .prose .lede{ font-size: clamp(1.25rem, 1.05rem + .9vw, 1.625rem); line-height: 1.45; color: var(--ink); }
body:not(.page-home) .prose h2{ font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1.05; }
body:not(.page-home) .prose p,
body:not(.page-home) .prose li{ font-size: 1.125rem; }

/* An aside in the text is a note taped in, in her hand. */
.aside-note{
  position: relative;
  margin-block: 2.75rem 2.25rem;
  padding: 1.9rem 1.5rem 1.4rem;
  border: 0;
  background: var(--white);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(60,38,18,.1), 0 16px 30px -18px rgba(60,38,18,.38);
  transform: rotate(-.9deg);
}
.aside-note::before{
  content: "";
  position: absolute;
  top: -.8rem; left: 50%;
  width: 5.5rem; height: 1.6rem;
  background: rgba(227,196,137,.78);
  box-shadow: 0 1px 2px rgba(60,38,18,.14);
  transform: translateX(-50%) rotate(2.5deg);
}
.aside-note h2{ margin: 0 0 .45rem; }
/* h2 where the note is the first thing under the page heading, so the
   headings go down a step at a time */
.aside-note h2,
.aside-note h3{
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: 1.9rem; font-weight: 600; line-height: 1.05;
  color: var(--olive);
}
.aside-note p{ color: var(--ink); font-size: 1.0625rem; }

/* The weather note, on these pages. */
.now.sp-note{
  position: relative;
  margin: 0 0 2rem;
  padding: 0;
  background: none;
  border: 0;
  overflow: visible;
}
.sp-note .now-rain{ display: none; }
.sp-note .now-in{
  position: relative;
  display: block;
  max-width: none;
  margin: 0;
  padding: 1.9rem 1.35rem 1.15rem;
  background: var(--white);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(60,38,18,.1), 0 20px 36px -18px rgba(60,38,18,.42);
  transform: rotate(1.6deg);
}
.sp-note .now-in::before{
  content: "";
  position: absolute;
  top: -.8rem; left: 50%;
  width: 5.5rem; height: 1.6rem;
  background: rgba(227,196,137,.78);
  box-shadow: 0 1px 2px rgba(60,38,18,.14);
  transform: translateX(-50%) rotate(-4deg);
}
.sp-note .now-eyebrow{ color: var(--olive-mid); font-size: .75rem; }
.sp-note .now-line{
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: 1.7rem; line-height: 1.1;
  color: var(--brown);
  max-width: none;
}
.sp-note .now-right{ text-align: left; margin-top: .8rem; display: flex; align-items: baseline; gap: .8rem; }
.sp-note .now-temp{ font-size: 2.9rem; color: var(--olive); }
.sp-note .now-at{ color: var(--brown-mid); margin: 0; }
/* under the heading, on a phone or a page with nothing beside the words */
.page-head + .sp-note{
  z-index: 2;
  width: min(calc(100% - 2 * var(--gutter)), 21rem);
  margin: -1.25rem var(--gutter) 1rem auto;
}
.page-head + .sp-note .now-in{ transform: rotate(-1.6deg); }
/* Wide, on a page with nothing beside its words: the note sits to the
   right and the words run down beside it, clear of the picture above. */
@media (min-width: 60em){
  .page-head + .sp-note{
    float: right;
    width: 17.5rem;
    margin: 2rem max(var(--gutter), calc((100vw - 76rem) / 2 + var(--gutter))) 1.5rem 2.5rem;
  }
}

/* ------------------------------------------------------------------ *
 * On a phone, everything square to the middle
 *
 * The scrapbook tilt that looks deliberate across a wide screen looks like
 * a mistake at phone width, where a crooked card with uneven edges just
 * reads as off-centre. So on a phone the photographs and notes sit level
 * and central, with the same margin either side, and keep only their tape.
 * ------------------------------------------------------------------ */
@media (max-width: 47.99em){
  .page-home .portrait,
  .page-home .hour-shot,
  .page-home .hour:nth-child(even) .hour-shot,
  .page-home .reasons li,
  .aside-note,
  .sp-note .now-in,
  .page-head + .sp-note .now-in,
  .page-home .now-in{
    transform: none;
  }
  .page-home .reasons li:hover{ transform: none; }

  /* the same width as the words, and in the middle */
  .page-home .portrait,
  .page-home .hour-shot{
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
  }

  /* the weather note: central, not pushed to one side */
  .page-home .now-in,
  .page-head + .sp-note{
    margin-inline: auto;
  }
  .page-head + .sp-note{ width: min(calc(100% - 2 * var(--gutter)), 22rem); }
  .page-home .now-in{ width: min(100%, 22rem); }

  /* the tape straight as well */
  .page-home .portrait::before,
  .page-home .hour-shot::before,
  .page-home .hour:nth-child(even) .hour-shot::before,
  .page-home .reasons li::before,
  .page-home .reasons li:nth-child(even)::before,
  .aside-note::before,
  .sp-note .now-in::before,
  .page-home .now-in::before{
    transform: translateX(-50%);
  }

  /* the four promises in two tidy rows, centred */
  .page-home .trust ul{ justify-content: center; text-align: center; }

  /* and the note sits under the picture, not over the animals in it */
  .page-home .now{ margin-top: .9rem; }

  /* the whole of the artwork across the screen, as it was, so no animal is
     off the edge */
  .page-home .hero{ --art: max(9rem, calc(100vw / 3)); }
  .page-home .hero-art{ object-position: center bottom; }

  /* the buttons the full width, one under the other */
  .page-home .hero .btn-row{ display: grid; gap: .75rem; }
  .page-home .hero .btn{ width: 100%; justify-content: center; text-align: center; }
}

/* ------------------------------------------------------------------ *
 * Dawn to dusk, in battery saver
 *
 * style.css takes the slide-up away when the phone asks for less motion.
 * An Android phone in battery saver asks for that, so on a great many
 * phones each hour was just a block under the last. But nothing here moves
 * on its own: an hour only slides up as far as the reader scrolls it. So it
 * stays. (The typing is handled the same way in main.js.)
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  :root[data-day-stack="on"] .hour{
    position: sticky;
    top: 0;
    min-height: 100svh;
  }
  :root[data-day-stack="on"] .hour:last-child{ position: relative; }
}

/* ------------------------------------------------------------------ *
 * A phone: the hours that slide up, and the four promises
 * ------------------------------------------------------------------ */
@media (max-width: 51.99em){
  /* Each hour made to fit a phone screen, so that it can pin. The
     photograph gives way first: it is as tall as there is room for. */
  .page-home .hour{ padding-block: 1.4rem 3.6rem; }
  .page-home .hour-in{ gap: 1rem; }
  .page-home .hour-clock{ font-size: clamp(2.3rem, 10.5vw, 3.1rem); margin-bottom: .5rem; }
  .page-home .sp-today{ margin-bottom: .55rem; }
  .page-home .hour h3{ font-size: 1.5rem; margin-bottom: .35rem; }
  .page-home .hour-body{ font-size: 1rem; line-height: 1.5; }
  .page-home .hour-link{ margin-top: .7rem; font-size: 1.0625rem; }
  .page-home .hour-shot{ padding: .4rem .4rem 1.1rem; }
  .page-home .hour-shot img{
    width: 100%;
    height: clamp(6.5rem, 20svh, 12.5rem);
    object-fit: cover;
  }

  /* The four promises: one under another, ticks in a line down the left,
     each tick level with its words, and the whole list in the middle. */
  .page-home .trust ul{
    display: grid;
    justify-content: center;
    justify-items: start;
    gap: .8rem;
    text-align: left;
  }
  .page-home .trust li{
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.1875rem;
    line-height: 1.2;
  }
  .page-home .trust .tick{ width: 32px; height: 32px; flex: none; }
}

/* ------------------------------------------------------------------ *
 * Dawn to dusk, pinned at every size
 *
 * main.js's all-or-nothing pin is stood down on the home page, and each
 * hour pins itself: under the bar if it fits the screen, at its own foot
 * if it is taller. See pinHours in showpiece.js, which sets each one's top.
 * (:root twice so these outrank style.css's rules whatever their order.)
 * ------------------------------------------------------------------ */
:root:root .page-home .day-track .hour{
  position: relative;
  min-height: 0;
  display: block;
  box-shadow: none;
}
:root:root .page-home .day-track .hour[data-pin]{
  position: sticky;
  top: var(--bar-h, 4.6rem);          /* pinHours makes this exact */
  min-height: calc(100svh - var(--bar-h, 4.6rem));
  display: grid;
  align-content: center;
}
:root:root .page-home .day-track .hour[data-pin] + .hour{
  box-shadow: 0 -22px 44px -24px rgba(20,14,6,.6);
}