/* The Chelmsford, Ongar and Villages Market - Muvin brand.
   Tokens from documents/brand/design-tokens.md. Azo Sans display, Poppins body.
   Gold below 16px uses #A7843F; the raw gold #C7A86A is 2.27:1 on white and fails AA. */

@font-face{font-family:"Azo Sans";src:url("fonts/AzoSans-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Azo Sans";src:url("fonts/AzoSans-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Azo Sans";src:url("fonts/AzoSans-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Azo Sans";src:url("fonts/AzoSans-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --ink:#064444; --ink700:#393939; --ink400:#6E6E6E;
  --paper:#FCFBF8; --white:#FFFFFF; --rule:#D6D6D6;
  --accent:#C7A86A; --accent-text:#A7843F; --accent-soft:#F7F2E9;
  --grey:#56605F; --deep:#042D2D;
  --display:"Azo Sans",system-ui,sans-serif;
  --body:"Poppins",sans-serif;
  --wrap:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-weight:400;font-size:16px;line-height:1.6}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.2;margin:0}
h2{font-size:32px}
h3{font-size:24px;font-weight:500}
h4{font-size:18px;font-weight:500}
p{margin:0 0 1em}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
em,i{font-style:normal;font-weight:600}
strong,b{font-weight:600}

/* header */
.topbar{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--rule)}
.topin{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}
.lockup{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:14px;font-weight:500}
.lockup img{height:22px;width:auto;display:block}
.lockup .sep{color:var(--rule)}
.lockup .sub{color:var(--ink400);font-weight:300}
@media(max-width:620px){.lockup .sep,.lockup .sub{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--white);
  font-family:var(--body);font-size:13px;font-weight:300;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;padding:12px 24px;border-radius:4px;border:1px solid var(--ink)}
.btn:hover{color:var(--accent)}
.btn svg{width:13px;height:13px;fill:currentColor;flex:none}
.btn.sm{padding:9px 16px;font-size:11px}
.btn.ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.7)}
.btn.ghost:hover{background:var(--white);color:var(--ink)}

/* hero */
.hero{position:relative;color:var(--white);background:var(--deep);overflow:hidden}
.hero .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.46}
.hero .wrap{position:relative;padding-top:88px;padding-bottom:56px}
.hero h1{font-size:clamp(38px,7vw,76px);font-weight:600;margin:0 0 14px;max-width:16em}
.hero .sub{font-size:clamp(17px,2.2vw,22px);font-weight:300;max-width:34em;margin:0 0 22px}
.label{font-family:var(--display);font-size:13px;font-weight:300;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.hero hr.rule{border:0;border-top:1px solid rgba(255,255,255,.35);margin:26px 0}
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;
  border-top:1px solid rgba(255,255,255,.28);padding-top:22px}
.meta>div{font-size:14px;line-height:1.5}
.meta .k{font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:6px}
.meta b{display:block;font-weight:600;font-size:16px}
.meta span{display:block;color:rgba(255,255,255,.82);font-size:13px;font-weight:300}
@media(max-width:760px){.meta{grid-template-columns:1fr;gap:16px}}

/* sections */
section{padding:72px 0;border-top:1px solid var(--rule)}
section:nth-of-type(even){background:var(--white)}
.sechead{max-width:48em;margin-bottom:34px}
.secno{font-family:var(--display);font-size:46px;font-weight:300;color:var(--accent);
  line-height:1;margin:0 0 6px}
.sechead h2{margin:4px 0 14px}
.lede{font-size:20px;font-weight:300;line-height:1.55;color:var(--ink)}

/* kpi tiles - each caption inside its own bounded box */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kpi{background:var(--white);border:1px solid var(--rule);border-radius:16px;padding:22px}
section:nth-of-type(even) .kpi{background:var(--paper)}
.kpi .k{font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink400);margin-bottom:10px;min-height:2.4em}
.kpi .v{font-family:var(--display);font-size:34px;font-weight:600;line-height:1.05}
.kpi .chg{font-size:13px;font-weight:600;margin-top:8px;color:var(--ink700)}
.kpi .chg.up{color:#1F6F4A}.kpi .chg.down{color:#A4343A}.kpi .chg.flat{color:var(--accent-text)}
.kpi .d{font-size:13px;font-weight:300;color:var(--ink700);margin-top:12px;
  border-top:1px solid var(--rule);padding-top:10px;line-height:1.5}
@media(max-width:980px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.kpis{grid-template-columns:1fr}}

/* tables */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 14px}
table{width:100%;border-collapse:collapse;font-size:14px;background:var(--white)}
section:nth-of-type(even) table{background:var(--paper)}
caption{text-align:left;font-family:var(--display);font-size:16px;font-weight:500;
  padding:0 0 10px;color:var(--ink)}
