/* Decision 28: keep all six signpost arms readable beside the booking button. */
@media (min-width: 72rem) and (max-width: 99.99rem) {
  .bar-in { gap: 18px; }
  .nav { gap: 6px; }
  .nav a { font-size: 16px; padding: 0 26px 0 12px; }
}
@media (min-width: 72rem) and (max-width: 83.99rem) {
  .nav a { font-size: 15px; padding: 0 24px 0 11px; }
}
#closing-invitation .closing-contact {
  display: inline-block;
  margin-top: 12px;
  padding-block: 10px;
  font-size: 17px;
  text-underline-offset: 4px;
}

/* The opening card. Every page opens in the orange card Home and Contact already have, its words in paper (the owner, 20 Oct 2026:
   "all the pages should have the orange box with the page title and short line underneath"; then, the same day, free rein to make
   the site bold: the service and venue pages take it too, and Website care's copy column, its phone staying out on the map). One
   rule for every page: the :is() carries the specificity of a page's own two-class rules and a little more, so it wins without
   !important. Contact keeps its own card. */
main :is(header[class$="-opening"]:not(.wc-opening, .contact-opening), .wc-opening-copy) {
  position: relative;
  box-sizing: border-box;
  max-inline-size: 820px;
  padding: clamp(36px, 3.5vw, 56px);
  border-radius: 20px;
  background: var(--orange);
  color: var(--paper);
}
main :is(header[class$="-opening"]:not(.wc-opening, .contact-opening), .wc-opening-copy)::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid var(--paper);
  border-radius: 10px;
  pointer-events: none;
}
main :is(header[class$="-opening"]:not(.wc-opening, .contact-opening), .wc-opening-copy) :is(h1, p, [class$="-eyebrow"]) { color: var(--paper); }
main :is(header[class$="-opening"]:not(.wc-opening, .contact-opening), .wc-opening-copy) a { color: var(--paper); text-decoration-color: var(--paper); }
main :is(header[class$="-opening"]:not(.wc-opening, .contact-opening), .wc-opening-copy) a.btn-ink { background: var(--paper); border-color: var(--paper); color: var(--ink); }
main :is(header[class$="-opening"]:not(.wc-opening, .contact-opening), .wc-opening-copy) a.btn-ink:hover { background: var(--white); border-color: var(--white); color: var(--ink); }

/* Turning the sheet: going from page to page, the orange card glides from where it was to where it lands, reshaping as it goes,
   while the rest of the page fades and rises as before (each page's own walk-in and walk-out; the bar stays put). The card's two
   pictures keep their own size, clipped to the moving card, the old one leaving as the new one arrives, so no words are stretched;
   the moving card is drawn orange with its paper rule, so it stays whole in between. A visitor who asks for less motion gets none:
   each page already turns its transitions off for them. */
main :is(header[class$="-opening"]:not(.wc-opening), .wc-opening-copy), .first .panel { view-transition-name: opening; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes card-out { to { opacity: 0; } }
  @keyframes card-in { from { opacity: 0; } }
  ::view-transition-group(opening) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  ::view-transition-image-pair(opening) { overflow: clip; border-radius: 20px; background: var(--orange); outline: 2px solid var(--paper); outline-offset: -12px; }
  ::view-transition-old(opening), ::view-transition-new(opening) { block-size: auto; inline-size: auto; object-fit: none; object-position: left top; }
  ::view-transition-old(opening) { animation: card-out .2s ease-in both; }
  ::view-transition-new(opening) { animation: card-in .3s .1s ease-out both; }
  /* the paper rule is the moving card's alone while the sheet turns, so the two pictures do not draw it twice at their own sizes */
  html:active-view-transition :is(main :is(header[class$="-opening"]:not(.wc-opening), .wc-opening-copy), .first .panel)::after { visibility: hidden; }
}

