/* =========================================================
   MIZ.au — Design System
   A national policy platform for Mandatory Inclusionary Zoning.

   Palette is drawn from the existing MIZ mark: deep indigo-navy
   (institutional authority) with a single magenta accent lifted
   from the wordmark's building blocks, used sparingly as the
   "one highlighted dwelling in ten" motif that runs through the
   site — a direct visual echo of the Framework's 10% minimum
   contribution standard.
   ========================================================= */

:root{
  /* --- colour --- */
  --ink:        #161b2c;
  --ink-soft:   #4d5468;
  --ink-faint:  #8a8f9e;
  --paper:      #f5f4ef;
  --paper-raised: #ffffff;
  --primary:    #263866;
  --primary-dark:#141d38;
  --primary-tint:#e8ebf3;
  --accent:     #cf3577;
  --accent-tint:#f7dfeb;
  --accent-dark:#a12760;
  --line:       #ddd8c9;
  --line-soft:  #e9e6da;
  --success:    #2f6b4f;

  /* --- type --- */
  --f-display: 'Source Serif 4', Georgia, serif;
  --f-body:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* --- scale --- */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.4vw, 2.6rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.2vw, 3.6rem);
  --step-5:  clamp(3rem, 2.2rem + 3.6vw, 5rem);

  /* --- layout --- */
  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; }
button{ font-family: inherit; }

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h1{ font-size: var(--step-5); }
h2{ font-size: var(--step-4); }
h3{ font-size: var(--step-2); }
h4{ font-size: var(--step-1); font-family: var(--f-body); font-weight: 700; }

p{ margin: 0 0 1em; color: var(--ink-soft); }
p:last-child{ margin-bottom:0; }

.lede{
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 62ch;
}

