/* Tactile Access Project, hand-written CSS in the GOV.UK / RNIB / UK Parliament-petitions lineage.
   No framework. No component-library defaults. Accessible by design. */

:root{
  --ink:#0b0c0c;
  --paper:#ffffff;
  --paper-warm:#f9f8f6;
  --band:#f3f2f1;
  --rule:#b1b4b6;
  --rule-dark:#505a5f;
  --link:#1d70b8;
  --link-hover:#003078;
  --link-visited:#4c2c92;
  --green:#00703c;
  --green-dark:#005a30;
  --navy:#13344f;
  --navy-dark:#0d2538;
  --focus:#ffdd00;
  --tactile-bg:#f3efe6;
  --tactile-line:#3a352c;
  --tactile-fill:#cfc6b3;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--sans);
  font-size:19px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
}

/* ---- focus, the access commitment ---- */
a:focus,button:focus,input:focus,textarea:focus,select:focus,[tabindex]:focus,summary:focus{
  outline:3px solid var(--focus);
  outline-offset:0;
  box-shadow:0 -2px var(--focus),0 4px var(--ink);
  background:var(--focus);
  color:var(--ink);
  text-decoration:none;
}
input:focus,textarea:focus,select:focus{background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink);}

.skip-link{
  position:absolute;left:-999px;top:0;z-index:50;
  background:var(--ink);color:#fff;padding:12px 16px;font-weight:700;
}
.skip-link:focus{left:0;background:var(--focus);color:var(--ink);}

/* ---- phase banner (GOV.UK device) ---- */
.phase{
  background:var(--band);
  border-bottom:1px solid var(--rule);
  font-size:15px;
}
.phase .wrap{display:flex;gap:12px;align-items:baseline;padding:10px 0;flex-wrap:wrap;}
.phase .tag{
  background:var(--navy);color:#fff;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:12px;padding:3px 9px;border-radius:0;white-space:nowrap;
}
.phase .note{color:var(--rule-dark);}

