/* ==========================================================================
   Great Lakes Institute for Applied Intelligence

   Visual system: the survey sheet, in water.

   Colour is taken from Lake Superior's own register as it appears in the
   photographs — sunlit shoal water over sand, deep water, the Jacobsville
   sandstone of the south-shore cliffs, and the emerald of the breakwater
   shallows.

   Structure borrows the conventions of a lake chart: a margin rail that
   carries the sheet's own information, hairline registration between bands,
   roman type for what is settled and italic for what is still being sounded.

   Motion is reserved. One page-load sequence on the hero, parallax on the
   photographs because they are the subject, and everything else answers a
   person's pointer, focus, or scroll position. Nothing else moves by itself.
   ========================================================================== */

:root {
  /* Water, deep to shallow */
  --abyss:      #02182f;  /* deepest water — masthead, footer, immersive bands */
  --depth:      #04294b;  /* deep water — inverted reading bands */
  --depth-lift: #063560;  /* the same water with light reaching it */
  --shoal:      #e8eeec;  /* sunlit shallows over sand — the page ground */
  --paper:      #f5faf8;  /* lifted panels */

  /* Registration */
  --tint:       #9dc0ba;  /* shoal water — rules on dark ground */
  --tint-soft:  #c6dad6;  /* the same water, further out */
  --rule:       #c2d4d0;  /* hairline on light ground */
  --rule-soft:  #d8e4e1;

  /* Ink */
  --navy:       #073568;  /* the mark's own ink */
  --ink:        #17324c;  /* running text */
  --slate:      #45606f;  /* secondary text */

  /* The accent: iron oxide, the colour of the cliffs. Actions only. */
  --sandstone:      #8f3f2b;
  --sandstone-deep: #77331f;
  --sandstone-lift: #cb6a4a;  /* the same pigment, lit, for deep water */

  /* The live register: emerald breakwater shallows. Interaction only. */
  --shallows:      #2fb3a4;  /* on deep water */
  --shallows-deep: #0d7368;  /* on the page ground */

  /* Type */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Newsreader', Georgia, 'Times New Roman', serif;

  --t-xs:   .8125rem;
  --t-sm:   .9375rem;
  --t-base: 1.0625rem;
  --t-body: 1.1875rem;
  --t-md:   1.375rem;
  --t-lg:   1.625rem;
  --t-xl:   clamp(1.75rem, 1rem + 2.3vw, 2.5rem);
  --t-2xl:  clamp(2.15rem, 1.25rem + 3.4vw, 3.3rem);
  --t-display: clamp(2.7rem, 1rem + 6.2vw, 5.6rem);

  /* Measure and rhythm */
  --sheet: 68rem;
  --sheet-wide: 84rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --rail: 17rem;
  --rail-gap: 4.5rem;
  --measure: 64ch;
  --band-y: clamp(3.5rem, 6vw, 6.5rem);
  --head-h: 6.75rem;

  --ease: cubic-bezier(.2, .8, .25, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--shoal);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-body);
  font-optical-sizing: auto;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 112%;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--navy);
}

h1 { font-size: var(--t-2xl); font-weight: 700; font-stretch: 116%; line-height: 1.02; letter-spacing: -.018em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); font-stretch: 106%; }
h4 { font-size: var(--t-base); font-stretch: 100%; }

p { text-wrap: pretty; }
strong { font-weight: 600; }
em { font-style: italic; }

a {
  color: var(--navy);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--rule);
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
a:hover { color: var(--sandstone); text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--shallows-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

code, kbd, samp {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em;
}

/* Small labelled fields. Sentence case, never tracked-out caps. */
.label {
  display: block;
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1.3;
  color: var(--slate);
}

/* Italic is the annotation register: place names, durations, uncertainty. */
.note {
  font-style: italic;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--slate);
}