.eyebrow{
  display:flex;
  align-items:center;
  gap: 0.6em;
  font-family: var(--f-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-dark);
  font-weight: 500;
  margin-bottom: 0.9em;
}
.eyebrow::before{
  content:"";
  width: 1.6em; height: 2px;
  background: var(--accent);
  display:inline-block;
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  padding: 0.85em 1.4em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.btn svg{ width: 1em; height:1em; flex: none; }

.btn-primary{ background: var(--primary); color: #fff; }
.btn-primary:hover{ background: var(--primary-dark); transform: translateY(-1px); }

.btn-accent{ background: var(--accent); color: #fff; }
.btn-accent:hover{ background: var(--accent-dark); transform: translateY(-1px); }

.btn-ghost{ background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--ink); }

.btn-ghost-light{ background: transparent; border-color: rgba(255,255,255,.35); color:#fff; }
.btn-ghost-light:hover{ border-color: #fff; }

.btn-sm{ padding: 0.6em 1.1em; font-size: var(--step--1); }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(245,244,239,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.site-header.is-scrolled{ box-shadow: 0 6px 24px rgba(20,20,40,0.06); }

.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
  gap: 1.5rem;
}
.brand{ display:flex; align-items:center; gap:0.7rem; text-decoration:none; flex: none; }
.brand img{ height: 34px; width:auto; }
.brand-word{ display:none; }

.primary-nav{ display:flex; align-items:center; gap: 2rem; }
.primary-nav ul{ list-style:none; display:flex; gap:1.9rem; margin:0; padding:0; }
.primary-nav a{
  text-decoration:none; color: var(--ink);
  font-size: var(--step--1); font-weight: 600;
  position: relative; padding: 0.3em 0;
}
.primary-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--accent); transition: right .22s var(--ease);
}
.primary-nav a:hover::after, .primary-nav a.is-active::after{ right:0; }
.primary-nav a.is-active{ color: var(--primary); }

.header-actions{ display:flex; align-items:center; gap:1rem; }
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:0.4rem;
  flex-direction: column; gap:5px;
}
.nav-toggle span{ width:22px; height:2px; background:var(--ink); display:block; }

.primary-nav .nav-secondary{ display:none; }
.primary-nav .nav-cta{ display:none; }

@media (max-width: 900px){
  .brand-word{ display:none; }
  .primary-nav .nav-secondary{
    display:flex; flex-direction:column; gap: 0.9rem; margin-top: 1.6rem;
    padding-top: 1.4rem; border-top: 1px solid var(--line);
  }
  .primary-nav .nav-secondary a{ font-size: var(--step-0); color: var(--ink-soft); font-weight:500; text-decoration:none; }
  .primary-nav{
    position: fixed; inset: 76px 0 0 0; background: var(--paper);
    flex-direction: column; align-items:flex-start; padding: 2rem var(--gutter);
    transform: translateX(100%); transition: transform .3s var(--ease);
    overflow-y:auto;
  }
  .primary-nav.is-open{ transform: translateX(0); }
  .primary-nav ul{ flex-direction:column; gap: 1.3rem; width:100%; }
  .primary-nav ul a{ font-size: var(--step-1); }
  .header-actions .btn-primary{ display:none; }
  .primary-nav .nav-cta{ display:block; margin-top:1.5rem; }
  .nav-toggle{ display:flex; }
}

/* ---------- sections ---------- */
section{ position:relative; }
.section{ padding: clamp(3.5rem, 8vw, 7rem) 0; }
.section-tight{ padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section-band{ background: var(--paper-raised); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.section-dark{ background: var(--primary-dark); color: #fff; }
.section-dark p{ color: rgba(255,255,255,0.72); }
.section-dark h2, .section-dark h3, .section-dark h4{ color:#fff; }

.section-head{ max-width: 720px; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head.center .lede{ margin-inline:auto; }

/* ---------- hero dwelling motif ---------- */
.dwelling-motif{ display:flex; flex-direction:column; gap:0.7rem; }
.dwelling-svg{ width:100%; height:auto; max-width: 460px; display:block; }
.motif-caption{ font-family: var(--f-mono); font-size: 0.75rem; color: var(--ink-faint); letter-spacing: 0.02em; }
.motif-caption b{ color: var(--accent-dark); }
.section-dark .motif-caption{ color: rgba(255,255,255,0.5); }
.section-dark .motif-caption b{ color: var(--accent); }
.mini-row{ height: 22px; width: auto; flex: none; }

/* ---------- cards ---------- */
.card{
  background: var(--paper-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  padding: clamp(1.6rem, 3vw, 2.2rem);
}

.prop-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.prop-card{
  border-radius: var(--radius-m);
  padding: 2rem 1.8rem;
  background: var(--paper-raised);
  border: 1px solid var(--line-soft);
  border-top: 3px solid var(--primary);
}
.prop-card:nth-child(2){ border-top-color: var(--accent); }
.prop-card:nth-child(3){ border-top-color: var(--success); }
.prop-card .num{ font-family: var(--f-mono); font-size: var(--step--1); color: var(--ink-faint); display:block; margin-bottom: 0.8em; }
.prop-card h3{ font-size: var(--step-1); margin-bottom: 0.4em; }

@media (max-width: 820px){ .prop-grid{ grid-template-columns: 1fr; } }

/* ---------- four step diagram ---------- */
.step-flow{
  display:grid; grid-template-columns: repeat(4,1fr);
  gap: 0; align-items:stretch; margin: 2.5rem 0;
}
.step-flow .step{
  padding: 1.6rem 1.4rem; position:relative; text-align:left;
}
.step-flow .step .step-num{
  font-family: var(--f-mono); font-size: var(--step--1); color: var(--accent-dark);
}
.step-flow .step h4{ margin: 0.5em 0 0.2em; font-size: var(--step-0); }
.step-flow .step p{ font-size: var(--step--1); margin:0; }
.step-flow .step:not(:last-child)::after{
  content:"→"; position:absolute; right:-0.1rem; top: 1.6rem;
  color: var(--ink-faint); font-size: 1.2rem;
}
@media (max-width: 860px){
  .step-flow{ grid-template-columns: 1fr; }
  .step-flow .step{ border-left: 2px solid var(--line); padding-left: 1.2rem; }
  .step-flow .step:not(:last-child)::after{ content:"↓"; right:auto; left:-0.6rem; top:auto; bottom:-1.6rem; }
}

/* ---------- framework tiles / accordion ---------- */
.tiles{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.tile{ border-bottom:1px solid var(--line); }
.tile-trigger{
  width:100%; display:flex; align-items:center; gap:1.2rem;
  background:none; border:none; text-align:left; cursor:pointer;
  padding: 1.6rem 0.2rem; color: var(--ink);
}
.tile-trigger .tile-num{ font-family: var(--f-mono); color: var(--accent-dark); font-size: var(--step-0); flex:none; width:2.4ch; }
.tile-trigger .tile-title{ flex:1; }
.tile-trigger .tile-title h3{ font-size: var(--step-1); margin:0; }
.tile-trigger .tile-title span{ display:block; font-size: var(--step--1); color: var(--ink-soft); font-weight:400; margin-top:0.2em; }
.tile-trigger .plus{
  flex:none; width: 28px; height:28px; border-radius:50%;
  border: 1px solid var(--line); display:flex; align-items:center; justify-content:center;
  position:relative; transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.tile-trigger .plus::before, .tile-trigger .plus::after{
  content:""; position:absolute; background: var(--ink); transition: transform .25s var(--ease), background .25s var(--ease);
}
.tile-trigger .plus::before{ width:10px; height:2px; }
.tile-trigger .plus::after{ width:2px; height:10px; }
.tile[open] .tile-trigger .plus{ background: var(--primary); border-color: var(--primary); transform: rotate(180deg); }
.tile[open] .tile-trigger .plus::before, .tile[open] .tile-trigger .plus::after{ background:#fff; }
.tile[open] .tile-trigger .plus::after{ transform: scaleY(0); }

.tile-body{ padding: 0 0.2rem 1.8rem 3.6rem; max-width: 68ch; }
.tile-body ul{ padding-left: 1.2rem; margin: 0.6em 0; color: var(--ink-soft); }
.tile-body li{ margin-bottom: 0.4em; }
.tile > summary{ list-style:none; }
.tile > summary::-webkit-details-marker{ display:none; }

/* ---------- evidence ---------- */
.findings-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:1rem; margin-top:1.6rem; }
.finding{
  display:flex; gap:0.9rem; padding: 1.1rem 1.2rem; background: var(--paper);
  border: 1px solid var(--line-soft); border-radius: var(--radius-s);
}
.finding .tick{ flex:none; color: var(--accent); font-family: var(--f-mono); }
@media (max-width:760px){ .findings-grid{ grid-template-columns:1fr; } }

.locale-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:1.5rem; }
.locale-card{ border:1px solid var(--line-soft); border-radius: var(--radius-m); padding:1.8rem; background:var(--paper-raised); }
.locale-card h4{ font-family: var(--f-mono); text-transform:uppercase; letter-spacing:0.08em; font-size:var(--step--1); color:var(--ink-faint); font-weight:600; margin-bottom:0.8em; }
.locale-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.9rem; }
.locale-list li{ display:flex; justify-content:space-between; gap:1rem; border-top:1px solid var(--line-soft); padding-top:0.9rem; }
.locale-list li:first-child{ border-top:none; padding-top:0; }
.locale-list .place{ font-weight:700; }
.locale-list .note{ color:var(--ink-soft); font-size:var(--step--1); text-align:right; }
@media (max-width:760px){ .locale-grid{ grid-template-columns:1fr; } }

/* ---------- report / download block ---------- */
.report-block{
  display:grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items:center;
  background: var(--primary); color:#fff; border-radius: var(--radius-l);
  padding: clamp(1.8rem, 4vw, 3rem);
}
.report-cover{
  background: var(--primary-dark); border-radius: var(--radius-s);
  aspect-ratio: 3/4; display:flex; flex-direction:column; justify-content:space-between;
  padding:1.2rem; border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}
.report-cover .rc-eyebrow{ font-family: var(--f-mono); font-size: 0.62rem; letter-spacing:0.12em; text-transform:uppercase; color: rgba(255,255,255,0.6); }
.report-cover .rc-title{ font-family: var(--f-display); font-size: 1.15rem; line-height:1.2; }
.report-block h3{ color:#fff; }
.report-block p{ color: rgba(255,255,255,0.75); }
.report-actions{ display:flex; flex-wrap:wrap; gap:0.8rem; margin-top:1.2rem; }
@media (max-width:700px){ .report-block{ grid-template-columns:1fr; } .report-cover{ width:140px; } }

/* ---------- logos ---------- */
.logo-wall{ display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; }
.logo-tile{
  border:1px solid var(--line-soft); border-radius: var(--radius-s); background: var(--paper-raised);
  aspect-ratio: 3/2; display:flex; align-items:center; justify-content:center;
  color: var(--ink-faint); font-family: var(--f-mono); font-size: var(--step--1); text-align:center; padding: 0.8rem;
}
@media (max-width:760px){ .logo-wall{ grid-template-columns: repeat(2,1fr); } }

.named-partners{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.named-partner{ display:flex; justify-content:space-between; gap:1rem; padding:1.4rem 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.named-partner .role{ font-family: var(--f-mono); font-size: var(--step--1); color: var(--accent-dark); }
.named-partner .name{ font-weight:700; }
.named-partner .desc{ color: var(--ink-soft); max-width:46ch; font-size: var(--step--1); }

/* ---------- get involved cards ---------- */
.involve-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:1.2rem; }
.involve-card{
  border:1px solid var(--line-soft); border-radius: var(--radius-m); padding: 1.8rem 1.5rem;
  background: var(--paper-raised); display:flex; flex-direction:column; gap:0.9rem; min-height: 240px;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.involve-card:hover{ border-color: var(--primary); transform: translateY(-3px); }
.involve-card .tag{ font-family: var(--f-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color: var(--accent-dark); }
.involve-card h3{ font-size: var(--step-0); margin:0; }
.involve-card p{ font-size: var(--step--1); flex:1; }
@media (max-width: 980px){ .involve-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .involve-grid{ grid-template-columns: 1fr; } }

/* ---------- misc ---------- */
.stat-line{ display:flex; align-items:baseline; gap:0.6rem; font-family: var(--f-mono); }
.stat-line .num{ font-size: var(--step-3); color: var(--primary); font-weight:600; }

.divider{ height:1px; background: var(--line); border:none; margin: 3rem 0; }

.tag-list{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.tag-list span{ font-family: var(--f-mono); font-size:0.72rem; padding:0.35em 0.7em; border:1px solid var(--line); border-radius:999px; color: var(--ink-soft); }

.split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items:start; }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; } }

/* breadcrumb / page hero */
.page-hero{ padding: clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem); }
.page-hero .eyebrow{ margin-bottom:1rem; }
.page-hero h1{ font-size: var(--step-4); max-width: 18ch; }

/* ---------- footer ---------- */
.site-footer{ background: var(--primary-dark); color: rgba(255,255,255,0.7); padding: 3.5rem 0 2rem; }
.site-footer a{ color: #fff; text-decoration:none; }
.footer-top{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom: 2.5rem; border-bottom:1px solid rgba(255,255,255,0.12); }
.footer-brand img{ height:30px; margin-bottom:1rem; filter: brightness(0) invert(1); }
.footer-brand p{ color: rgba(255,255,255,0.55); max-width: 32ch; }
.footer-col h5{ font-family: var(--f-mono); text-transform:uppercase; letter-spacing:0.1em; font-size:0.72rem; color: rgba(255,255,255,0.45); margin-bottom:1rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.7rem; }
.footer-col a{ font-size: var(--step--1); color: rgba(255,255,255,0.8); }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:1.6rem; flex-wrap:wrap; gap:1rem; font-size: 0.8rem; color: rgba(255,255,255,0.45); }
@media (max-width: 860px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }