/* Urban Discovery — Shared Styles (v1) */
/* ------------------------------------------------------------------ */
:root{
  --bg:#070a10; --bg2:#0b0f14;          /* deep darks */
  --text:#eaf0f8; --muted:#a9b7cf;      /* copy colours */

  --brand:#7c5cff;                      /* pinky-purple primary */
  --brand-2:#a77bff;                    /* hover tint */
  --aqua:#00e0b8; --coral:#ff6b6b;      /* secondary accents (light touches only) */

  --radius:18px;
  --shadow:0 12px 34px rgba(0,0,0,.45), 0 2px 12px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:
    radial-gradient(900px 400px at 15% -10%, rgba(124,92,255,.25), transparent 60%),
    radial-gradient(900px 400px at 85% -10%, rgba(0,224,184,.22), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}

a{color:inherit; text-decoration:none}
img{display:block; width:100%; height:auto; border-radius:14px}
.container{width:min(1200px,92%); margin-inline:auto}

/* Header ------------------------------------------------------------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(9,13,20,.68); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:.8rem}
.logo{width:40px; height:40px; border-radius:12px; position:relative; overflow:hidden; isolation:isolate}
.logo::before{content:""; position:absolute; inset:-40%; border-radius:50%;
  background:conic-gradient(from 0deg, var(--brand), var(--aqua), var(--coral), var(--brand));
  filter:blur(6px); animation:spin 16s linear infinite; opacity:.9; z-index:-1}
.logo::after{content:""; position:absolute; inset:3px; border-radius:10px;
  background:radial-gradient(120px 80px at 30% 20%, rgba(255,255,255,.22), rgba(255,255,255,.06) 40%, transparent 70%),
             linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.brand h1{margin:0; font-size:1rem; letter-spacing:.6px; font-weight:800}
.menu{display:flex; gap:1rem}
.menu a{color:#cfe0ff; padding:.55rem .75rem; border-radius:10px}
.menu a[aria-current="page"], .menu a:hover{background:rgba(255,255,255,.06)}

/* Hero (blobs only here) -------------------------------------------- */
.hero{padding:64px 0 28px; position:relative; overflow:hidden}
.hero .container{position:relative; z-index:1}
.kicker{display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem;
  border-radius:999px; background:rgba(124,92,255,.16); color:#d9d1ff; border:1px solid rgba(124,92,255,.28)}
.title{font-size:clamp(1.9rem,4.2vw,3.1rem); line-height:1.08; margin:.6rem 0 .55rem; font-weight:800}
.subtitle{color:var(--muted); max-width:70ch}

.parallax-wrap{position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.blob{position:absolute; width:720px; height:480px; border-radius:50%; filter:blur(34px); opacity:.55; animation:floaty 10s ease-in-out infinite}
.blob.one{background:radial-gradient(closest-side, rgba(124,92,255,.55), transparent 70%); top:-6%; left:-6%}
.blob.two{background:radial-gradient(closest-side, rgba(0,224,184,.45), transparent 70%); top:-12%; right:-6%; animation-duration:12s}
.blob.three{background:radial-gradient(closest-side, rgba(255,107,107,.35), transparent 70%); bottom:-10%; left:18%; animation-duration:14s}

/* Section basics ----------------------------------------------------- */
section{padding:36px 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1rem}
.section-head h2{margin:0; font-size:1.5rem}
.section-head p{margin:0; color:var(--muted)}

/* Feature trio (Audit / Document / Archive) ------------------------- */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.feature{
  position:relative; overflow:hidden; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.1);
  background:#0a0f18; box-shadow:var(--shadow);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  content-visibility:auto; contain-intrinsic-size: 300px 188px;
}
.feature img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; border-radius:0}
.feature::after{content:""; position:absolute; inset:0; opacity:0; transition:opacity .22s ease;
  background:radial-gradient(60% 60% at 50% 100%, rgba(124,92,255,.32), transparent 60%)}
.feature:hover{transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.45); border-color:rgba(255,255,255,.18)}
.feature:hover::after{opacity:1}
.feature .tag{position:absolute; left:10px; top:10px; padding:.32rem .6rem; border-radius:999px;
  background:#00000099; border:1px solid rgba(255,255,255,.18); color:#d9e2f2; font-size:.8rem}
.feature .label{position:absolute; left:10px; bottom:10px; padding:.4rem .7rem; border-radius:999px;
  background:var(--brand); color:#fff; font-weight:700; border:1px solid rgba(255,255,255,.14); box-shadow:0 2px 6px rgba(0,0,0,.4)}

/* Latest grid -------------------------------------------------------- */
.gallery{display:grid; grid-template-columns:repeat(12,1fr); gap:12px; align-items:stretch}
.tile{
  display:block; position:relative; overflow:hidden; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.1); background:#0a0f18; aspect-ratio:16/10;
  transition:transform .22s ease, box-shadow .25s ease, border-color .22s ease; will-change:transform;
  content-visibility:auto; contain-intrinsic-size: 300px 188px;
}
.tile img{width:100%; height:100%; object-fit:cover; border-radius:0; opacity:0; animation:fadeIn .35s ease forwards}
.tile::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.55)); opacity:0; transition:opacity .25s ease}
.tile:hover::after{opacity:1}
.tile:hover{transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.45); border-color:rgba(255,255,255,.18)}
.tile .label{position:absolute; left:10px; bottom:10px; padding:.35rem .6rem; border-radius:999px;
  background:var(--brand); color:#fff; font-weight:600; font-size:.85rem; border:1px solid rgba(255,255,255,.12); box-shadow:0 2px 6px rgba(0,0,0,.4)}

.span-6{grid-column:span 6} .span-4{grid-column:span 4} .span-3{grid-column:span 3}

/* Slab to keep content neutral (no blobs inside) -------------------- */
.slab{background:linear-gradient(180deg, rgba(7,10,16,.96), rgba(11,15,20,.96));
  border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}

/* Bottom blob band --------------------------------------------------- */
.blob-band{height:220px; position:relative; overflow:hidden}
.blob-band::before,.blob-band::after{content:""; position:absolute; inset:0; filter:blur(38px); opacity:.55; pointer-events:none}
.blob-band::before{
  background:
    radial-gradient(700px 300px at 10% 110%, rgba(124,92,255,.28), transparent 60%),
    radial-gradient(700px 300px at 90% 110%, rgba(0,224,184,.22), transparent 60%);
}
.blob-band::after{background:radial-gradient(600px 220px at 50% 120%, rgba(255,107,107,.16), transparent 60%)}

/* Footer ------------------------------------------------------------- */
footer{padding:28px 0 60px; color:#9fb0cb; border-top:1px solid rgba(255,255,255,.06)}

/* Responsive --------------------------------------------------------- */
@media (max-width:1000px){ .features{grid-template-columns:1fr 1fr} }
@media (max-width:920px){ .menu{display:none} }
@media (max-width:720px){
  .gallery{grid-template-columns:repeat(6,1fr)}
  .span-6{grid-column:span 6}
  .span-4,.span-3{grid-column:span 3}
  .features{grid-template-columns:1fr}
}

/* Motion prefs ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }

/* Animations --------------------------------------------------------- */
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
@keyframes fadeIn{to{opacity:1}}


/* ---- Report-specific CSS from report-template.html ---- */
.report-hero{padding:60px 0 0}
    .report-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap}
    .report-meta{color:#9fb0cb}
    .prose{max-width:72ch}
    .prose p{margin:.7rem 0}
    .photo-grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:10px; margin-top:1rem}
    .photo-grid .span-6{grid-column: span 6}
    .photo-grid .span-4{grid-column: span 4}
    .photo-grid img{aspect-ratio:16/10; object-fit:cover}

/* --- Full-width report content overrides --- */
.container { width: min(1200px, 92%); margin-inline: auto; }
.entry, .prose.entry { max-width: 100% !important; }

.entry p, .entry ul, .entry ol, .entry blockquote, .entry h2, .entry h3, .entry h4 {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}

.entry img, .entry figure > img, .entry .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius, 18px);
  margin: 18px auto;
}

.entry .alignwide  { width: min(1200px, 96%); margin-left: auto; margin-right: auto; }
.entry .alignfull  { width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: none; }

.entry, .prose.entry { max-width: 100% !important; }
.entry p, .entry ul, .entry ol, .entry blockquote,
.entry h2, .entry h3, .entry h4 { max-width: 72ch; margin-left:auto; margin-right:auto; }
.entry img, .entry figure img, .entry .wp-block-image img { width:100%; height:auto; border-radius:18px; display:block; margin:18px auto; }
.entry .alignwide { width: min(1200px, 96%); margin-inline:auto; }
.entry .alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width:none; }