/* Hinge Alley: the whole site's styles.

   One file for every page. The only pictures are the app icon, drawn by scripts/make-icons.sh from the
   icon the game has committed, and three of the store's own screenshots, copied by
   scripts/make-shots.sh; everything else is the family's arcade cabinet drawn in CSS, on a
   boardwalk at night. A plum navy cabinet, a row of
   warm bulbs lit and unlit in turn, the name in neon (HINGE in the family's cyan, ALLEY in boardwalk
   pink), and a strip of maple lane edged in brass along the bottom of the machine.

   Two kinds of surface, on purpose:
   - THE MACHINE. The cabinet and every page's bar are a dark object whatever the reader's setting, as
     an arcade cabinet is. Their colours are fixed, never themed.
   - THE PAGE. Everything else follows the reader's light or dark preference. Light is defined in
     full on bare :root, so a browser that reports no preference still gets every colour; dark
     redefines the same tokens.

   Type is the system's, rounded for display, through local font stacks only. No web font is loaded,
   no script runs anywhere on this site, and nothing here is fetched from anybody else. */

:root {
  --page:       #F7F2E8;
  --page-2:     #EFE4D0;
  --line:       rgba(30,22,51,.16);
  --ink:        #1E1633;
  --ink-soft:   #554A66;
  --head:       #1E1633;
  --accent:     #A61D73;   /* boardwalk pink at a weight that reads on cream (5.5:1) */
  --link:       #951A68;
  --link-hover: #1E1633;
  --focus:      #951A68;   /* the keyboard focus ring on the page: 6.3:1 (the neon is 1.2:1 on cream) */

  /* The machine. Never redefined below. */
  --cab:        #120D22;
  --cab-panel:  #1E1633;
  --cab-edge:   #352A52;
  --cab-ink:    #F4EEE6;
  --cab-soft:   #C9BFD6;
  --neon:       #2EE6FF;
  --pink:       #FF4FB8;
  --bulb:       #FFC860;
  --bulb-core:  #FFF4D6;
  --maple:      #D9A566;
  --maple-dark: #B97F43;
  --brass-lit:  #B08D57;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page:       #120D22;
    --page-2:     #171029;
    --line:       rgba(176,141,87,.24);
    --ink:        #F4EEE6;
    --ink-soft:   #C3B9CC;
    --head:       #F4EEE6;
    --accent:     #FF4FB8;
    --link:       #FF9AD5;
    --link-hover: #2EE6FF;
    --focus:      #2EE6FF;
  }
}

/* ---- Furniture ---------------------------------------------------------------------- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
        system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--page), var(--page-2));
  background-color: var(--page);
  /* A long address in running text must never push a phone into sideways scrolling. */
  overflow-wrap: break-word;
}
main { flex: 1 0 auto; }

h1, .brand, .pill {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI",
               system-ui, sans-serif;
}

a { color: var(--link); text-decoration-thickness: .07em; text-underline-offset: .18em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
/* The machine is dark whatever the setting, so a focus ring on it is always the neon. */
.bar :focus-visible, .cabinet :focus-visible { outline-color: var(--neon); }

/* One gutter rule for the whole site: side padding lives here and nowhere else. */
.wrap { width: 100%; max-width: 980px; margin: 0 auto; padding-inline: 24px; }
.wrap.narrow { max-width: 740px; }

/* ---- The machine ------------------------------------------------------------------------ */

/* A row of cabinet bulbs, lit and unlit in turn, drawn with gradients rather than an image.
   Static: a page has no business animating. */
.lights {
  height: 16px;
  background:
    radial-gradient(circle at 13px 8px, var(--bulb-core) 0 1.6px, var(--bulb) 2.6px,
                    rgba(255,200,96,.32) 4.6px, transparent 7px) 0 0 / 52px 16px repeat-x,
    radial-gradient(circle at 39px 8px, #5A4626 0 2.4px, #3B2E1A 3.6px, transparent 4.6px)
                    0 0 / 52px 16px repeat-x,
    var(--cab);
}

/* A maple lane, its boards running the length of the page, edged in brass: the alley the machine
   stands on. */
.ground {
  height: 22px;
  background:
    linear-gradient(180deg, #E2C58E 0 1px, var(--brass-lit) 1px 4px, #6E5530 4px 5px, transparent 5px),
    repeating-linear-gradient(180deg, var(--maple) 0 5px, var(--maple-dark) 5px 6px);
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.ground.thin { height: 10px; }

.cabinet {
  color: var(--cab-ink);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(255,200,96,.10), transparent 70%),
    radial-gradient(60% 70% at 50% 100%, rgba(255,79,184,.12), transparent 70%),
    linear-gradient(180deg, var(--cab-panel), var(--cab) 75%);
  border-bottom: 1px solid var(--cab-edge);
}
.marquee {
  text-align: center;
  padding-block: clamp(48px, 10vw, 104px);
}

/* The name as the cabinet's neon sign. */
.sign {
  margin: 0;
  font-size: clamp(40px, 10.5vw, 88px); font-weight: 900; line-height: 1.02; letter-spacing: .015em;
  text-transform: uppercase;
}
.hinge {
  color: var(--neon);
  text-shadow: 0 0 3px #C8F8FF, 0 0 14px rgba(46,230,255,.85), 0 0 38px rgba(46,230,255,.5);
}
.word {
  color: var(--pink);
  text-shadow: 0 0 3px #FFD0EC, 0 0 14px rgba(255,79,184,.85), 0 0 38px rgba(255,40,160,.5);
}

.lede {
  margin: 26px auto 0; max-width: 44ch;
  font-size: clamp(17px, 2.6vw, 20px); color: var(--cab-soft);
}
.lede strong { color: var(--cab-ink); }

.pill {
  display: inline-block; margin: 28px 0 0; padding: 9px 18px;
  border: 1px solid rgba(46,230,255,.55); border-radius: 999px;
  background: rgba(46,230,255,.08);
  font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--neon);
}
.status { margin: 16px 0 0; font-size: 18px; }
.status b { color: var(--bulb); }

/* ---- The page ----------------------------------------------------------------------------- */

.note { padding-block: 36px 8px; text-align: center; }
.note p { margin: 0; color: var(--ink-soft); }

/* A link for keyboards past the bar, out of sight until it has focus. */
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  padding: 8px 14px; border-radius: 8px;
  background: var(--cab-panel); color: var(--cab-ink); outline-color: var(--neon);
}
.skip:focus { top: 12px; }

/* Every inner page's bar: the machine's sign, small, with the icon and the three pages. */
.bar { padding-block: 12px; background: var(--cab); }
.bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
             gap: 8px 20px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 19px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none;
}
.brand .hinge, .brand .word { text-shadow: none; }
.brand:hover .word { text-decoration: underline; }
.mark { width: 34px; height: 34px; border-radius: 8px; display: block; }
.bar nav { display: flex; gap: 18px; font-size: 15.5px; font-weight: 600; }
.bar nav a { color: var(--cab-soft); text-decoration: none; }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--cab-ink); }
.bar nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--pink);
                                  text-decoration-thickness: 2px; }

