/* Gneiss Work site. The page is the pit: the title screen at the surface,
   then the ten strata in order, each walled with its own rock.
   Text sizes are multiples of 10px so the pixel fonts land on whole pixels.
   Fonts, panels, buttons and walls are generated by tools/build_site.py. */

@font-face {
  font-family: "Gneiss Carve";
  src: url("fonts/gneiss-carve.woff2") format("woff2");
  font-display: block;
}

@font-face {
  font-family: "Ark Pixel";
  src: url("fonts/ark-pixel-10.woff2") format("woff2");
  font-display: block;
}

:root {
  /* scripts/ui_palette.nim */
  --ink: #ede6d6;
  --dim: #b3ada3;
  --heading: #edd69e;
  --gold: #ffcc66;
  --good: #99eb8c;
  --night: #120f14;
  --outline: #080608;
  --focus: #ffe68c;
  --amber: #5c4a2b;
  --bedrock: #3d3a42;

  --body: "Ark Pixel", ui-monospace, monospace;
  --display: "Gneiss Carve", "Ark Pixel", ui-monospace, monospace;
  /* The one-pixel outline the game draws round text that sits on the world. */
  --rim: 2px 0 var(--outline), -2px 0 var(--outline), 0 2px var(--outline), 0 -2px var(--outline),
    2px 2px var(--outline), -2px 2px var(--outline), 2px -2px var(--outline), -2px -2px var(--outline);
  --gutter: 24px;
  color-scheme: dark;
}

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

html {
  background: var(--night);
  scrollbar-color: #5a5450 var(--night);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  color: var(--ink);
  font: 20px/30px var(--body);
  -webkit-font-smoothing: none;
  font-smooth: never;
}

::selection {
  background: var(--amber);
  color: var(--ink);
}

h1,
h2,
h3,
p,
ul,
dl,
dd,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 30;
}

.skip:focus {
  top: 12px;
}

.wrap {
  width: min(1200px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ---------------------------------------------------------------- skin */

.panel,
.card,
.tip {
  border: 12px solid transparent;
  image-rendering: pixelated;
}

.panel {
  border-image: url("ui/panel.png") 12 fill stretch;
}

.card {
  border-image: url("ui/card.png") 12 fill stretch;
}

.tip {
  border-image: url("ui/tooltip.png") 12 fill stretch;
}

.btn {
  display: inline-block;
  border: solid transparent;
  border-width: 8px 8px 12px;
  border-image: url("ui/stone.png") 8 8 12 8 fill stretch;
  image-rendering: pixelated;
  padding: 2px 16px;
  background: none;
  color: var(--ink);
  font: 20px/30px var(--display);
  text-align: center;
  text-decoration: none;
  text-shadow: var(--rim);
  cursor: pointer;
}

.btn:hover {
  border-image-source: url("ui/stone-hover.png");
  color: var(--ink);
}

.btn:active {
  border-image-source: url("ui/stone-pressed.png");
}

.btn-go {
  border-image-source: url("ui/go.png");
}

.btn-go:hover {
  border-image-source: url("ui/go-hover.png");
}

.btn-go:active {
  border-image-source: url("ui/go-pressed.png");
}

/* ---------------------------------------------------------------- HUD */

.hud {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 20;
  display: grid;
  border: 12px solid transparent;
  border-image: url("ui/panel.png") 12 fill stretch;
  image-rendering: pixelated;
  padding: 0 4px;
  font: 20px/26px var(--body);
  pointer-events: none;
}

.hud-cta {
  position: fixed;
  right: 16px;
  top: 12px;
  z-index: 20;
}

.hud-cta[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- surface */

/* The title view keeps its own shape, so the wordmark is never cropped; the
   menu hangs over the lip of the pit into the first stratum. */
.surface {
  position: relative;
  z-index: 2;
  aspect-ratio: 1920 / 840;
  max-height: 100svh;
  background: #45642a;
}

.surface-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 0;
}

/* The pit's shadow gathers at the bottom edge, where the page goes underground. */
.surface::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 140px;
  background: linear-gradient(transparent, rgb(18 15 20 / 0.7));
  pointer-events: none;
}

.title-menu {
  position: absolute;
  right: clamp(16px, 4vw, 80px);
  top: 67%;
  z-index: 2;
  display: grid;
  gap: 12px;
  width: min(460px, 100% - 32px);
  padding: 12px 8px 8px;
}

.tagline {
  color: var(--heading);
  font: 40px/50px var(--display);
  text-shadow: var(--rim);
  text-wrap: balance;
}

.title-menu .btn {
  display: block;
}

.status {
  color: var(--dim);
  text-align: center;
}

.hold {
  position: absolute;
  left: 16px;
  bottom: 24px;
  z-index: 2;
}

/* ---------------------------------------------------------------- strata */

.stratum {
  --dark: 0.62;
  position: relative;
  padding-block: 140px 120px;
  background:
    linear-gradient(rgb(18 15 20 / var(--dark)), rgb(18 15 20 / var(--dark))),
    var(--wall) 0 0 / 1024px 1024px;
  image-rendering: pixelated;
}

/* Room for the title menu where it hangs below the surface. */
.stratum:first-child {
  padding-top: 290px;
}

/* Lantern light on the wall behind a picture, once daylight has given up. */
.stratum.lit {
  background:
    radial-gradient(720px 520px at var(--lamp, 68%) 46%, rgb(255 176 84 / 0.2), transparent 72%),
    linear-gradient(rgb(18 15 20 / var(--dark)), rgb(18 15 20 / var(--dark))),
    var(--wall) 0 0 / 1024px 1024px;
}

/* A Bedrock Seal between two strata: eight segments, as in the pit. */
.seal {
  height: 32px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 4px), var(--outline) calc(12.5% - 4px) 12.5%),
    linear-gradient(#5a5661 0 4px, var(--bedrock) 4px 24px, #29272d 24px 28px, var(--outline) 28px);
}

