/* For The Love of Trees — site styles.
   v10: an ordinary scrolling page, no script. On wider screens the words scroll on the left
   and the botanical plate stays put on the right, its view drifting from crown to roots as
   you read (a CSS scroll-driven animation; where a browser can't, the whole plate simply
   shows). On phones the plate is the picture at the top and everything follows in one column.
   Type is Inter: tracked uppercase kickers, light large headings, italic leads. Paper ground,
   olive ink, leaf-green ticks. Plain CSS, no build step. */

:root {
  /* paper: the plate's own, light at the crown and deepening toward the roots. The page
     background runs the same way, so the drawing has no edge wherever it sits. */
  --paper: #eedfc6;
  --paper-mid: #e6d8c0;
  --paper-deep: #d9ccb7;
  --paper-light: #f5ecdc;
  --ink: #25271f;
  --text: #201e1d;
  --muted: #56564b;
  --rule: color-mix(in srgb, #25271f 20%, transparent);

  /* accent = the logo's olive ink (#414834). Swap the ramp here to rebrand. */
  --olive: #414834; --olive-600: #363c2b; --olive-700: #2b3022;
  --leaf: #6f8a4b;                /* the drawing's leaf green, for the ticks */
  --on-olive: #f6efe1;

  --font: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;   /* the logo is the only serif */
  --gutter: clamp(16px, 4vw, 56px);
  --pad-r: clamp(32px, 4vw, 64px);     /* between the words and the drawing */
  --header-h: 84px;
  --plate-w: max(42vw, 100vw - 1040px);   /* the drawing's column; the words never get wider than ~940px */

  --shadow-photo: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent), 0 14px 30px -14px color-mix(in srgb, #2d2b2b 45%, transparent);

  /* paper grain: fine dark specks over the paper colour */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .17 0 0 0 0 .12 .55 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%236f8a4b'/%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html {
  min-height: 100%;
  background-color: var(--paper);
  background-image: var(--grain), linear-gradient(to bottom, var(--paper) 0%, var(--paper-mid) 45%, var(--paper-deep) 100%);
  background-repeat: repeat, no-repeat;
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.6; text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--olive-700); text-decoration: none; }
a:hover { color: var(--olive-600); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; border-radius: 2px; }
::selection { background: color-mix(in srgb, var(--leaf) 30%, transparent); }
img { max-width: 100%; height: auto; display: block; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.kicker { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); line-height: 1.4; }
.lead { font-size: 17px; line-height: 1.55; font-style: italic; color: var(--ink); max-width: 46ch; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 50; padding: 8px 14px; background: var(--paper-light); color: var(--ink); }
.skip:focus { left: 16px; }

