/* ============================================================
   Sea Legs: Walking Game
   Landing page only. Loads after style.css, which supplies the
   palette, the type and everything shared with the policy pages.
   ============================================================ */

/* ---------------- marginalia ----------------
   The app draws these same engravings on the chart. They are masks, not
   pictures: only the ink coverage is shipped, so each one takes the page's
   own ink color and needs no second copy for the night watch. They sit
   behind everything, in column space that is otherwise empty. */
.deco {
  position: absolute;
  /* behind the section's own text, not merely behind the page: each band is
     a stacking context, so -1 keeps the ornament off the words above it. */
  z-index: -1;
  pointer-events: none;
  background-color: var(--deco);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-position: center;  mask-position: center;
}

/* corner and column ornaments: only where a column is genuinely empty */
.deco--corner { display: none; }
@media (min-width: 62rem) {
  .deco--corner { display: block; }
}

.deco--compass {
  top: 1.2rem; right: -2.2rem;
  width: clamp(96px, 11vw, 138px); aspect-ratio: 1;
  -webkit-mask-image: url("art/deco/compass.png"); mask-image: url("art/deco/compass.png");
}
.deco--dragon {
  top: auto; bottom: 1.5rem; right: .5rem;
  width: clamp(120px, 15vw, 186px); aspect-ratio: 150 / 160;
  -webkit-mask-image: url("art/deco/dragon.png"); mask-image: url("art/deco/dragon.png");
}
.deco--lighthouse {
  top: 3.4rem; right: 2.5rem;
  width: clamp(78px, 9vw, 112px); aspect-ratio: 110 / 199;
  -webkit-mask-image: url("art/deco/lighthouse.png"); mask-image: url("art/deco/lighthouse.png");
}
.deco--kraken {
  bottom: -.5rem; right: -1rem;
  width: clamp(140px, 17vw, 210px); aspect-ratio: 150 / 156;
  -webkit-mask-image: url("art/deco/kraken.png"); mask-image: url("art/deco/kraken.png");
}

/* a rule of waves, in flow, at every width */
.deco--waves {
  position: static;
  display: block;
  width: 100%;
  height: clamp(46px, 9vw, 74px);
  margin-bottom: 1.6rem;
  -webkit-mask-image: url("art/deco/waves.png"); mask-image: url("art/deco/waves.png");
  -webkit-mask-size: auto 100%;                  mask-size: auto 100%;
}
@media (min-width: 62rem) {
  .band > .deco--waves { grid-column: 1 / -1; margin-bottom: .4rem; }
}

/* ---------------- section frame ---------------- */

.band { padding: 3.2rem 0 0; position: relative; }
.band > .text { max-width: var(--measure); }
.band > .text > * + * { margin-top: 1.05rem; }

@media (min-width: 62rem) {
  .band {
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
    gap: 0 clamp(2.5rem, 4vw, 3.6rem);
    align-items: start;
    padding-top: 4.4rem;
  }
  .band > .label { grid-column: 1 / -1; }
  .band > .text  { grid-column: 1; }
  .band > .plates{ grid-column: 2; }

  /* Sections carrying no plate gave their whole second column to nothing.
     They now run to a wider first column: the table and the ledger get room,
     the prose inside them stays at a readable measure. */
  .band.wide { grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); }
  .band.wide > .text { max-width: 46rem; }
  .band.wide h2 { max-width: 32ch; }
  .band.wide .ledger dd { max-width: 34rem; }
}

.opening { padding-top: 2.4rem; }
@media (min-width: 62rem) { .opening { padding-top: 3.4rem; align-items: start; } }

.under-tray {
  font-family: var(--f-mono);
  font-size: .68rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: .85rem;
  max-width: 46ch;
}

/* ---------------- plates ---------------- */

figure { margin: 0; }

.plate {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  filter: var(--shot-filter);
}

/* framed plates: illustrations in a book */
.plate--framed {
  aspect-ratio: 203 / 440;
  border: 1px solid var(--plate-edge);
  border-radius: 5px;
  box-shadow: var(--plate-shadow);
  background-position: center top;
}
/* screenshots that carry the phone status bar get it cropped away */
.plate--cropped {
  aspect-ratio: 203 / 404;
  background-position: 50% 67%;
}

