/* Ian's Sensory Garden – main styles */
/* Layout: headline beside a photo collage, then bright coloured bands on a clean sky-white page, content in a 1200px column */
:root{
  --bg:#F6FAFF; --surface:#FFFFFF; --ink:#18213A; --muted:#3D4763; --label:#5A6380; --line:#DCE3F0;
  --red:#E8382D; --orange:#FF8A1F; --yellow:#FFC814; --green:#2FA845; --blue:#1F7FE6; --purple:#6C3FD6; --pink:#EE4B93;
  --primary:#6C3FD6; --on-primary:#FFFFFF; --primary-edge:#4A2899;
  --band:#6C3FD6; --band-ink:#FFFFFF; --band-muted:#E6DDFF; --track:#8C67E6;
  --quote:#FFC814; --quote-ink:#2A1E00; --quote-muted:#5A4600;
  --foot:#18213A; --foot-ink:#C9D2E8;
  --field:#F8FAFF; --field-line:#B9C4DA;
  --display:'Bricolage Grotesque', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --body:'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0F1426; --surface:#182038; --ink:#EEF2FF; --muted:#C1C9E0; --label:#9FA9C8; --line:#2A3452;
  --primary:#B49BFF; --on-primary:#1B0F40; --primary-edge:#7D62D6;
  --band:#2D1C66; --band-ink:#FFFFFF; --band-muted:#D6CCFF; --track:#4A3591;
  --quote:#3A2E05; --quote-ink:#FFE28A; --quote-muted:#E8CF7A;
  --foot:#090C18; --foot-ink:#AEB8D3; --field:#121931; --field-line:#3A4568; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0F1426; --surface:#182038; --ink:#EEF2FF; --muted:#C1C9E0; --label:#9FA9C8; --line:#2A3452;
  --primary:#B49BFF; --on-primary:#1B0F40; --primary-edge:#7D62D6;
  --band:#2D1C66; --band-ink:#FFFFFF; --band-muted:#D6CCFF; --track:#4A3591;
  --quote:#3A2E05; --quote-ink:#FFE28A; --quote-muted:#E8CF7A;
  --foot:#090C18; --foot-ink:#AEB8D3; --field:#121931; --field-line:#3A4568; color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.wrap{max-width:1248px;margin:0 auto;padding-left:max(24px, env(safe-area-inset-left, 0px));padding-right:max(24px, env(safe-area-inset-right, 0px))}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0}
h2{font-size:clamp(32px,4vw,46px);line-height:1.08;font-weight:800;letter-spacing:-0.01em}
h3{font-size:24px;line-height:1.2;font-weight:700}
p{margin:0}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--label)}
.lede{color:var(--muted);max-width:40em}
section{padding-block:88px}

/* Flower logo dots */
.flower{display:inline-grid;grid-template-columns:repeat(3,10px);grid-template-rows:repeat(3,10px);gap:1px}
.flower i{display:block;border-radius:50%}