/* The icon in the marquee, as the home screen shows it: rounded, lit from behind. */
.hero-icon {
  display: block; margin: 0 auto 26px; width: 128px; height: 128px; border-radius: 29px;
  box-shadow: 0 0 0 1px rgba(176,141,87,.5), 0 10px 40px rgba(255,79,184,.28);
}

/* The home page's sections, on the page surface. */
.feature { max-width: 740px; margin: 0 auto; padding-top: 34px; }
.feature h2, main.doc h2 {
  margin: 0 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--head);
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI",
               system-ui, sans-serif;
}
.feature p { margin: 0 0 12px; color: var(--ink-soft); }
.cards { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px;
         grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cards li {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  border-left: 4px solid var(--accent); color: var(--ink-soft); line-height: 1.45;
}
.cards strong { display: block; color: var(--head); }

main.doc { padding-block: 40px 12px; }
main.doc h1 { margin: 0 0 6px; font-size: clamp(30px, 6.4vw, 42px); font-weight: 900;
              letter-spacing: -.02em; color: var(--head); }
main.doc .updated { margin: 0 0 22px; font-size: 15px; color: var(--accent); font-weight: 600; }
main.doc p, main.doc li, main.doc dd { color: var(--ink-soft); }
main.doc h2 { margin-top: 34px; scroll-margin-top: 16px; }
main.doc ul { padding-left: 1.2em; }
main.doc li { margin-bottom: 6px; }
main.doc dt { font-weight: 700; color: var(--head); margin-top: 12px; }
main.doc dd { margin: 0 0 0 1em; }
main.doc dd p { margin: 2px 0 8px; }
main.doc strong { color: var(--ink); }
.callout {
  margin: 18px 0; padding: 4px 18px; border-radius: 12px;
  border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--page-2);
}
.toc { columns: 2 220px; column-gap: 24px; margin: 18px 0 8px; font-size: 15.5px; }
.toc li { break-inside: avoid; }

/* ---- Footer ------------------------------------------------------------------------------ */

footer {
  margin-top: 32px; padding-block: 24px 48px;
  border-top: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink-soft); text-align: center;
}
footer p { margin: 0; }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-bottom: 10px; }

/* ---- Narrow screens ----------------------------------------------------------------------- */

@media (max-width: 480px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 16px; }
}

/* Reduce Motion: nothing on this site animates, and this keeps it that way if something is added. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- The store's screenshots ------------------------------------------------------------- */

/* Each is the store's framed screenshot, caption and all, scaled to the column and never past its own
   size, so a phone is never pushed into sideways scrolling. */
.shot { margin: 0; }
.shot img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: 18px; }
.hero-shot { margin-top: clamp(28px, 6vw, 48px); }
.hero-shot img { width: 640px; box-shadow: 0 18px 60px rgba(0,0,0,.45); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; margin-top: 24px; }
.pair img { width: 100%; }
.shot figcaption { margin-top: 8px; text-align: center; font-size: 15px; color: var(--ink-soft); }
@media (max-width: 560px) {
  .pair { grid-template-columns: 1fr; }
  .pair img { width: min(100%, 360px); }
}