/* Gutter site. Plain CSS, no build step.
   The layout is a comic page: content sits in inked panels, and the gap
   between panels (the gutter) is the same everywhere. */

@font-face {
  font-family: "Bangers";
  src: url("assets/Bangers-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --paper: #EFE4CC;
  --panel: #F8F0DD;
  --ink: #1B1720;
  --blue: #0A84FF;       /* fills only; too light for text on paper */
  --link: #0862BE;       /* text links on paper and cream */
  --caption: #FFD23F;    /* the app's caption-box yellow */
  --muted: #4E4656;
  --gutter: 14px;
  --rule: 3px;
  --display: "Bangers", "Arial Narrow", Impact, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1B1720;
    --panel: #29232F;
    --ink: #F8F0DD;
    --link: #6CB6FF;
    --muted: #C9BFD0;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1.0625rem/1.6 var(--body);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

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

.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: var(--gutter);
  top: var(--gutter);
  background: var(--panel);
  padding: 8px 12px;
  z-index: 2;
}

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--gutter);
}

/* Header */

.masthead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 10px 0 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  font: 2rem/1 var(--display);
  letter-spacing: 0.03em;
  margin-right: auto;
}
.brand img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  /* The mark's tile is ink: the ring keeps its edge on a dark page. */
  box-shadow: 0 0 0 2px var(--ink);
}

.masthead nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.masthead nav a {
  color: var(--ink);
  font-weight: 600;
  padding: 6px 0;
}
.masthead nav a[aria-current="page"] {
  text-decoration-thickness: 3px;
  text-decoration-color: var(--blue);
}

/* Panels */

.strip {
  display: grid;
  gap: var(--gutter);
  margin-bottom: var(--gutter);
}

.panel {
  background: var(--panel);
  border: var(--rule) solid var(--ink);
  padding: clamp(18px, 3vw, 30px);
  min-width: 0;
}

.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

.panel.bare { padding: 0; overflow: hidden; }
.panel.blue { background: var(--blue); color: #1B1720; }
.panel.blue a { color: #1B1720; }
.panel.ink { background: #1B1720; color: #F8F0DD; border-color: #1B1720; }

@media (prefers-color-scheme: dark) {
  .panel.ink { border-color: var(--ink); }
}

@media (min-width: 760px) {
  .strip.hero { grid-template-columns: 5fr 7fr; }
  .strip.two { grid-template-columns: 1fr 1fr; }
  .strip.three { grid-template-columns: repeat(3, 1fr); }
  .strip.wide-left { grid-template-columns: 7fr 5fr; }
}

/* Type */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.7rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.5rem; }

p, ul, ol { margin: 0 0 1em; max-width: 68ch; }
ul, ol { padding-left: 1.2em; }
li { margin-bottom: 0.35em; }

.lede { font-size: 1.2rem; line-height: 1.5; }
.note { color: var(--muted); font-size: 0.95rem; }

/* The narrator's box, as on a comic page. Used for the hero and for
   screenshot captions only. */
.caption {
  display: inline-block;
  background: var(--caption);
  color: #1B1720;
  border: var(--rule) solid #1B1720;
  font: 1.25rem/1.1 var(--display);
  letter-spacing: 0.03em;
  padding: 6px 12px 5px;
  margin: 0 0 18px;
}

/* A screenshot fills its panel and is cropped from the top left, where
   the app's content starts. */
.panel.bare { position: relative; }
figure { margin: 0; height: 100%; }
figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
figure figcaption.caption {
  position: absolute;
  left: -3px;
  bottom: -3px;
  margin: 0;
  font-size: 1.05rem;
}

/* Buttons */

.button {
  display: inline-block;
  background: var(--blue);
  color: #1B1720;
  border: var(--rule) solid #1B1720;
  box-shadow: 5px 5px 0 #1B1720;
  font: 1.6rem/1 var(--display);
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 14px 22px 12px;
  margin: 6px 6px 12px 0;
}
.button:hover,
.button:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 #1B1720;
}
.button.off {
  background: transparent;
  color: var(--ink);
  border-style: dashed;
  border-color: var(--ink);
  box-shadow: none;
  transform: none;
  cursor: default;
}

@media (prefers-color-scheme: dark) {
  .button { box-shadow: 5px 5px 0 #F8F0DD; }
  .button:hover, .button:focus-visible { box-shadow: 3px 3px 0 #F8F0DD; }
  .button.off { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .button:hover, .button:focus-visible { transform: none; }
}

.price {
  font: 2.6rem/1 var(--display);
  margin: 0 0 0.3em;
}

table { border-collapse: collapse; width: 100%; margin: 0 0 1em; }
th, td {
  text-align: left;
  vertical-align: top;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
}
th { font-weight: 700; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  padding: 1px 5px;
}

/* Footer */

.colophon {
  padding: 18px 0 30px;
  font-size: 0.95rem;
  color: var(--muted);
}
.colophon nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-bottom: 14px;
}
.colophon nav a { color: var(--ink); font-weight: 600; }
.colophon p { max-width: 80ch; margin-bottom: 0.6em; }