th,td{padding:10px 12px;border-bottom:1px solid var(--rule);text-align:right;
  white-space:nowrap;vertical-align:top}
th:first-child,td:first-child{text-align:left}
thead th{font-family:var(--display);font-size:12px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink400);border-bottom:1px solid var(--ink)}
tbody tr:last-child td{border-bottom:1px solid var(--ink)}
td.n{font-variant-numeric:tabular-nums}
tr.part td{background:var(--accent-soft)}
.up{color:#1F6F4A}.down{color:#A4343A}
.figcap{font-size:12.5px;font-weight:300;color:var(--ink400);line-height:1.55;
  max-width:60em;margin:10px 0 0}

/* caveat box - sits beside the figure it qualifies */
.caveat{border-left:3px solid var(--accent);background:var(--accent-soft);
  padding:16px 20px;border-radius:0 8px 8px 0;margin:22px 0;font-size:14.5px;line-height:1.6}
.caveat .ct{font-family:var(--display);font-size:12px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-text);margin-bottom:6px}
.caveat p:last-child{margin-bottom:0}
.caveat.warn{border-left-color:#A4343A;background:#FBF3F3}
.caveat.warn .ct{color:#A4343A}

/* pull-out */
.pull{font-family:var(--display);font-size:clamp(21px,3vw,30px);font-weight:300;line-height:1.35;
  border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);
  padding:26px 0;margin:34px 0;max-width:40em}
.pull b{font-weight:600}

/* small figure pair */
.smalls{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:40em;margin-top:26px}
.small{border:1px solid var(--rule);border-radius:8px;padding:18px;background:var(--white)}
section:nth-of-type(even) .small{background:var(--paper)}
.small .v{font-family:var(--display);font-size:28px;font-weight:600;line-height:1}
.small .k{font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink400);margin-bottom:8px}
.small .d{font-size:13px;font-weight:300;color:var(--ink700);margin-top:10px}
@media(max-width:620px){.smalls{grid-template-columns:1fr}}