/* The map ground: an older, faded paper under every sheet, which the sheets multiply with (the owner, 20 Oct 2026). */
:root { --mapground: #F4EEDC; }

/* The opening panel's two buttons on a phone: Newsreader is wider than the old sans, so the second button wrapped its words. */
@media (max-width: 39.99rem) {
  .panel .btns .btn { font-size: 17px; padding-inline: 1.2em; }
}

/* The footer's small-print links: Newsreader sits shorter on its line than the old sans, so an inline link's box fell under the
   24 px target (WCAG 2.2 2.5.8). Inline padding grows the target without moving the line. */
.foot .fc p a { padding-block: 6px; }

/* The small print: one quiet block per page, the control room's gathering of the caveats (the owner, 20 Oct 2026: "in one clear
   place"). Grey note on paper reads 5:1. */
.small-print, .small-print p { font: 400 15px/1.5 var(--font-body); color: var(--grey-note); }
.small-print { max-inline-size: 62ch; }
.small-print p { margin: 0; max-inline-size: none; }
.small-print p + p { margin-top: 8px; }

/* Footprints answer the hand: a print under the pointer presses into the ground (the owner, 20 Oct 2026: more to touch with the
   mouse, consistent and classy). `scale` composes with the print's scroll-driven transform, so the two never fight. */
@media (hover: hover) {
  .pf { pointer-events: auto; transition: scale .18s ease-out, filter .18s ease-out; }
  .pf:hover { scale: 1.3; filter: brightness(.6); }
}
/* A phone that is a link lifts a little under the pointer, on Home and the Compass page alike (the owner, 20 Oct 2026). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #two-sides a.phone, .demos-review a.phone { transition: translate .2s ease-out; }
  #two-sides a.phone:hover, .demos-review a.phone:hover { translate: 0 -6px; }
}

/* The winding route (route.py draws it; it was home-walk.css's, and is here so the inner pages that have a route wind too). The
   wander is drawn 100 units wide; --rw is how wide that comes out on the page, centred on the line. */
.rt-wind { --rw: 120px; width: var(--rw); left: calc(var(--mx, 3.5%) - var(--rw) / 2); }
.rt-wind.right { left: auto; right: calc(var(--mx, 3.5%) - var(--rw) / 2); }
@media (max-width: 63.99rem) {
  .rt-wind, .rt-wind.right { --rw: 30px; left: calc(28px - var(--rw) / 2); right: auto; }
}
/* On Services and Getting started the waypoints sit at a fixed left, so the wander is narrower there and the circles stay on it. */
@media (min-width: 64rem) {
  .services-route.rt-wind, .getting-started-route.rt-wind { --rw: 70px; }
}

/* The hedge under an inner page's opening (hedge.py): the plants stand in front of the opening card's foot, and the section after the
   hedge starts at its foot (the owner's ruling, 20 Oct 2026: nothing sits under the fade). It stands on the map, so it has no coloured
   band, and it is the land, so it spans the whole window like the home page's whatever column its page sets its text in (the viewport's
   width, centred on its parent, which every page centres). `main` clips the sideways overflow a classic scrollbar's width would otherwise
   add to 100vw. */
.hedge.inner { inline-size: 100vw; margin-inline: calc(50% - 50vw); margin-block: calc(var(--hh) * -.3) 0; }
main:has(.hedge.inner) { overflow-x: clip; }
/* Its line is the route's, orange over the map as the home page's first hedge draws it, and it runs on to the hedge's foot, where the
   route below it begins. */
.hedge.inner .rt { block-size: 70%; }
.hedge.inner .rt line { stroke: var(--orange); stroke-opacity: .4; stroke-width: 8; }
/* The hedge never covers a link or a button, and never takes a click: the band lets the pointer through to what is under it (walk.ts reads
   the pointer on the hedge's parent instead), and the opening's own words and buttons are raised in front of the plants while its card
   (the background) stays behind them. Those headers' own z-index is dropped (services and getting started set 2), so that the raised
   children are not shut inside it. */
.hedge.inner .band { pointer-events: none; }
header[class$="-opening"]:has(+ .hedge.inner) > * { position: relative; z-index: 6; }

/* ---- The walk in use (the owner, 20 Oct 2026: "make it feel impressive and modern in use, whilst keeping the vibe and theme";
   free rein). Every page, in the style sheet alone: no new words, pictures or script. Movement is transform and opacity only, never
   loops, and none of it runs for a visitor who asks for less motion. ---- */

/* The footpath: as the visitor reads down a page, an orange path draws along the foot of the top bar, a waypoint at its head. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes footpath { from { transform: scaleX(0); } }
    @keyframes footpath-head { from { transform: translateX(-100%); } }
    body::before, body::after { content: ""; position: fixed; left: 0; right: 0; z-index: 51; pointer-events: none; }
    body::before { top: calc(var(--bar-h) - 3px); block-size: 3px; background: var(--orange); transform-origin: 0 50%;
      animation: footpath linear both; animation-timeline: scroll(root block); }
    body::after { top: calc(var(--bar-h) - 8px); block-size: 13px;
      background: radial-gradient(circle at calc(100% - 7px) 50%, var(--ink) 0 3px, var(--orange) 3.5px 6px, transparent 6.5px);
      animation: footpath-head linear both; animation-timeline: scroll(root block); }
  }
}

/* Cards settle onto the map as they come into view, as a postcard laid down: a little low and turned, then flat. Their words never
   fade, so they read at full contrast the whole way. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes settle { from { transform: translateY(40px) rotate(var(--tilt, -1.4deg)); } }
    :is(.pr-card, #why .fact, .gs-stat, .wc-step, .service-art, #two-sides .phone, .wc-example, .compass-preview .phone, .card.ask) {
      animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 40%;
    }
    :is(.pr-card, #why .fact, .gs-stat, .wc-step, #two-sides .two-sides-side):nth-child(even) { --tilt: 1.4deg; }
  }
}

/* Long pages keep their place: on a laptop the heading of each two-column section stays in view while its details pass beside it,
   and the plans table keeps its plan names and prices under the bar while its rows go by. */
@media (min-width: 64rem) {
  main :is([class$="-split"], [class*="-split "]) > :first-child, .services-review .service-intro {
    position: sticky; top: calc(var(--bar-h) + 40px); align-self: start;
  }
  .plans-review #plans-comparison thead th { position: sticky; top: var(--bar-h); z-index: 3; background: var(--paper); }
}

/* One answer to the mouse everywhere: what can be pressed rises a little and settles when pressed; the bar's signposts point on;
   cards lift off the map. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn, .nav a, :is(.pr-card, #why .fact, .gs-stat, .wc-step) { transition: translate .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease-out; }
  .btn:hover { translate: 0 -2px; }
  .btn:active { translate: 0 1px; transition-duration: .05s; }
  .nav a:hover { translate: 4px 0; }
  :is(.pr-card, #why .fact, .gs-stat, .wc-step):hover { translate: 0 -5px; box-shadow: 0 18px 32px -16px rgb(28 37 48 / .45); }
}

/* Type, set with care: headings balanced across their lines, paragraphs without a stranded last word, and the reader's selection in
   the waymark's orange (paper on the orange card). */
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, li, figcaption, summary) { text-wrap: pretty; }
::selection { background: var(--orange); color: var(--paper); }
:is(main :is(header[class$="-opening"], .wc-opening-copy), .panel) ::selection { background: var(--paper); color: var(--orange); }