/* ---- masthead ---- */
.masthead{background:var(--navy);color:#fff;border-bottom:6px solid var(--green);}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;flex-wrap:wrap;}
.masthead a.brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:#fff;}
.masthead svg.logo{height:46px;width:auto;display:block;}
.masthead .org{font-size:14px;color:#cdd6de;max-width:24ch;line-height:1.35;}

nav.primary{background:var(--navy-dark);border-bottom:1px solid #2a4a63;}
nav.primary ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;}
nav.primary a{
  display:block;color:#e7edf2;text-decoration:none;font-weight:600;
  padding:13px 18px;font-size:16.5px;border-right:1px solid #25435a;
}
nav.primary a:hover{background:#1c4061;color:#fff;}
nav.primary a[aria-current="page"]{background:var(--green);color:#fff;}

/* ---- layout ---- */
.wrap{max-width:1040px;margin:0 auto;padding:0 24px;}
main{display:block;padding:8px 0 64px;}
.measure{max-width:38em;}
.lede{font-family:var(--serif);font-size:23px;line-height:1.5;color:#1f2326;}

.breadcrumb{font-size:15px;color:var(--rule-dark);padding:14px 0 2px;}
.breadcrumb a{color:var(--rule-dark);}
.breadcrumb span{margin:0 8px;color:var(--rule);}

h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);line-height:1.12;font-weight:800;}
h1{font-size:42px;margin:.5em 0 .35em;letter-spacing:-.025em;}
h2{font-size:28px;margin:1.8em 0 .5em;letter-spacing:-.02em;}
h3{font-size:21px;margin:1.6em 0 .4em;font-weight:700;letter-spacing:-.012em;}
h4{font-size:18px;margin:1.3em 0 .3em;font-weight:700;letter-spacing:-.01em;}

/* ---- photographic plate band + inline plate (sharp, hard-edged) ---- */
.photo-band{border-top:6px solid var(--green);border-bottom:1px solid var(--rule);
  background:#0d2538;overflow:hidden;}
.photo-band figure{margin:0;position:relative;max-width:1040px;margin:0 auto;}
.photo-band img{display:block;width:100%;height:300px;object-fit:cover;object-position:center 45%;
  filter:saturate(0.94) contrast(1.05);}
.photo-band figcaption{position:absolute;left:0;right:0;bottom:0;
  font-family:var(--sans);font-size:13px;color:#eef3f6;
  background:linear-gradient(transparent,rgba(13,37,56,0.85));padding:30px 24px 10px;}
.photo-band figcaption a{color:#bcd6ec;}
@media(max-width:820px){.photo-band img{height:200px;}}
figure.photo{margin:1.6em 0;border:1px solid var(--ink);}
figure.photo img{display:block;width:100%;height:300px;object-fit:cover;object-position:center 40%;
  filter:saturate(0.94) contrast(1.05);}
figure.photo figcaption{font-family:var(--sans);font-size:14px;color:var(--rule-dark);
  padding:9px 12px;border-top:1px solid var(--rule);background:var(--paper-warm);}
p{margin:0 0 1.05em;}
.serif p,p.serif,.story p{font-family:var(--serif);font-size:19.5px;}

a{color:var(--link);}
a:hover{color:var(--link-hover);}
a:visited{color:var(--link-visited);}

ul.plain{padding-left:1.2em;}
ul.plain li{margin:.35em 0;}
.section-rule{border:0;border-top:1px solid var(--rule);margin:2.4em 0;}

/* ---- hero band (not a slop hero: left-aligned, content-first) ---- */
.intro{padding:34px 0 6px;}
.intro h1{max-width:18ch;}

/* ---- contents jump list (GOV.UK) ---- */
.contents{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);padding:14px 0;margin:1.4em 0 2em;}
.contents h2{font-size:16px;margin:0 0 .5em;text-transform:uppercase;letter-spacing:.05em;}
.contents ol{margin:0;padding-left:1.3em;font-size:16.5px;}
.contents li{margin:.3em 0;}

/* ---- callout / inset ---- */
.inset{border-left:8px solid var(--rule);padding:6px 0 6px 22px;margin:1.6em 0;}
.inset.green{border-color:var(--green);}
.inset.navy{border-color:var(--navy);}
.notice{
  border-left:8px solid var(--link);background:#eff5fb;padding:16px 20px;margin:1.6em 0;font-size:17.5px;
}
.illustrative{
  border:1px dashed var(--rule-dark);background:#fcfbf4;padding:6px 12px;
  font-size:14.5px;color:#3a3f43;display:inline-block;border-radius:0;
}
.illustrative strong{color:var(--ink);}

/* ---- buttons (GOV.UK action button) ---- */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;
  font-size:20px;padding:13px 20px 14px;border:0;border-radius:0;cursor:pointer;text-decoration:none;
}
.btn-start{background:var(--green);color:#fff;box-shadow:0 3px 0 var(--green-dark);}
.btn-start:hover{background:#00582f;color:#fff;}
.btn-start:visited{color:#fff;}
.btn-start .arrow{font-weight:700;}
.btn-secondary{background:#f3f2f1;color:var(--ink);box-shadow:0 3px 0 #929191;}
.btn-secondary:hover{background:#dbdad9;color:var(--ink);}

/* ---- stat row (sober numbers, not big-flashy) ---- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;border-top:1px solid var(--rule);margin:1.6em 0;}
.statgrid .stat{padding:18px 18px 18px 0;border-bottom:1px solid var(--rule);}
.stat .n{font-size:38px;font-weight:800;line-height:1;color:var(--navy);}
.stat .l{font-size:15.5px;color:var(--rule-dark);margin-top:6px;max-width:22ch;}

/* ---- tables ---- */
table.data{border-collapse:collapse;width:100%;margin:1.4em 0;font-size:16.5px;}
table.data caption{text-align:left;font-size:14px;color:var(--rule-dark);margin-bottom:8px;}
table.data th,table.data td{border-bottom:1px solid var(--rule);padding:11px 12px;text-align:left;vertical-align:top;}
table.data thead th{border-bottom:2px solid var(--ink);font-size:14px;text-transform:uppercase;letter-spacing:.03em;}
table.data tbody th{font-weight:700;}

/* ---- tactile map figure ---- */
.plate{background:var(--tactile-bg);border:1px solid var(--rule);padding:20px;margin:1.6em 0;}
.plate figcaption{font-size:15px;color:var(--rule-dark);margin-top:12px;}
.plate svg{width:100%;height:auto;display:block;}
.maplegend{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 24px;margin:1.2em 0 0;font-size:16px;}
.maplegend .item{display:flex;gap:10px;align-items:flex-start;padding:5px 0;border-bottom:1px dotted var(--rule);}
.maplegend .swatch{flex:0 0 auto;}

/* ---- petition specific ---- */
.petition-box{border:5px solid var(--ink);padding:24px 26px;margin:1.4em 0;background:var(--paper);}
.petition-box h2{margin-top:0;}
.petition-statement{font-family:var(--serif);font-size:21px;line-height:1.5;}
.progress{margin:1.4em 0;}
.progress .bar{height:34px;background:#e6e4e1;border:1px solid var(--rule);border-radius:0;overflow:hidden;}
.progress .fill{height:100%;background:var(--green);width:0;}
.progress .meta{display:flex;justify-content:space-between;font-size:15.5px;color:var(--rule-dark);margin-top:8px;flex-wrap:wrap;gap:8px;}
.bigcount{font-size:46px;font-weight:800;color:var(--navy);line-height:1;}
.bigcount + .small{font-size:15.5px;color:var(--rule-dark);}

.form fieldset{border:0;margin:0;padding:0;}
.form .row{margin:0 0 18px;max-width:30em;}
.form label{display:block;font-weight:700;margin-bottom:6px;font-size:17px;}
.form .hint{font-weight:400;color:var(--rule-dark);font-size:15px;margin-bottom:8px;}
.form input[type=text],.form input[type=email],.form select{
  width:100%;font-family:var(--sans);font-size:18px;padding:10px 12px;border:2px solid var(--ink);border-radius:0;background:#fff;
}
.form .check{display:flex;gap:12px;align-items:flex-start;}
.form .check input{width:28px;height:28px;margin-top:2px;}
.demo-note{font-size:14.5px;color:var(--rule-dark);margin-top:10px;}

/* ---- two-petition routes ---- */
.petition-routes{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:2px solid var(--ink);margin:1.2em 0 1.4em;}
.petition-routes .route{padding:18px 22px 20px 0;border-bottom:1px solid var(--rule);}
.petition-routes .route:first-child{border-right:1px solid var(--rule);padding-right:24px;}
.petition-routes .route:last-child{padding-left:24px;}
.petition-routes .route h3{margin:.35em 0 .3em;}
.rtag{display:inline-block;font-family:var(--sans);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:4px 9px;color:#fff;}
.rtag-change{background:var(--green);}
.rtag-parl{background:var(--navy);}
@media(max-width:680px){
  .petition-routes{grid-template-columns:1fr;}
  .petition-routes .route:first-child{border-right:0;padding-right:0;}
  .petition-routes .route:last-child{padding-left:0;}
}

/* ---- milestone list ---- */
ol.milestones{list-style:none;padding:0;margin:1.4em 0;}
ol.milestones li{border-left:4px solid var(--rule);padding:4px 0 16px 20px;position:relative;margin-left:6px;}
ol.milestones li.done{border-color:var(--green);}
ol.milestones .when{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--rule-dark);}
ol.milestones .what{font-weight:600;}

/* ---- impact site cards (not slop cards: bordered list rows) ---- */
.sites{margin:1.6em 0;}
.site{border-top:1px solid var(--rule);padding:18px 0;display:grid;grid-template-columns:120px 1fr;gap:20px;}
.site:last-child{border-bottom:1px solid var(--rule);}
.site .status{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;}
.site .status.live{color:var(--green);}
.site .status.planned{color:var(--rule-dark);}
.site .status.scoping{color:var(--link);}
.site h3{margin:.1em 0 .3em;}
.site .meta{font-size:15px;color:var(--rule-dark);}

/* ---- toolkit download card ---- */
.download{border:2px solid var(--ink);padding:20px 22px;margin:1.6em 0;display:flex;gap:20px;align-items:center;flex-wrap:wrap;}
.download .doc{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--rule-dark);}
.download h3{margin:.1em 0;}

/* ---- footer ---- */
footer.site{display:block;background:var(--navy);color:#cdd6de;border-top:8px solid var(--green);margin-top:40px;padding:0;border-bottom:none;}
footer.site .wrap{padding:34px 24px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;}
footer.site h4{color:#fff;font-size:15px;text-transform:uppercase;letter-spacing:.05em;margin:0 0 10px;}
footer.site a{color:#bcd6ec;}
footer.site .fine{grid-column:1/-1;border-top:1px solid #2a4a63;padding-top:18px;font-size:14px;color:#9fb0bd;}
footer.site ul{list-style:none;padding:0;margin:0;font-size:15.5px;line-height:1.9;}

/* ---- load animation, restrained ---- */
@media (prefers-reduced-motion:no-preference){
  .fade{opacity:0;transform:translateY(8px);animation:fade .5s ease forwards;}
  .fade.d1{animation-delay:.05s;} .fade.d2{animation-delay:.12s;} .fade.d3{animation-delay:.19s;}
  @keyframes fade{to{opacity:1;transform:none;}}
}

/* ---- responsive ---- */
@media (max-width:820px){
  footer.site .wrap{grid-template-columns:1fr;}
  .site{grid-template-columns:1fr;gap:6px;}
  h1{font-size:32px;}
  body{font-size:18px;}
}
@media (max-width:520px){
  nav.primary a{border-right:0;border-bottom:1px solid #25435a;}
  .masthead .wrap{flex-direction:column;align-items:flex-start;}
}

/* Sightlines Hub badge in masthead */
.masthead img.badge{height:52px;width:52px;border-radius:50%;display:block;flex:none;}