@font-face { font-family: "IM Fell English"; font-style: italic; font-display: swap; src: url("art/IMFeENit28P.ttf") format("truetype"); }
:root { color-scheme: light; --paper: #f1e7d0; --ink: #33261c; --track: #8c2e1f; --soft: rgba(51,38,28,.65); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink);
  font-family: "New York", "Iowan Old Style", "Palatino", Georgia, serif; line-height: 1.6; }
main { max-width: 680px; margin: 0 auto; padding: 56px 20px 80px; }
h1 { font-size: clamp(1.9rem, 8.5vw, 2.6rem); margin: 0 0 .6rem; letter-spacing: -.01em; }
h2 { font-size: 1.25rem; margin: 2.2rem 0 .6rem; }
.eyebrow { color: var(--track); font-size: .78rem; letter-spacing: .25em; text-transform: uppercase; font-weight: 600; }
p, li { font-size: 1.05rem; }
.soft { color: var(--soft); font-style: italic; }
a { color: var(--track); }
nav { margin-top: 3rem; font-size: .95rem; }
nav a { margin-right: 1.2rem; }
hr { border: 0; border-top: 1px solid var(--soft); opacity: .4; margin: 3rem 0; }
.title { display: block; margin: 0 0 1.4rem; }
.title img { max-width: 100%; height: auto; display: block; }
.button { display: inline-block; padding: .6rem 1.5rem; border-radius: 999px; background: var(--track);
          color: var(--paper); text-decoration: none; font-weight: 600; }

/* the challenge page */
.page-challenge h1 { font-size: clamp(1.5rem, 6.4vw, 2rem); }
.card { display: flex; align-items: center; gap: 12px; margin: 1.3rem 0 1.5rem; min-height: 32px; }
.card[hidden] { display: none; }
.level { font-family: "IM Fell English", "New York", Georgia, serif; font-style: italic; font-size: 15px;
         letter-spacing: .035em; line-height: 1; padding: 4px 11px 5px; border-radius: 999px;
         border: 1px solid; white-space: nowrap; }
.level.daily  { color: #33261c; border-color: rgba(51,38,28,.55); }
.level.normal { color: #735430; border-color: rgba(115,84,48,.55); }
.level.hard   { color: #8c2e1f; border-color: rgba(140,46,31,.55); }
.card .ship { height: 30px; width: auto; display: block; }
.card .aid  { height: 19px; width: auto; display: block; }
.card .aids { display: flex; align-items: center; gap: 12px; }
.card .none { font-style: italic; color: var(--soft); font-size: .95rem; }
.get { margin-top: 2.2rem; }
.get p { margin-bottom: .8rem; }
.badge { display: inline-block; line-height: 0; }
.badge img { height: 44px; width: auto; display: block; }