/* Find Feldman: what every page shares. Every color is sampled from the logo and the round icon.
   Fonts are free Google Fonts on purpose (Lilita One, Patrick Hand). The game's own fonts are not licensed for a website,
   so nothing here may ever load a file from the game's fonts folder. */
:root {
  --navy: #141a3e;        /* the logo's outline */
  --blue: #27507a;        /* the Vol. 1 banner */
  --blue-lift: #306080;   /* the banner's lighter edge */
  --teal: #35948e;        /* his shirt */
  --teal-deep: #24706c;   /* his shirt, in shadow: light text on this passes contrast */
  --dot: #ebc359;         /* the dots on his shirt */
  --parchment: #f6e7bd;   /* the scroll */
  --paper: #fff7e0;       /* the scroll's highlight */
  --tan: #e8c888;         /* the scroll's shading */
  --brass: #aa8242;       /* the magnifying glass */
  --leaf: #f6781e;        /* the fall leaves */
  --brown: #583a22;       /* his mustache */
  --ink: #1e2346;
  --ink-soft: #4b4a5e;
  --display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --body: "Patrick Hand", "Comic Sans MS", "Chalkboard SE", "Segoe Print", sans-serif;
  --wrap: 1180px;
  --dots: radial-gradient(ellipse 7px 9px at 25% 25%, var(--dot) 96%, transparent 100%),
          radial-gradient(ellipse 7px 9px at 75% 75%, var(--dot) 96%, transparent 100%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; background: var(--parchment); color: var(--ink); font-family: var(--body); font-size: 21px; line-height: 1.42; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; color: var(--navy); text-wrap: balance; }
p { margin: 0; }
a { color: var(--blue); text-underline-offset: 2px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; border-radius: 6px; }
.tm { font-size: .5em; vertical-align: .75em; line-height: 0; margin-left: .06em; font-family: var(--body); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 40; padding: 8px 14px; background: var(--paper); border: 3px solid var(--navy); border-radius: 10px; }
.skip:focus { top: 10px; }

/* Buttons: the leaf orange is the one loud color on the page, kept for what you can press next */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 4px 26px; border: 3px solid var(--navy); border-radius: 14px; background: var(--leaf); color: var(--navy); box-shadow: 0 5px 0 var(--navy); font-family: var(--display); font-size: 22px; line-height: 1.1; text-decoration: none; text-align: center; cursor: pointer; transition: transform .1s, box-shadow .1s; }
.btn:hover { color: var(--navy); background: #ff8a33; transform: translateY(2px); box-shadow: 0 3px 0 var(--navy); }
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--navy); }
.btn-plain { background: var(--paper); }
.btn-plain:hover { background: #fff; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* Top bar */
.bar { position: sticky; top: 0; z-index: 30; background: var(--navy); border-bottom: 4px solid var(--brass); }
.bar-in { max-width: var(--wrap); margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--paper); text-decoration: none; font-family: var(--display); font-size: 24px; line-height: 1; white-space: nowrap; }
.brand:hover { color: #fff; }
.brand img { display: block; width: 44px; height: 44px; }
.links { display: flex; align-items: center; gap: 4px 22px; }
.links a { color: var(--paper); text-decoration: none; font-size: 21px; padding: 4px 2px; border-bottom: 3px solid transparent; white-space: nowrap; }
.links a:hover, .links a[aria-current="page"] { color: #fff; border-bottom-color: var(--dot); }
.links .links-cta { padding: 3px 14px; background: var(--leaf); border: 2px solid var(--paper); border-radius: 10px; color: var(--navy); font-family: var(--display); font-size: 18px; white-space: nowrap; }
.links .links-cta:hover { background: #ff8a33; border-bottom-color: var(--paper); color: var(--navy); }
@media (max-width: 860px) { .links .links-wide { display: none; } }
@media (max-height: 520px) { .bar { position: static; } html { scroll-padding-top: 8px; } }
@media (max-width: 420px) { .brand { font-size: 21px; gap: 8px; } .brand img { width: 38px; height: 38px; } .links { gap: 4px 12px; } .links a { font-size: 19px; } }
@media (max-width: 350px) { .bar-in { gap: 8px; padding: 8px 10px; } .brand { font-size: 19px; gap: 6px; } .brand img { width: 34px; height: 34px; } .links .links-cta { padding: 3px 8px; font-size: 15px; } }

/* Inside pages: a strip of his shirt with the page name on it, then plain reading */
.strip { background-color: var(--teal); background-image: var(--dots); background-size: 54px 54px; border-bottom: 4px solid var(--navy); }
.strip-in { max-width: 760px; margin: 0 auto; padding: 44px 16px 40px; }
.strip h1 { display: inline-block; padding: 8px 18px 6px; background: var(--parchment); border: 3px solid var(--navy); border-radius: 14px; box-shadow: 0 5px 0 var(--navy); font-size: clamp(34px, 7vw, 50px); }
main { flex: 1 0 auto; width: 100%; }
.prose { max-width: 760px; margin: 0 auto; padding: 36px 16px 64px; }
.prose h2 { margin: 34px 0 8px; font-size: 28px; color: var(--blue); }
.prose p { margin: 0 0 12px; }
.prose ul { margin: 0 0 12px; padding-left: 24px; }
.prose li { margin: 5px 0; }
.date { color: var(--ink-soft); }
.lead { font-size: 24px; line-height: 1.3; }
.note { margin: 22px 0; padding: 16px 20px; background: var(--paper); border: 3px solid var(--navy); border-radius: 14px; }
.note h2 { margin-top: 0; }
.note p:last-child { margin-bottom: 0; }
.mail { font-family: var(--display); font-size: 24px; word-break: break-word; }

/* Questions */
details { margin: 10px 0; background: var(--paper); border: 3px solid var(--navy); border-radius: 12px; }
summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-family: var(--display); font-size: 22px; line-height: 1.15; color: var(--navy); cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ""; flex: none; width: 13px; height: 16px; border-radius: 50%; background: var(--teal); border: 2px solid var(--navy); transition: background .12s; }
details[open] summary::before { background: var(--dot); }
details p, details ul { padding: 0 18px; }
details p:last-child { padding-bottom: 6px; }
details ul { padding-left: 38px; }

/* Footer */
.foot { background: var(--navy); border-top: 4px solid var(--brass); color: #d9dcea; text-align: center; font-size: 19px; line-height: 1.35; }
.foot-in { max-width: 820px; margin: 0 auto; padding: 28px 16px 34px; }
.foot img { display: block; margin: 0 auto 10px; width: 64px; height: 64px; }
.foot-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 12px; }
.foot-links a { color: var(--paper); font-size: 21px; }
.foot-links a:hover { color: #fff; }