.plate--map    { background-image: url("art/shots/chart.jpg"); }
.plate--hub    { background-image: url("art/shots/port-hub.jpg"); }
.plate--market { background-image: url("art/shots/market.jpg"); }
.plate--sea    { background-image: url("art/shots/ship-and-island.jpg"); }

figcaption {
  font-family: var(--f-mono);
  font-size: .68rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: .7rem;
  max-width: 40ch;
}
figcaption b {
  color: var(--ink);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .64rem;
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-top: 1.9rem;
  /* the screenshots are 203 px wide. never scale them past that if it can
     be helped: a soft screenshot reads as a broken asset. */
  max-width: 24rem;
}
.pair figcaption { max-width: none; }
@media (min-width: 62rem) { .pair { margin-top: 0; max-width: 27rem; } }

.single { margin-top: 1.9rem; max-width: 15.5rem; }
@media (min-width: 62rem) { .single { margin-top: 0; max-width: 16.5rem; } }

/* ---------------- the chart: no frame, it dissolves into the page ---------------- */

.chart { margin-top: 2.2rem; }
@media (min-width: 62rem) { .chart { margin-top: 0; } }

.chart .plate {
  /* cropped to the charted archipelago: the phone's status bar and the empty
     fog below the last island are not information. */
  aspect-ratio: 203 / 276;
  background-position: 50% 15%;
  width: min(20rem, 100%);
  margin: 0 auto;
  filter: var(--chart-filter);
  /* The one effect on this page. The chart does not sit in a frame: it is a
     patch of water somebody has walked, and it dissolves into the fog that
     the rest of the page is made of. One gradient, no script, no image. */
  -webkit-mask-image: radial-gradient(54% 54% at 50% 47%, #000 var(--clear-in), transparent var(--clear-out));
          mask-image: radial-gradient(54% 54% at 50% 47%, #000 var(--clear-in), transparent var(--clear-out));
}
.chart figcaption {
  margin-top: .2rem;
  text-align: center;
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 62rem) {
  .chart .plate { width: 100%; max-width: 26rem; margin: 0; }
  .chart figcaption { text-align: left; margin-left: 0; margin-right: 0; max-width: 36ch; }
}

/* ---------------- the table of equivalents ---------------- */

/* No leaders and no row rules: the graticule is already ruling this page,
   and a second set of lines fights it. Space and type do the separating. */
.equiv { margin: 1.9rem 0 0; }
.equiv .row { padding: .82rem 0; }

.equiv dt {
  display: block;
  font-family: var(--f-mono);
  font-size: .61rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The change of face, size and color already carries the translation.
   Italic on top of that was a fourth signal saying the same thing. */
.equiv dd {
  margin: .2rem 0 0;
  font-family: var(--f-display);
  font-size: 1.26rem;
  line-height: 1.3;
  color: var(--ink);
}

@media (min-width: 34rem) {
  .equiv .row {
    display: grid;
    grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr);
    gap: 0 1.8rem;
    align-items: baseline;
  }
  .equiv dd { margin-top: 0; }
}

/* ---------------- the ledger (location, plainly) ---------------- */

.ledger { margin: 0; }
.ledger .row { padding: .72rem 0; border-top: 1px solid var(--rule-hair); }
.ledger .row:first-child { border-top: 0; padding-top: 0; }
.ledger dt {
  font-family: var(--f-mono);
  font-size: .61rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ledger dd {
  margin: .22rem 0 0;
  font-size: .95rem;
  line-height: 1.5;
}
@media (min-width: 34rem) {
  .ledger .row {
    display: grid;
    grid-template-columns: 11.5rem minmax(0, 1fr);
    gap: 0 1.3rem;
  }
  .ledger dt { padding-top: .18em; }
  .ledger dd { margin-top: 0; }
}

/* ---------------- closing ---------------- */

.closing {
  position: relative;
  margin-top: 5rem;
  padding: 0;
}
.closing h2 { max-width: 18ch; }
.closing .tray { margin-top: 1.6rem; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  margin-top: 1.7rem;
  padding: 0;
  list-style: none;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.facts li { display: flex; align-items: baseline; gap: .45rem; }
.facts li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--gold-fill);
  flex: none;
  transform: translateY(-1px);
}