/* Gestalt_241024 80 */
@font-face {
  font-family: "Gestalt";
  src: url("fonts/Gestalt-Regular.woff2") format("woff2"),
    url("fonts/Gestalt-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --pad: 24px;
  /* Less at the top and bottom than at the sides: a line box carries its own
     leading, so 18 sets the cap height on the same 24 the text starts at. */
  --pad-y: 18px;
  --line: 23px;
  /* How far you scroll with a paragraph resting on the header's baseline
     before it collapses — the beat that separates arriving from collapsing. */
  --dwell: 4px;
  /* 232px at the design's 10px type: the same measure, at this size */
  --measure: 23.2em;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  background: #000;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  margin: 0;
  font-family: "Gestalt", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: var(--line);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  hyphens: manual;
  overscroll-behavior: none;
}

/* The header the sections collapse into. Its underside falls exactly on the
   line the resting paragraph occupies, so the black is never seen — it is
   there only to swallow a paragraph the browser paints too high, during a
   flick the script can't keep up with. */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: var(--pad-y) var(--pad) 0;
  background: #000;
}

h1 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* The name gives up its line to "Info" once the opening sentence collapses. */
h1.is-collapsed {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

.collapsed {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A collapsed section's name takes the exact line its first line of text
   reached, so the two swap in place, instantly. Hidden rather than merely
   flattened, so a name you can't see can't be tabbed to either. */
.collapsed li {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

.collapsed li.is-shown {
  visibility: visible;
  height: var(--line);
}

/* Tap a name to go back to its paragraph. Undecorated: in the design these
   read as a list, not as links. */
header a,
.jump {
  text-decoration: none;
}

/* The shortcuts sit on the bottom margin as the header sits on the top, one
   at each end of the page: Contact on the opening frame, gone the moment the
   page moves, and Back to Top once Contact has collapsed. Never both. */
.jump {
  position: fixed;
  left: var(--pad);
  bottom: var(--pad-y);
  z-index: 1;
}

.jump.is-gone {
  visibility: hidden;
}

/* The first paragraph starts on the halfway line. */
main {
  padding-top: 50vh;
  padding-top: 50svh;
}

/* A section is only as tall as the scroll it takes to carry its paragraph
   from the halfway line up to its own line in the header. Spend that, and
   the next paragraph is sitting exactly where this one started. */
section {
  --i: 1;
  /* Half the paragraph's height, measured by the script: a section's scroll
     is the distance from arriving centred on the halfway line to resting on
     its own line, plus the dwell. Never less than the dwell itself. */
  --p: 0px;
  height: max(
    var(--dwell),
    calc(50vh - 0.5 * var(--p) - var(--pad-y) - var(--line) * var(--i) + var(--dwell))
  );
  height: max(
    var(--dwell),
    calc(50svh - 0.5 * var(--p) - var(--pad-y) - var(--line) * var(--i) + var(--dwell))
  );
  padding: 0 var(--pad);
  /* Keeps the holder's negative margin inside: left to collapse, it would
     lift the section itself and the sections would stop tiling. */
  display: flow-root;
  /* Where a tapped name lands: its paragraph back on the halfway line. */
  scroll-margin-top: 50vh;
  scroll-margin-top: 50svh;
}

/* The opening sentence belongs to the title already in the header, so it
   and Info's paragraph collapse onto the same line — the first leaving it
   empty, the second putting "Info" there. */
section:nth-of-type(2) {
  --i: 1;
}

section:nth-of-type(3) {
  --i: 2;
}

section:nth-of-type(4) {
  --i: 3;
}

section:nth-of-type(5) {
  --i: 4;
}

section:nth-of-type(6) {
  --i: 5;
}

/* Carries Contact up to its own line and no further: the page ends on the
   exact scroll at which it collapses, so the last state is the last of the
   page and there is nothing left to scroll. */
section.end {
  height: 50vh;
  height: 50svh;
  padding: 0;
}


/* Section names live in the header; here they are for structure only */
section h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Tall enough that the browser can hold the paragraph on its line for the
   whole of the section, whatever the paragraph's height. It overflows the
   section it sits in, which costs nothing: only one paragraph is ever up. */
.hold {
  /* Lifted by half a paragraph, so the paragraph starts centred on the
     section's top edge — which is the halfway line at the moment it arrives. */
  margin-top: calc(-0.5 * var(--p));
  height: calc(100% + var(--p));
}

/* Rises to the line its name will take and stops there, held by
   the browser rather than by the script, so it cannot be carried up into
   the header however fast the page is thrown. Resting there is the first
   beat; collapsing, --dwell further on, is the second. */
.body {
  position: sticky;
  top: calc(var(--pad-y) + var(--line) * var(--i));
  max-width: var(--measure);
  font-style: normal;
}

/* Only ever one paragraph on screen: the one between the halfway line and
   its header line. Hidden, not removed, so the box it leaves behind still
   says where it is. */
.body.is-waiting,
.body.is-collapsed {
  visibility: hidden;
}

.body p {
  margin: 0 0 var(--line);
}

.body p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  -webkit-tap-highlight-color: transparent;
}

a:hover {
  color: #858026;
  text-decoration-color: #8580f7;
}

a:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 2px;
}

::selection {
  background: #8580f7;
  color: #000;
}