/* ---------- icons: one colour, drawn from the text colour ---------- */
.icon {
  display: inline-block; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.icon-phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 3.5h3l1.6 4-2 1.3a11.5 11.5 0 0 0 6.1 6.1l1.3-2 4 1.6v3a2 2 0 0 1-2.1 2A16.5 16.5 0 0 1 3.5 5.6a2 2 0 0 1 2-2.1z'/%3E%3C/svg%3E"); }
.icon-text { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.5 4v-4A2.5 2.5 0 0 1 4 13.5z'/%3E%3Cpath d='M8 8.5h8M8 11.5h5'/%3E%3C/svg%3E"); }
.icon-insta { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Ccircle cx='17.4' cy='6.6' r='1' fill='black' stroke='none'/%3E%3C/svg%3E"); }
/* the phone menu button: three lines, a cross while the menu is open */
.icon-menu { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4.5 7h15M4.5 12h15M4.5 17h15'/%3E%3C/svg%3E"); }
.menu[open] .icon-menu { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }

/* ---------- pills: every button on the site ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 18px 10px 14px; border: 1px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.2; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.pill:hover { background: var(--ink); color: var(--paper-light); text-decoration: none; }
.pill-solid { background: var(--olive); border-color: var(--olive); color: var(--on-olive); }
.pill-solid:hover { background: var(--olive-700); border-color: var(--olive-700); color: var(--on-olive); }
.pill-lg { padding: 14px 24px 14px 19px; font-size: 13px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30; height: var(--header-h);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 44px);
  padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.wordmark { display: block; line-height: 0; flex: none; }
.wordmark img { width: clamp(120px, 11vw, 158px); }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); margin-left: auto; }
.nav a { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); padding: 6px 0; }
.nav a:hover { color: var(--olive-600); text-decoration: none; box-shadow: inset 0 -1px 0 currentColor; }
.nav-gallery { display: inline-flex; align-items: center; gap: 7px; }
.nav-gallery .icon { width: 15px; height: 15px; color: var(--leaf); }
.header-actions { display: flex; gap: 10px; }
.call-label { display: none; }
@media (max-width: 1240px) {
  .call-number { display: none; }
  .call-label { display: inline; }
}
.menu { display: none; }                 /* phones only, see below */

/* ---------- the page: words + drawing ---------- */
.content { min-width: 0; }

/* the opening: the first screen is this plus the crown of the tree */
.hero { display: flex; flex-direction: column; align-items: flex-start; padding: 56px 0 64px; }
.hero h1 { margin-top: 18px; font-size: clamp(40px, 4.4vw, 68px); line-height: 1.0; letter-spacing: -0.03em; max-width: 15ch; }
.hero .lead { margin-top: 24px; }
.hero-actions { margin-top: 30px; }
.rating { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); }
.rating .stars { color: var(--olive); letter-spacing: 0.12em; font-size: 13px; }
.rating:hover { color: var(--olive-600); }
.service-index { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule); width: 100%; }
.service-index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.service-index a {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--paper-light) 40%, transparent);
  font-size: 16px; color: var(--ink); line-height: 1.25; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.service-index a::before { content: ''; width: 20px; height: 20px; flex: none; background: var(--tick) center / contain no-repeat; }
.service-index a:hover { text-decoration: none; border-color: var(--ink); background: color-mix(in srgb, var(--paper-light) 85%, transparent); }

/* section headings in the About / Reviews / Contact voice */
.about h2, .reviews-section h2, .contact h2 {
  margin-top: 14px; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.04; letter-spacing: -0.025em; max-width: 18ch;
}

/* the services */
.section-kicker { display: flex; align-items: center; gap: 14px; }
.section-kicker::before { content: ''; width: 28px; height: 1px; background: var(--ink); }
.service { padding: 52px 0 28px; }
/* the leader: the heading's line runs on to the drawing and ends in a dot, like a plate label */
.leader {
  display: flex; align-items: center; gap: 20px;
  font-size: clamp(30px, 3vw, 44px); line-height: 1.05; letter-spacing: -0.025em;
  margin-right: calc(-1 * var(--pad-r));
}
.leader::after { content: ''; flex: 1 1 auto; min-width: 48px; height: 7px; opacity: .75; }
.leader::after, .menu-panel a::after {
  background:
    radial-gradient(circle closest-side, var(--ink) 85%, transparent 100%) right center / 7px 7px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left center / calc(100% - 3px) 1px no-repeat;
}
.ticks { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.ticks li { display: flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.3; color: var(--ink); }
.ticks li::before { content: ''; width: 16px; height: 16px; flex: none; background: var(--tick) center / contain no-repeat; }
.service-brief .lead { margin-top: 16px; }

/* photos: a band under each service; two photos share it, the first wider */
.photos { margin-top: 26px; display: grid; grid-template-rows: minmax(0, 1fr); gap: 12px; height: clamp(260px, 25vw, 440px); }
.photos-2 { grid-template-columns: 3fr 2fr; }
.photo { display: block; min-width: 0; height: 100%; }
.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; box-shadow: var(--shadow-photo); background: var(--paper-deep); }

.about { padding: 110px 0 20px; }
.about .lead { margin-top: 22px; }
.footer-art { display: none; }

.reviews-section { padding: 110px 0 20px; }
.reviews-head { display: flex; align-items: center; gap: 14px; }
.google-mark { line-height: 0; flex: none; transition: transform .15s; }
.google-mark:hover { transform: scale(1.06); }
.reviews { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 34px 40px; }
.review { margin: 0; padding-top: 18px; border-top: 1px solid var(--rule); }
.review .stars { color: var(--olive); letter-spacing: 0.12em; font-size: 13px; }
.review blockquote { margin: 6px 0 0; font-size: 15px; line-height: 1.55; font-style: italic; }
.review figcaption { margin-top: 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.more-link { display: inline-block; margin-top: 30px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); box-shadow: inset 0 -1px 0 var(--rule); padding-bottom: 3px; }
.more-link:hover { text-decoration: none; box-shadow: inset 0 -1px 0 currentColor; }

/* contact: the end of the page, on a lighter sheet so it reads as the place to act */
.contact {
  margin: 110px 0 96px; padding: clamp(28px, 4vw, 52px);
  background: color-mix(in srgb, var(--paper-light) 62%, transparent);
  border: 1px solid var(--rule); border-radius: 2px;
}
.contact .lead { margin-top: 16px; }
.contact .actions { margin-top: 28px; }
.contact-list { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--rule); display: grid; gap: 10px; }
.contact-list div { display: grid; grid-template-columns: 8ch minmax(0, 1fr); gap: 12px; align-items: baseline; }
.contact-list dt { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.contact-list dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }

