:root{
  --creme:#f0e6cf; --creme-deep:#e7d9ba; --ink:#2a2118;
  --indigo:#28407a; --fuchsia:#c02d72; --marigold:#dc9a1e;
  --turquoise:#2c8f8f; --green:#4e7b3a; --terracotta:#c05a35;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Archivo',system-ui,sans-serif;background:var(--creme);color:var(--ink);overflow-x:hidden;position:relative;}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.016' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.35'/%3E%3C/svg%3E");}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");}
a{color:inherit;}
.banda{height:10px;width:100%;background:linear-gradient(90deg,var(--indigo) 0 16.66%,var(--fuchsia) 16.66% 33.33%,var(--marigold) 33.33% 50%,var(--turquoise) 50% 66.66%,var(--green) 66.66% 83.33%,var(--terracotta) 83.33% 100%);}

/* ---- landing masthead ---- */
.masthead{text-align:center;padding:56px 30px 30px;position:relative;}
.eyebrow{font-weight:600;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fuchsia);margin-bottom:22px;}
h1.title{font-family:'Fraunces';font-weight:600;font-size:clamp(3rem,10vw,7rem);line-height:.92;letter-spacing:-.015em;color:var(--indigo);}
h1.title .del{font-style:italic;font-weight:400;color:var(--fuchsia);}
h1.title .num{color:var(--marigold);font-weight:700;}
.sub{font-family:'Fraunces';font-style:italic;font-weight:400;font-size:clamp(1.05rem,2.3vw,1.45rem);color:#5a4c3a;max-width:600px;margin:22px auto 0;line-height:1.4;}
.diamonds{display:flex;justify-content:center;gap:10px;margin-top:26px;}
.diamonds i{width:10px;height:10px;transform:rotate(45deg);display:block;}
.diamonds i:nth-child(1){background:var(--indigo);}.diamonds i:nth-child(2){background:var(--fuchsia);}
.diamonds i:nth-child(3){background:var(--marigold);}.diamonds i:nth-child(4){background:var(--turquoise);}
.diamonds i:nth-child(5){background:var(--green);}

/* ---- landing grid ---- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:0 auto;padding:20px 30px 56px;}
.tile{position:relative;border-radius:4px;padding:26px 24px 22px;min-height:230px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;border:1.5px solid rgba(42,33,24,.25);box-shadow:6px 6px 0 rgba(42,33,24,.14);transition:transform .14s,box-shadow .14s;overflow:hidden;}
.tile:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 rgba(42,33,24,.18);}
.tile::before{content:"";position:absolute;inset:9px;border:1px solid rgba(255,255,255,.35);border-radius:2px;pointer-events:none;}
.t-schools{background:var(--indigo);}.t-housing{background:var(--fuchsia);}.t-safety{background:var(--green);}
.t-services{background:var(--turquoise);}.t-business{background:var(--terracotta);}.t-parks{background:var(--marigold);}
.tile .top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:2;}
.tile .idx{font-family:'Fraunces';font-size:.95rem;font-weight:500;color:rgba(255,255,255,.7);}
.t-parks .idx{color:rgba(42,33,24,.55);}
.tile .sello{width:34px;height:34px;transform:rotate(45deg);border:1.5px solid rgba(255,255,255,.5);}
.t-parks .sello{border-color:rgba(42,33,24,.4);}
.tile .body{position:relative;z-index:2;}
.tile .es{font-weight:600;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:4px;}
.tile .en{font-family:'Fraunces';font-weight:600;font-size:2.05rem;line-height:.98;color:#fff;}
.t-parks .es{color:rgba(42,33,24,.65);}.t-parks .en{color:var(--ink);}
.tile .go{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.85);}
.t-parks .go{color:var(--ink);}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:540px){.grid{grid-template-columns:1fr;}}

/* ---- topic page header ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 34px;flex-wrap:wrap;gap:10px;}
.topbar .home{font-family:'Fraunces';font-weight:600;font-size:1.15rem;color:var(--indigo);text-decoration:none;}
.topbar .home .d{color:var(--fuchsia);font-style:italic;}
.topbar .back{font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:#6a5c48;}
.topbar .back:hover{color:var(--ink);}
.pagehead{padding:26px 34px 8px;position:relative;}
.pagehead .kick{font-weight:600;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px;}
.pagehead h2{font-family:'Fraunces';font-weight:600;font-size:clamp(2.4rem,6vw,4rem);line-height:.95;letter-spacing:-.01em;}
.pagehead .es{font-family:'Fraunces';font-style:italic;font-weight:400;color:#8a7a62;font-size:1.3rem;margin-top:2px;}
.pagehead p.intro{font-size:1.02rem;color:#5a4c3a;max-width:680px;margin-top:14px;line-height:1.5;}
.section{padding:14px 34px 30px;max-width:1140px;margin:0 auto;}
.subhead{font-family:'Fraunces';font-weight:600;font-size:1.4rem;margin:26px 0 14px;display:flex;align-items:center;gap:12px;}
.subhead::before{content:"";width:12px;height:12px;transform:rotate(45deg);display:block;}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.rcard{background:#fff;border:1.5px solid rgba(42,33,24,.18);border-radius:4px;padding:18px 18px 16px;display:flex;flex-direction:column;position:relative;box-shadow:4px 4px 0 rgba(42,33,24,.08);transition:transform .12s,box-shadow .12s;}
.rcard:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(42,33,24,.12);}
.rcard h3{font-family:'Fraunces';font-weight:600;font-size:1.15rem;line-height:1.15;margin-bottom:3px;}
.rcard .meta{font-size:.76rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:9px;}
.rcard p{font-size:.9rem;color:#5a4c3a;line-height:1.5;margin-bottom:12px;flex:1;}
.rcard p strong{color:var(--ink);}
.rcard a.btn{align-self:flex-start;text-decoration:none;font-weight:600;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;padding:9px 16px;border-radius:3px;color:#fff;transition:transform .12s;}
.rcard a.btn:hover{transform:translateX(2px);}
.hours{font-size:.84rem;color:#5a4c3a;line-height:1.7;margin-bottom:12px;}
.hours b{color:var(--ink);}

.callout{border-radius:4px;padding:20px 22px;margin:16px 0 4px;position:relative;border:1.5px solid rgba(42,33,24,.18);}
.callout h3{font-family:'Fraunces';font-weight:600;font-size:1.2rem;margin-bottom:8px;}
.callout ol{margin:6px 0 0 20px;color:#5a4c3a;}
.callout p{color:#5a4c3a;}

.lines{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
.line{background:#fff;border:1.5px solid rgba(42,33,24,.18);border-radius:4px;padding:14px 16px;box-shadow:3px 3px 0 rgba(42,33,24,.07);}
.line .n{font-weight:600;font-size:.95rem;}
.line .v{font-family:'Fraunces';font-weight:600;font-size:1.1rem;margin-top:3px;}

footer{text-align:center;padding:34px 30px 44px;border-top:1.5px solid rgba(42,33,24,.2);max-width:1080px;margin:20px auto 0;}
footer .fb{font-family:'Fraunces';font-weight:600;font-size:1.4rem;color:var(--indigo);}
footer .fb .d{color:var(--fuchsia);font-style:italic;}
footer p{color:#6a5c48;font-size:.9rem;margin-top:6px;}

/* per-topic accent */
.a-indigo .meta,.a-indigo .kick{color:var(--indigo);} .a-indigo .btn{background:var(--indigo);} .a-indigo .subhead::before{background:var(--indigo);} .a-indigo .callout{background:#e2e6f0;border-left:6px solid var(--indigo);} .a-indigo .line .v{color:var(--indigo);}
.a-fuchsia .meta,.a-fuchsia .kick{color:var(--fuchsia);} .a-fuchsia .btn{background:var(--fuchsia);} .a-fuchsia .subhead::before{background:var(--fuchsia);} .a-fuchsia .callout{background:#f6e2ec;border-left:6px solid var(--fuchsia);} .a-fuchsia .line .v{color:var(--fuchsia);}
.a-green .meta,.a-green .kick{color:var(--green);} .a-green .btn{background:var(--green);} .a-green .subhead::before{background:var(--green);} .a-green .callout{background:#e6ecdf;border-left:6px solid var(--green);} .a-green .line .v{color:var(--green);}
.a-turquoise .meta,.a-turquoise .kick{color:var(--turquoise);} .a-turquoise .btn{background:var(--turquoise);} .a-turquoise .subhead::before{background:var(--turquoise);} .a-turquoise .callout{background:#dcecec;border-left:6px solid var(--turquoise);} .a-turquoise .line .v{color:var(--turquoise);}
.a-terracotta .meta,.a-terracotta .kick{color:var(--terracotta);} .a-terracotta .btn{background:var(--terracotta);} .a-terracotta .subhead::before{background:var(--terracotta);} .a-terracotta .callout{background:#f2e2da;border-left:6px solid var(--terracotta);} .a-terracotta .line .v{color:var(--terracotta);}
.a-marigold .meta,.a-marigold .kick{color:#a5710a;} .a-marigold .btn{background:var(--marigold);} .a-marigold .subhead::before{background:var(--marigold);} .a-marigold .callout{background:#f4e8cc;border-left:6px solid var(--marigold);} .a-marigold .line .v{color:#a5710a;}