* { box-sizing: border-box; }
    body {
      margin: 0; padding: 24px 16px 48px; background: #ffe14d; color: #000;
      font: 700 16px/1.55 "Helvetica Neue", Arial, sans-serif;
    }
    .wrap { max-width: 720px; margin: 0 auto; border: 4px solid #000; background: #fff; box-shadow: 10px 10px 0 #000; }
    header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; background: #000; color: #ffe14d; }
    h1 { margin: 0; font: 900 24px "Arial Black", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
    .chip { padding: 3px 10px; border: 3px solid #ffe14d; font: 900 12px "Arial Black", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
    main { padding: 20px; display: grid; gap: 22px; }
    h2 { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border: 3px solid #000; background: #3dd6d0; font: 900 14px "Arial Black", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
    p, ul { margin: 0 0 8px; font-weight: 600; }
    ul { padding-left: 22px; }
    li { margin-bottom: 4px; }
    .note { padding: 12px; border: 4px solid #000; background: #ffe14d; box-shadow: 5px 5px 0 #000; }
    a { color: #000; background: #ff5c8a; padding: 0 4px; }
    footer { padding: 14px 20px; border-top: 4px solid #000; font-size: 13px; }
    code { font: 700 13px ui-monospace, Menlo, monospace; background: #ffe14d; padding: 0 4px; border: 2px solid #000; }

/* ---- additions for the info page ---- */
ol { margin: 0 0 8px; padding-left: 22px; font-weight: 600; }
h1 a { background: none; padding: 0; color: inherit; text-decoration: none; }
.cta { display: inline-block; padding: 8px 16px; border: 4px solid #000; background: #3dd6d0; color: #000; font: 900 14px "Arial Black", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; box-shadow: 5px 5px 0 #000; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms ease; }
.cta:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #000; }
nav.links { display: flex; flex-wrap: wrap; gap: 8px 14px; }
@media (max-width: 480px) { main { padding: 16px; } h1 { font-size: 20px; } }

