/* =========================
   SCREEN.CSS — SIMPLE, SAFE
   ========================= */

/* Global defaults & variables */
:root {
  --max-width: 980px;
  --link: #0b5fff;

  /* Image sizing: cap the height, keep proportions */
  --photo-max-height: none;   /* e.g., 300px to limit height; 'none' by default */
}

/* Minimum 12pt ≈ 16px base; slightly scale on larger screens */
html { font-size: 16px; }               /* 12pt minimum */
@media (min-width: 768px) { html { font-size: 17px; } }

*,
*::before,
*::after { box-sizing: border-box; }

/* High-contrast defaults */
body {
  font-family: Helvetica, Arial, sans-serif;
  color: #000;
  background: #fff;
  margin: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.page {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Links: blue, underlined */
a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }

/* Responsive header: stack on mobile, two columns on wider screens */
.top-container {
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first: stacked */
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 700px) {
  .top-container {
    grid-template-columns: 1.1fr 0.9fr; /* two columns on wider screens */
    align-items: start;
    gap: 20px;
  }
}

/* Columns */
.left-column { padding-right: 0; }
@media (min-width: 700px) { .left-column { padding-right: 20px; } }

/* =========================
   IMAGE RULES (SAFE EVERYWHERE)
   Goal: control height cap, keep proportions, be responsive.
   Usage:
     1) Global cap: set --photo-max-height on :root, e.g. 300px
     2) Per-image cap: inline style="--photo-max-height: 300px"
   ========================= */

/* General image safety */
img {
  max-width: 100%;
  height: auto;         /* keeps aspect ratio */
  border: 0;
  display: block;       /* removes inline gap quirks */
}

/* Headshot / large-photo:
   - Fills the column width (responsive)
   - Preserves aspect ratio (height:auto)
   - Never exceeds the max-height cap you set
   - No cropping, no distortion
*/
.right-column img,
/* Safe proportional scaling with a height cap */
.large-photo,
.right-column img {
  display: block;
  width: auto;                 /* don't force 100% width */
  max-width: 100%;             /* but never overflow the column */
  height: auto;                /* preserve aspect ratio */
  max-height: var(--photo-max-height);  /* e.g., 300px */
  border-radius: 6px;
  /* No object-fit needed since we're not forcing both width & height */
}

/* Type hierarchy (compact, readable) */
h1 {
  margin: 0 0 8px 0;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw + 0.8rem, 1.8rem);
  line-height: 1.25;
  color: #000;
}
h2 {
  margin: 18px 0 8px 0;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.2vw + 0.6rem, 1.35rem);
  line-height: 1.25;
  color: #000;
  border-bottom: 1px solid #ccc;
  padding-bottom: 6px;
}

p, li, address { font-size: 1rem; } /* inherits from html base (>=12pt) */
ul { padding-left: 20px; margin: 10px 0; }
li { margin-bottom: 6px; }

address {
  font-style: normal;
  white-space: pre-line; /* preserve line breaks from HTML */
}

/* Optional utility: high-contrast container (forces Helvetica/12pt/blue links) */
.hc {
  font-family: Helvetica, Arial, sans-serif !important;
  color: #000 !important;
  font-size: 1rem !important;
  line-height: 1.5;
}
.hc a { color: var(--link) !important; }

/* Motion safety for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}