/* =========================================================
   Base / reset
   ======================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { background-color: #fff; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #000;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* Prevent accidental horizontal scroll on narrow devices */
html, body { overflow-x: hidden; }

/* Make long words/URLs wrap gracefully in tight columns */
:where(p, h1, h2, figcaption, li) { overflow-wrap: anywhere; }

/* =========================================================
   Design tokens (custom properties)
   ======================================================= */
:root {
  --container-max: 1200px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  --color-accent: navy;
  --rule-color: navy;

  /* Two-column behavior: sidebar is always visible */
  --sidebar-min: 120px;   /* don’t go smaller than this on phones */
  --sidebar-ideal: 30vw;  /* scales with viewport for balance */
  --sidebar-max: 320px;   /* desktop target */
  --grid-gap: var(--space-5);
}

/* =========================================================
   Container and global layout
   ======================================================= */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-4);
}

/* Keep two columns at all widths:
   - Main content takes remaining space
   - Sidebar uses a responsive clamp width
*/
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr)
                         clamp(var(--sidebar-min), var(--sidebar-ideal), var(--sidebar-max));
  gap: var(--grid-gap);
  align-items: start;
}

/* On extremely narrow screens, tighten the gap/padding to preserve content */
@media (max-width: 400px) {
  .container { padding: var(--space-3); }
  .layout { gap: var(--space-4); }
}

/* =========================================================
   Header
   ======================================================= */
.page-header {
  text-align: center;
  margin-bottom: var(--space-4);
}

.page-header h1 {
  color: var(--color-accent);
  font-size: clamp(1.75rem, 4.2vw, 2.8rem); /* scales smoothly across devices */
  margin: var(--space-4) 0 var(--space-1);
  line-height: 1.2;
}

.page-header .dates {
  margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.1rem);
  color: #000;
}

hr {
  border: none;
  height: 1px;
  background: var(--rule-color);
  margin-top: var(--space-3);
}

abbr[title] {
  text-decoration: none;
}

/* =========================================================
   Main content
   ======================================================= */
.content-main p {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #000;
}

#para1 {
  font-size: clamp(1.05rem, 2.8vw, 1.25rem);
}

.content-main h2 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  font-size: clamp(1.25rem, 2.8vw, 1.5rem);
  color: var(--color-accent);
}

/* =========================================================
   Figures / images
   ======================================================= */
.figure-hero {
  margin: var(--space-4) 0 var(--space-2);
  text-align: center;
}

/* Make *all* images fluid within their columns */
img {
  max-width: 100%;
  height: auto;
  border: 4px solid #fff;
  display: block;
}

/* Ensure sidebar images don’t keep their HTML width attribute */
.sidebar img {
  width: 100%;
  height: auto;
}

/* Optional large image caption style (not used in HTML but kept) */
.imgHeadBody {
  text-align: center;
  margin: var(--space-2) auto;
  max-width: 60ch;
  color: var(--color-accent);
  font-size: clamp(1rem, 2.8vw, 1.3rem);
  font-weight: bold;
}

/* =========================================================
   Sidebar gallery
   ======================================================= */
.sidebar { position: static; top: 0; } /* explicitly non-sticky */

.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Stack images vertically; column width adapts via clamp() */
.image {
  text-align: center;
  margin: 0 0 var(--space-5) 0;
}

.imgHead {
  margin: var(--space-2) 0 0 0;
  width: 100%;
  color: var(--color-accent);
  font-size: clamp(0.95rem, 2.6vw, 1.1rem);
  font-weight: bold;
}

/* =========================================================
   Links
   ======================================================= */
a {
  white-space: nowrap;
  font-weight: bold;
  text-decoration: none;
  color: inherit;
}

a.menu { color: #fff; }

/* =========================================================
   Accessibility utilities
   ======================================================= */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* =========================================================
   Footer
   ======================================================= */
.page-footer {
  margin-top: calc(var(--space-5) + var(--space-3));
  text-align: center;
  font-size: 0.95rem;
  color: #333;
}

/* =========================================================
   Narrow view fine-tuning
   ======================================================= */
@media (max-width: 480px) {
  .container { padding: var(--space-3); }
  body { line-height: 1.75; }

  /* Tighten vertical spacing a touch to fit more content */
  .image { margin-bottom: var(--space-4); }
}

/* Optional: very small devices (older 320–360px width) */
@media (max-width: 360px) {
  .page-header h1 { font-size: 1.6rem; }
  .content-main h2 { font-size: 1.15rem; }
  #para1 { font-size: 1.05rem; }
}