.site-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
  padding: 26px var(--gutter) 34px; border-top: 1px solid var(--rule);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); line-height: 1.7;
}

.call-bar { display: none; }

/* ---------- wider screens: the drawing in its own column, held in view ---------- */
@media (min-width: 900px) {
  .page { display: grid; grid-template-columns: minmax(0, 1fr) var(--plate-w); }
  .content { grid-column: 1; grid-row: 1; padding: 0 var(--pad-r) 0 var(--gutter); }
  .hero { min-height: calc(100vh - var(--header-h)); justify-content: center; }
  .plate {
    grid-column: 2; grid-row: 1; align-self: start;
    position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20%); mask-image: linear-gradient(to right, transparent 0, #000 20%);
  }
  /* without the drift: the whole plate, filling its column */
  .plate img {
    position: absolute; top: 0; left: 50%; max-width: none; height: auto; translate: -50% 0;
    width: max(100%, calc((100vh - var(--header-h)) * 0.8));
    filter: saturate(.85) contrast(.98); user-select: none; pointer-events: none;
  }
}
/* the drift: the view starts on the crown and reaches the roots at the end of the page, tied to the scroll position. Off under reduced motion.
   Sized from the column's height so the ground line (63% down the drawing) starts just below the fold: the page opens on crown
   and trunk only, and the roots have to be scrolled to. The drawing holds still for the first half screen of scrolling, then drifts. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .plate img {
      width: max(100%, min(calc((100vh - var(--header-h)) * 1.32), 190%));
      animation: drift linear both; animation-timeline: scroll(root block); animation-range: 50vh 100%;
    }
  }
}
@keyframes drift {
  /* straight down only: top of the drawing until the hold ends, the bottom at the end of the page */
  from { translate: -50% 0; }
  to   { translate: -50% calc(-100% + 100vh - var(--header-h)); }
}