/* charts */
.chart{margin:26px 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .bar{fill:var(--ink)}
.chart .bar.part{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:5 4}
.chart .bl{font-family:var(--body);font-size:11px;fill:var(--ink400)}
.chart .bv{font-family:var(--body);font-size:11px;fill:var(--ink);font-weight:600}
.legend{font-size:12.5px;color:var(--ink400);font-weight:300;margin-top:6px}

/* district blocks */
.blocks{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.block{border:1px solid var(--rule);border-radius:16px;padding:24px;background:var(--white)}
section:nth-of-type(even) .block{background:var(--paper)}
.block h3{margin-bottom:4px}
.block .place{font-size:13px;color:var(--ink400);font-weight:300;margin-bottom:14px}
.block dl{display:grid;grid-template-columns:auto auto;gap:6px 14px;margin:0 0 12px;font-size:14px}
.block dt{color:var(--ink400);font-weight:300}
.block dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.thinflag{display:block;border-left:3px solid #A4343A;background:#FBF3F3;padding:10px 14px;
  font-size:13px;line-height:1.55;border-radius:0 6px 6px 0;margin-top:12px}
@media(max-width:860px){.blocks{grid-template-columns:1fr}}

/* images */
.thirds{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0 0}
.thirds figure{margin:0}
.thirds img{width:100%;height:220px;object-fit:cover;border-radius:8px;display:block}
.thirds figcaption{font-size:12.5px;color:var(--ink400);font-weight:300;margin-top:8px;line-height:1.5}
@media(max-width:760px){.thirds{grid-template-columns:1fr}.thirds img{height:200px}}

/* map */
.map{background:var(--white);border:1px solid var(--rule);border-radius:16px;padding:24px;margin-bottom:22px}
section:nth-of-type(even) .map{background:var(--paper)}
.map svg{width:100%;height:auto;display:block}

/* lists */
ul.plain{margin:0 0 1em;padding-left:1.2em}
ul.plain li{margin-bottom:.5em}
ol.src{margin:0;padding-left:1.4em;font-size:14px}
ol.src li{margin-bottom:.9em;line-height:1.55}
ol.src a{word-break:break-all;font-size:13px}

/* closing + contact */
.closing{background:var(--ink);color:var(--white);border-top:0}
.closing h2,.closing h3{color:var(--white)}
.closing .lede,.closing p{color:rgba(255,255,255,.9)}
.closing .secno{color:var(--accent)}
.contact{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:start;
  border-top:1px solid rgba(255,255,255,.28);padding-top:30px;margin-top:34px}
.contact img{width:180px;height:180px;object-fit:cover;border-radius:50%;display:block}
.contact .cl{font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 8px}
.contact a{color:var(--white)}
.contact .row{font-size:16px;margin:0 0 6px}
@media(max-width:680px){.contact{grid-template-columns:1fr}.contact img{width:140px;height:140px}}
.pubby{border-top:1px solid rgba(255,255,255,.28);margin-top:34px;padding-top:22px;
  font-size:13px;font-weight:300;color:rgba(255,255,255,.78);line-height:1.6}

/* print - A4 portrait */
@media print{
  @page{size:A4 portrait;margin:14mm 13mm}
  html,body{background:#fff;color:#000;font-size:9.6pt;line-height:1.5}
  .topbar,.btnrow,.topcta,.noprint{display:none!important}
  a{text-decoration:none;color:#000}
  .wrap{max-width:none;padding:0}
  section{padding:0 0 9mm;background:#fff!important;break-before:page}
  section:nth-of-type(even){background:#fff!important}
  .hero{break-before:avoid;break-after:page;color:#fff;background:#042D2D;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .hero .wrap{padding:16mm 10mm}
  .hero .heroimg{opacity:.42}
  .hero h1{font-size:34pt}
  .hero .sub{font-size:13pt}
  .sechead{margin-bottom:5mm;break-after:avoid}
  h2{font-size:17pt;break-after:avoid}
  h3{font-size:12.5pt;break-after:avoid}
  .lede{font-size:11pt}
  .secno{font-size:24pt}
  .kpis{grid-template-columns:repeat(4,1fr);gap:4mm}
  .kpi{padding:4mm;border:.4pt solid #999;border-radius:2mm;break-inside:avoid}
  .kpi .v{font-size:14pt}
  .kpi .k{font-size:7pt;min-height:0}
  .kpi .d,.kpi .chg{font-size:7.4pt}
  .tw{overflow:visible}
  table{font-size:8.2pt}
  thead{display:table-header-group}
  tr{break-inside:avoid}
  th,td{padding:1.5mm 2mm;border-bottom:.4pt solid #bbb}
  thead th{border-bottom:.6pt solid #000;font-size:7pt}
  tr.part td{background:#F4EEE2!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .caveat{break-inside:avoid;background:#F7F2E9!important;border-left:2.5pt solid #A7843F;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;font-size:8.6pt;padding:3mm 4mm}
  .caveat.warn{background:#FBF3F3!important;border-left-color:#A4343A}
  .pull{font-size:14pt;break-inside:avoid;padding:5mm 0;margin:6mm 0}
  .blocks{grid-template-columns:repeat(2,1fr);gap:4mm}
  .block{break-inside:avoid;padding:4mm;border:.4pt solid #999;border-radius:2mm}
  .block dl{font-size:8.4pt}
  .thinflag{font-size:7.8pt;background:#FBF3F3!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .smalls,.small{break-inside:avoid}
  .small{border:.4pt solid #999}
  .thirds{gap:4mm;break-inside:avoid;margin-top:5mm}
  .thirds img{height:42mm}
  .thirds figcaption{font-size:7.4pt}
  .chart{break-inside:avoid;margin:5mm 0}
  .map{break-inside:avoid;border:.4pt solid #999;padding:4mm}
  .figcap{font-size:7.4pt}
  ol.src{font-size:8.2pt}
  ol.src a{font-size:7.6pt}
  .closing{background:#064444!important;color:#fff!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .closing h2,.closing h3,.closing p,.closing .lede,.closing a{color:#fff!important}
  .contact{grid-template-columns:40mm 1fr;gap:6mm;break-inside:avoid}
  .contact img{width:36mm;height:36mm}
  .pubby{font-size:7.6pt}
}