/* The waymark post (scripts/w3d.ts; the owner's ruling, 20 Oct 2026: three.js, laptops only). It exists only where the script puts it,
   so a phone has no empty box: it stands on the map beside the plans on Home, and fades in once it has been drawn. */
.w3d { position: absolute; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .7s ease-out; }
.w3d.on { opacity: 1; }
.w3d canvas { display: block; inline-size: 100%; block-size: 100%; }
#plans-overview .w3d-post { left: max(4vw, calc(50% - 690px)); top: 0; inline-size: 240px; block-size: 380px; }

/* The Waymark Compass mark (logo C, the owner's choice of 20 Oct 2026): the walk's dashed footpath round a needle, north in orange,
   south in ink. On the Compass page its needles find the pointer (scripts/needle.ts) and the large one's ring turns a little as the
   page goes by; on Home the needle twitches when the pointer comes to it. Large beside the Compass page's opening card on a wide
   screen, where there is room on the map for it; in a heading it is set at the heading's size. */
.wcm { display: inline-block; inline-size: 1em; block-size: 1em; vertical-align: -.1em; overflow: visible; }
.wcm-ring { fill: none; stroke: var(--orange); stroke-width: 4.2; stroke-dasharray: 8.2 5.4; stroke-linecap: round; transform: rotate(-84deg); transform-origin: 32px 32px; }
.wcm-n { fill: var(--orange); }
.wcm-s { fill: var(--ink); }
.wcm-pin { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.wcm-needle { transform: rotate(35deg); transform-origin: 32px 32px; }
.wcm-h { margin-inline-end: .3em; }
.demos-review .demos-opening.demos-opening > .wcm-big { position: absolute; left: calc(100% + 5vw); top: 50%; inline-size: min(280px, 19vw); block-size: auto; aspect-ratio: 1; translate: 0 -50%; }
@media (max-width: 79.99rem) { .demos-review .demos-opening.demos-opening > .wcm-big { display: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes wcm-turn { from { transform: rotate(-84deg); } to { transform: rotate(6deg); } }
    .wcm-big { view-timeline: --wcm block; }
    .wcm-big .wcm-ring { animation: wcm-turn linear both; animation-timeline: --wcm; }
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  @keyframes wcm-twitch { 0% { transform: rotate(35deg); } 24% { transform: rotate(82deg); } 50% { transform: rotate(14deg); } 72% { transform: rotate(46deg); } 88% { transform: rotate(30deg); } 100% { transform: rotate(35deg); } }
  .home .two-sides-words:hover .wcm-needle { animation: wcm-twitch .7s ease-out; }
}

/* A page's own creature crossing its hedge once a visit (scripts/walk.ts; the owner, 20 Oct 2026): a walker or a hopper goes along the
   hedge's foot, its two poses taking turns as it goes and a hopper rising on each leap, and it fades as it leaves; a flier uses the
   home page's flight. The frames are the home page's (critter-*: one-shots of at most 5 s, never a loop). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes critter-step { 0%, 50%, 100% { transform: translateY(0); } 75% { transform: translateY(var(--lift)); } }
  .crt { position: absolute; left: 0; bottom: 5%; z-index: 2; inline-size: var(--w); pointer-events: none;
    animation: critter-trot var(--ms) linear 1 both, critter-fade .6s linear 4s 1 both; }
  .crt .cf { animation: critter-step var(--fr) ease-in-out var(--n) both; }
  .crt .cf img:first-child { animation: critter-flap-a var(--fr) linear var(--n) both; }
  .crt .cf img + img { animation: critter-flap-b var(--fr) linear var(--n) both; }
}

/* The inner pages' details on paper (the owner, 20 Oct 2026: "go further still on improving the layout and design of the whole website").
   In each two-column section the heading stays on the map and its details lie beside it on a sheet of paper, as Home's plans and facts
   do: easier to read than words over the contours, and the page reads as a walk past cards set down on the map. The rule that divided
   the sections goes where the sheets now do that work. */
main :is(.vn-section > .vn-body, [class*="-split"] > div:nth-child(2), .service-details, .services-app-steps) {
  background: var(--paper);
  border-radius: 18px;
  padding: clamp(24px, 2.4vw, 36px);
  box-shadow: 0 1px 0 rgb(28 36 48 / .05), 0 22px 40px -26px rgb(28 36 48 / .45);
}
main :is(.vn-section.vn-section, [class*="-split"][class*="-section"]) { border-top-color: transparent; }

/* Every section's small orange label carries a waymark, the post's disc and arrow; on the orange card, the disc is paper. */
main [class$="-eyebrow"]::before {
  content: ""; display: inline-block; inline-size: 1.05em; block-size: 1.05em; margin-inline-end: .45em; vertical-align: -.18em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23C4471A'/%3E%3Cpath d='M3.6 7h5V4.4L12.8 8 8.6 11.6V9h-5z' fill='%23F7F5EF'/%3E%3C/svg%3E") center / contain no-repeat;
}
main :is(header[class$="-opening"], .wc-opening-copy) [class$="-eyebrow"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23F7F5EF'/%3E%3Cpath d='M3.6 7h5V4.4L12.8 8 8.6 11.6V9h-5z' fill='%23C4471A'/%3E%3C/svg%3E");
}

/* Every orange opening carries its label (the owner, 20 Oct 2026: "not all orange boxes have this in them, ensure they do"); these three
   had none, and take the size the others use. */
main :is(.getting-started-eyebrow, .plans-eyebrow, .demos-eyebrow, .nf-eyebrow, .thanks-eyebrow) { margin: 0 0 16px; font: 650 17px/1.35 var(--font-body); }

/* the sheets settle onto the map as they come into view, as the cards do */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main :is(.vn-section > .vn-body, [class*="-split"] > div:nth-child(2), .service-details, .services-app-steps) {
      animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 35%;
    }
    main :is(.vn-section:nth-of-type(even) > .vn-body, [class*="-split"]:nth-of-type(even) > div:nth-child(2), .service-group:nth-of-type(even) .service-details) { --tilt: 1.4deg; }
  }
}

