/* Kent Grove Community — deliberately lightweight for old phones and slow connections */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: #f3f0e7;
  background: #202223;
}
a { color: #f2cf82; }
a:focus, button:focus, input:focus, textarea:focus, select:focus {
  outline: 3px solid #f2cf82;
  outline-offset: 2px;
}
img { max-width: 100%; height: auto; }
.wrap { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 16px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
}
.skip-link:focus {
  left: 12px; top: 12px; z-index: 999;
  padding: 10px 14px; background: #fff; color: #000;
}

.hero {
  position: relative;
  min-height: 250px;
  background: #4a3c20 url("assets/kent-grove-header.jpg") center center / cover no-repeat;
  border-bottom: 4px solid #caa85f;
}
.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.62));
}
.hero-inner {
  position: relative;
  min-height: 250px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px 16px 22px;
  max-width: 980px; margin: 0 auto;
}
.hero h1 { margin: 0; font-size: 2.15rem; line-height: 1.1; text-shadow: 0 2px 4px #000; }
.hero p { margin: 8px 0 0; max-width: 720px; font-size: 1.05rem; }

.nav {
  background: #282a2b;
  border-bottom: 1px solid #4b4c4c;
}
.nav .wrap { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
.nav a {
  display: inline-block;
  padding: 11px 15px;
  border-radius: 999px;
  background: #3a3c3d;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.nav a:hover, .nav a[aria-current="page"] { background: #5a4a28; }

main { padding: 18px 0 40px; }
.notice {
  border-left: 5px solid #caa85f;
  background: #2b2d2e;
  padding: 14px 16px;
  margin: 0 0 18px;
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 24px; }
.btn {
  display: inline-block;
  padding: 15px 20px;
  min-height: 52px;
  border-radius: 10px;
  background: #218c3d;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.btn.secondary { background: #5a4a28; }
.btn.light { background: #454849; }
.btn:hover { filter: brightness(1.08); }

.section {
  margin: 22px 0;
  padding: 20px;
  background: #292b2c;
  border: 1px solid #414344;
  border-radius: 12px;
}
.section h2 { margin-top: 0; font-size: 1.55rem; }
.section h3 { margin-bottom: 6px; }

.cards { display: flex; flex-wrap: wrap; margin: -6px; }
.card {
  width: calc(33.333% - 12px);
  margin: 6px;
  padding: 14px;
  background: #343637;
  border-radius: 10px;
  min-width: 0;
}
.card img { border-radius: 8px; }
.card p { margin-bottom: 0; }

.photo-placeholder {
  aspect-ratio: 4 / 3;
  min-height: 130px;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; text-align: center;
  background: #414344;
  color: #d4d2cb;
  border-radius: 8px;
}

.quick-list { margin: 0; padding-left: 22px; }
.quick-list li { margin: 9px 0; }

label { display: block; font-weight: 700; margin-top: 16px; }
.hint { display: block; color: #c8c6bf; font-size: .92rem; font-weight: 400; margin-top: 3px; }
input, textarea, select {
  width: 100%;
  font: inherit;
  color: #111;
  background: #fff;
  border: 2px solid #bbb;
  border-radius: 8px;
  padding: 12px;
  margin-top: 6px;
}
textarea { min-height: 130px; resize: vertical; }
input[type="checkbox"] { width: auto; transform: scale(1.35); margin-right: 8px; }
.checkline { margin-top: 18px; display: flex; gap: 8px; align-items: flex-start; }
.checkline label { display: inline; margin: 0; font-weight: 400; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 520px; }
th, td { padding: 10px; border-bottom: 1px solid #4b4d4e; text-align: left; vertical-align: top; }
th { color: #f2cf82; }

footer {
  background: #181a1b;
  border-top: 1px solid #404243;
  padding: 24px 0 36px;
  color: #d7d4ca;
}
.small { font-size: .9rem; color: #c8c6bf; }
.status {
  display: inline-block; padding: 4px 9px; border-radius: 999px;
  background: #4d4f50; font-size: .86rem; font-weight: 700;
}
.status.pending { background: #6a572d; }
.status.official { background: #315d3a; }

@media (max-width: 720px) {
  body { font-size: 18px; }
  .hero, .hero-inner { min-height: 220px; }
  .hero h1 { font-size: 1.8rem; }
  .card { width: calc(50% - 12px); }
}

@media (max-width: 480px) {
  .wrap { padding-left: 12px; padding-right: 12px; }
  .hero, .hero-inner { min-height: 205px; }
  .hero-inner { padding-left: 12px; padding-right: 12px; }
  .hero h1 { font-size: 1.55rem; }
  .nav .wrap { gap: 6px; }
  .nav a { padding: 10px 12px; font-size: .95rem; }
  .actions { display: block; }
  .actions .btn { display: block; width: 100%; margin: 10px 0; text-align: center; }
  .card { width: 100%; margin: 6px 0; }
  .cards { margin: 0; }
  .section { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Research release: preserve the starter identity with accessible, resilient layouts. */
html { font-size:18px; }
body { overflow-wrap:break-word; }
.hero { background-image:url("assets/header-desktop.jpg"); }
.hero-shade { top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,rgba(0,0,0,.25),rgba(0,0,0,.85)); }
.brand { font-size:2rem!important; font-weight:bold; line-height:1.1; margin:0!important; text-shadow:0 2px 4px #000; }
.hero p { color:#fff; }
h1 { font-size:2.2rem;line-height:1.15;margin:12px 0 20px; }
h2,h3 { line-height:1.3; }
.intro { font-size:1.15rem;max-width:760px; }
.eyebrow { color:#daca9e;font-size:.85rem;margin-top:22px; }
.source { border-top:1px solid #555;padding-top:12px;color:#ddd; }
.nav details { max-width:980px;margin:auto; }
.nav summary { padding:14px 16px;cursor:pointer;color:#f2cf82;min-height:52px;font-weight:bold; }
.nav a { min-height:48px;border-radius:6px; }
.btn { background:#246b35; }
.section { margin:24px 0;padding:24px; }
.status { color:#fff;background:#42483b;border:1px solid #b5a272;letter-spacing:.025em;font-size:.78rem; }
dt { color:#f2cf82;font-weight:bold;margin-top:12px; }
dd { margin:4px 0 12px; }
.facts { border-left:3px solid #caa85f;padding-left:18px; }
.timeline { border-left:3px solid #caa85f;padding-left:16px; }
.request-grid { display:flex;flex-wrap:wrap;margin:-8px; }
.request { flex:1 1 260px;min-width:0;margin:8px;background:#343637;padding:16px;border-radius:8px; }
.request h3 { margin-top:0; }
fieldset { min-width:0;border:1px solid #888;border-radius:8px;padding:16px; }
fieldset:disabled { opacity:.75; }
button:disabled { cursor:not-allowed; }
input[type=file] { font-size:16px; }
summary:focus { outline:3px solid #f2cf82;outline-offset:-3px; }
.quick-list a,footer a { display:inline-block;padding:10px 0;min-height:48px; }
@media(max-width:600px) { .hero {background-image:url("assets/header-mobile.jpg");} .hero,.hero-inner{min-height:190px;} .brand{font-size:1.5rem!important;} .hero p{font-size:1rem;} h1{font-size:1.85rem;} .section{padding:16px;} .nav a{font-size:1rem;} .card{width:100%;} }
@media print {body{background:white;color:black;}a{color:#222;}.hero,.nav,footer{display:none;}.section,.notice,.card{background:white;border-color:#aaa;}dt,.source,.eyebrow{color:#222;}}