h2,
.statement {
  color: var(--heading);
  font: 40px/50px var(--display);
  text-shadow: var(--rim);
  text-wrap: balance;
}

.statement {
  max-width: 24ch;
}

.opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 140px;
}

.copy {
  display: grid;
  gap: 16px;
  padding: 8px 8px 12px;
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 32px 48px;
  align-items: center;
}

.feature.flip {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.feature.flip > .shot {
  order: 2;
}

.feature > .words {
  display: grid;
  gap: 24px;
}

/* A wide picture with its words set into the lower corner. */
.feature.wide {
  grid-template-columns: minmax(0, 1fr);
}

.feature.wide > .words {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 16px;
}

.shot img {
  width: 100%;
  height: auto;
}

.shot figcaption {
  padding: 10px 4px 0;
  color: var(--heading);
}

/* ---------------------------------------------------------------- hats */

.hats {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 32px 64px;
  align-items: start;
}

.hats > .words {
  display: grid;
  gap: 24px;
}

.rack {
  display: grid;
  grid-template-columns: repeat(6, 96px);
  gap: 8px;
  justify-content: start;
}

.hat {
  width: 96px;
  height: 96px;
  padding: 0;
  border: 12px solid transparent;
  border-image: url("ui/inset.png") 12 fill stretch;
  image-rendering: pixelated;
  background: none;
  cursor: pointer;
}

.hat img {
  width: 72px;
  height: 72px;
  image-rendering: pixelated;
}

.hat:hover {
  border-image-source: url("ui/card.png");
}

.hat[aria-pressed="true"] {
  border-image-source: url("ui/card-gold.png");
}

.lore {
  display: grid;
  gap: 4px;
  min-height: 150px;
  margin-top: 16px;
  padding: 4px 8px 8px;
  align-content: start;
}

.lore strong {
  color: var(--gold);
  font: 20px/30px var(--display);
}

/* ---------------------------------------------------------------- notes */

.notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.notes > div {
  display: grid;
  gap: 24px;
}

.controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 24px;
}

.controls dt {
  color: var(--heading);
}

.ledger {
  display: grid;
  gap: 12px;
  max-width: 62ch;
}

.ledger li {
  padding-left: 28px;
  background: linear-gradient(var(--good), var(--good)) 4px 12px / 8px 8px no-repeat;
}

.also {
  display: grid;
  gap: 32px;
  justify-items: start;
}

/* ---------------------------------------------------------------- heart */

.heart {
  padding-block: 160px 140px;
  text-align: center;
}

.heart .wrap {
  display: grid;
  gap: 40px;
  justify-items: center;
}