/* ---------- phones and small tablets: one column ---------- */
@media (max-width: 899px) {
  :root { --header-h: 64px; --pad-r: var(--gutter); --hero-h: min(56svh, 520px); }
  /* the header: the logo on the left, everything else behind the menu button on the right */
  .site-header { gap: 0; background: color-mix(in srgb, var(--paper) 96%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .wordmark img { width: 126px; }
  .nav, .header-actions { display: none; }

  .menu { display: block; }
  /* the three lines on their own, no outline; the tap area is 44px square and the lines end on the gutter */
  .menu summary {
    position: absolute; right: calc(var(--gutter) - 13px); top: 50%; translate: 0 -50%;
    width: 44px; height: 44px; display: grid; place-items: center; list-style: none; cursor: pointer; color: var(--ink);
  }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary:focus-visible { outline: 2px solid var(--olive); outline-offset: -2px; border-radius: 2px; }
  .menu summary .icon { width: 30px; height: 30px; }
  /* the open menu hangs from the header across the full width */
  .menu-panel {
    position: absolute; top: 100%; left: 0; right: 0; display: grid; padding: 6px var(--gutter) 22px;
    background: var(--paper-light); border-bottom: 1px solid var(--rule);
    box-shadow: 0 18px 30px -18px color-mix(in srgb, #2d2b2b 45%, transparent);
  }
  /* each link set like a service heading, its leader line running to the edge */
  .menu-panel a {
    display: flex; align-items: center; gap: 14px; padding: 15px 0; color: var(--ink);
    font-size: 27px; line-height: 1.1; letter-spacing: -0.02em; border-bottom: 1px solid var(--rule);
  }
  .menu-panel a:last-child { border-bottom: 0; }
  .menu-panel a:hover { text-decoration: none; }
  .menu-panel a::after { content: ''; flex: 1 1 auto; min-width: 32px; height: 7px; opacity: .6; }
  .menu-panel .icon-insta { width: 22px; height: 22px; color: var(--leaf); }

  .page { display: flex; flex-direction: column; }
  /* the drawing: the crown, as the picture at the top, fading into the paper */
  .plate {
    order: -1; position: relative; height: var(--hero-h); overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent);
  }
  .plate img {
    position: absolute; top: 0; left: 50%; translate: -50% 0; max-width: none;
    width: min(150%, calc(var(--hero-h) * 1.6)); height: auto; filter: saturate(.85) contrast(.98);
  }
  .content { position: relative; margin-top: -72px; padding: 0 var(--gutter); }

  .hero { padding: 0 0 8px; }
  .hero h1 { margin-top: 12px; font-size: clamp(32px, 8.6vw, 46px); }
  .hero .lead { margin-top: 16px; font-size: 16px; }
  .hero-actions { display: none; }                 /* the bottom bar carries Call and Text */
  .service-index { margin-top: 28px; padding-top: 18px; }
  .service-index ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .service-index a { display: flex; font-size: 14px; padding: 8px 10px 8px 8px; white-space: normal; height: 100%; }
  .service-index a::before { width: 18px; height: 18px; }

  .services { padding-top: 40px; }
  .service { padding: 40px 0 12px; }
  .leader { font-size: clamp(27px, 7.4vw, 36px); gap: 14px; }
  .ticks { flex-direction: column; gap: 8px; }
  .ticks li { font-size: 11px; }
  .photos { height: auto; margin-top: 20px; display: block; }
  .photo { aspect-ratio: 4 / 3; }
  /* two photos: a sideways strip with the next one peeking in */
  .photos-2 {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 16px; scroll-padding-inline: var(--gutter);
  }
  .photos-2::-webkit-scrollbar { display: none; }
  .photos-2 .photo { flex: 0 0 86%; scroll-snap-align: start; }

  .about { padding-top: 72px; }
  .about .lead { font-size: 16px; }

  .reviews-section { padding-top: 72px; }
  .reviews {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 26px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 8px; scroll-padding-inline: var(--gutter);
  }
  .reviews::-webkit-scrollbar { display: none; }
  .review {
    flex: 0 0 84%; scroll-snap-align: start; padding: 18px 18px 20px;
    border: 1px solid var(--rule); border-radius: 2px; background: color-mix(in srgb, var(--paper-light) 45%, transparent);
  }
  .review blockquote { font-size: 16px; }
  .more-link { margin-top: 20px; }

  .contact { margin: 72px 0 56px; }
  .contact .actions .pill { flex: 1 1 auto; }
  .contact-list div { grid-template-columns: 1fr; gap: 0; }

  /* the footer: its two lines at the top, then the roots and seedlings of the drawing behind and
     below them, ending just above the Call / Text bar. The trunk fades in under the words and
     reaches the ground line below them. */
  .site-footer {
    position: relative; isolation: isolate; overflow: hidden; flex-direction: column;
    padding-bottom: calc(345px + env(safe-area-inset-bottom));
  }
  .footer-art {
    display: block; position: absolute; inset: 0; z-index: -1;
    -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 32%); mask-image: linear-gradient(to bottom, transparent 10%, #000 32%);
  }
  .footer-art img {
    position: absolute; bottom: calc(56px + env(safe-area-inset-bottom)); left: 50%; translate: -52% 0;
    width: max(150%, 520px); max-width: none; filter: saturate(.85) contrast(.98);
  }

  .call-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; gap: 10px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 96%, transparent); border-top: 1px solid var(--rule);
  }
  .call-bar .pill { flex: 1; padding: 13px; font-size: 13px; }
}
/* phones: at the top of the page the header is the bar, the full-size logo and the three lines.
   Over the first 100px of scrolling the bar fades away and so do the three lines, while the logo
   scales down to 60% and gains a light blurred paper backing, so it floats over the page and stays
   readable. Nothing moves in the layout. The header lets taps through to the page once the bar has
   gone; only the logo and the menu catch them. Where scroll-driven animation isn't supported, or
   under reduced motion, the bar, full-size logo and three lines simply stay. */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .site-header { pointer-events: none; }
    .wordmark, .menu summary, .menu-panel { pointer-events: auto; }
    .site-header, .wordmark, .menu summary, .menu-panel {
      animation: linear both; animation-timeline: scroll(root block); animation-range: 0 100px;
    }
    .site-header { animation-name: bar-away; }
    /* the backing hugs the logo: padding outside it, cancelled by the margin so the logo doesn't move */
    .wordmark { padding: 6px 10px; margin: -6px -10px; border-radius: 6px; transform-origin: 10px center; animation-name: logo-float; }
    .menu summary, .menu-panel { animation-name: menu-away; }
  }
}
@keyframes bar-away   { to { background-color: transparent; border-bottom-color: transparent; } }
@keyframes logo-float { to { scale: .6; background-color: color-mix(in srgb, var(--paper) 55%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } }
@keyframes menu-away  { to { opacity: 0; visibility: hidden; } }
/* the 404 page */
.notfound { min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; padding: 48px var(--gutter); max-width: 760px; }
.notfound h1 { font-size: clamp(34px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.03em; }