:root { color-scheme: light dark; --paper: #fafbfc; --ink: #202222; --muted: #555d61; --line: #c9d0d4; --accent: #126549; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 system-ui, sans-serif; }
main, footer { width: min(1120px, 100%); margin: auto; padding: 28px 24px; }
main { padding-top: 44px; }
h1 { margin: 0 0 12px; font-size: 36px; line-height: 1.15; overflow-wrap: anywhere; }
h2, h3 { margin: 0; font-size: 21px; line-height: 1.3; overflow-wrap: anywhere; }
article > p { max-width: 74ch; margin: 14px 0 24px; }
article > ul { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
article > ul > li { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; padding: 18px; background: #fff; color: #202222; }
li > p { margin: 12px 0; }
li > p:has(img) { order: -1; margin: 0 0 18px; }
li > p:has(a):last-child { margin-top: auto; padding-top: 10px; }
img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; display: block; background: #fff; border-radius: 3px; }
a { color: var(--accent); text-underline-offset: 4px; overflow-wrap: anywhere; }
li a { color: #126549; }
li > p:has(img) a { display: block; border-radius: 4px; }
li > p:last-child a { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 14px; border: 1px solid #126549; border-radius: 5px; text-decoration: none; font-weight: 650; }
a:focus-visible { outline: 3px solid #d58a00; outline-offset: 4px; }
a:active { opacity: .7; transform: translateY(1px); }
article > p:has(> a[href="https://digital.gnomady.com/"]) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 12px 0 20px; }
article > p:has(> a[href="https://digital.gnomady.com/"]) a { display: inline-flex; align-items: center; min-height: 48px; }
footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
footer p:first-child { color: var(--ink); font-size: 17px; }
.skip { position: absolute; left: 18px; top: -100px; padding: 10px; background: var(--paper); }
.skip:focus { top: 4px; }
@media (max-width: 600px) {
  main, footer { padding: 24px 16px; }
  h1 { font-size: 29px; }
  article > ul { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  article > ul > li { padding: 14px; }
}
@media (prefers-color-scheme: dark) { :root { --paper: #141718; --ink: #edf1f2; --muted: #bbc4c9; --line: #485155; --accent: #7bd9b2; } }