.heart .statement {
  max-width: 26ch;
  font-size: 60px;
  line-height: 70px;
}

.heart .copy {
  max-width: 60ch;
  text-align: left;
}

.heart .btn {
  padding: 6px 28px;
}

.foot {
  padding-block: 32px 40px;
  background: var(--night);
  color: var(--dim);
}

.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  align-items: center;
}

.foot .mark {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-right: auto;
  color: var(--ink);
  font-family: var(--display);
  text-decoration: none;
}

.foot .mark img {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
}

/* ---------------------------------------------------------------- reading pages */

.page {
  min-height: 100svh;
  background:
    linear-gradient(rgb(18 15 20 / 0.8), rgb(18 15 20 / 0.8)),
    url("walls/gneiss_heart.png") 0 0 / 1024px 1024px;
  image-rendering: pixelated;
}

.page-head {
  padding-block: 24px;
}

.page-head .mark {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  color: var(--ink);
  font: 30px/40px var(--display);
  text-decoration: none;
  text-shadow: var(--rim);
}

.page-head .mark img {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
}

.sheet {
  width: min(800px, 100% - 2 * var(--gutter));
  margin: 24px auto 96px;
  padding: 20px 20px 28px;
}

.sheet h1 {
  color: var(--heading);
  font: 40px/50px var(--display);
  text-shadow: var(--rim);
}

.sheet h2 {
  margin-top: 48px;
  font-size: 30px;
  line-height: 40px;
}

.sheet p,
.sheet ul {
  margin-top: 16px;
  max-width: 68ch;
}

.sheet ul {
  display: grid;
  gap: 8px;
}

.sheet li {
  padding-left: 28px;
  background: linear-gradient(var(--heading), var(--heading)) 4px 12px / 8px 8px no-repeat;
}

.sheet .dated {
  color: var(--dim);
}

.short {
  margin-top: 24px;
  border: 12px solid transparent;
  border-image: url("ui/card-gold.png") 12 fill stretch;
  padding: 4px 8px 8px;
}

.short p {
  margin-top: 0;
}

.short strong {
  color: var(--gold);
  font-family: var(--display);
  font-weight: normal;
}

/* ---------------------------------------------------------------- small screens */

@media (max-width: 900px) {
  :root {
    --gutter: 12px;
  }

  .hud-cta {
    display: none;
  }

  /* The readout becomes the game's top bar, once the page is below ground. */
  .hud {
    display: none;
    left: 0;
    right: 0;
    top: 0;
    grid-auto-flow: column;
    justify-content: space-between;
    border: 0;
    border-bottom: 2px solid var(--outline);
    border-image: none;
    padding: 4px var(--gutter);
    background: var(--night);
  }

  .underground .hud {
    display: grid;
  }

  .surface {
    aspect-ratio: auto;
    max-height: none;
    padding-bottom: 24px;
    background: var(--night);
  }

  .surface-view {
    position: static;
    height: 46svh;
    min-height: 300px;
  }

  .surface::after {
    display: none;
  }

  .title-menu {
    position: relative;
    right: auto;
    top: auto;
    width: auto;
    margin: -28px var(--gutter) 0;
  }

  .hold {
    top: calc(max(46svh, 300px) - 92px);
    bottom: auto;
    left: var(--gutter);
  }

  .tagline,
  h2,
  .statement,
  .sheet h1 {
    font-size: 30px;
    line-height: 40px;
  }

  .heart .statement {
    font-size: 40px;
    line-height: 50px;
  }

  .stratum,
  .stratum:first-child {
    padding-block: 88px 72px;
  }

  .heart {
    padding-block: 104px 88px;
  }

  .opening,
  .feature,
  .feature.flip,
  .feature.wide > .words,
  .hats,
  .notes {
    grid-template-columns: minmax(0, 1fr);
  }

  .opening {
    gap: 24px;
    margin-bottom: 88px;
  }

  .feature.flip > .shot {
    order: 0;
  }

  .feature.wide > .words {
    gap: 24px;
  }

  .notes {
    gap: 72px;
  }

  .rack {
    grid-template-columns: repeat(3, 96px);
    justify-content: space-between;
  }

  .lore {
    min-height: 0;
  }

  .controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .controls dd {
    margin-bottom: 12px;
  }

  .sheet {
    padding: 8px 8px 20px;
  }
}