/* 8th Town — shared styles
   Palette taken from Plain Paint itself: paper white, pure ink black,
   the icon's orange, and the grey of the app's workspace. */
:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #000000;
  --muted: #4d4d4d;
  --orange: #ff6600;
  --workspace: #6b6b6b;
  --rule: #d9d9d9;
  --measure: 42rem;
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Noto Sans JP", "Segoe UI", "Yu Gothic UI", Meiryo, sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-feature-settings: "palt" 0;
}
html[lang="en"] body { line-height: 1.6; }

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

a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--orange);
    text-decoration-thickness: 2px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 4px; }
a:focus-visible, .button:focus-visible {
  outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px;
}

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper);
        padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- header / footer ---------- */
.site-head, .site-foot, main > section, main > .doc, .app-hero {
  width: min(100% - 2.5rem, var(--measure));
  margin-inline: auto;
}
.site-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.25rem;
}
.brand { font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em; text-decoration: none; }
.lang { display: flex; gap: .25rem; font-size: .9375rem; }
.lang a {
  text-decoration: none; padding: .2rem .55rem; border: 2px solid transparent; border-radius: 8px;
  color: var(--muted);
}
.lang a[aria-current] { color: var(--ink); border-color: var(--ink); font-weight: 700; }
.lang a:not([aria-current]):hover { color: var(--ink); }

.site-foot {
  margin-top: 5rem; padding-block: 2rem 3rem; border-top: 2px solid var(--ink);
  font-size: .9375rem; color: var(--muted);
}
.site-foot p { margin: .25rem 0; }

/* ---------- type ---------- */
h1, h2, h3 { line-height: 1.25; letter-spacing: -.01em; }
h2 { font-size: 1.375rem; font-weight: 800; margin: 3.5rem 0 1rem; }
h3 { font-size: 1.125rem; font-weight: 700; margin: 2rem 0 .5rem; }
p { margin: 0 0 1rem; }
.lead { font-size: 1.1875rem; max-width: 34em; }

/* ---------- top page ---------- */
.hero { padding-top: clamp(2.5rem, 9vw, 6rem); }
.hero h1 {
  font-size: clamp(3.5rem, 15vw, 7.5rem); font-weight: 900; line-height: .95;
  letter-spacing: -.045em; margin: 0;
}
.squiggle {
  display: block; width: clamp(12rem, 52vw, 24rem); height: auto; margin: .4rem 0 1.75rem -.25rem;
  overflow: visible;
}
.squiggle path { fill: none; stroke: var(--orange); stroke-width: 9; stroke-linecap: round; }

.app { display: grid; grid-template-columns: 96px 1fr; gap: 1.25rem; align-items: start; }
.app img { border-radius: 22px; outline: 2px solid var(--ink); outline-offset: -1px; }
.app h3 { margin: 0 0 .25rem; font-size: 1.25rem; }
.app h3 a { text-decoration: none; }
.links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* ---------- app page ---------- */
.app-hero { padding-top: clamp(2rem, 7vw, 4.5rem); }
.app-icon { border-radius: 27px; outline: 2px solid var(--ink); outline-offset: -1px; margin-bottom: 1.5rem; }
.app-hero h1 { font-size: clamp(2.75rem, 10vw, 4.5rem); font-weight: 900; letter-spacing: -.035em; margin: 0 0 1rem; }

.button {
  display: inline-block; background: var(--orange); color: var(--ink); font-weight: 700;
  text-decoration: none; padding: .75rem 1.4rem; border: 2px solid var(--ink); border-radius: 12px;
}
.button:hover { background: var(--ink); color: var(--paper); }

/* the screenshot sits in a band the same grey as the app's workspace */
.workspace {
  margin: 3rem 0 0; background: var(--workspace);
  padding: clamp(1rem, 4vw, 3rem) clamp(.75rem, 4vw, 3rem);
}
.workspace img { width: min(100%, 60rem); margin-inline: auto; box-shadow: 0 0 0 2px var(--ink); }

.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.plain li:first-child { border-top: 1px solid var(--rule); }
.plain strong { display: block; font-size: 1.0625rem; margin-bottom: .15rem; }

.shot { margin: 0 0 2rem; }
.shot img { box-shadow: 0 0 0 2px var(--ink); }
.shot figcaption { font-size: .9375rem; color: var(--muted); margin-top: .5rem; }

.dots { padding-left: 1.25em; margin: 0 0 1rem; }
.dots li::marker { color: var(--orange); }

/* ---------- documents ---------- */
.doc { padding-top: clamp(1.5rem, 5vw, 3rem); }
.doc h1 { font-size: clamp(1.875rem, 6vw, 2.5rem); font-weight: 900; margin: 0 0 1.25rem; }
.doc h2 { margin-top: 2.75rem; }
.crumb { font-size: .9375rem; margin-bottom: .75rem; }
.meta { color: var(--muted); font-size: .9375rem; }
.pairs { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; margin: 0 0 1rem; }
.pairs dt { font-weight: 700; }
.pairs dd { margin: 0; }

@media (max-width: 30rem) {
  .app { grid-template-columns: 72px 1fr; }
  .app img { width: 72px; height: 72px; border-radius: 16px; }
  .pairs { grid-template-columns: 1fr; gap: 0; }
  .pairs dd { margin-bottom: .6rem; }
}