:root { color-scheme: light; --ink: #272626; --purple: #702353; --paper: #fffdf0; --teal: #006969; }
* { box-sizing: border-box; }
html { scroll-padding-top: 1rem; }
body { margin: 0; padding: 36px 20px 22px; color: var(--ink); background-color: var(--teal); background-image: radial-gradient(#65a09a 0.8px, transparent 0.8px); background-size: 12px 12px; font-family: "Times New Roman", Times, serif; font-size: 1.0625rem; line-height: 1.5; }
a { color: #0000a8; text-decoration: underline; text-underline-offset: 2px; }
a:visited { color: #79216d; }
a:hover { color: #b91b57; }
a:focus-visible { outline: 3px solid #bd1665; outline-offset: 4px; }
p { margin: 0 0 15px; }
h1, h2, h3 { line-height: 1.1; }
h2 { font-size: 1.75rem; margin: 0 0 15px; }
h3 { font-size: 1.22rem; margin: 0 0 12px; }
img { display: block; max-width: 100%; height: auto; }
.skip-link { position: absolute; left: 20px; top: -100px; padding: 12px; background: white; z-index: 2; }
.skip-link:focus { top: 10px; }
.site { max-width: 1040px; margin: 0 auto; background: var(--paper); border: 4px outset #d1d0b7; box-shadow: 9px 9px 0 #003f43; }
.window-bar { display: flex; justify-content: space-between; gap: 10px; color: white; background: #67214d; padding: 7px 12px; font: bold 0.75rem/1.3 "Courier New", monospace; letter-spacing: 0.06em; }
header { padding: 26px 30px 0; text-align: center; background: #fff3b4; }
.welcome { font: 0.75rem/1.4 "Courier New", monospace; letter-spacing: 0.14em; margin-bottom: 12px; }
h1 { position: relative; margin: 0; font-family: Georgia, serif; font-size: clamp(2.4rem, 5.5vw, 4.25rem); font-weight: 900; letter-spacing: -0.06em; color: var(--purple); text-shadow: 2px 2px 0 #fffdf0, 4px 4px 0 #e1ba68; }
h1 > span:first-child { white-space: nowrap; }
.title-star { display: inline-block; vertical-align: middle; color: #be2460; font-size: 2.1rem; margin-left: 12px; text-shadow: none; }
.tagline { margin: 15px 0 24px; font-style: italic; font-size: 1.18rem; }
nav { padding: 14px 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 18px; border-top: 2px groove #e4d391; font-weight: bold; }
nav > span { color: #a53368; font-size: 0.8rem; }
.news-strip { display: flex; align-items: center; gap: 14px; background: #dce9bd; padding: 10px 28px; border-top: 2px solid #375943; border-bottom: 2px solid #375943; font: 0.875rem/1.5 "Courier New", monospace; }
.new-label { flex-shrink: 0; padding: 2px 6px; color: white; background: #344c3c; font-size: 0.75rem; font-weight: bold; }
main { padding: 30px; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; }
.section-kicker { font: bold 0.75rem/1.4 "Courier New", monospace; color: var(--purple); letter-spacing: 0.1em; margin-bottom: 12px; }
.hello h2 { font-size: 2.25rem; }
.hero-photo { margin: 24px 0 0; border: 3px ridge #b1ab8d; padding: 7px; background: #eee9d5; }
.hero-photo figcaption { display: flex; flex-wrap: wrap; gap: 4px 15px; justify-content: space-between; padding: 9px 2px 2px; font-size: 0.8125rem; }
.hero-photo figcaption > span { font-style: italic; }
.sidebar { display: grid; align-content: start; gap: 22px; }
.side-panel { border: 3px ridge #cabeb0; }
.directory { background: #f4e9f3; }
.directory h2 { font-size: 1.25rem; padding: 11px 13px; margin: 0; background: #6b305c; color: white; }
.directory-intro { font-size: 0.9375rem; margin: 16px 15px 8px; }
.directory > a { display: block; margin: 0 15px; padding: 9px 0; border-bottom: 1px dotted #b79dad; font-size: 0.9375rem; }
.directory > a:last-child { margin-bottom: 12px; border: 0; }
.directory > a > span { color: var(--purple); font-weight: bold; margin-right: 6px; }
.fact-note { padding: 18px; background: #fff1a8; box-shadow: 4px 4px 0 #e5d394; }
.note-label { font: bold 0.75rem "Courier New", monospace; letter-spacing: 0.08em; }
.fact-note p:first-of-type { margin-top: 14px; font-size: 1.2rem; line-height: 1.3; }
.fact-note p:last-of-type { font-size: 1rem; }
.fact-note > a { font-size: 0.875rem; }
.club-stamp { text-align: center; color: #75365b; border: 2px dashed #af6c88; padding: 12px; }
.club-stamp > * { display: block; }
.club-stamp > span:first-child { letter-spacing: 8px; }
.club-stamp strong { font: bold 0.875rem "Courier New", monospace; margin: 7px 0; }
.club-stamp > span { font-style: italic; font-size: 0.9375rem; }
.club-stamp small { font-size: 0.75rem; margin-top: 7px; }
.facts-section, .meet-section, .links-section { margin-top: 32px; border-top: 3px double #858369; padding-top: 25px; }
.heading-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.heading-row h2 { margin-bottom: 0; }
.tag { font: 0.75rem/1.4 "Courier New", monospace; color: #65564f; text-align: right; }
.facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #b3aa8c; background: #f7f3e4; }
.facts-grid article { padding: 20px; border-right: 1px dotted #b3aa8c; }
.facts-grid article:last-child { border-right: 0; }
.fact-number { display: inline-block; font: bold 1.5rem/1 "Courier New", monospace; color: #a72d5c; margin-bottom: 15px; }
.facts-grid p { font-size: 1rem; margin-bottom: 0; }
.source-note { margin: 12px 0 0; font-size: 0.8125rem; }
.species-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 24px; }
.species { border: 2px groove #c6bb9c; }
.syrian { padding: 22px; background: #fff2d8; }
.species-label { font: bold 0.75rem/1.4 "Courier New", monospace; color: #75405b; }
.species h3 { font-size: 1.4rem; margin: 12px 0 6px; }
.scientific { font-size: 0.875rem; margin-bottom: 16px; }
.species p:not(.scientific) { font-size: 1rem; }
.species a { font-size: 0.9375rem; }
.dwarf { display: grid; grid-template-columns: 38% minmax(0, 1fr); background: #edf0e1; }
.dwarf > img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; border-right: 1px solid #b0b7a1; }
.dwarf > div { padding: 20px; }
.links-section > p { font-size: 1rem; }
.links-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 35px; margin-top: 24px; }
.links-grid h3 { color: #67214d; }
.links-grid ul { padding-left: 20px; margin: 0; }
.links-grid li { padding-bottom: 12px; }
.links-grid li span { display: block; font-size: 0.8125rem; margin-top: 2px; }
.credits p { font-size: 0.8125rem; overflow-wrap: anywhere; margin-bottom: 10px; }
footer { border-top: 3px double #858369; margin: 0 30px; padding: 25px 0; text-align: center; }
.web-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 17px; }
.badge { border: 2px outset #c2bfb3; padding: 4px 9px; font: 0.6875rem/1.2 "Courier New", monospace; min-width: 115px; }
.html-badge { color: white; background: #273a75; }
.hamster-badge { color: #471737; background: #eed783; }
.web-badge { color: white; background: #336047; }
footer p { margin: 0 0 8px; font-style: italic; }
footer > a { font-size: 0.9375rem; }
footer > small { display: block; font: 0.75rem/1.5 "Courier New", monospace; margin-top: 16px; }
.outside-footer { color: #daefde; margin: 23px auto 0; text-align: center; font: 0.75rem/1.4 "Courier New", monospace; }
@media (max-width: 800px) {
  body { padding: 20px 12px; }
  header { padding: 23px 20px 0; }
  main { padding: 24px; }
  .intro-grid { grid-template-columns: minmax(0, 1fr) 235px; gap: 22px; }
  .species-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .dwarf { display: block; }
  .dwarf > img { height: 190px; object-position: center 45%; border-right: 0; border-bottom: 1px solid #b0b7a1; }
  .heading-row { flex-wrap: wrap; }
  .tag { text-align: left; }
}
@media (max-width: 600px) {
  body { padding: 12px 8px 20px; }
  .site { box-shadow: 4px 4px 0 #003f43; }
  .window-bar { font-size: 0.75rem; padding: 7px; }
  .window-bar > span:last-child { display: none; }
  header { padding: 20px 12px 0; }
  .welcome { font-size: 0.75rem; letter-spacing: 0.05em; }
  h1 { font-size: clamp(2rem, 9.4vw, 3rem); }
  .title-star { font-size: 1.3rem; margin-left: 4px; }
  .tagline { font-size: 1rem; margin-bottom: 18px; }
  nav { gap: 10px 14px; font-size: 0.9375rem; }
  nav > span { display: none; }
  .news-strip { flex-direction: column; gap: 6px; padding: 12px 16px; text-align: center; }
  main { padding: 22px 16px; }
  .intro-grid, .facts-grid, .species-grid, .links-grid { grid-template-columns: 1fr; }
  .sidebar { gap: 18px; }
  .hero-photo { margin-top: 18px; }
  .facts-grid article { border-right: 0; border-bottom: 1px dotted #b3aa8c; }
  .facts-grid article:last-child { border-bottom: 0; }
  .links-grid { gap: 20px; }
  .dwarf > img { height: 240px; }
  footer { margin: 0 16px; }
}