/* Links and buttons (the owner, 20 Oct 2026: the blue links "should be orange buttons for main links on sections to see more, and dark
   blue for other links"; "all the buttons that currently have rounded ends should be square, including the buttons in the top ribbon").
   A section's way on to more is an orange button (links.py marks it "onward" as each page is written); every other link is an ink
   underline that thickens under the pointer. Every button has the corners of the bar's signs, 5px (the owner, later that evening: "make
   the square buttons have rounded corners ... like the top ribbon sign button left sides"), and Sign in is ink ("dark blue"). White on
   the orange is 4.8:1; on the orange card it turns paper. */
a { color: var(--ink); text-decoration-thickness: 1px; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }
.btn, .button, .sign-in, .sign-in > summary, .sign-in > a, .menu > summary { border-radius: 5px; }
.sign-in > summary, .sign-in > a { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sign-in > summary:is(:hover, :focus-visible), .sign-in > a:is(:hover, :focus-visible), .sign-in[open] > summary { background: var(--paper); color: var(--ink); outline-color: var(--ink); }
/* Inline-block, not flex, so a long label wraps with its arrow; doubled to outrank the pages' own link padding. 12px + 21px + 12px + the
   border is a 48px target. */
main a.onward.onward {
  display: inline-block; min-block-size: 48px; padding: 12px 1.1em; max-inline-size: 100%;
  border: 2px solid var(--orange); border-radius: 5px; background: var(--orange); color: var(--white); font: 600 18px/1.15 var(--font-body); text-decoration: none; text-align: center;
}
main a.onward:hover { color: var(--white); }
main :is(header[class$="-opening"]:not(.wc-opening, .contact-opening), .wc-opening-copy) a.onward { background: var(--paper); border-color: var(--paper); color: var(--ink); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  main a.onward { transition: translate .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease-out; }
  main a.onward:hover { translate: 0 -2px; box-shadow: 0 6px 16px var(--ink-shade); }
  main a.onward:active { translate: 0 1px; transition-duration: .05s; }
}

/* The pages Astro writes itself, in the website's frame (site/src/layouts/Framed.astro; the owner, 20 Oct 2026: "the 404 page needs building
   out", and the last few pages before the site goes live): About's map under each. The 404 opens on a card that says what happened and leads
   home, then the site's main paths as its onward buttons; the thank-you page opens on its card; privacy and terms are a paper sheet over the
   map, their title in an orange band, as every other page opens in orange. */
.framed { min-block-size: 100svh; }
main :is(.nf-opening, .thanks-opening) h1 { max-inline-size: 17ch; margin: 0 0 20px; font-size: clamp(2.65rem, 2rem + 3vw, 4.5rem); line-height: 1.12; text-wrap: pretty; }
main .nf-lead { max-inline-size: 40ch; margin: 0 0 28px; font-size: 21px; line-height: 1.45; }
main .nf-home { margin: 0; }
main .nf-ways { margin-top: 48px; }
main .nf-ways h2 { margin: 0 0 20px; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); }
main .nf-ways ul { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 0; padding: 0; list-style: none; }
main .thanks-call { margin: 24px 0 0; }
.framed .thanks-more { max-inline-size: 60ch; margin: 36px 0 16px; font-size: 19px; }
.framed main.legal {
  --pad: clamp(24px, 4vw, 56px);
  box-sizing: border-box; inline-size: auto; max-inline-size: 880px; margin: 0; padding: 0 var(--pad) var(--pad);
  overflow: hidden; border-radius: 20px; background: var(--paper); box-shadow: 0 22px 40px -26px var(--ink-shade);
}
.framed main.legal > h1:first-child { margin: 0 calc(-1 * var(--pad)) 28px; padding: clamp(28px, 3.5vw, 48px) var(--pad); background: var(--orange); color: var(--paper); font-size: clamp(2.65rem, 2rem + 3vw, 4.5rem); line-height: 1.1; }
.framed main.legal :is(p, li) { max-inline-size: 68ch; }
.framed main.legal h2 { margin-top: 1.6em; }