/* Self-hosted OFL webfonts (licences: fonts/OFL-Cardo.txt, fonts/OFL-YesevaOne.txt,
   fonts/OFL-GreatVibes.txt). These stand in for the DAW Valdemar interior faces:
   Cardo approximates Bembo (body text) and Yeseva One approximates ITC Benguiat
   (headers). Great Vibes is the club signature script. To use the originals, change
   --font-body / --font-display / --font-signature below. */
@font-face {
  font-family: "Cardo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cardo-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cardo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/cardo-700.woff2") format("woff2");
}
@font-face {
  font-family: "Cardo";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cardo-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Yeseva One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/yeseva-one-400.woff2") format("woff2");
}
@font-face {
  font-family: "Great Vibes";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/great-vibes-400.woff2") format("woff2");
}

:root {
  --background: #FAFAF6;
  --text: #283344;
  --valdemar-blue: #0B2BA1;
  --link: #9E5265;
  --visited: #762E43;
  --font-body: "Cardo", "Bembo", "Bembo MT Pro", "Times New Roman", Times, serif;
  --font-display: "Yeseva One", "ITC Benguiat", "Benguiat", Georgia, "Times New Roman", serif;
  /* Club signature script, self-hosted (Great Vibes, OFL). */
  --font-signature: "Great Vibes", "Snell Roundhand", "Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive;
}

body { margin: 0; background: var(--background); color: var(--text); font-family: var(--font-body); font-size: 1.2rem; }

html { padding: 0; }

/* Yeseva One ships a single weight, so keep headings at 400 to avoid faux-bold. */
/* We're not styling h4-h6, because I don't want to deal with headers that deep.  */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; }

h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); }

a { color: var(--link); }
a:visited { color: var(--visited); }
.site-header { text-align: center; padding: .5rem; border-bottom: 1px solid currentColor; margin: 0 0 1rem 0; }
.site-header { background: var(--valdemar-blue); color: var(--background); }
.site-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; }
.header-crest { display: block; width: auto; height: 64px; }
.header-content { min-width: 0; }
@media (max-width: 600px) {
  .site-header { gap: .5rem; }
}
.site-header a { color: var(--background); }
.brand { font-size: 1.5rem; font-family: var(--font-display); font-weight: 400; }
.brand span { display: block; font-size: 1rem; font-family: var(--font-body); }
nav { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .5rem; }
.legacy-content img { max-width: 100%; height: auto; }
.legacy-content { overflow-wrap: anywhere; }
main { overflow-x: auto; width: calc(100% - 2rem); max-width: 968px; margin: 0 auto; }
.skip { position: absolute; left: -10000px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--background); padding: .5rem; }
/* Visually hidden but available to assistive technology. Used for table
   captions whose table is already named by an adjacent heading, so the
   accessible name is present without duplicating the heading on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.unavailable-note { font-size: .85em; font-style: italic; }
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 2rem 1.5rem;
  margin-block: 2rem;
  padding: .5rem;
}
.topic-grid section {
  position: relative;
  min-width: 0;
  border: 1px solid transparent;
  padding: 1.5rem;
  overflow-wrap: anywhere;
}
/* Both outlines have straight sides and opposing waves above and below. */
.topic-grid section::before,
.topic-grid section::after {
  --wave-offset: calc(-.375rem - 1px);
  content: "";
  position: absolute;
  inset: .125rem .375rem;
  background: var(--valdemar-blue);
  /* Masking lets the wave strokes inherit the theme color. */
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4Q6 -2 12 4T24 4' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") var(--wave-offset) top / 24px 8px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4Q6 10 12 4T24 4' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") var(--wave-offset) bottom / 24px 8px repeat-x,
    linear-gradient(black, black) left center / 1px calc(100% - 8px) no-repeat,
    linear-gradient(black, black) right center / 1px calc(100% - 8px) no-repeat;
  pointer-events: none;
}
.topic-grid section::before {
  --wave-offset: 0px;
  inset: calc(-.25rem - 1px) -1px;
}
.topic-grid h2 { margin-top: 0; }
.topic-grid p:last-child { margin-bottom: 0; }
.breadcrumbs { justify-content: flex-start; font-size: .9em; }
.revised { font-weight: 700; }
.page-list li, .year-list li { margin-bottom: .5rem; }
.item-note { font-size: .85em; }
details { margin: 1.5rem 0; }
summary { cursor: pointer; text-decoration: underline; }
footer { text-align: center; padding: 1rem; border-top: 1px solid currentColor; margin-top: 1.5rem; font-size: 0.875rem; }

.hero { text-align: center; }
.hero h1 { margin: 0; }
.hero .subtitle { display: block; font-style: italic; font-size: 1.75rem; }
.hero img { margin-top: 0.5rem; max-width: 100%; height: auto; }

td, th { border: 1px solid #000000; margin: 0; padding: 0.25rem; }
th { overflow-wrap: normal; }
#military-gifts tbody th { white-space: nowrap; }
table { margin: 0.25rem auto; border: 2px solid #000000; }
/* Widths and sizes carried over from the original layout tables. These replace
   the inline style attributes the archive used, so the content carries no inline
   styles and the site can send a strict Content-Security-Policy. */
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-33 { width: 33%; }
.w-35 { width: 35%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }
.h-43 { height: 43px; }
.issue-logo { width: 168px; height: 168px; }
.issue-badge { width: 468px; height: 16px; }

.artwork { margin: 2rem auto; text-align: center; }
.artwork img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.artwork figcaption { margin-top: .75rem; }
.artwork-title, .artwork-credit, .artwork-note { display: block; }
.artwork-title { font-style: italic; }
.artwork-credit, .artwork-note { font-size: .9em; }

/* Club sign-off: the block hugs the right edge of its container, its lines share a
   left edge, and the signature reads as a hand-written name (see --font-signature). */
.signoff { width: fit-content; max-width: 100%; margin-left: auto; text-align: left; }
.signoff .salutation, .signoff .signature { display: block; }
.signoff .signature { font-family: var(--font-signature); font-size: 1.5em; line-height: 1.2; }