.skip {
  position: fixed;
  top: -6rem;
  left: var(--gutter);
  z-index: 100;
  background: var(--sandstone);
  color: #fff;
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 600;
  padding: .75rem 1.1rem;
  border-radius: 3px;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip:focus { top: .75rem; color: #fff; }

/* --------------------------------------------------------------------------
   Sheet, bands, and the margin rail
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;              /* as a grid item, auto margins would otherwise
                               absorb the free space and shrink it to fit */
  max-width: var(--sheet);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap.wide { max-width: var(--sheet-wide); }

/* The rail carries the sheet's own information; the field carries the work. */
.split {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: var(--rail-gap);
  align-items: start;
}
.rail { text-align: right; padding-top: .35rem; }
.rail > * + * { margin-top: .75rem; }
.rail h2, .rail h1 { text-wrap: balance; }
.rail h2 { font-size: var(--t-md); font-stretch: 106%; line-height: 1.18; }

/* A heading stays with its section while that section is being read. */
.rail--sticky { position: sticky; top: calc(var(--head-h) + 2rem); }

.field { min-width: 0; }
.field > * + * { margin-top: 1.25rem; }

section { padding-block: var(--band-y); }
/* Registration only where two light bands meet; elsewhere the change of
   ground or a photograph already marks the join. */
section:not(.depth) + section:not(.depth) { border-top: 1px solid var(--rule); }
.lake-hero + section { border-top: 0; }

.prose { max-width: var(--measure); font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem); }
.prose > * + * { margin-top: 1.2rem; }
.prose h3 { margin-top: 2.25rem; }

/* Inverted bands read as deep water. */
.depth {
  background: var(--depth);
  color: var(--tint-soft);
}
.depth h1, .depth h2, .depth h3, .depth h4 { color: #fff; }
.depth a { color: #fff; text-decoration-color: rgba(157, 192, 186, .7); }
.depth a:hover { color: var(--shallows); text-decoration-color: currentColor; }
.depth .label, .depth .note { color: var(--tint); }
.depth :focus-visible { outline-color: var(--shallows); }

/* --------------------------------------------------------------------------
   Masthead. Clear over the opening photograph, deep water once you descend.
   -------------------------------------------------------------------------- */

header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: transparent;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
header::before {
  /* A scrim so the reversed mark holds against a bright sky, before the
     masthead takes on its own ground. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(2, 24, 47, .5), rgba(2, 24, 47, 0));
  opacity: 1;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
header.is-docked {
  background: rgba(2, 24, 47, .92);
  box-shadow: 0 1px 0 rgba(157, 192, 186, .22);
}
header.is-docked::before { opacity: 0; }
@supports (backdrop-filter: blur(1px)) {
  header.is-docked { background: rgba(2, 24, 47, .78); backdrop-filter: blur(14px) saturate(140%); }
}

header .wrap {
  max-width: var(--sheet-wide);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: var(--head-h);
  position: relative;
  z-index: 1;
}

/* The water level, read as a hairline along the foot of the masthead. */
.waterline {
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--shallows);
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
header.is-docked .waterline { opacity: .85; }

.mark {
  display: block;
  flex: 0 0 auto;
  width: 10.75rem;
  padding-block: .7rem;
  transition: width .35s var(--ease), padding-block .35s var(--ease);
}
header.is-docked .mark { width: 8.75rem; padding-block: .5rem; }
.mark img {
  display: block;
  width: 100%;
  height: auto;
  /* The mark is a single flat navy; reverse it cleanly out of deep water. */
  filter: brightness(0) invert(1);
}

header nav { display: flex; gap: 1.75rem; flex-wrap: wrap; }
header nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 500;
  font-stretch: 100%;
  color: var(--tint-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
header nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 .7rem 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .28s var(--ease);
}
header nav a:hover { color: #fff; }
header nav a:hover::after { transform: scaleX(1); }
header nav a[aria-current] { color: #fff; }
header nav a[aria-current]::after { background: var(--sandstone-lift); transform: scaleX(1); }
header nav a[aria-current='location']::after { background: var(--shallows); }

.menu-toggle { display: none; }

/* The masthead floats; the first block reaches up underneath it. */
main { padding-top: var(--head-h); }
.lake-hero, .page-head { margin-top: calc(var(--head-h) * -1); }

/* --------------------------------------------------------------------------
   Hero: the headline set in open water
   -------------------------------------------------------------------------- */

.lake-hero {
  padding-block: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 100%);
  background: var(--abyss);
  isolation: isolate;
  overflow: clip;
}
.hero-frame {
  grid-area: 1 / 1;
  overflow: clip;
  transform-origin: 50% 60%;
}
.hero-frame img {
  display: block;
  width: 100%;
  height: min(94vh, 54rem);
  min-height: 30rem;
  object-fit: cover;
  object-position: center 70%;
  /* Parallax: the photograph holds back as the page descends past it. */
  transform: translate3d(0, var(--pfx, 0px), 0) scale(1.1);
  will-change: transform;
}
.lake-hero::after {
  content: '';
  grid-area: 1 / 1;
  /* Deep water rising from the foot of the frame, a little weather at the top
     for the masthead, and an overall wash so white type holds anywhere. */
  background:
    linear-gradient(to top,
      rgba(2, 24, 47, .97) 0%,
      rgba(2, 24, 47, .88) 28%,
      rgba(2, 24, 47, .62) 52%,
      rgba(2, 24, 47, .30) 74%,
      rgba(2, 24, 47, .08) 92%,
      rgba(2, 24, 47, 0) 100%),
    linear-gradient(to bottom, rgba(2, 24, 47, .3) 0%, rgba(2, 24, 47, 0) 32%),
    rgba(2, 24, 47, .18);
  pointer-events: none;
}
.lake-hero > .wrap {
  grid-area: 1 / 1;
  z-index: 1;
  align-self: end;
  max-width: var(--sheet-wide);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: calc(var(--head-h) + 2rem);
}
.lake-hero h1 {
  color: #fff;
  font-size: var(--t-display);
  font-weight: 700;
  font-stretch: 118%;
  line-height: .96;
  letter-spacing: -.026em;
  max-width: 17ch;
  text-wrap: balance;
}
.hero-lede {
  color: #eaf3f1;
  font-size: clamp(1.1875rem, 1rem + .6vw, 1.5rem);
  line-height: 1.5;
  max-width: 52ch;
  margin-top: clamp(1.1rem, 2.2vw, 1.75rem);
}

/* The sheet's own annotation, set against the foot rule where a chart puts it. */
.hero-foot {
  margin-top: clamp(1.6rem, 3.2vw, 2.5rem);
  padding-top: .9rem;
  border-top: 1px solid rgba(157, 192, 186, .28);
  display: flex;
  justify-content: flex-end;
}
.hero-foot .note { color: var(--tint); text-align: right; max-width: 42ch; }

.lake-hero a { color: #fff; }
.lake-hero a:hover { color: var(--shallows); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1.9rem;
}

/* One orchestrated arrival. Nothing else on the site enters by itself. */
@media (prefers-reduced-motion: no-preference) {
  .hero-frame { animation: settle 1.8s var(--ease) both; }
  .lake-hero h1 { animation: rise 1s var(--ease) .2s both; }
  .hero-lede    { animation: rise 1s var(--ease) .38s both; }
  .lake-hero .actions { animation: rise 1s var(--ease) .5s both; }
  .hero-foot    { animation: rise 1s var(--ease) .62s both; }

  @keyframes settle {
    from { opacity: 0; transform: scale(1.07); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes rise {
    from { opacity: 0; transform: translate3d(0, 1.6rem, 0); }
    to   { opacity: 1; transform: none; }
  }
}

/* --------------------------------------------------------------------------
   Page title block
   -------------------------------------------------------------------------- */

.page-head {
  position: relative;
  /* Light reaching a little way into deep water, so the block is not flat. */
  background: radial-gradient(130% 150% at 14% 0%, var(--depth-lift) 0%, var(--abyss) 64%);
  color: var(--tint-soft);
  padding-top: calc(var(--head-h) + clamp(2.5rem, 5vw, 4.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  overflow: clip;
}
.page-head .wrap { max-width: var(--sheet-wide); position: relative; z-index: 1; }
.page-head h1 { color: #fff; max-width: 20ch; }
.page-head .intro { color: #dce9e6; }
.page-head .label, .page-head .note { color: var(--tint); }
.page-head a { color: #fff; }
.page-head a:hover { color: var(--shallows); }

.back {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-size: var(--t-sm);
  font-stretch: 100%;
  text-decoration: none;
  border-bottom: 1px solid rgba(157, 192, 186, .5);
  padding-bottom: .15rem;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.back:hover { border-bottom-color: var(--shallows); }

.intro {
  font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem);
  line-height: 1.55;
  max-width: 44ch;
  margin-top: 1.35rem;
}
.page-head .intro { max-width: 50ch; }

/* --------------------------------------------------------------------------
   Plates: the photographs, at a size that does them justice
   -------------------------------------------------------------------------- */

.plate { display: block; background: var(--abyss); }
.plate-frame { overflow: clip; }
.plate img {
  display: block;
  width: 100%;
  height: clamp(20rem, 46vw, 40rem);
  object-fit: cover;
  object-position: center 55%;
  transform: translate3d(0, var(--pfx, 0px), 0) scale(1.14);
  will-change: transform;
}
.plate figcaption {
  max-width: var(--sheet-wide);
  margin-inline: auto;
  padding: 1rem var(--gutter) 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 2rem;
  color: var(--tint);
  font-style: italic;
  font-size: var(--t-sm);
  line-height: 1.5;
}
.plate .credit { font-style: normal; font-size: var(--t-xs); color: var(--tint); opacity: .8; }
.plate--tall img { height: clamp(24rem, 58vw, 48rem); }
.plate--band img { height: clamp(14rem, 28vw, 24rem); }


/* --------------------------------------------------------------------------
   Index: a chart's list of places. Rows, not cards. Never numbered —
   these are destinations, not a sequence.
   -------------------------------------------------------------------------- */

.index, .rows, .entries, .steps, .releases, .fields, .stack { max-width: 52rem; }

.index {
  list-style: none;
  border-top: 1px solid var(--rule);
  margin-top: 1.75rem;
}
.index > li { border-bottom: 1px solid var(--rule); }
.index a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: .2rem 2rem;
  align-items: baseline;
  padding: 1.3rem .9rem 1.4rem;
  text-decoration: none;
  transition: background-color .25s var(--ease), padding-left .25s var(--ease);
}
.index a::before {
  /* A sounding mark that sets at the left edge as you reach for the row. */
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--shallows-deep);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .3s var(--ease);
}
.index a:hover, .index a:focus-visible { background: var(--paper); padding-left: 1.4rem; }
.index a:hover::before, .index a:focus-visible::before { transform: scaleY(1); }
.index .index-name {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 600;
  font-stretch: 108%;
  line-height: 1.15;
  color: var(--navy);
  transition: color .25s var(--ease);
}
.index a:hover .index-name { color: var(--shallows-deep); }
.index p { color: var(--slate); margin: 0; max-width: 54ch; font-size: var(--t-base); }

/* --------------------------------------------------------------------------
   The atlas: four destinations, each with its own water.
   Pointing at a place brings its photograph up beside the list.
   -------------------------------------------------------------------------- */

.atlas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: start;
  margin-top: 2rem;
}
.atlas .index { max-width: none; margin-top: 0; }
.atlas .index a { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: .2rem 1.5rem; }

.atlas-view {
  position: relative;
  overflow: clip;
  border-radius: 3px;
  background: var(--abyss);
  aspect-ratio: 3 / 4;
  box-shadow: 0 24px 50px -32px rgba(2, 24, 47, .6);
}
.atlas-view img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .6s var(--ease), transform .9s var(--ease);
}
.atlas-view img.is-live { opacity: 1; transform: scale(1); }
.depth .atlas .index, .depth .atlas .index > li { border-color: rgba(157, 192, 186, .3); }
.depth .atlas .index .index-name { color: #fff; }
.depth .atlas .index p { color: var(--tint-soft); }
.depth .atlas .index a::before { background: var(--shallows); }
.depth .atlas .index a:hover, .depth .atlas .index a:focus-visible { background: rgba(157, 192, 186, .1); }
.depth .atlas .index a:hover .index-name { color: var(--shallows); }

.atlas-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem .95rem .85rem;
  background: linear-gradient(to top, rgba(2, 24, 47, .88), rgba(2, 24, 47, 0));
  color: var(--tint-soft);
  font-style: italic;
  font-size: var(--t-sm);
  line-height: 1.45;
}

/* Same rows, without links — for principles and features. */
.rows { list-style: none; border-top: 1px solid var(--rule); margin-top: 1.75rem; }
.rows > li {
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: .3rem 2rem;
  align-items: baseline;
  padding: 1.25rem .9rem 1.35rem;
}
.rows h3 { font-size: var(--t-base); font-stretch: 104%; line-height: 1.3; }
.rows p { color: var(--slate); margin: 0; max-width: 56ch; font-size: var(--t-base); }
.depth .rows, .depth .rows > li { border-color: rgba(157, 192, 186, .3); }
.depth .rows p { color: var(--tint-soft); }

/* Stacked rows, for headings too long to sit in a side column. */
.stack { list-style: none; border-top: 1px solid var(--rule); margin-top: 1.75rem; }
.stack > li { border-bottom: 1px solid var(--rule); padding: 1.3rem .9rem 1.45rem; }
.stack h3 { font-size: var(--t-md); font-stretch: 104%; margin-bottom: .4rem; }
.stack p { color: var(--slate); margin: 0; max-width: 58ch; font-size: var(--t-base); }
.depth .stack, .depth .stack > li { border-color: rgba(157, 192, 186, .3); }
.depth .stack p { color: var(--tint-soft); }

/* An application's own mark, shown at its real size. */
.app-mark { display: flex; align-items: center; gap: 1.2rem; }
.app-mark img { width: 4.5rem; height: 4.5rem; border-radius: 14px; flex-shrink: 0; }
.app-mark h3 { font-size: var(--t-2xl); font-weight: 700; font-stretch: 112%; }

/* The closing band: the product's own artwork holds the right of the field. */
.made {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 12.5rem);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.made > * + * { margin-top: 0; }
.made-copy > * + * { margin-top: 1.25rem; }
.made-copy h3 { font-size: var(--t-2xl); font-weight: 700; font-stretch: 112%; }
.made-copy .intro { margin-top: 1rem; }
.made-mark {
  width: 100%;
  height: auto;
  border-radius: 22%;
  justify-self: end;
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .85);
}

/* --------------------------------------------------------------------------
   Title block: labelled fields, the one place labels are the whole point
   -------------------------------------------------------------------------- */

.fields {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 1.75rem;
}
.fields > li {
  padding: .85rem 1.05rem .95rem;
  border-right: 1px solid var(--rule);
}
.fields > li:last-child { border-right: 0; }
.fields .value {
  display: block;
  font-family: var(--display);
  font-size: var(--t-base);
  font-weight: 600;
  font-stretch: 104%;
  color: var(--navy);
  margin-top: .2rem;
}
.depth .fields, .depth .fields > li { border-color: rgba(157, 192, 186, .3); }
.depth .fields .value { color: #fff; }

/* --------------------------------------------------------------------------
   Notes and asides
   -------------------------------------------------------------------------- */

.quiet {
  background: var(--paper);
  border-left: 3px solid var(--rule);
  border-radius: 0 2px 2px 0;
  padding: 1.4rem 1.7rem;
  margin-top: 1.75rem;
  max-width: calc(var(--measure) + 3rem);
}
.quiet > * + * { margin-top: .85rem; }
.quiet h2, .quiet h3 { font-size: var(--t-base); font-stretch: 104%; }
.quiet p { color: var(--slate); font-size: var(--t-base); }
.depth .quiet {
  background: rgba(157, 192, 186, .1);
  border-left-color: var(--tint);
}
.depth .quiet p { color: var(--tint-soft); }

/* A caution takes the accent, because it wants attention. */
.caution {
  border-left-color: var(--sandstone);
  font-size: var(--t-sm);
  line-height: 1.6;
}
.caution p { font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 600;
  font-stretch: 104%;
  line-height: 1.3;
  padding: .85rem 1.45rem;
  border: 1px solid var(--sandstone);
  border-radius: 3px;
  background: var(--sandstone);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: background-color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.cta:hover {
  background: var(--sandstone-deep);
  border-color: var(--sandstone-deep);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -8px rgba(119, 51, 31, .7);
}
.cta:active { transform: translateY(0); }

/* On deep water the ground itself becomes the button. */
.depth .cta, .page-head .cta, .lake-hero .cta {
  background: var(--shoal);
  border-color: var(--shoal);
  color: var(--abyss);
}
.depth .cta:hover, .page-head .cta:hover, .lake-hero .cta:hover {
  background: #fff;
  border-color: #fff;
  color: var(--abyss);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .8);
}

.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 500;
  font-stretch: 104%;
  padding: .85rem 1.45rem;
  border: 1px solid var(--navy);
  border-radius: 3px;
  background: transparent;
  color: var(--navy);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.secondary:hover { background: var(--navy); color: var(--shoal); }

/* A plain action beside a filled one. */
.action-text {
  position: relative;
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 500;
  font-stretch: 104%;
  text-decoration: none;
  padding-bottom: .25rem;
}
.action-text::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform-origin: 0 50%;
  transition: transform .28s var(--ease);
}
.action-text:hover::after { transform: scaleX(0); transform-origin: 100% 50%; }

/* --------------------------------------------------------------------------
   Articles
   -------------------------------------------------------------------------- */

.article-copy { max-width: var(--measure); font-size: 1.1875rem; line-height: 1.75; }
.article-copy > * + * { margin-top: 1.25rem; }
.article-copy h2 {
  margin-top: 2.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.article-copy > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article-copy h3 { margin-top: 2.1rem; font-size: var(--t-md); }
.article-copy .quiet { margin-block: 2.1rem; }
/* A callout is its own object; it must not inherit the rule above a heading. */
.article-copy .quiet h2,
.article-copy .quiet h3 { margin-top: 0; padding-top: 0; border-top: 0; }
.article-copy ul, .article-copy ol { padding-left: 1.4rem; }
.article-copy li { margin-bottom: .6rem; }
.article-copy li:last-child { margin-bottom: 0; }
.article-copy p { overflow-wrap: break-word; }
.post-source { font-size: var(--t-sm); color: var(--slate); font-style: italic; }
.guide-list { color: var(--slate); }
.guide-list li { margin-bottom: .8rem; }

/* The prompt to copy. Marked with the accent because it is the thing to take. */
.starter-prompt {
  border-left-color: var(--sandstone);
  font-style: italic;
  position: relative;
}
.starter-prompt p { color: var(--navy); font-size: var(--t-base); }

.prompt-actions { margin-top: 1.1rem; font-style: normal; }

.copy-prompt {
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 600;
  font-stretch: 104%;
  color: var(--sandstone);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: .45rem .8rem;
  cursor: pointer;
  font-style: normal;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.copy-prompt:hover { border-color: var(--sandstone); }
.copy-prompt[data-state='copied'] { color: var(--shallows-deep); border-color: var(--shallows-deep); }

.post-byline { margin-top: 1.6rem; }
.post-byline p { font-size: var(--t-sm); line-height: 1.55; }
.guide-return { margin-top: 2.75rem; }

/* Blog index entries, keyed by date in the rail. */
.entries { border-top: 1px solid var(--rule); margin-top: 1.75rem; }
.post-preview {
  border-bottom: 1px solid var(--rule);
  padding: 1.9rem .9rem 2rem;
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: .4rem 2.5rem;
  align-items: start;
  transition: background-color .25s var(--ease);
}
.post-preview:hover { background: var(--paper); }
.post-preview .meta {
  font-style: italic;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--slate);
}
.post-preview h3 { grid-column: 2; font-size: var(--t-lg); max-width: 32ch; }
.post-preview h3 a { text-decoration: none; }
.post-preview h3 a:hover { text-decoration: underline; text-decoration-color: currentColor; }
.post-preview > p:not(.meta), .post-preview > a { grid-column: 2; max-width: 58ch; }
.post-preview > p:not(.meta) { color: var(--slate); margin-top: .55rem; font-size: var(--t-base); }
.post-preview > a {
  position: relative;
  font-family: var(--display);
  font-size: var(--t-sm);
  font-stretch: 104%;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  justify-self: start;
  margin-top: 1rem;
  padding-bottom: .15rem;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.post-preview > a:hover { border-bottom-color: currentColor; }
.post-preview .meta a { font-style: normal; }
.community-post { margin: 0; }

.pagination {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  font-family: var(--display);
  font-size: var(--t-sm);
  font-stretch: 104%;
}

/* --------------------------------------------------------------------------
   Sequences. Numbered only where the content really is a sequence.
   -------------------------------------------------------------------------- */

.steps { list-style: none; counter-reset: step; margin-top: 1.75rem; }
.steps > li {
  counter-increment: step;
  border-top: 1px solid var(--rule);
  padding: 1.6rem 0 1.85rem;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 1.6rem;
}
.steps > li:last-child { border-bottom: 1px solid var(--rule); }
.steps > li::before {
  content: counter(step);
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 600;
  font-stretch: 116%;
  line-height: 1.15;
  color: var(--sandstone);
}
.steps h3 { font-size: var(--t-md); margin-bottom: .55rem; }
.steps p, .steps li { color: var(--slate); font-size: var(--t-base); }
.depth .steps, .depth .steps > li { border-color: rgba(157, 192, 186, .3); }
.depth .steps p, .depth .steps li { color: var(--tint-soft); }
.depth .steps > li::before { color: var(--sandstone-lift); }
.steps .step-body > * + * { margin-top: .8rem; }
.steps ul { padding-left: 1.3rem; font-size: var(--t-sm); }
.steps ul li { margin-bottom: .45rem; font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   Releases: two real platform specs, so a bordered block is the right form
   -------------------------------------------------------------------------- */

.releases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.75rem;
  margin-top: 1.75rem;
  max-width: 50rem;
}
.release {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.release:hover { border-color: var(--tint); }
.release h3 { font-size: var(--t-md); }
.release > * + * { margin-top: .8rem; }
.release .requires { font-size: var(--t-sm); color: var(--slate); }

/* The platform we believe you are on is brought forward, not chosen for you. */
.release[data-platform='yours'] {
  order: -1;
  border-color: var(--shallows-deep);
  box-shadow: 0 10px 30px -18px rgba(13, 115, 104, .75);
}
.release .yours {
  display: none;
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 600;
  font-stretch: 104%;
  color: var(--shallows-deep);
}
.release[data-platform='yours'] .yours { display: block; }
/* The badge is in the flow whether or not it shows; keep both cards aligned. */
.release > .yours + h3 { margin-top: 0; }
.release[data-platform='yours'] > .yours + h3 { margin-top: .5rem; }

.release .file {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  padding: .45rem .65rem;
  word-break: break-all;
  display: block;
}
.release .cta { margin-top: 1.15rem; }
.release .release-links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  font-family: var(--display);
  font-size: var(--t-xs);
  font-stretch: 104%;
  margin-top: .9rem;
}
.release .setup {
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
  color: var(--slate);
}
.release .setup ol { padding-left: 1.3rem; margin-top: .55rem; }
.release .setup li { margin-bottom: .4rem; font-size: var(--t-sm); }
.release .setup > h4 { color: var(--navy); }
.release .verify { margin-top: 1.1rem; }
.release .verify code {
  display: block;
  font-size: var(--t-xs);
  background: #fff;
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  padding: .5rem .65rem;
  margin-top: .35rem;
  overflow-x: auto;
  color: var(--navy);
}
.release-spacer { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.contribution-form { margin-top: 2rem; max-width: 42rem; }
/* A form group is not a layout column; it sets its own internal rhythm. */
.contribution-form .field > * + * { margin-top: 0; }
.field-group, .contribution-form .field { margin-bottom: 1.7rem; }
.contribution-form .field > label, .field-group > label {
  display: block;
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 600;
  font-stretch: 104%;
  color: var(--navy);
  margin-bottom: .5rem;
}
.contribution-form input, .contribution-form textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: var(--t-base);
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--slate);
  border-radius: 3px;
  padding: .75rem .85rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.contribution-form input:hover, .contribution-form textarea:hover { border-color: var(--navy); }
.contribution-form input:focus, .contribution-form textarea:focus {
  border-color: var(--shallows-deep);
  box-shadow: 0 0 0 3px rgba(13, 115, 104, .16);
}
.contribution-form textarea { resize: vertical; min-height: 18rem; line-height: 1.65; }
.field-note { font-size: var(--t-sm); color: var(--slate); margin-top: .5rem; font-style: italic; }

.consent {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  font-size: var(--t-base);
  line-height: 1.6;
  margin-block: 1.7rem;
  max-width: 52ch;
}
.consent input {
  margin-top: .35rem;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  accent-color: var(--sandstone);
}
.contribution-form > .cta { margin-bottom: .9rem; }
.honey { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-message {
  background: var(--paper);
  border-left: 3px solid var(--sandstone);
  border-radius: 0 2px 2px 0;
  padding: 1.4rem 1.7rem;
  margin-block: 1.75rem;
  max-width: 42rem;
}
.form-message h3 { font-size: var(--t-base); margin-bottom: .5rem; }
.form-message p { color: var(--slate); font-size: var(--t-base); }

.review-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

/* The editor's status filter. */
.status-nav {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  font-family: var(--display);
  font-size: var(--t-sm);
  font-stretch: 104%;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .9rem;
}
.status-nav a { text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: .35rem; }
.status-nav a:hover { border-bottom-color: var(--tint); }
.status-nav a[aria-current] { color: var(--sandstone); border-bottom-color: var(--sandstone); }

/* The editor queue reuses the index rows. */
.list { list-style: none; border-top: 1px solid var(--rule); margin-top: 1.75rem; }
.list > li { border-bottom: 1px solid var(--rule); padding-block: 1.3rem; }
.list h3 { font-size: var(--t-md); margin-bottom: .35rem; }
.list h3 a { text-decoration: none; }
.list h3 a:hover { text-decoration: underline; }
.list p { color: var(--slate); font-size: var(--t-sm); font-style: italic; margin: 0; }

/* --------------------------------------------------------------------------
   Colophon: a chart's title block
   -------------------------------------------------------------------------- */

footer {
  background: var(--abyss);
  color: var(--tint-soft);
  padding-block: clamp(2.5rem, 4.5vw, 3.75rem);
}
footer .wrap { max-width: var(--sheet-wide); }
.colophon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  border: 1px solid rgba(157, 192, 186, .3);
  border-radius: 2px;
  overflow: hidden;
}
.colophon > div {
  padding: 1.05rem 1.2rem 1.2rem;
  border-right: 1px solid rgba(157, 192, 186, .3);
}
.colophon > div:last-child { border-right: 0; }
.colophon .label { color: var(--tint); }
.colophon p, .colophon a {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: #fff;
  margin-top: .25rem;
}
.colophon a { text-decoration-color: rgba(157, 192, 186, .6); }
.colophon a:hover { color: var(--shallows); }

/* --------------------------------------------------------------------------
   Narrow screens: the rail folds above the field
   -------------------------------------------------------------------------- */

@media (max-width: 68rem) {
  :root { --rail: 11rem; --rail-gap: 2.75rem; }
  .index a { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: .2rem 1.5rem; }
  .rows > li { grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); gap: .3rem 1.5rem; }
  .atlas { grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); }
  .made { grid-template-columns: minmax(0, 1fr) minmax(0, 11rem); }
}

@media (max-width: 56rem) {
  .atlas { grid-template-columns: minmax(0, 1fr); }
  .made { grid-template-columns: minmax(0, 1fr); }
  .made-mark { width: 9rem; justify-self: start; }
  .atlas-view { aspect-ratio: 16 / 9; order: -1; max-width: 34rem; }
}

@media (max-width: 48rem) {
  :root { --band-y: clamp(2.75rem, 8vw, 4rem); }
  .split { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .rail { text-align: left; padding-top: 0; }
  .rail--sticky { position: static; }
  .index a, .atlas .index a, .rows > li, .post-preview {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: .6rem;
  }
  .index .index-name, .rows h3 { margin-bottom: .25rem; }
  .post-preview h3, .post-preview > p:not(.meta), .post-preview > a { grid-column: 1; }
  .post-preview .meta { order: -1; }
  .steps > li { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 1rem; }
  .fields { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
  .fields > li:nth-child(2n) { border-right: 0; }
  .colophon { grid-template-columns: minmax(0, 1fr); }
  .colophon > div { border-right: 0; border-bottom: 1px solid rgba(157, 192, 186, .3); }
  .colophon > div:last-child { border-bottom: 0; }

  /* Masthead collapses to a mark and a menu button. */
  header .wrap { flex-wrap: wrap; gap: 0 1rem; }
  .mark { width: 10rem; max-width: calc(100% - 3.75rem); }
  header.is-docked .mark { width: 8.5rem; }
  header nav {
    flex: 1 0 100%;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1rem;
    border-top: 1px solid rgba(157, 192, 186, .3);
  }
  header nav a {
    min-height: 3rem;
    font-size: var(--t-base);
    border-bottom: 1px solid rgba(157, 192, 186, .3);
    border-left: 2px solid transparent;
    padding-left: .35rem;
  }
  header nav a::after { display: none; }
  header nav a:hover, header nav a[aria-current] { border-left-color: var(--sandstone-lift); }
  header nav a[aria-current] { font-weight: 700; }
  header nav a[aria-current='location'] { border-left-color: var(--shallows); }
  header.nav-ready nav { display: none; }
  header.nav-ready.is-open nav { display: flex; }
  /* An open menu needs its own ground; it is no longer only a scrim. */
  header.is-open { background: rgba(2, 24, 47, .97); }
  .nav-ready .menu-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(157, 192, 186, .4);
    border-radius: 3px;
    background: transparent;
    color: var(--tint-soft);
    cursor: pointer;
    transition: color .2s var(--ease), border-color .2s var(--ease);
  }
  .menu-toggle:hover, .menu-toggle[aria-expanded='true'] { color: #fff; border-color: var(--shallows); }
  .menu-line-top, .menu-line-middle, .menu-line-bottom { transition: transform .28s var(--ease), opacity .2s var(--ease); }
  .is-open .menu-line-top { transform: translateY(5px) rotate(45deg); transform-origin: 12px 7px; }
  .is-open .menu-line-middle { opacity: 0; }
  .is-open .menu-line-bottom { transform: translateY(-5px) rotate(-45deg); transform-origin: 12px 17px; }

  .hero-frame img { height: min(88vh, 38rem); min-height: 30rem; }
  .lake-hero h1 { max-width: 14ch; }
  .hero-foot { justify-content: flex-start; }
  .hero-foot .note { text-align: left; }
  .plate figcaption { flex-direction: column; }
  .releases { grid-template-columns: minmax(0, 1fr); }
  .actions { gap: .85rem 1.25rem; }
  .actions .cta, .actions .secondary { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-frame, .hero-frame img, .plate img { transform: none !important; }
}