/* Top bar */
.topbar{padding-block:14px;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:22px}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;font-weight:700;font-size:16px}
.nav a{text-decoration:none;padding:8px 0}
.nav a:not(.btn):hover{color:var(--primary)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;border-radius:999px;font-weight:700;text-decoration:none;border:0;font:inherit;font-weight:700;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--edge)!important}
.btn-primary{--edge:var(--primary-edge);background:var(--primary);color:var(--on-primary);box-shadow:0 6px 0 var(--edge)}
.btn-sun{--edge:#C48F00;background:var(--yellow);color:#2A1E00;box-shadow:0 6px 0 var(--edge)}
.btn-ghost{--edge:var(--ink);background:var(--surface);color:var(--ink);border:2px solid var(--ink);box-shadow:0 6px 0 var(--edge)}
.nav .btn{min-height:44px;padding:10px 22px}

/* Hero: headline beside a photo collage (flower bed photo with a walk snapshot) */
.hero{padding-block:64px 104px;position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:56px}
.hero-text{display:flex;flex-direction:column;gap:22px;min-width:0}
.hero h1{font-size:clamp(40px,5.2vw,70px);line-height:1.02;font-weight:800;letter-spacing:-0.02em}
.hero h1 .c1{color:var(--green)} .hero h1 .c2{color:var(--pink)} .hero h1 .c3{color:var(--blue)} .hero h1 .c4{color:var(--orange)}
.hero .lede{font-size:19px}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-photos{position:relative;min-width:0;margin-bottom:28px}
.hero-main{display:block;width:100%;max-width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:32px;box-shadow:0 12px 0 var(--purple),0 30px 60px rgba(24,33,58,.18)}
.hero-snap{position:absolute;left:-40px;bottom:-56px;width:46%;margin:0;background:#FFFFFF;padding:10px 10px 12px;border-radius:10px;transform:rotate(-5deg);box-shadow:0 18px 36px rgba(24,33,58,.25)}
.hero-snap img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.hero-snap figcaption{font-family:var(--display);font-weight:700;font-size:15px;color:#18213A;text-align:center;padding-top:8px}
.hero-dots{position:absolute;top:-22px;right:-14px;display:flex;gap:8px;transform:rotate(8deg)}
.hero-dots i{width:22px;height:22px;border-radius:50%;display:block}
@media (max-width:900px){
  .hero{padding-block:36px 88px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero-photos{margin-inline:8px 4px}
  .hero-snap{left:-4px;bottom:-48px;width:52%}
  .hero-dots{right:4px}
}

/* Donate band */
.band{background:var(--band);color:var(--band-ink);padding-block:56px}
.band .wrap{display:flex;flex-direction:column;gap:24px}
.band-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.band h2{font-size:clamp(28px,3.2vw,38px)}
.band .amount{font-size:20px;font-variant-numeric:tabular-nums}
.track{height:22px;background:var(--track);border-radius:999px;overflow:hidden}
.fill{height:100%;width:40%;border-radius:999px;background:linear-gradient(90deg,var(--red) 0 16%,var(--orange) 16% 32%,var(--yellow) 32% 48%,var(--green) 48% 64%,var(--blue) 64% 80%,var(--pink) 80% 100%)}
.band-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.band-bottom p{color:var(--band-muted);max-width:40em}

/* Walk */
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
.section-head > div{display:flex;flex-direction:column;gap:12px;max-width:720px}
.date-chip{display:inline-flex;align-items:center;gap:10px;font-weight:700;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:8px 16px}
.date-chip b{width:12px;height:12px;border-radius:50%;background:var(--green);display:block}
.video{width:100%;max-width:100%;aspect-ratio:16/9;display:block;background:#000;border-radius:28px;box-shadow:0 12px 0 var(--blue),0 30px 50px rgba(24,33,58,.2)}
.video-note{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--muted)}
.video-note a{font-weight:700;color:var(--ink)}

/* Garden cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:40px}
.card{background:var(--surface);border:2px solid var(--line);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:12px;box-shadow:0 8px 0 var(--c);transition:transform .2s ease}
.card:hover{transform:translateY(-4px)}
.tile{width:56px;height:56px;border-radius:18px;background:var(--c);display:flex;align-items:center;justify-content:center}
.card p{color:var(--muted);font-size:17px}

/* Quote */
.quote{background:#2A1A0C linear-gradient(rgba(22,12,4,.62),rgba(22,12,4,.62)) ;background-image:linear-gradient(rgba(22,12,4,.58),rgba(22,12,4,.66)),url(../img/sunset.jpg);background-size:cover;background-position:center 60%;color:#FFFFFF;padding-block:120px}
.quote figure{margin:0 auto;max-width:900px;display:flex;flex-direction:column;gap:20px}
.quote blockquote{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(28px,3.4vw,42px);line-height:1.22;text-wrap:balance}
.quote figcaption{color:#F6E2C2;font-size:17px}

/* Ian */
.split{display:flex;flex-wrap:wrap;gap:56px}
.split > .side{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:16px}
.split > .main{flex:999 1 520px;min-width:0}
.photo{width:100%;max-width:440px;aspect-ratio:4/5;object-fit:cover;border-radius:28px;box-shadow:0 10px 0 var(--orange);margin-top:8px}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.timeline li{display:flex;flex-wrap:wrap;gap:8px 24px;padding-block:28px;border-top:2px solid var(--line)}
.timeline li:last-child{border-bottom:2px solid var(--line)}
.when{flex:0 0 130px;font-weight:700;display:flex;align-items:flex-start;gap:10px;color:var(--label)}
.when b{flex:0 0 14px;height:14px;border-radius:50%;background:var(--c);margin-top:6px}
.timeline .what{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:6px}
.timeline .what p{color:var(--muted)}

/* Visit form */
.visit{background:var(--surface);border-top:2px solid var(--line)}
.visit-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
label{font-weight:700;font-size:16px}
label span{font-weight:400;color:var(--label)}
input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea{font:inherit;color:var(--ink);background:var(--field);border:2px solid var(--field-line);border-radius:14px;padding:12px 14px;min-height:50px;width:100%}
textarea{resize:vertical;min-height:110px}
input:focus,textarea:focus{border-color:var(--purple);outline:none;box-shadow:0 0 0 3px rgba(108,63,214,.25)}
.form-status{grid-column:1/-1;font-weight:700;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:14px;padding:14px 16px}
@media (max-width:560px){.visit-form{grid-template-columns:minmax(0,1fr)}}

/* Footer */
.site-footer{background:var(--foot);color:var(--foot-ink);padding-block:48px}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;font-size:16px}
.site-footer .col{display:flex;flex-direction:column;gap:6px}
.site-footer strong{font-family:var(--display);font-size:22px;color:#FFFFFF}

@media (prefers-reduced-motion:reduce){.btn,.card{transition:none}}