/* Minimal, cookie‑free static site styles */
:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #666666;
  --link: #0b57d0;
  --border: #e5e7eb;
}
* { box-sizing: border-box; }
html { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { margin: 0; background: var(--bg); color: var(--fg); line-height: 1.6; }
.container { max-width: 800px; margin: 0 auto; padding: 2rem 1rem; }
header, footer { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fafafa; }
header { border-top: 0; }
header .title { display: flex; align-items: center; gap: 1rem; }
header img { height: 72px; width: auto; }
h1, h2, h3 { line-height: 1.25; }
main p { margin: 0.75rem 0; }
.notice { padding: 1rem; border: 1px solid var(--border); background: #fcfcfc; border-radius: 8px; }
footer { font-size: 0.95rem; color: var(--muted); }
footer a { color: var(--link); text-decoration: none; }
footer a:focus, footer a:hover { text-decoration: underline; }
.small { font-size: 0.9rem; color: var(--muted); }

/* === Prominent Header & Logo Update === */
header .title { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  text-align: center;
  gap: 1.25rem; 
  padding: 2.25rem 0; 
}
header img { 
  height: 140px; 
  width: auto; 
}
header h1 { 
  font-size: 2rem; 
  margin: 0; 
}
@media (min-width: 768px) {
  header img { height: 180px; }
  header h1 { font-size: 2.4rem; }
}


/* === Consistent, prominent logo >= heading width on all pages === */
:root { --logo-width: clamp(120px, 30vw, 720px); }

header .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.25rem;
  padding: 2.5rem 0;
}

header img {
  width: var(--logo-width);   /* at least as wide as the heading block */
  height: auto;
}

header h1 {
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  margin: 0;
  max-width: var(--logo-width);  /* heading never wider than the logo */
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}


/* === Tighter spacing & text overlapping bottom third of logo === */
:root {
  --logo-width: clamp(320px, 60vw, 720px);              /* already defined earlier; re-affirm for clarity */
  
}

header .title {
  gap: 0.25rem;               /* much tighter gap */
  padding-top: 1.25rem;
  padding-bottom: 0.75rem;
  position: relative;
}

header .title > img {
  display: block;
}

header .title > div {
  position: relative;
  z-index: 1;                 /* ensure text stays above the logo */
}

/* Optional: keep the small status line compact */
header .title .small { margin-top: 0.25rem; }


header .title {
  gap: 0.15rem;
  padding-top: 0.75rem;
  padding-bottom: 0.25rem;
}

header .title > div {
  margin-top: calc(-1 * var(--logo-overlap));
}

/* Optional readability aid (commented out by default):
header h1 { text-shadow: 0 1px 2px rgba(0,0,0,.25); }
*/