/* Temporary notice above the header (live copy only). Shown at the top of the page and whenever the
   visitor scrolls up; hidden while scrolling down. Without JavaScript it is a plain bar that scrolls away.
   No inline styles anywhere: the page policy only allows files from this site. */
:root { --notice-h: 2.25rem; }

.notice {
  display: flex; align-items: center; justify-content: center;
  height: var(--notice-h); padding-inline: var(--s-4);
  background: var(--c-oxblood); color: var(--c-paper);
  font-size: var(--t-small); font-weight: var(--w-ui); line-height: 1; text-align: center;
}
.notice p { margin: 0; }

/* The first screen of a page is one viewport tall: the notice takes its height off it. */
.intro { min-height: calc(100svh - var(--header-h) - var(--notice-h)); }

/* With scripts: the notice sticks above the header, which sticks just under it. */
html.notice-js .notice {
  position: sticky; top: 0; z-index: calc(var(--z-header) + 1);
  transition: transform var(--dur) var(--ease-out-quart), visibility 0s;
}
html.notice-js .header {
  top: var(--notice-h);
  transition: background var(--dur) var(--ease-out-quart), border-color var(--dur) var(--ease-out-quart),
    color var(--dur) var(--ease-out-quart), top var(--dur) var(--ease-out-quart);
}
html.notice-js .legal-index, html.notice-js .write__how {
  top: calc(var(--header-h) + var(--notice-h) + var(--s-6));
  transition: top var(--dur) var(--ease-out-quart);
}

/* Scrolling down: the notice slides away and the header takes the top edge. */
html.notice-away .notice {
  transform: translateY(-100%); visibility: hidden;
  transition: transform var(--dur) var(--ease-out-quart), visibility 0s linear var(--dur);
}
html.notice-away .header { top: 0; }
html.notice-away .legal-index, html.notice-away .write__how { top: calc(var(--header-h) + var(--s-6)); }

@media (prefers-reduced-motion: reduce) {
  html.notice-js .notice, html.notice-away .notice { transition: none; }
  html.notice-js .header { transition: background var(--dur) var(--ease-out-quart), border-color var(--dur) var(--ease-out-quart), color var(--dur) var(--ease-out-quart); }
  html.notice-js .legal-index, html.notice-js .write__how { transition: none; }
}