/* ============================================================
COOMA DATA CENTRE & ENERGY CAMPUS
Shared stylesheet for every page. One file controls the
whole site: colours, type, layout, components, print.
The colour palette is in :root below.
============================================================ */
/* ============================================================
COOMA DATA CENTRE & ENERGY CAMPUS
Single-page site. No frameworks, no build step, no dependencies.
To change colours site-wide, edit the variables in :root below.
============================================================ */
:root{
--paper:#FBFAF8;
--paper-alt:#F1EFEA;
--ink:#1B1F1D;
--ink-soft:#4A524E;
--line:#DCD9D2;
--green-deep:#12312B;
--green-mid:#1C4A41;
--accent:#0E6B5C; /* accent on light backgrounds */
--accent-light:#74D8C2; /* accent on dark backgrounds */
--on-dark:#E8EFEB;
--on-dark-soft:#B9C7C1;
--focus:#0E6B5C;
--maxw:1180px;
--gutter:clamp(1.25rem, 5vw, 4rem);
--section-y:clamp(4rem, 9vw, 8rem);
--font-sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-serif:ui-serif, Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5rem}
body{
margin:0; background:var(--paper); color:var(--ink);
font-family:var(--font-sans);
font-size:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
line-height:1.65; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--font-serif); font-weight:600; line-height:1.14; letter-spacing:-0.01em; margin:0 0 .6em; text-wrap:balance}
h1{font-size:clamp(2.25rem, 1.35rem + 4vw, 4.25rem)}
h2{font-size:clamp(1.75rem, 1.15rem + 2.4vw, 2.9rem)}
h3{font-size:clamp(1.125rem, 1.02rem + 0.45vw, 1.35rem)}
/* Headings carry no top margin by default, so a third-level heading that
follows running content sat tight against it. Give it air above whenever
it comes after a paragraph, a list, a table, a figure or any block
(a table wrapper, a button row, a note, a grid). A heading that opens a card or a panel is left alone, because
there it follows an icon or a label, not running content. */
p + h3, ul + h3, ol + h3, dl + h3, table + h3, figure + h3, blockquote + h3,
div + h3, section + h3, aside + h3, nav + h3{margin-top:2.25rem}
p{margin:0 0 1.1em; max-width:68ch}
a{color:var(--accent); text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:.06em}
a:hover{text-decoration-thickness:.12em}
ul{margin:0 0 1.1em; padding-left:1.1em}
li{margin:.35em 0}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:2px}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--alt{background:var(--paper-alt)}
.section--dark{background:var(--green-deep); color:var(--on-dark)}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark p{color:var(--on-dark-soft)}
.section--dark a{color:var(--accent-light)}
.eyebrow{
font-family:var(--font-sans); font-size:.75rem; font-weight:600;
letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
margin:0 0 1rem; display:block;
}
.section--dark .eyebrow{color:var(--accent-light)}
.lede{font-size:clamp(1.0625rem,1rem + 0.4vw,1.3rem); color:var(--ink-soft); max-width:60ch}
.section--dark .lede{color:var(--on-dark-soft)}
.muted{color:var(--ink-soft)}
.small{font-size:.875rem}
.skip{position:absolute; left:-9999px; top:0; background:var(--green-deep); color:#fff; padding:.85rem 1.25rem; z-index:100}
.skip:focus{left:1rem; top:1rem}
/* ---------- Header ---------- */
.site-header{
position:sticky; top:0; z-index:50;
background:rgba(251,250,248,.94); backdrop-filter:saturate(1.4) blur(8px);
border-bottom:1px solid var(--line);
}
/* wrap rather than overflow: at 200% text the nav must still fit the
viewport (WCAG 1.4.4 and 1.4.10) instead of forcing a sideways scroll */
.site-header .bar{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; min-height:4.25rem; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); padding-block:.5rem}
.brand{font-family:var(--font-serif); font-size:1.0625rem; font-weight:600; color:var(--ink); text-decoration:none; line-height:1.25; margin-right:1rem}
.brand span{display:block; font-family:var(--font-sans); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.nav{display:none; flex-wrap:wrap; gap:.35rem .8rem}
.nav a{color:var(--ink-soft); text-decoration:none; font-size:.875rem; font-weight:500; white-space:nowrap}
.nav a:hover{color:var(--accent)}
@media(min-width:1120px){.nav{display:flex; margin-left:auto; flex-wrap:nowrap} .site-header .bar{flex-wrap:nowrap} .brand{flex:none}}
/* The project name is long. Beside the full navigation it sets over two
balanced lines so the bar stays a single row; on a narrow screen, where
the navigation is behind the menu button, it has the width to itself. */
@media(min-width:1120px){.brand{max-width:14.5rem; font-size:.98rem; line-height:1.2; text-wrap:balance; margin-right:.5rem} .brand span{margin-top:.2rem}}
/* brand, nine links, the search button and Enquire have to share one row, so
the spacing is set by what fits rather than by taste */
@media(min-width:1120px){.site-header .bar{gap:.5rem .75rem} .nav{gap:.35rem .7rem} .nav a{font-size:.84rem}}
@media(min-width:1240px){.site-header .bar{gap:.5rem 1rem} .nav{gap:.35rem .95rem} .nav a{font-size:.875rem}}
/* ---------- Site search ----------
The button in the header, the box that drops down under it, and the
results page. */
.searchbtn{
display:inline-flex; align-items:center; gap:.4rem; flex:none; margin-left:auto;
padding:.5rem .6rem; border:1px solid transparent; border-radius:2px;
color:var(--ink-soft); text-decoration:none; font-size:.875rem; font-weight:500; cursor:pointer;
transition:color .2s, border-color .2s;
}
.searchbtn:hover, .searchbtn[aria-expanded="true"], .searchbtn[aria-current]{color:var(--accent); border-color:var(--line)}
/* icon only: the header has no room for the word, which stays for screen readers via aria-label */
.searchbtn__lbl{display:none}
/* with the full navigation showing, the nav takes the auto margin and the button sits after it */
@media(min-width:1120px){ .searchbtn{margin-left:0; order:2} .site-header .bar > .btn{order:3} }
@media(max-width:1119px){ .searchbtn{border-color:var(--line); padding:.55rem .7rem} .searchbtn + .btn + .burger, .searchbtn ~ .burger{margin-left:0} }
.searchpanel{border-top:1px solid var(--line); background:var(--paper)}
.searchpanel[hidden]{display:none}
.searchpanel__form{display:flex; gap:.6rem; align-items:center; max-width:var(--maxw); margin-inline:auto; padding:.85rem var(--gutter)}
.searchpanel__form input[type=search], .searchform input[type=search]{
flex:1; min-width:0; font:inherit; font-size:1.05rem; color:var(--ink); background:#fff;
border:1px solid #B9B5AC; border-radius:2px; padding:.8rem 1rem; -webkit-appearance:none; appearance:none;
}
.searchpanel__form input[type=search]:focus, .searchform input[type=search]:focus{border-color:var(--accent); outline:3px solid rgba(14,107,92,.3); outline-offset:0}
.searchpanel__close{flex:none; width:2.75rem; height:2.75rem; border:0; background:transparent; font-size:1.75rem; line-height:1; color:var(--ink-soft); cursor:pointer}
.searchpanel__close:hover{color:var(--ink)}
@media(max-width:520px){ .searchpanel__form .btn{padding-inline:1rem} }
.searchform{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; max-width:46rem}
.searchform input[type=search]{font-size:1.15rem; padding:1rem 1.15rem; border-color:transparent}
.searchform .btn--xl{padding-block:.95rem}
.searchstatus{font-family:var(--font-serif); font-size:clamp(1.2rem,1rem + .8vw,1.6rem); color:var(--green-deep); margin:0 0 1.5rem; max-width:none}
.searchstatus:empty{display:none}
.searchresults{list-style:none; margin:0; padding:0; border-top:1px solid var(--line); max-width:56rem}
.searchresults:empty{display:none}
.sr{margin:0; padding:1.6rem 0 1.7rem; border-bottom:1px solid var(--line)}
.sr__type{display:inline-block; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom:.45rem}
.sr__type--private{color:#7A5010}
.sr__title{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem); margin:0 0 .35rem}
.sr__title a{color:var(--green-deep); text-decoration:none; border-bottom:2px solid transparent}
.sr__title a:hover{border-bottom-color:var(--accent)}
.sr__found, .sr__sub{font-size:.875rem; color:var(--ink-soft); margin:0 0 .5rem; max-width:none}
.sr__found a{font-weight:600}
.sr__snip{font-size:.95rem; line-height:1.65; color:var(--ink); margin:0; max-width:none}
.sr mark{background:#D8F0E6; color:inherit; padding:0 .12em; border-radius:2px; font-weight:600}
.sr__more{margin-top:1rem; padding-left:1rem; border-left:2px solid var(--line)}
.sr__morelbl{display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin-bottom:.4rem}
.sr__more ul{list-style:none; margin:0; padding:0}
.sr__more li{margin:.55rem 0; font-size:.875rem; line-height:1.55}
.sr__more li a{display:block; font-weight:600}
.sr__more li span{color:var(--ink-soft)}
.searchempty[hidden]{display:none}
.searchempty h2{font-size:clamp(1.2rem,1rem + .8vw,1.6rem); margin-bottom:1rem}
.searchsuggest{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.searchsuggest li{margin:0}
.searchsuggest .viewnav__chip{font-family:inherit; cursor:pointer}
@media print{ .searchbtn, .searchpanel, .searchform, .searchempty{display:none !important} }
/* ---------- Sticky header, inverted once the hero has scrolled past ----------
Over a dark hero the header is light. Once the page has moved on to the
pale body, a light bar on a pale background loses its edge, so the header
flips to the deep green and carries white copy. site.js adds .is-inverted
when the hero's lower edge passes under the bar. Without JavaScript the
header simply stays light, which is the current behaviour. */
.site-header{transition:background-color .28s ease, border-color .28s ease}
.site-header.is-inverted{
background:var(--green-deep); border-bottom-color:rgba(255,255,255,.16);
backdrop-filter:none;
}
.site-header.is-inverted .brand{color:#fff}
.site-header.is-inverted .brand span{color:var(--on-dark-soft)}
.site-header.is-inverted .nav a{color:var(--on-dark)}
.site-header.is-inverted .nav a:hover{color:var(--accent-light)}
.site-header.is-inverted .nav a[aria-current="page"]{color:var(--accent-light)}
/* the accent green has only 2.2:1 on the deep green, so the Enquire button
inverts too rather than just changing its surroundings */
.site-header.is-inverted .btn--primary{
background:var(--accent-light); color:var(--green-deep); border-color:var(--accent-light);
}
.site-header.is-inverted .btn--primary:hover{background:#8FE6D3; border-color:#8FE6D3}
.site-header.is-inverted .burger{color:var(--on-dark); border-color:rgba(255,255,255,.35)}
.site-header.is-inverted .searchbtn{color:var(--on-dark)}
.site-header.is-inverted .searchbtn:hover,
.site-header.is-inverted .searchbtn[aria-expanded="true"],
.site-header.is-inverted .searchbtn[aria-current]{color:var(--accent-light); border-color:rgba(255,255,255,.35)}
@media(max-width:1119px){ .site-header.is-inverted .searchbtn{border-color:rgba(255,255,255,.35)} }
.site-header.is-inverted .burger:hover{color:var(--accent-light); border-color:var(--accent-light)}
.site-header.is-inverted .menu{background:var(--green-deep); border-top-color:rgba(255,255,255,.16)}
.site-header.is-inverted .menu a{color:var(--on-dark); border-bottom-color:rgba(255,255,255,.16)}
.site-header.is-inverted .menu a:hover{color:var(--accent-light)}
.site-header.is-inverted .menu a[aria-current="page"]{color:var(--accent-light)}
/* .menu .menu__cta forces white text, which is unreadable on the pale
accent used for the inverted button, so restate it here */
.site-header.is-inverted .menu .menu__cta,
.site-header.is-inverted .menu .menu__cta:hover{color:var(--green-deep)}
/* the standard focus green is unreadable on the deep green */
.site-header.is-inverted a:focus-visible,
.site-header.is-inverted button:focus-visible{outline-color:var(--accent-light)}
@media(prefers-reduced-motion:reduce){ .site-header{transition:none} }
/* ---------- "On this page" bar ----------------------------------------------
A second, page-level navigation. Sticks directly under the site header, so on
a long page you always know which section you are in and can jump to another
without scrolling back. site.js sets --hdr-h from the header's measured
height; the fallback keeps it usable if the script never runs. */
.secnav{
position:sticky; top:var(--hdr-h, 4.25rem); z-index:40;
background:var(--paper-alt); border-bottom:1px solid var(--line);
}
.secnav > .wrap{display:flex; align-items:center; gap:1rem}
.secnav__lbl{
flex:none; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
font-weight:700; color:var(--accent); padding:.9rem 0;
}
.secnav ul{
list-style:none; margin:0; padding:0; display:flex; gap:.15rem;
overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; flex:1 1 auto;
scroll-snap-type:x proximity;
}
.secnav li{flex:none; scroll-snap-align:start}
/* scoped to the list: a bare .secnav a would out-specify .secnav__all below */
.secnav ul a{
display:block; padding:.9rem .7rem; font-size:.84rem; font-weight:500;
color:var(--ink-soft); text-decoration:none; white-space:nowrap;
border-bottom:2px solid transparent;
}
.secnav ul a:hover{color:var(--accent)}
.secnav ul a:focus-visible{outline:3px solid var(--focus); outline-offset:-3px}
.secnav ul a[aria-current="true"]{color:var(--green-deep); font-weight:700; border-bottom-color:var(--accent)}
.secnav__all{
flex:none; font-size:.78rem; font-weight:600; color:var(--accent); text-decoration:none;
white-space:nowrap; padding:.9rem 0 .9rem .9rem; border-left:1px solid var(--line);
}
.secnav__all:hover{text-decoration:underline; text-underline-offset:3px}
.secnav__all:focus-visible{outline:3px solid var(--focus); outline-offset:-3px}
@media(max-width:860px){
.secnav__lbl{display:none}
.secnav ul a{padding:.85rem .6rem}
.secnav__all{padding-left:.7rem; font-size:.76rem}
}
@media print{ .secnav{display:none} }
/* an anchored heading must not land under the two sticky bars */
:target{scroll-margin-top:calc(var(--hdr-h, 4.25rem) + 4rem)}
html{scroll-behaviour:smooth; scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
/* ---------- Contents page --------------------------------------------------- */
.toc{display:grid; gap:2.5rem; margin-top:2.5rem}
.toc__page{border-top:2px solid var(--green-deep); padding-top:1.5rem}
.toc__head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1rem; margin-bottom:1.25rem}
.toc__head h3{margin:0; font-size:1.35rem}
.toc__head h3 a{color:var(--green-deep); text-decoration:none; border-bottom:2px solid transparent}
.toc__head h3 a:hover{border-bottom-color:var(--accent)}
.toc__head p{flex:1 1 20rem; margin:0; font-size:.92rem; color:var(--ink-soft); line-height:1.6}
.toc__list{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:2px; overflow:hidden}
.toc__item{display:flex; align-items:stretch; background:var(--paper); border-top:1px solid var(--line)}
.toc__item:first-child{border-top:0}
.toc__link{
flex:1 1 auto; min-width:0; display:block; padding:.95rem 1.1rem;
text-decoration:none; color:var(--ink);
}
.toc__link:hover{background:var(--paper-alt)}
.toc__t{display:block; font-weight:600; font-size:.98rem}
.toc__d{max-width:62ch}
.toc__d{display:block; margin-top:.2rem; font-size:.86rem; color:var(--ink-soft); line-height:1.55}
.toc__copy{
flex:none; align-self:stretch; border:0; border-left:1px solid var(--line);
background:none; font:inherit; font-size:.78rem; font-weight:600; color:var(--accent);
padding:0 1rem; cursor:pointer; white-space:nowrap; min-width:6.5rem;
}
.toc__copy:hover{background:var(--accent); color:#fff}
.toc__copy:focus-visible{outline:3px solid var(--focus); outline-offset:-3px}
.toc__copy.is-done{background:var(--green-deep); color:#fff}
.toc__copy--page{
border:1px solid var(--line); border-radius:2px; padding:.45rem .9rem; align-self:center;
min-width:0; margin-left:auto;
}
.toc__status{
margin:0; min-height:1.5rem; font-size:.88rem; font-weight:600; color:var(--accent);
}
@media(max-width:560px){
.toc__item{flex-direction:column}
.toc__copy{border-left:0; border-top:1px solid var(--line); padding:.7rem 1.1rem; text-align:left; align-self:stretch}
}
@media print{ .toc__copy{display:none} }
/* the topographic sheet legend, shown beside the notes */
.topo-key{padding:1.25rem; position:sticky; top:calc(var(--hdr-h, 4.25rem) + 4rem)}
.topo-key img{width:100%; max-width:22rem; height:auto; display:block; margin-inline:auto}
.topo-key figcaption{margin-top:1rem; max-width:none}
@media(max-width:899px){ .topo-key{position:static} }
/* ============================================================
SITE INVESTMENT ATTRIBUTES
A real table on a wide screen, a labelled card per row on a
narrow one, and a clean table again in print. Every position
carries visible text and a shape, never colour alone.
============================================================ */
:root{
--attr-blue:#1B5391; /* 7.8:1 on white */
--attr-blue-bright:#246FC6; /* 5.0:1 on white, for accents */
--c-confirmed:#0B3D2E; --bg-confirmed:#DCEAE2;
--c-strong:#125C42; --bg-strong:#E2F0E7;
--c-opportunity:#1B5391; --bg-opportunity:#DFEAF7;
--c-verify:#7A4A05; --bg-verify:#FBEBD2;
}
/* ---- summary tiles ---- */
.attr-tiles{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:2rem}
@media(min-width:640px){.attr-tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.attr-tiles{grid-template-columns:repeat(4,1fr)}}
.attr-tile{background:var(--paper); padding:1.6rem 1.5rem; border-top:4px solid var(--c-strong)}
.attr-tile--confirmed{border-top-color:var(--c-confirmed)}
.attr-tile--strong{border-top-color:var(--c-strong)}
.attr-tile--opportunity{border-top-color:var(--c-opportunity)}
.attr-tile--verify{border-top-color:var(--c-verify)}
.attr-tile__n{display:block; font-family:var(--font-serif); font-size:2.6rem; line-height:1; color:var(--green-deep)}
.attr-tile__l{display:block; margin-top:.5rem; font-weight:700; font-size:.95rem}
.attr-tile__d{display:block; margin-top:.45rem; font-size:.84rem; line-height:1.6; color:var(--ink-soft)}
/* ---- controls ---- */
.attr-controls{
display:flex; flex-wrap:wrap; gap:1rem 1.25rem; align-items:flex-end;
margin:2rem 0 1.25rem; padding:1.4rem 1.5rem; background:var(--paper); border:1px solid var(--line);
}
.attr-field{display:flex; flex-direction:column; gap:.4rem; flex:0 1 13rem}
.attr-field--grow{flex:1 1 16rem}
.attr-field label{font-size:.74rem; letter-spacing:.11em; text-transform:uppercase; font-weight:700; color:var(--accent)}
.attr-field input, .attr-field select{
font:inherit; font-size:.95rem; padding:.6rem .7rem; color:var(--ink);
background:#fff; border:1px solid var(--line); border-radius:2px; min-height:2.75rem; width:100%;
}
.attr-field input:focus-visible, .attr-field select:focus-visible{outline:3px solid var(--focus); outline-offset:1px; border-color:var(--accent)}
.attr-actions{display:flex; flex-wrap:wrap; gap:.6rem; margin-left:auto}
.attr-actions .btn[disabled]{opacity:.45; cursor:default}
.attr-count{margin:0 0 1rem; font-size:.92rem; font-weight:600; color:var(--ink-soft)}
.attr-empty{margin:1rem 0 2rem; padding:1.1rem 1.3rem; background:var(--paper); border-left:3px solid var(--c-verify); font-size:.95rem}
.linkbtn{font:inherit; background:none; border:0; padding:0; color:var(--accent); text-decoration:underline; text-underline-offset:2px; cursor:pointer}
.linkbtn:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
/* ---- position pill ---- */
.pill{
display:inline-flex; align-items:flex-start; gap:.35rem; padding:.3rem .55rem;
font-size:.78rem; font-weight:700; line-height:1.35; border-radius:2px;
border:1px solid currentColor;
}
.pill__i{font-size:.85em; flex:none}
.pill--confirmed{color:var(--c-confirmed); background:var(--bg-confirmed)}
.pill--strong{color:var(--c-strong); background:var(--bg-strong)}
.pill--opportunity{color:var(--c-opportunity); background:var(--bg-opportunity)}
.pill--verify{color:var(--c-verify); background:var(--bg-verify)}
/* ---- the table ---- */
.attr-wrap{margin:0 0 2rem}
table.data.attr-table{font-size:.9rem; min-width:66rem; table-layout:fixed}
table.data.attr-table th, table.data.attr-table td{vertical-align:top}
/* fixed widths stop the position column hogging space the prose needs */
table.data.attr-table thead th:nth-child(1){width:13%}
table.data.attr-table thead th:nth-child(2){width:12%}
table.data.attr-table thead th:nth-child(3){width:20%}
table.data.attr-table thead th:nth-child(4){width:23%}
table.data.attr-table thead th:nth-child(5){width:22%}
table.data.attr-table thead th:nth-child(6){width:10%}
table.data.attr-table tbody th, table.data.attr-table tbody td{padding-block:1.1rem}
.attr-table tbody tr[hidden]{display:none}
.attr-name{min-width:9rem}
.attr-cat{display:block; font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom:.2rem}
.attr-benefit{font-weight:600}
.attr-ev, .attr-next{color:var(--ink-soft)}
.attr-link a{color:var(--attr-blue); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(27,83,145,.35); white-space:nowrap}
.attr-link a:hover{border-bottom-color:var(--attr-blue)}
.attr-link a:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
/* ---- card layout on a narrow screen ---------------------------------------
Benefit first, evidence second, as asked. The column headings become
visible labels rather than being dropped, so nothing depends on the
reader remembering a header row that is no longer on screen. */
@media(max-width:900px){
.attr-wrap{overflow:visible}
table.data.attr-table{min-width:0; display:block; border:0; font-size:1rem}
table.data.attr-table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
table.data.attr-table tbody{display:block}
table.data.attr-table tbody tr{
display:block; background:var(--paper); border:1px solid var(--line);
border-left:4px solid var(--line); padding:1.25rem 1.35rem; margin-bottom:1rem;
}
table.data.attr-table tbody tr[data-group="confirmed"]{border-left-color:var(--c-confirmed)}
table.data.attr-table tbody tr[data-group="strong"]{border-left-color:var(--c-strong)}
table.data.attr-table tbody tr[data-group="opportunity"]{border-left-color:var(--c-opportunity)}
table.data.attr-table tbody tr[data-group="verify"]{border-left-color:var(--c-verify)}
table.data.attr-table tbody th, table.data.attr-table tbody td{display:block; border:0; padding:0; text-align:left; background:none}
.attr-name{font-family:var(--font-serif); font-size:1.25rem; margin-bottom:.5rem}
.attr-pos{margin-bottom:.9rem}
.attr-benefit{font-size:1rem; margin-bottom:1rem}
.attr-ev, .attr-next{font-size:.9rem; margin-bottom:.9rem}
.attr-ev::before{content:"Evidence and current position"; display:block; font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom:.3rem}
.attr-next::before{content:"Next verification"; display:block; font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom:.3rem}
.attr-actions{margin-left:0; width:100%}
}
/* ---- print: an investor briefing sheet ---- */
@media print{
.attr-controls, .attr-actions, .attr-empty{display:none !important}
.attr-tiles{grid-template-columns:repeat(4,1fr); border-color:#000}
.attr-tile{border-top-width:3px; padding:.6rem}
.attr-tile__n{font-size:1.5rem}
.attr-count{font-weight:400}
.attr-wrap{overflow:visible}
table.data.attr-table{display:table; min-width:0; width:100%; font-size:8pt}
table.data.attr-table thead{position:static; width:auto; height:auto; clip:auto; display:table-header-group}
table.data.attr-table tbody{display:table-row-group}
table.data.attr-table tbody tr{display:table-row; border:0; padding:0; margin:0; break-inside:avoid}
table.data.attr-table tbody th, table.data.attr-table tbody td{display:table-cell; padding:4pt 5pt; border-bottom:1px solid #999}
.attr-ev::before, .attr-next::before{display:none}
.pill__i{margin-right:.3em}
.pill{display:inline-block; border:1px solid #000; background:none !important; color:#000 !important; white-space:normal; max-width:100%}
table.data.attr-table thead th:nth-child(1){width:12%}
table.data.attr-table thead th:nth-child(2){width:14%}
table.data.attr-table thead th:nth-child(3){width:19%}
#table .lede{display:none}
.attr-link a{border:0; color:#000}
.attr-link a::after{content:""}
}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
padding:.85rem 1.6rem; border-radius:2px; border:1px solid transparent;
font-family:var(--font-sans); font-size:.9375rem; font-weight:600; letter-spacing:.01em;
text-decoration:none; cursor:pointer; transition:background-color .2s, color .2s, border-color .2s;
}
.btn--primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn--primary:hover{background:#0A5548; border-color:#0A5548}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:var(--paper)}
.btn--on-dark{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}
.btn--on-dark:hover{background:#fff; color:var(--green-deep); border-color:#fff}
.btn--sm{padding:.6rem 1.1rem; font-size:.85rem}
.btn-row{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem}
/* The large call to action. One per view, for the single thing the page
most wants the reader to do. Icon, a label with an optional second
line, and an arrow that moves on hover. */
.btn--xl{
gap:1rem; padding:1.15rem 1.6rem 1.15rem 1.4rem; text-align:left;
font-size:clamp(1.05rem,1rem + .45vw,1.3rem); font-weight:700; line-height:1.25;
background:var(--accent); color:#fff; border-color:var(--accent);
box-shadow:0 14px 30px -14px rgba(14,107,92,.7);
transition:background-color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.btn--xl:hover{background:#0A5548; border-color:#0A5548; transform:translateY(-2px); box-shadow:0 20px 36px -14px rgba(14,107,92,.75)}
.btn--xl .btn__label{display:block}
.btn--xl .btn__label small{display:block; margin-top:.3rem; font-size:.8125rem; font-weight:500; letter-spacing:0; line-height:1.45; opacity:.92; max-width:34em}
.btn--xl .btn__icon{flex:none; width:1.9rem; height:1.9rem}
.btn--xl .btn__arrow{flex:none; margin-left:.35rem; transition:transform .2s}
.btn--xl:hover .btn__arrow{transform:translateX(5px)}
/* on a dark ground: the light accent, as the call to action band uses */
.btn--xl-light{background:var(--accent-light); color:var(--green-deep); border-color:var(--accent-light); box-shadow:0 14px 34px -14px rgba(116,216,194,.55)}
.btn--xl-light:hover{background:#8FE6D3; border-color:#8FE6D3; box-shadow:0 20px 40px -14px rgba(116,216,194,.6)}
@media(max-width:520px){ .btn--xl{width:100%} }
@media(prefers-reduced-motion:reduce){ .btn--xl, .btn--xl .btn__arrow{transition:none} .btn--xl:hover{transform:none} .btn--xl:hover .btn__arrow{transform:none} }
/* the map call to action on the site page: the big button beside shortcuts
to the individual views of the plan */
.mapcta{
display:grid; gap:clamp(1.5rem,4vw,3rem); margin-top:1.5rem;
background:var(--green-deep); color:var(--on-dark);
border-left:4px solid var(--accent-light); padding:clamp(1.6rem,4vw,2.75rem);
}
@media(min-width:900px){ .mapcta{grid-template-columns:1.15fr .85fr; align-items:center} }
.mapcta h3{color:#fff; font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem); margin:0 0 .6rem}
.mapcta p{color:var(--on-dark-soft); margin:0 0 1.5rem; max-width:48ch}
.mapcta .btn--xl{background:var(--accent-light); color:var(--green-deep); border-color:var(--accent-light); box-shadow:0 14px 34px -14px rgba(116,216,194,.55)}
.mapcta .btn--xl:hover{background:#8FE6D3; border-color:#8FE6D3}
.mapcta__lbl{display:block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--accent-light); margin-bottom:.7rem}
.mapcta__views ul{list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.16)}
.mapcta__views li{margin:0; border-bottom:1px solid rgba(255,255,255,.16)}
.mapcta__views a{
display:flex; align-items:center; gap:.7rem; padding:.7rem .25rem; color:#fff; text-decoration:none;
font-size:.95rem; font-weight:500; transition:padding-left .2s, color .2s;
}
.mapcta__views a::after{content:"\2192"; margin-left:auto; color:var(--accent-light); transition:transform .2s}
.mapcta__views a:hover{color:var(--accent-light); padding-left:.6rem}
.mapcta__views a:hover::after{transform:translateX(4px)}
.mapcta__views a:focus-visible{outline:3px solid var(--accent-light); outline-offset:2px}
.sw-dot{flex:none; width:.7rem; height:.7rem; border-radius:50%; background:var(--c); box-shadow:0 0 0 2px rgba(255,255,255,.85)}
@media print{ .mapcta{display:none} }
/* ---------- Hero ---------- */
/* was 92svh, way too tall on the laptop. 58 feels right, dont go back up */
.hero{position:relative; isolation:isolate; color:#fff; display:flex; align-items:flex-end; min-height:min(58svh,540px)}
.hero__media{position:absolute; inset:0; z-index:-2; overflow:hidden}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:50% 58%}
.hero::after{
content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(180deg, rgba(10,22,19,.60) 0%, rgba(10,22,19,.36) 32%, rgba(10,22,19,.74) 82%, rgba(10,22,19,.88) 100%);
}
.hero__inner{width:100%; max-width:var(--maxw); margin-inline:auto; padding:clamp(3rem,7vh,4.5rem) var(--gutter) clamp(2rem,4vh,2.75rem)}
.hero h1{color:#fff; max-width:19ch; margin-bottom:.35em}
.hero__sub{font-size:clamp(1.125rem,1rem + 0.75vw,1.5rem); color:#fff; max-width:40ch; font-weight:400; margin-bottom:1rem}
.hero__support{font-family:var(--font-sans); font-size:clamp(.9rem,.85rem + .2vw,1.05rem); color:var(--accent-light); font-weight:600; letter-spacing:.02em; margin-bottom:0}
.hero__place{display:inline-flex; align-items:center; gap:.6rem; font-size:.8125rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:1rem}
.hero__place::before{content:""; width:2.25rem; height:1px; background:var(--accent-light)}
.hero .btn-row{margin-top:1.5rem}
/* the home hero carries the same jump card as the plan page: text left, card right */
.hero__inner--grid{display:grid; gap:2rem}
@media(min-width:900px){ .hero__inner--grid{grid-template-columns:minmax(0,1.3fr) minmax(17rem,.7fr); gap:clamp(2rem,5vw,4.5rem); align-items:end} .hero .hero-jump{margin-bottom:.35rem} }
.hero .hero-jump:hover .btn__arrow{transform:translateX(5px)}
/* ---------- Stat strip ---------- */
.stats{background:var(--green-deep); color:var(--on-dark)}
/* The dark band still runs the full width of the window; the figures inside it
sit in the same column as the rest of the page. The grid lives in a .wrap,
and the negative inline margin below cancels the cells' own side padding so
the first figure starts flush with the container edge instead of being
indented from it by one cell's worth of padding. */
.stats__grid{
--stat-pad:clamp(1rem,3vw,2rem);
display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
background:rgba(255,255,255,.14);
}
/* Only pull the cells outward when the grid sits in a container. A grid used
without a .wrap keeps its old edge-to-edge behaviour rather than spilling
past the viewport. */
.wrap > .stats__grid{margin-inline:calc(var(--stat-pad) * -1)}
@media(min-width:760px){.stats__grid{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--green-deep); padding:1.85rem var(--stat-pad,clamp(1rem,3vw,2rem))}
.stat__num{font-family:var(--font-serif); font-size:clamp(1.85rem,1.3rem + 1.9vw,2.85rem); line-height:1; color:#fff; display:block; letter-spacing:-.02em}
.stat__num small{font-size:.45em; font-family:var(--font-sans); font-weight:600; letter-spacing:.04em; color:var(--accent-light); margin-left:.25em}
.stat__label{display:block; margin-top:.65rem; font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-soft)}
/* the same figure in the units a reader outside Australia thinks in */
.stat__alt{display:block; margin-top:.3rem; font-size:.8125rem; color:var(--accent-light)}
/* ---- "For international readers": a plain grid of facts on a light ground ---- */
/* overseas readers panel. TODO tidy the spacing on ipad, bit cramped */
.intl{margin-top:clamp(2.5rem,5vw,4rem)}
.intl__head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.25rem; margin-bottom:1.1rem}
.intl__head h3{margin:0}
.intl__head a{font-size:.9rem; font-weight:600}
.intl__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1px; margin:0; background:var(--line); border:1px solid var(--line); border-radius:2px; overflow:hidden}
.intl__f{background:#fff; padding:1.1rem 1.25rem; display:flex; flex-direction:column}
.intl__f dt{order:-1; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.intl__f dd{margin:.35rem 0 0; font-family:var(--font-serif); font-size:1.08rem; line-height:1.3; color:var(--ink)}
.intl__f dd small{display:block; margin-top:.3rem; font-family:var(--font-sans); font-size:.82rem; line-height:1.5; color:var(--ink-soft)}
.intl .srcnote{margin-top:1rem; max-width:100ch}
/* Driving-directions bar, sitting inside the dark stats band */
.stats__dirs{border-top:1px solid rgba(255,255,255,.14); padding:1.6rem 0 1.75rem}
.stats__dirs-lbl{
margin:0 0 1rem; font-size:.75rem; letter-spacing:.13em; text-transform:uppercase;
font-weight:700; color:var(--accent-light);
}
.stats__dirs .btn-row{display:flex; flex-wrap:wrap; gap:.75rem; margin:0}
.stats__dirs-note{margin:1.1rem 0 0; font-size:.8125rem; line-height:1.6; color:var(--on-dark-soft)}
/* ---------- Card grid ---------- */
.grid{display:grid; gap:clamp(1.5rem,3vw,2.5rem)}
.grid--3{grid-template-columns:1fr}
@media(min-width:640px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid--3{grid-template-columns:repeat(3,1fr)}}
/* eight cards: one, two, then four across */
.grid--4{grid-template-columns:1fr; gap:clamp(1.25rem,2vw,1.75rem)}
@media(min-width:640px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grid--4{grid-template-columns:repeat(4,1fr)}}
.card__k{display:block; margin:0 0 .5rem; font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--accent)}
.card--fact h3{font-size:1.2rem; line-height:1.25; text-wrap:balance}
.card--fact p{font-size:.92rem}
.card{border-top:2px solid var(--ink); padding-top:1.5rem}
.section--dark .card{border-top-color:rgba(255,255,255,.35)}
.card__icon{color:var(--accent); margin-bottom:1rem}
.section--dark .card__icon{color:var(--accent-light)}
.card h3{margin-bottom:.5rem}
.card p{font-size:.9375rem; color:var(--ink-soft); margin-bottom:0}
.section--dark .card p{color:var(--on-dark-soft)}
/* ---------- Split layouts ---------- */
.split{display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:start}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr}}
figure{margin:0}
figcaption{font-size:.8125rem; color:var(--ink-soft); margin-top:.75rem; line-height:1.5; max-width:60ch}
.framed{border:1px solid var(--line); background:#fff}
.framed img{width:100%}
.band{position:relative; overflow:hidden}
.band img{width:100%; height:clamp(240px,42vh,460px); object-fit:cover; object-position:50% 55%}
/* ---------- Tick list ---------- */
.ticks{list-style:none; padding:0; margin:1.5rem 0 0; columns:1}
@media(min-width:560px){.ticks--2{columns:2; column-gap:2.5rem}}
.ticks li{break-inside:avoid; padding-left:1.6rem; position:relative; margin:.55rem 0; font-size:.9375rem}
.ticks li::before{
content:""; position:absolute; left:.1rem; top:.5em; width:.38rem; height:.68rem;
border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
transform:rotate(42deg);
}
.section--dark .ticks li::before{border-color:var(--accent-light)}
/* ---------- The opportunity (home page) ----------
The proposition beside the interactive plan, then the first-stage
visualisation with its schematic. */
.opp__split{align-items:start}
.opp .lede strong{font-weight:600; color:var(--green-deep)}
.opp__plan .planlink{margin:0}
.opp__plancap{margin:.75rem 0 0; font-size:.8125rem; line-height:1.5; color:var(--ink-soft)}
.opp__btns{margin-top:1.25rem; align-items:stretch}
.opp__btns .btn--primary{padding-inline:1.4rem}
.concept{margin-top:clamp(2.5rem,5vw,3.75rem); padding-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line)}
.concept__head h3{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); margin:0 0 1.25rem}
.concept figure a{display:block}
.concept img{width:100%; height:auto; display:block; border:1px solid var(--line); background:#fff}
.concept figure a:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
.concept__row{display:grid; gap:clamp(1.25rem,3vw,2.5rem); margin-top:clamp(1.25rem,3vw,2rem); align-items:start}
@media(min-width:900px){.concept__row{grid-template-columns:1.05fr .95fr}}
.concept__text p{font-size:.9rem; line-height:1.65; color:var(--ink-soft); margin:0; max-width:none}
.concept__text .btn-row{margin-top:1.4rem}
.concept b{text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:700; color:#7A5010}
.concept figcaption{max-width:none}
/* ---------- A collapsed block of full text ----------
Used where a section leads with a short, scannable version and keeps the
full sourced reasoning one click away. The PDF build prints it expanded. */
.fulltext{margin-top:clamp(1.75rem,3vw,2.5rem); border:1px solid var(--line); background:var(--paper)}
.section--alt .fulltext{background:#fff}
.fulltext > summary{
cursor:pointer; list-style:none; padding:1rem 1.25rem; font-weight:600; color:var(--accent);
display:flex; align-items:center; gap:.7rem;
}
.fulltext > summary::-webkit-details-marker{display:none}
.fulltext > summary::before{content:"+"; flex:none; width:1.5rem; height:1.5rem; display:grid; place-items:center; border:1px solid var(--accent); border-radius:50%; font-weight:400; line-height:1}
.fulltext[open] > summary::before{content:"\2212"}
.fulltext > summary:hover{color:var(--green-deep)}
.fulltext > summary:focus-visible{outline:3px solid var(--focus); outline-offset:-3px}
.fulltext__body{padding:.25rem 1.25rem 1.25rem; border-top:1px solid var(--line)}
.fulltext__body p{font-size:.95rem; max-width:80ch}
.fulltext__body p:first-child{margin-top:1rem}
.fulltext__body p:last-child{margin-bottom:0}
@media print{ .fulltext{border:0} .fulltext > summary{padding-left:0} .fulltext > summary::before{display:none} .fulltext__body{padding:0; border:0} }
/* ---------- Investor summary (home page landing) ----------
1. Intro beside a dark at-a-glance panel, echoing the stat strip.
2. Three tick cards. The bold tick is a filled accent disc with a white
check, and the ticks arrive one after another as a card scrolls into
view, so the options read as a checklist being completed.
3. The proposition as a dark band that carries the calls to action and
the feasibility caveat. */
.summary__head{display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center}
@media(min-width:960px){.summary__head{grid-template-columns:1.12fr .88fr}}
.summary__intro h2{margin-bottom:.55em}
.summary__intro .lede{max-width:34em; color:var(--green-deep); font-weight:600; line-height:1.45}
.summary__intro p:last-child{margin-bottom:0}
.sfacts{
display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:0;
background:rgba(255,255,255,.16); border:1px solid var(--green-deep);
border-top:3px solid var(--accent-light);
box-shadow:0 22px 48px -18px rgba(18,49,43,.45);
}
.sfact{background:var(--green-deep); padding:clamp(1.25rem,2.5vw,1.75rem) clamp(1.1rem,2.2vw,1.6rem); display:flex; flex-direction:column}
.sfact__v{
margin:0; font-family:var(--font-serif); font-size:clamp(1.6rem,1.1rem + 1.7vw,2.4rem);
line-height:1; color:#fff; letter-spacing:-.02em; white-space:nowrap;
}
.sfact__v small{font-family:var(--font-sans); font-size:.42em; font-weight:600; letter-spacing:.04em; color:var(--accent-light); margin-left:.3em}
.sfact__v i{font-style:normal; font-family:var(--font-sans); font-size:.4em; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-soft); margin:0 .4em; vertical-align:.4em}
.sfact__l{margin-top:.75rem; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; line-height:1.5; color:var(--on-dark-soft)}
.tickgroups{display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:clamp(2.5rem,5vw,4rem)}
@media(min-width:640px){
.tickgroups{grid-template-columns:repeat(2,1fr)}
.tickgroup--lead{grid-column:1/-1}
.tickgroup--lead .ticks{columns:2; column-gap:2.5rem}
}
@media(min-width:1000px){
.tickgroups{grid-template-columns:repeat(3,1fr)}
.tickgroup--lead{grid-column:auto}
.tickgroup--lead .ticks{columns:1}
}
.tickgroup{
display:flex; flex-direction:column; margin:0;
background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--accent);
padding:1.6rem 1.6rem 1.7rem;
transition:box-shadow .25s ease, border-color .25s ease;
}
.tickgroup:hover{box-shadow:0 18px 40px -20px rgba(18,49,43,.35); border-color:#C9C5BB; border-top-color:var(--accent)}
.tickgroup__icon{color:var(--accent); margin-bottom:1rem; flex:none}
.tickgroup__k{display:block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom:.55rem}
.tickgroup h3{font-size:1.25rem; line-height:1.25; margin:0 0 .55rem}
.tickgroup p{font-size:.9rem; color:var(--ink-soft); margin:0}
.ticks--bold{margin:1.15rem 0 0}
.ticks--bold li{padding-left:2.15rem; margin:0; padding-block:.42rem; font-size:.95rem; font-weight:500; line-height:1.45; color:var(--ink)}
.ticks--bold li::before{
left:0; top:.45rem; width:1.4rem; height:1.4rem; border:0; border-radius:50%;
background:var(--accent); transform:none;
}
.ticks--bold li::after{
content:""; position:absolute; left:.5rem; top:calc(.45rem + .22em); width:.34rem; height:.66rem;
border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(42deg);
}
/* the ticks arrive in turn once their card is in view */
.js .tickgroup.reveal .ticks--bold li{opacity:0; transform:translateX(-6px); transition:opacity .45s ease, transform .45s ease}
.js .tickgroup.reveal.is-visible .ticks--bold li{opacity:1; transform:none}
.js .tickgroup.reveal .ticks--bold li:nth-child(1){transition-delay:.25s}
.js .tickgroup.reveal .ticks--bold li:nth-child(2){transition-delay:.37s}
.js .tickgroup.reveal .ticks--bold li:nth-child(3){transition-delay:.49s}
.js .tickgroup.reveal .ticks--bold li:nth-child(4){transition-delay:.61s}
.js .tickgroup.reveal .ticks--bold li:nth-child(5){transition-delay:.73s}
.js .tickgroup.reveal .ticks--bold li:nth-child(6){transition-delay:.85s}
@media(prefers-reduced-motion:reduce){
.js .tickgroup.reveal .ticks--bold li{opacity:1 !important; transform:none !important; transition:none !important}
.tickgroup{transition:none}
}
/* a card's foot sits on the bottom edge, so the feet of cards two and
three line up whatever the length of the lists above them */
.tickgroup__foot{margin-top:auto; padding-top:1.5rem}
.tickgroup__foot::before{content:""; display:block; border-top:1px solid var(--line); margin-bottom:1.1rem}
.tickgroup__footlbl{display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin-bottom:.8rem}
.stages{display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; align-items:end; height:5.25rem}
.stages span{
position:relative; display:block; height:max(var(--h),1.5rem); background:var(--accent);
border-radius:2px 2px 0 0;
}
.stages span:nth-child(1){background:#5FA396}
.stages span:nth-child(2){background:#3F8C7E}
.stages span:nth-child(3){background:#237A6B}
.stages b{
position:absolute; left:0; right:0; bottom:.3rem; text-align:center;
font-family:var(--font-serif); font-weight:400; font-size:.95rem; color:#fff; line-height:1;
}
.pills{list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; margin:0; padding:0}
.pills li{
margin:0; padding:.38rem .75rem; font-size:.8rem; font-weight:600; color:var(--green-deep);
background:#E2F0E7; border:1px solid #C4DDCE; border-radius:999px;
}
.prop{
display:grid; gap:1.75rem; margin-top:clamp(2rem,4vw,3rem);
background:var(--green-deep); color:var(--on-dark);
border-left:4px solid var(--accent-light);
padding:clamp(1.75rem,4vw,3rem);
}
@media(min-width:960px){.prop{grid-template-columns:1fr auto; column-gap:clamp(2rem,5vw,4.5rem); align-items:center}}
.prop .eyebrow{color:var(--accent-light)}
.prop blockquote{margin:0}
.prop blockquote p{
margin:0; max-width:32em; font-family:var(--font-serif);
font-size:clamp(1.25rem,1rem + 1vw,1.75rem); line-height:1.35; color:#fff;
}
.prop blockquote strong{font-weight:600; color:var(--accent-light)}
.prop__actions{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center}
@media(min-width:960px){.prop__actions{flex-direction:column; align-items:stretch; min-width:17rem}}
.prop .btn--primary{background:var(--accent-light); color:var(--green-deep); border-color:var(--accent-light)}
.prop .btn--primary:hover{background:#8FE6D3; border-color:#8FE6D3}
.prop__more{font-size:.875rem; font-weight:600; color:var(--accent-light); text-decoration:none; padding:.35rem 0; text-align:center}
.prop__more:hover{text-decoration:underline}
.prop__more:focus-visible{outline:3px solid var(--accent-light); outline-offset:3px}
.prop__caveat{
grid-column:1/-1; margin:0; max-width:none; padding-top:1.15rem;
border-top:1px solid rgba(255,255,255,.16);
font-size:.8125rem; line-height:1.6; color:var(--on-dark-soft);
}
@media print{
.tickgroups{grid-template-columns:repeat(3,1fr)} .tickgroup{break-inside:avoid}
.summary__head{grid-template-columns:1.1fr .9fr}
.prop__actions{display:none}
}
/* ---------- Energy diagram ---------- */
.flow{margin-top:clamp(2.5rem,5vw,4rem)}
.flow__sources{display:grid; grid-template-columns:1fr; gap:1px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.18)}
@media(min-width:620px){.flow__sources{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.flow__sources{grid-template-columns:repeat(4,1fr)}}
.source{background:var(--green-deep); padding:1.6rem 1.4rem}
.source__icon{color:var(--accent-light); margin-bottom:.85rem}
.source h3{font-size:1.15rem; margin-bottom:.4rem; color:#fff}
.source p{font-size:.875rem; color:var(--on-dark-soft); margin:0}
.flow__connector{display:none; width:100%; height:auto; color:var(--accent-light)}
@media(min-width:980px){.flow__connector{display:block}}
.flow__arrow{display:flex; justify-content:center; padding:1.25rem 0; color:var(--accent-light)}
@media(min-width:980px){.flow__arrow{display:none}}
.flow__campus{
border:1px solid var(--accent-light); background:var(--green-mid);
padding:clamp(1.5rem,3vw,2.25rem); text-align:center;
}
.flow__campus h3{font-size:clamp(1.2rem,1rem + 1vw,1.75rem); margin-bottom:.35rem; color:#fff}
.flow__campus p{margin:0 auto; max-width:62ch; font-size:.9375rem; color:var(--on-dark-soft)}
/* ---------- Callout ---------- */
.callout{border-left:3px solid var(--accent); background:#fff; padding:1.5rem 1.75rem; margin-top:2rem}
.section--dark .callout{background:rgba(255,255,255,.06); border-left-color:var(--accent-light)}
.callout p:last-child{margin-bottom:0}
/* ---------- Map ---------- */
.map-figure{background:#fff; border:1px solid var(--line); padding:clamp(1rem,3vw,2rem)}
.map-svg{width:100%; height:auto; max-height:540px; margin-inline:auto}
.distances{list-style:none; padding:0; margin:0; border-top:1px solid var(--line)}
.distances li{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line); margin:0}
.distances .place{font-weight:600}
.distances .km{font-family:var(--font-serif); font-size:1.35rem; white-space:nowrap}
/* ---------- Facts ---------- */
.facts{margin:0; border-top:1px solid var(--line)}
.fact{display:grid; grid-template-columns:1fr; gap:.15rem; padding:1.15rem 0; border-bottom:1px solid var(--line)}
@media(min-width:620px){.fact{grid-template-columns:11rem 1fr; gap:1.5rem; align-items:baseline}}
.fact dt{font-size:.8125rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.fact dd{margin:0; font-size:1.0625rem}
/* ---------- Workstreams ---------- */
.steps{display:grid; gap:0; margin-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line)}
.step{display:grid; grid-template-columns:1fr; gap:.4rem; padding:1.75rem 0; border-bottom:1px solid var(--line)}
@media(min-width:760px){.step{grid-template-columns:5rem 13rem 1fr; gap:2rem; align-items:baseline}}
.step__num{font-family:var(--font-serif); font-size:1.5rem; color:var(--accent)}
.step h3{margin:0}
.step p{margin:0; font-size:.9375rem; color:var(--ink-soft)}
/* ---------- Commercial structures ---------- */
.chips{list-style:none; display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); padding:0; margin:clamp(2rem,4vw,3rem) 0 0; border:1px solid var(--line)}
@media(min-width:620px){.chips{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.chips{grid-template-columns:repeat(3,1fr)}}
.chips li{background:var(--paper); padding:1.35rem 1.5rem; margin:0; font-weight:600; font-size:1rem}
.chips li span{display:block; font-weight:400; font-size:.875rem; color:var(--ink-soft); margin-top:.25rem}
/* ---------- Ways to participate ----------
Three tiers. The preferred structure is the dark featured card; the
second preference is a lighter card beside it, clearly promoted but
subordinate; the remaining four run in a row beneath. (.chips above is
the older six-equal-boxes version, still used by index-hold.html.) */
.ways{display:grid; gap:clamp(1.25rem,2.5vw,2rem); margin-top:clamp(2rem,4vw,3rem); align-items:stretch}
@media(min-width:900px){.ways{grid-template-columns:1.2fr .8fr}}
.ways__lead, .ways__second{position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:clamp(1.75rem,4vw,2.75rem)}
.ways__lead{
background:var(--green-deep); color:var(--on-dark); border-top:4px solid var(--accent-light);
box-shadow:0 26px 50px -24px rgba(18,49,43,.55);
}
.ways__second{
background:var(--paper); color:var(--ink); border:1px solid var(--line); border-top:4px solid var(--accent);
box-shadow:0 18px 40px -26px rgba(18,49,43,.35); padding:clamp(1.5rem,3vw,2.25rem);
}
.section--alt .ways__second{background:#fff}
.ways__flag{
display:inline-block; padding:.35rem .7rem; margin-bottom:1.4rem; border-radius:2px;
background:var(--accent-light); color:var(--green-deep);
font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
}
.ways__flag--second{background:#E2F0E7; color:var(--accent); border:1px solid #C4DDCE}
.ways__icon{color:var(--accent-light); margin-bottom:.9rem}
.ways__second .ways__icon{color:var(--accent); width:30px; height:30px}
.ways__lead h3, .ways__second h3{margin:0 0 .5rem}
.ways__lead h3{color:#fff; font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem)}
.ways__second h3{color:var(--green-deep); font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem)}
.ways__lead p, .ways__second p{font-size:.95rem; margin:0 0 1.1rem; max-width:52ch}
.ways__lead p{color:var(--on-dark-soft)}
.ways__second p{color:var(--ink-soft); font-size:.9rem}
.ways__lead .ways__sum{color:var(--accent-light); font-weight:600; font-size:1.05rem; margin-bottom:.9rem}
.ways__second .ways__sum{color:var(--accent); font-weight:600; font-size:.98rem; margin-bottom:.8rem}
.ways__lead .ticks, .ways__second .ticks{margin:0 0 1.75rem}
.ways__lead .ticks li{color:#fff; font-weight:500}
.ways__lead .ticks li::before{border-color:var(--accent-light)}
.ways__second .ticks li{font-size:.9rem}
.ways__lead .btn--xl, .ways__second .btn{margin-top:auto}
.ways__lead .btn--xl{background:var(--accent-light); color:var(--green-deep); border-color:var(--accent-light); box-shadow:0 14px 34px -14px rgba(116,216,194,.55)}
.ways__lead .btn--xl:hover{background:#8FE6D3; border-color:#8FE6D3}
.ways__rest{margin-top:clamp(2rem,4vw,3rem)}
.ways__lbl{display:block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom:.75rem}
.ways__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:0 clamp(1.25rem,2.5vw,2rem); border-top:1px solid var(--line)}
@media(min-width:620px){.ways__list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ways__list{grid-template-columns:repeat(4,1fr); border-top:0}}
.ways__list li{margin:0; padding:1.1rem 0 1.2rem; border-bottom:1px solid var(--line)}
@media(min-width:1000px){.ways__list li{border-bottom:0; border-top:2px solid var(--ink); padding:1.1rem 0 0}}
.ways__n{display:block; font-family:var(--font-serif); font-size:1rem; color:var(--accent); margin-bottom:.35rem}
.ways__list strong{display:block; font-size:1.05rem; font-weight:600; color:var(--ink)}
.ways__list li > span:last-child{display:block; margin-top:.25rem; font-size:.875rem; line-height:1.5; color:var(--ink-soft)}
@media print{.ways__lead, .ways__second{box-shadow:none}}
/* ---------- Final CTA ---------- */
.cta{position:relative; isolation:isolate; color:#fff}
.cta__media{position:absolute; inset:0; z-index:-2; overflow:hidden}
.cta__media img{width:100%; height:100%; object-fit:cover; object-position:50% 62%}
.cta::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(8,26,22,.78), rgba(8,26,22,.88))}
.cta h2{color:#fff}
.cta .lede{color:#E4EDE9}
@media(min-width:900px){.cta .split{align-items:center}}
/* ---------- Form ---------- */
.form-card{background:var(--paper); color:var(--ink); padding:clamp(1.5rem,4vw,2.75rem); border:1px solid var(--line)}
.form-grid{display:grid; grid-template-columns:1fr; gap:1.25rem}
@media(min-width:640px){.form-grid{grid-template-columns:repeat(2,1fr)} .field--full{grid-column:1/-1}}
.field label{display:block; font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.4rem}
.field .req{color:var(--accent); margin-left:.15rem}
.field input,.field select,.field textarea{
width:100%; font:inherit; font-size:1rem; color:var(--ink); background:#fff;
border:1px solid #B9B5AC; border-radius:2px; padding:.75rem .85rem;
}
.field textarea{min-height:8rem; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent); outline:3px solid rgba(14,107,92,.3); outline-offset:0}
.form-note{font-size:.8125rem; color:var(--ink-soft); margin:1.25rem 0 0}
.form-status{margin:1.25rem 0 0; padding:.9rem 1.1rem; border-left:3px solid var(--accent); background:var(--paper-alt); font-size:.9375rem}
.form-status[hidden]{display:none}
/* ---------- Footer ---------- */
.site-footer{background:var(--green-deep); color:var(--on-dark-soft); padding-block:clamp(3rem,6vw,4.5rem); font-size:.875rem}
.site-footer h2{font-size:1rem; font-family:var(--font-sans); letter-spacing:.1em; text-transform:uppercase; color:#fff}
.site-footer p{color:var(--on-dark-soft)}
.site-footer a{color:var(--accent-light)}
.footer-grid{display:grid; gap:2.5rem}
@media(min-width:820px){.footer-grid{grid-template-columns:1.2fr 1fr}}
.disclaimer{font-size:.8125rem; line-height:1.6; color:#A7B7B1 !important; border-top:1px solid rgba(255,255,255,.16); margin-top:2.5rem; padding-top:1.5rem; max-width:none}
/* ---------- Reveal animation ---------- */
.js .reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
.js .reveal.is-visible{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.js .reveal{opacity:1 !important; transform:none !important; transition:none !important}
*{animation-duration:.001ms !important; transition-duration:.001ms !important}
}
/* ---------- Print ---------- */
@media print{
:root{--section-y:1.25rem}
body{background:#fff; color:#000; font-size:11pt}
.site-header,.btn-row,.skip,.form-card,.flow__arrow,.flow__connector{display:none !important}
.hero,.cta{color:#000; min-height:0}
.hero::after,.cta::after,.hero__media,.cta__media{display:none}
.hero__inner{padding:0}
.hero h1,.hero__sub,.hero__place,.hero__support,.cta h2,.cta .lede{color:#000 !important}
.section--dark,.stats,.stat,.source,.flow__campus,.site-footer,.chips li{background:#fff !important; color:#000 !important}
.section--dark h2,.section--dark h3,.section--dark p,.stat__num,.stat__label,.source h3,.source p,.site-footer,.site-footer h2,.site-footer p,.disclaimer{color:#000 !important}
.section{break-inside:avoid; page-break-inside:avoid}
h2,h3{break-after:avoid}
img{max-height:8cm; object-fit:contain}
a{color:#000; text-decoration:none}
}
/* ---------- executive summary page additions ---------- */
.doc-hero{
background:var(--green-deep); color:var(--on-dark);
padding:calc(var(--section-y) * .75) 0 calc(var(--section-y) * .6);
}
.doc-hero h1{color:#fff; max-width:26ch}
.doc-hero .lede{color:var(--on-dark); max-width:60ch}
.doc-hero .eyebrow{color:var(--accent-light)}
.doc-meta{
margin-top:2rem; padding-top:1.5rem; border-top:1px solid rgba(232,239,235,.28);
color:var(--on-dark-soft); font-size:.86rem; line-height:1.7;
}
.doc-meta strong{color:#fff}
/* Headline position band. Mirrors the four key facts on the PDF cover.
To change a figure, edit both this page and the PDF source. */
.keyfacts{
display:grid; grid-template-columns:1fr; gap:1px;
background:rgba(232,239,235,.22); border:1px solid rgba(232,239,235,.22);
margin:2.25rem 0 0;
}
@media(min-width:560px){.keyfacts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:940px){.keyfacts{grid-template-columns:repeat(4,1fr)}}
.keyfacts > div{background:var(--green-deep); padding:1.4rem 1.25rem}
.keyfacts dt{
font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:var(--accent-light); margin:0 0 .6rem;
}
.keyfacts dd{margin:0}
.keyfacts .kf-value{
display:block; font-family:var(--font-serif); line-height:1.05; color:#fff;
font-size:clamp(1.5rem,1.15rem + 1.05vw,2.05rem); letter-spacing:-.015em;
}
.keyfacts .kf-note{
display:block; margin-top:.55rem; font-size:.8rem; line-height:1.5; color:var(--on-dark-soft);
}
/* Eight key facts rather than four: two rows of four, and the values are
sometimes words, so they are set a little smaller and allowed to wrap. */
.keyfacts--eight .kf-value{font-size:clamp(1.2rem,1rem + .7vw,1.55rem); line-height:1.15; text-wrap:balance}
.keyfacts a{color:var(--accent-light); font-weight:600; white-space:nowrap}
.keyfacts a:hover{color:#fff}
.eightband .keyfacts{margin-top:clamp(2rem,4vw,3rem)}
.eightband .keyfacts > div{background:var(--green-mid)}
.eightband__note{margin:1.5rem 0 0; max-width:90ch; font-size:.82rem; line-height:1.6; color:var(--on-dark-soft)}
/* the eight facts as the strip under the hero: four across, two down; two across on a phone */
.stats--facts{padding:0}
.sfacts--band{border:0; box-shadow:none; background:rgba(255,255,255,.14); grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.sfacts--band{grid-template-columns:repeat(4,1fr)}}
.wrap > .sfacts--band{margin-inline:calc(clamp(1rem,2vw,1.4rem) * -1)}
.summary__head--solo{grid-template-columns:1fr !important}
/* the overview's at-a-glance panel, also eight: two columns of four */
.sfacts--eight .sfact{padding:clamp(1rem,2vw,1.35rem) clamp(1rem,2vw,1.4rem)}
.sfacts--eight .sfact__v{font-size:clamp(1.6rem,1.2rem + 1.3vw,2.3rem)}
.sfacts--eight .sfact__l{margin-top:.5rem; font-size:.7rem}
@media print{.keyfacts a{color:#000 !important}}
/* position:relative matters: without it, absolutely positioned descendants
such as .visually-hidden escape the scroll container and widen the page */
.tablewrap{position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:2rem 0}
table.data{border-collapse:collapse; width:100%; min-width:34rem; font-size:.9rem}
table.data thead th{
text-align:left; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
font-weight:700; color:var(--green-deep); border-bottom:2px solid var(--green-deep);
padding:.7rem .8rem; vertical-align:bottom;
}
table.data tbody th{
text-align:left; font-weight:700; color:var(--ink); padding:.7rem .8rem;
border-bottom:1px solid var(--line); vertical-align:top; line-height:1.55;
}
table.data tbody th{min-width:9.5rem}
table.data td{padding:.7rem .8rem; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.55}
table.data tbody tr:nth-child(even){background:var(--paper-alt)}
table.data td.num, table.data th.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
table.data tr.total td, table.data tr.total th{background:var(--green-deep); color:#fff; border-bottom:0; font-weight:600}
.section--dark table.data thead th{color:var(--accent-light); border-bottom-color:var(--accent-light)}
.section--dark table.data tbody th{color:#fff; border-bottom-color:rgba(232,239,235,.22)}
.section--dark table.data td{border-bottom-color:rgba(232,239,235,.22)}
.section--dark table.data tbody tr:nth-child(even){background:rgba(255,255,255,.04)}
.tag{
display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; padding:.25rem .5rem; border-radius:3px; white-space:nowrap;
}
.tag--conf{background:#0E6B5C; color:#fff}
.tag--strong{background:#CFE8E0; color:#0B4A3F}
.tag--open{background:#F3E4C8; color:#7A5010}
.tag--gate{background:#F4DAD4; color:#8C2F1F}
blockquote.pull{
margin:2rem 0; padding:1.25rem 1.5rem; background:var(--paper-alt);
border-left:4px solid var(--accent); font-family:var(--font-serif); font-size:1.05rem; line-height:1.6;
}
blockquote.pull cite{
display:block; margin-top:.9rem; font-family:var(--font-sans); font-size:.82rem;
color:var(--ink-soft); font-style:normal; line-height:1.6;
}
.notebox{
margin:2rem 0; padding:1.25rem 1.5rem; background:#FDFBF6;
border:1px solid var(--line); border-left:4px solid #8A5A12;
}
.notebox > strong:first-child{
display:block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
color:#7A5010; margin-bottom:.6rem;
}
.notebox p:last-child{margin-bottom:0}
.docnav{
background:var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
padding:1.1rem 0;
}
.docnav ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; font-size:.86rem}
.docnav a{color:var(--ink-soft); text-decoration:none; border-bottom:1px solid transparent}
.docnav a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.two-col{display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.5rem 2.5rem; margin:1.5rem 0}
.two-col ul, .two-col ol{margin:0}
.figures{display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1.25rem; margin:2rem 0}
.figure-card{border:1px solid var(--line); padding:1.25rem; background:var(--paper)}
.figure-card .big{font-family:var(--font-serif); font-size:1.9rem; color:var(--green-deep); line-height:1.1; display:block}
.figure-card .cap{display:block; margin-top:.5rem; font-size:.82rem; color:var(--ink-soft); line-height:1.5}
.stage-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:0; border:1px solid var(--line); margin:2rem 0}
.stage-row > div{padding:1.5rem; border-right:1px solid var(--line)}
.stage-row > div:last-child{border-right:0}
.stage-row .sn{font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); font-weight:700}
.stage-row .sm{font-family:var(--font-serif); font-size:1.7rem; color:var(--green-deep); margin:.4rem 0 .6rem; display:block; line-height:1}
.stage-row p{font-size:.9rem; margin:0; color:var(--ink-soft)}
@media (max-width:760px){ .stage-row > div{border-right:0; border-bottom:1px solid var(--line)} }
.srcnote{font-size:.8rem; color:var(--ink-soft); line-height:1.6}
.dl-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem}
@media print{
.docnav, .site-header, .dl-row{display:none}
/* The document hero is dark on screen. Browsers do not print backgrounds by
default, so without this it prints as white text on white paper. */
.doc-hero{background:#fff !important; color:#000 !important; padding-top:0}
.doc-hero h1,.doc-hero .lede,.doc-hero .eyebrow,.doc-meta,.doc-meta strong{color:#000 !important}
.hero-fig figcaption,.hero-fig figcaption b{color:#000 !important}
.keyfacts{background:none !important; border-color:#000 !important; break-inside:avoid; page-break-inside:avoid}
.keyfacts > div{background:#fff !important; border:1px solid #000}
.keyfacts dt,.keyfacts .kf-value,.keyfacts .kf-note{color:#000 !important}
}
/* ---------- imagery ---------- */
.hero-fig{margin:2.5rem 0 0}
.hero-fig img{width:100%; height:auto; display:block; border:1px solid rgba(232,239,235,.25)}
.hero-fig figcaption{margin-top:.9rem; font-size:.84rem; line-height:1.65; color:var(--on-dark-soft); max-width:80ch}
.hero-fig figcaption b{color:var(--accent-light); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:700}
.photo-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.5rem; margin:2.5rem 0}
.photo-grid figure{margin:0}
.photo-grid img{width:100%; height:12.5rem; object-fit:cover; display:block; border:1px solid var(--line)}
.photo-grid figcaption{margin-top:.6rem; font-size:.84rem; line-height:1.6; color:var(--ink-soft)}
.wide-fig{margin:2.5rem 0}
.wide-fig img{width:100%; height:auto; display:block; border:1px solid var(--line)}
.wide-fig figcaption{margin-top:.9rem; font-size:.86rem; line-height:1.65; color:var(--ink-soft); max-width:80ch}
.wide-fig figcaption b{text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:700; color:#7A5010}
.section--dark .wide-fig img{border-color:rgba(232,239,235,.25)}
.section--dark .wide-fig figcaption{color:var(--on-dark-soft)}
.section--dark .wide-fig figcaption b{color:var(--accent-light)}
@media print{ .hero-fig img,.wide-fig img{height:auto; max-height:12cm} }
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ============================================================
MULTI-PAGE ADDITIONS
============================================================ */
.nav a[aria-current="page"]{color:var(--accent); border-bottom-color:var(--accent)}
/* --- page hero (inner pages) --- */
.page-hero{
background:var(--green-deep); color:var(--on-dark);
padding:calc(var(--section-y) * .5) 0 calc(var(--section-y) * .42);
}
.page-hero h1{color:#fff; max-width:22ch; margin:0 0 1rem}
.page-hero .lede{color:var(--on-dark); max-width:62ch; margin:0}
.page-hero .eyebrow{color:var(--accent-light)}
.page-hero .btn-row{margin-top:2rem}
.page-hero__meta{
margin-top:2rem; padding-top:1.4rem; border-top:1px solid rgba(232,239,235,.28);
color:var(--on-dark-soft); font-size:.86rem; line-height:1.7; max-width:70ch;
}
.page-hero__meta strong{color:#fff}
/* --- breadcrumb --- */
.crumbs{background:var(--paper-alt); border-bottom:1px solid var(--line); padding:.85rem 0; font-size:.84rem}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem}
.crumbs li:not(:last-child)::after{content:"/"; margin-left:.4rem; color:var(--line)}
.crumbs a{color:var(--ink-soft); text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current="page"]{color:var(--ink); font-weight:600}
/* --- cross-links to other pages --- */
.jump{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.25rem; margin:2.5rem 0 0}
.jump a{
display:block; padding:1.35rem 1.5rem; border:1px solid var(--line); background:var(--paper);
text-decoration:none; color:inherit; transition:border-color .2s, transform .2s;
}
.jump a:hover{border-color:var(--accent); transform:translateY(-2px)}
.jump .k{display:block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:.45rem}
.jump .t{display:block; font-family:var(--font-serif); font-size:1.2rem; color:var(--green-deep); line-height:1.25; margin-bottom:.45rem}
.jump .d{display:block; font-size:.88rem; color:var(--ink-soft); line-height:1.55}
.section--dark .jump a{background:rgba(255,255,255,.05); border-color:rgba(232,239,235,.25)}
.section--dark .jump .t{color:#fff}
.section--dark .jump .d{color:var(--on-dark-soft)}
.section--dark .jump .k{color:var(--accent-light)}
.section--dark .jump a:hover{border-color:var(--accent-light)}
/* --- CTA band --- */
.cta-band{background:var(--green-mid); color:var(--on-dark); padding:clamp(3rem,6vw,5rem) 0}
.cta-band h2{color:#fff; margin:0 0 .9rem}
.cta-band p{color:var(--on-dark-soft); max-width:60ch; margin:0 0 1.9rem}
.cta-band .btn--primary{background:var(--accent-light); color:var(--green-deep); border-color:var(--accent-light)}
.cta-band .btn--primary:hover{background:#8fe6d3; border-color:#8fe6d3}
/* --- key/value strip --- */
.kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1.5rem; margin:2.5rem 0}
.kv > div{border-top:2px solid var(--green-deep); padding-top:1rem}
/* the eight points as they appear on the plan: two rows of four, and values that may be words */
@media(min-width:900px){.kv--eight{grid-template-columns:repeat(4,1fr)}}
.kv--eight .v{font-size:1.45rem; text-wrap:balance}
.rowlink.rowlink--inline{font-size:inherit; font-weight:600; color:var(--accent); border-bottom-color:currentColor; white-space:nowrap}
.section--dark .kv > div{border-top-color:var(--accent-light)}
.kv .k{display:block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom:.5rem}
.section--dark .kv .k{color:var(--accent-light)}
.kv .v{display:block; font-family:var(--font-serif); font-size:1.6rem; color:var(--green-deep); line-height:1.1}
.section--dark .kv .v{color:#fff}
.kv .s{display:block; margin-top:.5rem; font-size:.85rem; color:var(--ink-soft); line-height:1.55}
.section--dark .kv .s{color:var(--on-dark-soft)}
/* --- form status --- */
.form-status[data-state="error"]{color:#8C2F1F; font-weight:600}
.form-status[data-state="ok"]{color:var(--accent); font-weight:600}
.hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
/* --- overflow containment: grid/flex children must be allowed to shrink --- */
.split > *, .grid > *, .two-col > *, .jump > *, .photo-grid > *, .figures > *, .kv > *{min-width:0}
.tablewrap{max-width:100%}
@media (max-width:640px){ table.data{min-width:30rem} }
/* ============================================================
INTERACTIVE PLAN (map.html)
============================================================ */
.maplayout{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:2.5rem; align-items:start}
@media (max-width:900px){ .maplayout{grid-template-columns:1fr} }
.mapbox{position:relative; border:1px solid var(--line); background:var(--paper-alt); border-radius:2px; overflow:hidden}
#map{display:block; width:100%; height:auto; aspect-ratio:930/719; touch-action:none; cursor:grab; background:#F4F2EC}
#map.is-dragging{cursor:grabbing}
#map:focus-visible{outline:3px solid var(--focus); outline-offset:-3px}
/* the small heading over the plan: it is interactive, not a picture */
.maphead{display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem 1rem; margin:0 0 .6rem}
.maphead__t{display:inline-flex; align-items:center; gap:.45rem; margin:0; font-family:var(--font-sans); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.maphead__t svg{flex:none}
.maphead__s{font-size:.82rem; color:var(--ink-soft)}
@media print{.maphead__s{display:none}}
.maphint{font-size:.84rem; color:var(--ink-soft); line-height:1.6; margin:.9rem 0 0}
/* map controls */
.mapctl{position:absolute; top:.75rem; right:.75rem; display:flex; flex-direction:column; gap:.4rem}
.mapctl button{
min-width:2.4rem; min-height:2.4rem; padding:.35rem .6rem; font:inherit; font-size:.95rem; font-weight:700;
background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:2px; cursor:pointer;
}
.mapctl button:hover{border-color:var(--accent); color:var(--accent)}
.mapctl button:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
#zfit{font-size:.78rem; letter-spacing:.04em}
/* features */
#map .lot{fill:#EFEDE6; stroke:#6E685F; stroke-width:1.5; cursor:pointer; transition:fill .15s}
#map .lot--infra{fill:#DCE9E4; stroke:#1B1F1D; stroke-width:2.2}
#map .lot:hover{fill:#E3E9DF}
#map .lot--infra:hover{fill:#CFE3DA}
#map .lot.is-sel{fill:#BFE0D4; stroke:var(--accent); stroke-width:3}
#map .line{fill:none; pointer-events:none; stroke-linejoin:round; stroke-linecap:round}
#map .lineg{cursor:pointer}
#map .lineg .hit{fill:none; stroke:#000; stroke-opacity:0; stroke-width:12; stroke-linejoin:round; stroke-linecap:round}
#map .lineg:hover .line{stroke-width:6}
#map .lineg.is-sel .line{stroke-width:7}
#map .lineg:focus-visible{outline:none}
#map .lineg:focus-visible .line{stroke:var(--focus); stroke-width:7}
/* Each service gets its own PATTERN as well as its own colour, so the plan
still reads in greyscale, in print, and with any colour vision deficiency. */
#map .line--gas{stroke:#8A4E0B; stroke-width:4; stroke-dasharray:18 5 5 5}
#map .line--e132{stroke:#7A1F10; stroke-width:3.8}
#map .line--e66{stroke:#065145; stroke-width:3; stroke-dasharray:11 6}
#map .line--water{stroke:#2E6E93; stroke-width:2; stroke-dasharray:4 5}
#map .line--fibre{stroke:#452F82; stroke-width:3.2; stroke-dasharray:1.5 6; stroke-linecap:round}
#map .lot:focus-visible{outline:none; stroke:var(--focus); stroke-width:4}
#map .addr:focus-visible{outline:none; stroke:var(--focus); stroke-width:4}
#map .addr{fill:#1B1F1D; stroke:#FBFAF8; stroke-width:2; cursor:pointer}
#map .addr.is-sel{fill:var(--accent); stroke-width:3}
#map .addr-halo{fill:#1B1F1D; opacity:.12}
#map .lbl{
font-family:var(--font-sans); fill:#1B1F1D; pointer-events:none;
font-size:calc(15px * var(--k, 1)); font-weight:700; text-anchor:middle;
}
#map .lbl--dp{font-size:calc(11px * var(--k, 1)); font-weight:400; fill:#4A524E}
#map #scalebar line{stroke:#1B1F1D; stroke-width:calc(2px * var(--k, 1))}
#map .sb{font-family:var(--font-sans); font-size:calc(13px * var(--k, 1)); fill:#1B1F1D}
#map .sb--where{font-size:calc(11px * var(--k, 1)); font-weight:700; letter-spacing:.1em; fill:#6B665C}
#map .is-off{display:none}
/* layer switches */
.layers{border:1px solid var(--line); background:var(--paper); padding:1.25rem 1.4rem 1.4rem; margin:0 0 1.5rem}
.layers legend{
font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700;
color:var(--accent); padding:0 .4rem;
}
.layers .lyr{display:flex; align-items:center; gap:.4rem; font-size:.9rem}
.layers .lyr--stack{flex-wrap:wrap}
.layers .lyr__tog{display:flex; align-items:center; width:1.05rem; padding:.42rem 0; cursor:pointer; flex:none}
.layers input{width:1.05rem; height:1.05rem; accent-color:var(--accent); cursor:pointer; flex:none}
.layers input:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
/* the name beside each switch selects the feature, exactly like clicking the line */
.lyr__name{
display:flex; align-items:center; gap:.5rem; flex:1 1 auto; min-width:0; flex-wrap:wrap;
font:inherit; color:inherit; text-align:left; line-height:1.35;
background:none; border:0; border-left:3px solid transparent;
padding:.42rem .4rem .42rem .4rem; margin:0 0 0 -.15rem; border-radius:0 2px 2px 0;
}
.lyrcat{color:var(--ink-soft); font-size:.78em; white-space:nowrap}
button.lyr__name{cursor:pointer}
button.lyr__name:hover{background:rgba(18,49,43,.06)}
button.lyr__name:focus-visible{outline:3px solid var(--focus); outline-offset:-1px}
button.lyr__name.is-sel{background:rgba(18,49,43,.09); border-left-color:var(--accent)}
button.lyr__name[disabled]{opacity:.42; cursor:default; background:none; border-left-color:transparent}
.lyr__name--plain{cursor:default}
.lyr__name--second{flex:0 0 100%; margin-left:1.6rem}
.layers .lyr.is-hidden .lyr__name{opacity:.42}
/* Legend swatches are drawn to match the line on the plan exactly, pattern and
all, so the legend works as a key rather than a colour chart. */
.sw{width:1.6rem; height:4px; background:var(--c, #6E685F); border:0; border-radius:1px; flex:none}
.sw--gasline{background:repeating-linear-gradient(90deg,
var(--c) 0 9px, transparent 9px 11.5px, var(--c) 11.5px 14px, transparent 14px 16.5px)}
.sw--dash2{background:repeating-linear-gradient(90deg, var(--c) 0 5.5px, transparent 5.5px 8.5px)}
.sw--dot2{background:repeating-linear-gradient(90deg, var(--c) 0 2px, transparent 2px 5px)}
.sw--dash{height:3px; background:repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px)}
.sw--road{height:7px; background:#3A3530; position:relative}
.sw--road::after{content:""; position:absolute; inset:1.6px 0; background:#FBFAF8}
.sw--lot{height:.95rem; width:1.4rem; background:#EFEDE6; border:1.5px solid #6E685F; border-radius:1px}
.sw--dot{height:.75rem; width:.75rem; border-radius:50%; background:#1B1F1D; margin-left:.5rem}
.sw--pin{height:.75rem; width:.75rem; border-radius:50%; background:var(--accent); margin-left:.5rem}
.sw--txt{height:auto; width:1.6rem; background:none; position:relative}
.sw--txt::before{content:"Aa"; font-size:.78rem; font-weight:700; color:#3A3530; line-height:1}
/* detail panel */
.detail{border:1px solid var(--line); background:var(--paper); padding:1.4rem 1.5rem; min-height:14rem}
.detail__hint{color:var(--ink-soft); font-size:.92rem; margin:0}
.detail__sub{
font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; font-weight:700;
color:var(--accent); margin:0 0 .5rem;
}
.detail__title{font-size:1.35rem; margin:0 0 .9rem; line-height:1.2}
.detail p{font-size:.92rem; line-height:1.7}
.detail p:last-child{margin-bottom:0}
.detail__photos{margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--line)}
.detail__photos a{font-weight:600; color:var(--accent); text-decoration:none}
.detail__photos a:hover{text-decoration:underline}
.detail__share{margin-top:.9rem; display:flex; flex-wrap:wrap; align-items:center; gap:.6rem}
.viewcopy{
font:inherit; font-size:.8rem; font-weight:600; letter-spacing:.02em; cursor:pointer;
padding:.45rem .8rem; border:1px solid var(--accent); border-radius:2px;
background:transparent; color:var(--accent); transition:background-color .2s, color .2s;
}
.viewcopy:hover{background:var(--accent); color:#fff}
.viewcopy:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.viewcopy.is-done{background:var(--green-deep); border-color:var(--green-deep); color:#fff}
.viewcopy__url{font-size:.74rem; color:var(--ink-soft); word-break:break-all}
@media print{.detail__share{display:none}}
/* ---- the second drawing: the holding and Cooma, to scale (build-district.py) ---- */
#district{display:block; width:100%; height:auto; background:var(--paper-alt)}
#district[hidden]{display:none}
#district text{font-family:var(--font-sans); fill:var(--ink)}
.d-ring{fill:none; stroke:#9A958A; stroke-width:1.2; stroke-dasharray:3 6}
.d-ringbg{fill:var(--paper-alt)}
.d-ringlbl{font-size:17px; font-weight:700; fill:#5C574E !important; letter-spacing:.04em}
.d-townarea{fill:rgba(122,80,16,.13); stroke:#7A5010; stroke-width:1.2; stroke-dasharray:5 5}
.d-towndot{fill:#7A5010; stroke:#fff; stroke-width:2}
.d-townname{font-family:var(--font-serif) !important; font-size:38px; font-weight:600; fill:#4A2F06 !important}
.d-townsub{font-size:20px; font-weight:600; fill:#7A5010 !important}
.d-note{font-size:16px; font-style:italic; fill:#6B665C !important}
.d-lot{fill:#CFE3DA; stroke:var(--green-deep); stroke-width:1.4; vector-effect:non-scaling-stroke}
.d-holding{cursor:pointer}
.d-holding:hover .d-lot, .d-holding:focus-visible .d-lot{fill:#A9D4C4}
.d-holding:focus{outline:none}
.d-holding:focus-visible .d-lot{stroke:var(--focus); stroke-width:2.6}
.d-hwy{fill:none; stroke:#3A3530; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; pointer-events:none}
.d-hwy--ind{stroke-dasharray:9 6; stroke-width:2.6; stroke:#5C564E}
.d-measure{stroke:var(--accent); stroke-width:2; stroke-dasharray:2 5; stroke-linecap:round}
.d-measurebg{fill:var(--paper); stroke:var(--accent); stroke-width:1}
.d-measurelbl{font-size:17px; font-weight:700; fill:var(--accent) !important}
.d-addr{fill:var(--ink); stroke:#fff; stroke-width:2}
.d-holdname{font-family:var(--font-serif) !important; font-size:30px; font-weight:600; fill:var(--green-deep) !important}
.d-holdsub{font-size:19px; font-weight:600; fill:var(--accent) !important}
.d-hwylbl{font-size:17px; font-weight:600; fill:#3A3530 !important; letter-spacing:.03em}
.d-edge{font-size:15px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; fill:#6B665C !important}
.d-scale line{stroke:var(--ink); stroke-width:1.5}
.d-scale text, .d-north text{font-size:17px; font-weight:600}
.d-north path{fill:var(--ink)}
.d-foot{font-size:15px; fill:#6B665C !important}
.mapbox.is-district .mapctl{display:none}
/* ---- the third drawing: where the holding is in Australia (build-national.py) ---- */
#national{display:block; width:100%; height:auto; background:var(--paper-alt)}
#national[hidden]{display:none}
#national text{font-family:var(--font-sans); fill:var(--ink); paint-order:stroke; stroke:var(--paper-alt); stroke-width:4px; stroke-linejoin:round}
.n-seabg{fill:var(--paper-alt)}
.n-seabg--enl{fill:#F6F8F7}
.n-land{fill:#E6E2D9; stroke:none}
.n-coast{fill:none; stroke:#9A958A; stroke-width:1.3; stroke-linejoin:round}
.n-nsw{fill:#CFE3DA; stroke:none}
.n-border{fill:none; stroke:#B0AB9F; stroke-width:1; stroke-dasharray:4 4}
.n-head{font-size:15px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; fill:#6B665C !important}
.n-state{font-size:12px; font-weight:600; letter-spacing:.12em; fill:#8A857A !important; stroke:none !important}
.n-state--lg{font-size:16px}
.n-sea{font-size:15px; font-style:italic; fill:#7E8C8A !important; stroke:none !important}
.n-city{fill:var(--ink)}
.n-capital{fill:#fff; stroke:var(--ink); stroke-width:2}
.n-cityname{font-family:var(--font-serif) !important; font-size:25px; font-weight:600}
.n-cityname--sm{font-family:var(--font-sans) !important; font-size:14px; font-weight:500; fill:var(--ink-soft) !important}
.n-citysub{font-size:16px; font-weight:600; fill:var(--ink-soft) !important}
.n-road{fill:none; stroke:#3A3530; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.n-road--minor{stroke-width:1.8; stroke:#5C564E; stroke-dasharray:7 5}
.n-halo{fill:var(--accent); opacity:.2}
.n-dot{fill:var(--accent); stroke:#fff; stroke-width:2.5}
.n-zoom{fill:none; stroke:var(--green-deep); stroke-width:1.4; stroke-dasharray:6 4}
.n-lead{fill:none; stroke:var(--green-deep); stroke-width:1.2}
.n-lead--dash{stroke-dasharray:6 4; stroke:#8A857A}
.n-sitename{font-family:var(--font-serif) !important; font-size:27px; font-weight:600; fill:var(--green-deep) !important}
.n-sitename--sm{font-size:21px}
.page-hero .lede a{color:var(--accent-light)}
/* ---------- HERO PHOTOGRAPHS ----------
Every primary page opens on the same kind of hero: a photograph from the
images folder under a dark green wash, so the white type stays readable
whatever the picture. The overview's hero (.hero) is the same idea with an
![]()
. To change a page's photograph, change its line below; to add a page,
give its a page-hero--NAME class and add a line.
Paths are relative to this stylesheet, so they work from private/ as well.
The photographs are the 1000 px versions: the wash hides the softness. */
.page-hero, .doc-hero--photo{
position:relative; isolation:isolate;
background-color:var(--green-deep);
background-image:
linear-gradient(180deg, rgba(10,22,19,.68) 0%, rgba(12,30,26,.58) 45%, rgba(10,22,19,.86) 100%),
var(--hero-img, none);
background-size:cover; background-position:var(--hero-pos, 50% 55%); background-repeat:no-repeat;
}
.page-hero--site{--hero-img:url(images/site-terrain.jpg); --hero-pos:50% 45%}
.page-hero--map{--hero-img:url(images/campus-outlook.jpg); --hero-pos:50% 40%}
.page-hero--power{--hero-img:url(images/visit-substation-1000.jpg); --hero-pos:50% 62%}
.page-hero--energy{--hero-img:url(images/visit-terrain-east-1000.jpg); --hero-pos:50% 35%}
.page-hero--connectivity{--hero-img:url(images/visit-highway-cooma-1000.jpg); --hero-pos:50% 50%}
.page-hero--planning{--hero-img:url(images/site-rocky-outlook-1000.jpg); --hero-pos:50% 40%}
.page-hero--guidelines{--hero-img:url(images/visit-terrain-west-1000.jpg); --hero-pos:50% 45%}
.page-hero--attributes{--hero-img:url(images/site-paddock-frontage-1000.jpg); --hero-pos:50% 45%}
.page-hero--enquire{--hero-img:url(images/visit-terrain-fence-1000.jpg); --hero-pos:50% 50%}
.page-hero--contents{--hero-img:url(images/hero-monaro-1000.jpg); --hero-pos:50% 50%}
@media screen{.doc-hero--photo{--hero-img:url(images/hero-monaro.jpg); --hero-pos:50% 40%}}
/* one heading size for every hero, smaller than a bare h1, so no hero runs tall */
.hero h1, .page-hero h1, .doc-hero h1{font-size:clamp(2rem, 1.35rem + 2.5vw, 3.25rem)}
@media print{.page-hero, .doc-hero--photo{background-image:none !important}}
.n-sitesub{font-size:16px; font-weight:600; fill:var(--accent) !important}
.n-site{cursor:pointer}
.n-site:hover .n-halo, .n-site:focus-visible .n-halo{opacity:.4}
.n-site:focus{outline:none}
.n-site:focus-visible .n-dot{stroke:var(--focus); stroke-width:4}
.n-key text{font-size:15px; fill:var(--ink-soft) !important}
.n-keysw{stroke:#5E8C79; stroke-width:1}
/* ---- the corner locator on the plan and the Cooma drawing ----
Top left on the plan, the one corner that the zoom buttons and the lots leave
clear, and kept small because Lot 90 is close by. On the Cooma drawing the
north arrow has that corner, so it moves to bottom left, above the scale bar.
On a narrow screen it would cover too much, so there it drops out of the box
and sits beneath it. */
/* little australia map in the corner. tried bottom left first but it sat on lot 19 */
.locator{
position:absolute; left:.4rem; top:.4rem; z-index:1; width:4.9rem; padding:.3rem .3rem .35rem; text-align:center; text-decoration:none;
background:var(--paper); border:1px solid var(--green-deep); border-radius:2px; box-shadow:0 6px 16px -10px rgba(18,49,43,.55);
}
.locator svg{display:block; width:100%; height:auto}
.locator .n-land{fill:#E6E2D9}
.locator .n-coast{stroke-width:2.6}
.locator__t{display:block; margin-top:.2rem; font-size:.58rem; font-weight:700; letter-spacing:.08em; line-height:1.35; text-transform:uppercase; color:var(--green-deep)}
.locator__s{display:block; font-size:.57rem; line-height:1.35; white-space:nowrap; color:var(--ink-soft)}
/* over the plan there is no room for the arrow; beneath it, on a phone, there is */
@media(min-width:700px){.locator__s span{display:none}}
.locator:hover{border-color:var(--accent); box-shadow:0 8px 18px -10px rgba(18,49,43,.7)}
.locator:hover .locator__s{color:var(--accent)}
.locator:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.mapbox.is-district .locator{top:auto; bottom:14%}
.mapbox.is-national .locator{display:none}
/* on the national drawing the top right corner is the enlargement, so Back sits bottom right */
.mapbox.is-national .dback{top:auto; bottom:.75rem}
@media(max-width:699px){
.locator, .mapbox.is-district .locator{position:static; width:auto; display:flex; align-items:center; gap:.75rem; text-align:left; border-width:1px 0 0; border-color:var(--line); box-shadow:none; padding:.6rem .75rem}
.locator svg{width:3.5rem; flex:none}
.locator__t, .locator__s{margin-top:0; font-size:.74rem}
.locator__t{flex:none}
}
.dback{
position:absolute; top:.75rem; right:.75rem; z-index:2; font:inherit; font-size:.85rem; font-weight:700; cursor:pointer;
padding:.6rem .9rem; border:1px solid var(--green-deep); border-radius:2px; background:var(--green-deep); color:#fff;
}
.dback:hover{background:var(--green-mid)}
.dback:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.dback[hidden]{display:none}
/* the chip that changes the scale of the drawing reads as a different kind of button */
.viewnav__chip--zoom{border-style:dashed; border-color:var(--accent); color:var(--accent)}
.viewnav__ico{flex:none}
.viewnav__chip--zoom[aria-current]{border-style:solid}
/* ---- the satellite view (map-aerial.js) ---- */
#gmap{display:block; width:100%; aspect-ratio:930/719; background:#1A2A25}
#gmap[hidden]{display:none}
.gmap__notice{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; margin:0;
max-width:min(30rem,90%); padding:.9rem 1.1rem; text-align:center; font-size:.9rem; line-height:1.5;
background:rgba(251,250,248,.96); color:var(--ink); border:1px solid var(--line); border-radius:2px;
}
.gmap__notice[hidden]{display:none}
.gmap__notice--error{border-left:4px solid #8C2F1F; color:#6E2014; text-align:left}
.mapbox.is-aerial .locator{display:none}
/* the site's own zoom buttons stay, google's are off; give them a ground */
.mapbox.is-aerial .mapctl button{background:rgba(251,250,248,.94)}
.mapbox.is-aerial .dback{top:auto; bottom:.75rem}
html.no-aerial .viewnav__chip--aerial{display:none}
.viewnav__chip[aria-pressed="true"]{background:var(--green-deep); border-color:var(--green-deep); border-style:solid; color:#fff}
@media print{ #gmap, .gmap__notice{display:none !important} }
/* ---- the view chips above the plan ---- */
html:not(.js) .viewnav{display:none}
#plan{padding-top:clamp(2rem,4vw,3.25rem)}
.viewnav{margin:0 0 clamp(1.5rem,3vw,2.25rem)}
.viewnav__lead{margin:0 0 1rem; max-width:80ch; font-size:.95rem; color:var(--ink-soft)}
.viewnav__lead strong{color:var(--ink); font-family:var(--font-serif); font-size:1.2rem; font-weight:600; margin-right:.35rem}
.viewnav ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.viewnav li{margin:0}
.viewnav__chip{
display:inline-flex; align-items:center; gap:.55rem; padding:.55rem .95rem;
border:1px solid #B9B5AC; border-radius:999px; background:var(--paper);
font-size:.875rem; font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap;
transition:background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
.viewnav__chip:hover{border-color:var(--accent); color:var(--accent); box-shadow:0 6px 16px -10px rgba(18,49,43,.5)}
.viewnav__chip:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.viewnav__chip[aria-current]{background:var(--green-deep); border-color:var(--green-deep); color:#fff}
.viewnav__dot{flex:none; width:.7rem; height:.7rem; border-radius:50%; background:var(--c)}
.viewnav__chip[aria-current] .viewnav__dot{box-shadow:0 0 0 2px rgba(255,255,255,.9)}
/* a phone gets one swipeable row rather than four wrapped ones */
@media(max-width:640px){
.viewnav ul{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-inline:calc(var(--gutter) * -1); padding:.15rem var(--gutter) .6rem; scrollbar-width:thin}
}
@media(prefers-reduced-motion:reduce){.viewnav__chip{transition:none}}
@media print{.viewnav{display:none}}
/* ---- the photographs under the plan, swapped by map-photos.js ---- */
.mapphotos{min-width:0; padding-top:1.75rem; border-top:1px solid var(--line); scroll-margin-top:calc(var(--hdr-h,5rem) + 1rem)}
/* Wide screens: the gallery sits directly under the plan in the left column,
and the layer list and detail panel run down the right beside both. The
second row takes any spare height, so a long detail panel never opens a
gap between the plan and its photographs. Narrow screens: one column, in
source order, so the gallery follows the detail panel. */
@media (min-width:901px){
.maplayout{grid-template-rows:auto 1fr}
.maplayout > .mapside{grid-column:2; grid-row:1 / span 2}
.maplayout > .mapphotos{grid-column:1; grid-row:2; margin-top:-.5rem}
}
.mapphotos__title{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem); margin:0 0 .6rem}
.mapphotos__lede{color:var(--ink-soft); max-width:78ch; margin:0}
.mapphotos__grid{margin:1.5rem 0 0; gap:1.25rem; grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr))}
.mapphotos__grid .mapphoto a{display:block; overflow:hidden; border:1px solid var(--line); background:#fff}
.mapphotos__grid .mapphoto img{height:15rem; border:0; transition:transform .35s ease}
.mapphotos__grid .mapphoto a:hover img{transform:scale(1.03)}
.mapphotos__grid .mapphoto a:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
/* the concept visualisations are wide images and are shown whole, full width */
.mapphotos__grid .mapphoto--wide{grid-column:1/-1}
.mapphotos__grid .mapphoto--wide img{height:auto}
.mapphotos__grid .mapphoto--wide figcaption{max-width:90ch}
.mapphotos__grid .mapphoto--wide figcaption b{text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:700; color:#7A5010}
.mapphotos__more{margin:1.5rem 0 0; font-size:.9rem; color:var(--ink-soft)}
.mapphotos__more a{font-weight:600}
.mapphotos__grid.is-swapped{animation:mapphotos-in .4s ease}
@keyframes mapphotos-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.mapphotos__grid.is-swapped{animation:none} .mapphotos__grid .mapphoto img{transition:none}}
@media print{.mapphotos__grid .mapphoto img{height:6cm}}
/* schedule row buttons */
.rowlink{
font:inherit; font-weight:700; color:var(--ink); background:none; border:0; padding:0;
text-align:left; cursor:pointer; border-bottom:1px solid var(--line);
}
.rowlink:hover{color:var(--accent); border-bottom-color:var(--accent)}
.rowlink:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.rowlink.is-sel{color:var(--accent); border-bottom-color:var(--accent)}
@media print{
.mapctl,.maphint,.layers{display:none}
.maplayout{grid-template-columns:1fr}
#map{border:1px solid #000}
}
/* plan link card (site.html) */
.planlink{display:block; position:relative; border:1px solid var(--line); background:var(--paper-alt); text-decoration:none; margin:2.5rem 0 1rem; transition:border-color .2s}
.planlink:hover{border-color:var(--accent)}
.planlink img{display:block; width:100%; height:auto}
.planlink__cta{
display:block; padding:.9rem 1.25rem; background:var(--green-deep); color:var(--accent-light);
font-size:.9rem; font-weight:700; letter-spacing:.02em;
}
.planlink:hover .planlink__cta{background:var(--green-mid)}
/* highway on the plan */
#map .line--hwycase{stroke:#3A3530; stroke-width:7}
#map .line--hwycore{stroke:#FBFAF8; stroke-width:3.2}
#map .lineg--hwy:hover .line--hwycase{stroke-width:8.5}
#map .lineg--hwy:hover .line--hwycore{stroke-width:4.4}
#map .lineg--hwy.is-sel .line--hwycase{stroke:var(--accent); stroke-width:9.5}
#map .lineg--hwy.is-sel .line--hwycore{stroke:#EAF6F2; stroke-width:4.6}
#map .lineg--hwy:focus-visible .line--hwycase{stroke:var(--focus); stroke-width:9.5}
#map .lineg--hwy:focus-visible .line--hwycore{stroke:#EAF6F2; stroke-width:4.6}
.sw--road{border-top:4px solid #57514A; position:relative}
.sw--road::after{content:""; position:absolute; left:0; right:0; top:-2.5px; border-top:1.5px solid #F2EFE7}
/* address line with map link */
/* the jump card in the plan page's hero: the plan is below the fold, this is the shortest way to it */
.page-hero__grid{display:grid; gap:2rem}
@media(min-width:900px){ .page-hero__grid{grid-template-columns:minmax(0,1.25fr) minmax(17rem,.75fr); gap:clamp(2rem,5vw,4.5rem); align-items:center} }
.hero-jump{
display:block; text-decoration:none; color:var(--on-dark); max-width:24rem; justify-self:end;
background:rgba(251,250,248,.08); border:1px solid rgba(232,239,235,.28); border-top:3px solid var(--accent-light);
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:border-color .2s, background-color .2s, transform .2s;
}
.hero-jump:hover{background:rgba(251,250,248,.13); border-color:var(--accent-light); transform:translateY(-2px)}
.hero-jump:focus-visible{outline:3px solid var(--accent-light); outline-offset:3px}
.hero-jump img{display:block; width:100%; height:9.5rem; object-fit:cover; object-position:50% 45%; background:#F4F2EC; border-bottom:1px solid rgba(232,239,235,.2)}
.hero-jump__body{display:block; padding:1.1rem 1.2rem 1.25rem}
.hero-jump__k{display:block; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--accent-light); margin-bottom:.75rem}
.hero-jump .btn{width:100%; font-size:1.05rem; padding:.9rem 1.2rem}
.hero-jump:hover .btn{background:#8FE6D3; border-color:#8FE6D3}
.hero-jump:hover .btn__arrow{transform:translateY(4px)}
.hero-jump__s{display:block; margin-top:.85rem; font-size:.8125rem; line-height:1.5; color:var(--on-dark-soft)}
@media(max-width:899px){ .hero-jump{max-width:none; justify-self:stretch} .hero-jump img{height:7rem} }
@media(prefers-reduced-motion:reduce){ .hero-jump, .hero-jump .btn__arrow{transition:none} .hero-jump:hover{transform:none} }
@media print{ .hero-jump{display:none} }
.addressline{margin:1.5rem 0 0; font-size:.95rem; line-height:1.8; color:var(--on-dark)}
.addressline strong{color:#fff}
.maplink{
display:inline-block; color:var(--accent-light); text-decoration:none;
border-bottom:1px solid rgba(116,216,194,.5); font-weight:600; white-space:nowrap;
}
.maplink:hover{border-bottom-color:var(--accent-light)}
.addressline--light{color:var(--ink-soft)}
.addressline--light strong{color:var(--ink)}
.addressline--light .maplink{color:var(--accent); border-bottom-color:rgba(14,107,92,.4)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* highway direction labels and the site pin */
#map .hwylbl{
font-family:var(--font-sans); font-size:calc(11px * var(--k, 1)); font-weight:700;
letter-spacing:calc(.6px * var(--k, 1)); fill:#3F3A34; text-anchor:middle; pointer-events:none;
paint-order:stroke; stroke:#F4F2EC; stroke-width:calc(3.5px * var(--k, 1)); stroke-linejoin:round;
}
#map #lyr-hwy.is-off ~ .hwylabels{display:none}
#map .pin{cursor:pointer}
#map .pin-halo{fill:#0E6B5C; opacity:.14}
#map .pin-mark{fill:#0E6B5C; stroke:#FBFAF8; stroke-width:1.6}
#map .pin-dot{fill:#FBFAF8}
#map .pin:hover .pin-halo{opacity:.26}
#map .pin.is-sel .pin-mark{fill:#0A5548; stroke-width:2.4}
#map .pin.is-sel .pin-halo{opacity:.34}
#map .pin:focus-visible{outline:none}
#map .pin:focus-visible .pin-mark{stroke:var(--focus); stroke-width:3}
/* secondary link out to the interactive plan, under a static figure */
.btn-row--map{margin-top:1rem}
.btn--sm{padding:.6rem 1.1rem; font-size:.875rem}
figure .btn-row--map{margin-bottom:.5rem}
@media print{ .btn-row--map{display:none} }
/* ============================================================
BURGER MENU (shown below 1120px, where .nav is hidden)
============================================================ */
.burger{
display:inline-flex; align-items:center; gap:.6rem; margin-left:auto;
background:none; border:1px solid var(--line); border-radius:2px;
padding:.6rem .85rem; font:inherit; font-size:.875rem; font-weight:600;
color:var(--ink); cursor:pointer; min-height:2.75rem;
}
.burger:hover{border-color:var(--accent); color:var(--accent)}
.burger:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.burger__box{position:relative; width:1.15rem; height:.75rem; display:block}
.burger__bar, .burger__bar::before, .burger__bar::after{
position:absolute; left:0; width:100%; height:2px; background:currentColor;
border-radius:2px; transition:transform .22s ease, opacity .18s ease;
}
.burger__bar{top:calc(50% - 1px)}
.burger__bar::before{content:""; top:-.34rem}
.burger__bar::after{content:""; top:.34rem}
.burger[aria-expanded="true"] .burger__bar{background:transparent}
.burger[aria-expanded="true"] .burger__bar::before{transform:translateY(.34rem) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bar::after{transform:translateY(-.34rem) rotate(-45deg)}
.menu{border-top:1px solid var(--line); background:var(--paper)}
.menu[hidden]{display:none}
.menu__inner{
max-width:var(--maxw); margin-inline:auto; padding:.6rem var(--gutter) 1.4rem;
display:flex; flex-direction:column;
}
.menu a{
padding:.95rem .25rem; color:var(--ink); text-decoration:none; font-size:1.02rem; font-weight:600;
border-bottom:1px solid var(--line);
}
.menu a:hover{color:var(--accent)}
.menu a[aria-current="page"]{color:var(--accent)}
.menu a[aria-current="page"]::after{content:" •"; color:var(--accent)}
.menu .menu__cta{margin-top:1.1rem; border-bottom:0; color:#fff; text-align:center}
.menu .menu__cta:hover{color:#fff}
@media(min-width:1120px){ .burger,.menu{display:none !important} }
@media(max-width:1119px){ .hide-sm{display:none} }
@media(prefers-reduced-motion:reduce){ .burger__bar,.burger__bar::before,.burger__bar::after{transition:none} }
@media print{ .burger,.menu{display:none !important} }
@media print{ .crumbs,.jump,.cta-band,.site-header{display:none} }
/* ============================================================
LEAD CAPTURE
The dialog injected by lead-capture.js on every page. It
borrows the form-card, field and button styles above, so
changes to those carry through here.
============================================================ */
.lead[hidden]{display:none}
.lead{
position:fixed; inset:0; z-index:200;
display:flex; align-items:center; justify-content:center;
padding:clamp(.75rem,4vw,2rem);
opacity:0; transition:opacity .22s ease;
}
.lead.is-in{opacity:1}
.lead__backdrop{position:absolute; inset:0; background:rgba(18,49,43,.62); backdrop-filter:blur(3px)}
.lead__panel{
position:relative; width:min(46rem,100%);
max-height:calc(100vh - clamp(1.5rem,8vw,4rem));
overflow-y:auto; -webkit-overflow-scrolling:touch;
background:var(--paper); color:var(--ink);
border:1px solid var(--line); border-top:3px solid var(--accent);
box-shadow:0 24px 60px rgba(18,49,43,.35);
padding:clamp(1.5rem,4vw,2.75rem);
transform:translateY(12px); transition:transform .22s ease;
}
.lead.is-in .lead__panel{transform:none}
.lead__close{
position:absolute; top:.4rem; right:.4rem;
width:2.75rem; height:2.75rem; display:grid; place-items:center;
background:transparent; border:0; cursor:pointer;
font-size:1.75rem; line-height:1; color:var(--ink-soft);
}
.lead__close:hover{color:var(--ink)}
.lead__body h2{font-size:clamp(1.5rem,1.15rem + 1.4vw,2.1rem); margin-bottom:.5rem; padding-right:2.5rem}
.lead__lede{font-size:clamp(.9375rem,.9rem + .2vw,1.05rem); color:var(--ink-soft); max-width:52ch}
.lead__form{margin-top:1.5rem}
.lead__form .form-grid{gap:1rem}
.lead__actions{display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-top:1.5rem}
.lead__done{text-align:left}
/* ---- the gate: steps, progress, inline errors, recovery ----
Nothing here rests on colour alone: an error has an icon, the word
"Problem" and a thicker border; a finished stage has a tick; the current
step is bold and filled as well as coloured. */
.lead__steps{list-style:none; display:flex; gap:.4rem; margin:0 0 1.4rem; padding:0 0 1.1rem; border-bottom:1px solid var(--line); font-size:.78rem; font-weight:600; letter-spacing:.04em; color:var(--ink-soft)}
.lead__steps li{display:flex; align-items:center; gap:.45rem; margin:0; flex:1; min-width:0}
.lead__steps li + li::before{content:""; flex:1; height:1px; min-width:.6rem; background:var(--line); margin-right:.2rem}
.lead__stepn{flex:none; width:1.55rem; height:1.55rem; display:grid; place-items:center; border:1.5px solid #B9B5AC; border-radius:50%; font-size:.75rem; background:var(--paper)}
.lead__steps li.is-current{color:var(--green-deep); font-weight:700}
.lead__steps li.is-current .lead__stepn{background:var(--green-deep); border-color:var(--green-deep); color:#fff}
.lead__steps li.is-done{color:var(--accent)}
.lead__steps li.is-done .lead__stepn{background:var(--accent); border-color:var(--accent); color:transparent; position:relative}
.lead__steps li.is-done .lead__stepn::after{content:""; position:absolute; left:.5rem; top:.27rem; width:.32rem; height:.62rem; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(42deg)}
/* on a phone only the current step shows its name. The others are hidden from
sight but not from a screen reader, which still needs to name each step. */
@media(max-width:420px){
.lead__steps li:not(.is-current) span:last-child{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
}
.lead__req{margin:0 0 .9rem; font-size:.8125rem; color:var(--ink-soft)}
.lead__req .req{color:var(--accent); font-weight:700}
.field__hint{margin:.35rem 0 0; font-size:.78rem; line-height:1.45; color:var(--ink-soft)}
.field__err{display:flex; gap:.4rem; align-items:flex-start; margin:.4rem 0 0; font-size:.8125rem; font-weight:600; line-height:1.45; color:#8C2F1F}
.field__err[hidden]{display:none}
.ficon{flex:none; margin-top:.1em}
.field.has-error input, .field.has-error select{border-color:#8C2F1F; border-width:2px; padding:calc(.75rem - 1px) calc(.85rem - 1px); background:#FDF6F4}
.field.has-error input:focus{outline-color:rgba(140,47,31,.35)}
.field__suggest{margin:.9rem 0 0; padding:.65rem .85rem; border-left:3px solid #7A5010; background:#FBEBD2; font-size:.875rem; color:#4A2F06}
.field__suggest[hidden]{display:none}
.field__suggest .linkbtn{font-weight:700; color:#4A2F06}
/* the two live regions take no room until they have something to say */
.form-status:empty, .form-alert:empty{display:none}
.lead .form-status{color:var(--green-deep); font-weight:600}
.form-alert{margin:1.1rem 0 0; padding:.9rem 1.1rem; border:1px solid #8C2F1F; border-left-width:4px; background:#FDF6F4; color:#6E2014; font-size:.9375rem}
.form-alert p{display:flex; gap:.5rem; align-items:flex-start; margin:0; max-width:none}
.form-alert .btn{margin-top:.8rem; border-color:#6E2014; color:#6E2014}
.form-alert .btn:hover{background:#6E2014; color:#fff}
.form-alert--note{border-color:#7A5010; background:#FBEBD2; color:#4A2F06}
.form-alert[hidden]{display:none}
/* staged progress: a bar that moves as each stage finishes, the stages by
name, and a line of reassurance if it is taking a while */
.leadprog{margin:1.25rem 0 0; padding:1rem 1.1rem; border:1px solid var(--line); background:var(--paper-alt)}
.leadprog[hidden]{display:none}
.leadprog__bar{height:.4rem; background:#DCD9D2; border-radius:999px; overflow:hidden}
.leadprog__bar span{display:block; height:100%; width:0; background:var(--accent); border-radius:999px; transition:width .5s ease}
.leadprog__stages{list-style:none; display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; margin:.85rem 0 0; padding:0; font-size:.8125rem; color:var(--ink-soft)}
.leadprog__stages li{display:flex; align-items:center; gap:.45rem; margin:0}
.leadprog__dot{flex:none; width:1rem; height:1rem; border:1.5px solid #B9B5AC; border-radius:50%; position:relative; background:var(--paper)}
.leadprog__stages li.is-done{color:var(--accent); font-weight:600}
.leadprog__stages li.is-done .leadprog__dot{background:var(--accent); border-color:var(--accent)}
.leadprog__stages li.is-done .leadprog__dot::after{content:""; position:absolute; left:.3rem; top:.1rem; width:.22rem; height:.45rem; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(42deg)}
.leadprog__stages li.is-active{color:var(--green-deep); font-weight:700}
.leadprog__stages li.is-active .leadprog__dot{border-color:var(--accent); border-top-color:transparent; animation:leadspin .8s linear infinite}
.leadprog__stages li.is-failed{color:#8C2F1F; font-weight:700}
.leadprog__stages li.is-failed .leadprog__dot{border-color:#8C2F1F}
.leadprog__stages li.is-failed .leadprog__dot::after{content:"!"; position:absolute; inset:0; display:grid; place-items:center; font-size:.7rem; font-weight:700; color:#8C2F1F}
.leadprog__note{margin:.75rem 0 0; font-size:.8125rem; color:var(--ink-soft); max-width:none}
.leadprog__note:empty{display:none}
@keyframes leadspin{to{transform:rotate(360deg)}}
/* a busy button says so: a spinner beside the label, and it cannot be pressed twice */
.btn__spin{display:none; width:1rem; height:1rem; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:leadspin .8s linear infinite}
.btn.is-busy .btn__spin{display:inline-block}
.btn.is-busy, .btn:disabled{opacity:.75; cursor:progress}
.lead .btn:disabled:not(.is-busy){cursor:not-allowed; opacity:.55}
.lead__rescue{margin:1.25rem 0 0; padding:1rem 1.1rem; border:1px solid #C4DDCE; border-left:4px solid var(--accent); background:#E9F4EE}
.lead__rescue[hidden]{display:none}
.lead__rescue strong{display:block; color:var(--green-deep)}
.lead__rescue p{margin:.3rem 0 .8rem; font-size:.875rem; color:var(--ink-soft); max-width:none}
.lead__done h2{display:flex; align-items:center; gap:.6rem}
.lead__done h2 .ficon{width:1.6rem; height:1.6rem; padding:.25rem; border-radius:50%; background:var(--accent); color:#fff; margin:0}
.lead h2:focus{outline:none}
.lead h2:focus-visible{outline:3px solid var(--focus); outline-offset:4px}
/* a text button is still a target: WCAG 2.2 asks for 24 by 24 pixels at least */
.lead .linkbtn{min-height:1.75rem; padding:.2rem .1rem}
@media(prefers-reduced-motion:reduce){
.leadprog__bar span{transition:none}
.leadprog__stages li.is-active .leadprog__dot, .btn__spin{animation:none; border-top-color:currentColor; border-style:dotted}
}
/* stop the page behind from scrolling while the dialog is up */
html.lead-open,html.lead-open body{overflow:hidden}
/* THE GATE. While there is no valid pass the page content is hidden
outright, not just covered, so nothing is readable behind the dialog.
The class is set by the tiny script in each page's before first
paint, and cleared by lead-capture.js once a pass exists. */
html.gate-locked body > *:not(.lead){visibility:hidden}
html.gate-locked,html.gate-locked body{overflow:hidden}
.lead--gate .lead__backdrop{background:rgba(18,49,43,.92)}
/* The DELAYED gate (the home page). The content behind is not hidden,
because the reader has just been looking at it, so the backdrop does
the covering: darker and more blurred than the plain dialog, and the
dialog fades up a little more slowly. */
.lead--delayed{transition-duration:.45s}
.lead--delayed .lead__panel{transition-duration:.45s}
.lead--delayed .lead__backdrop{background:rgba(18,49,43,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.lead__codefield{max-width:14rem; margin-top:1.25rem}
.lead__codefield input{
font-family:var(--font-serif); font-size:1.75rem; letter-spacing:.3em;
text-align:center; font-variant-numeric:tabular-nums;
}
.lead__actions .linkbtn{margin-left:auto}
@media(max-width:520px){.lead__actions .linkbtn{margin-left:0}}
/* a laptop screen is often only 700 to 800 pixels tall, so tighten
the dialog rather than make it scroll inside itself */
@media(max-height:820px){
.lead__panel{padding-block:1.5rem}
.lead__form{margin-top:1.1rem}
.lead__form .form-grid{gap:.85rem}
.lead__actions{margin-top:1.1rem}
.lead__body h2{margin-bottom:.35rem}
.lead__form .form-note{margin-top:1rem}
}
@media(max-width:520px){
.lead{align-items:flex-end; padding:0}
.lead__panel{width:100%; max-height:92vh; border-bottom:0; transform:translateY(28px)}
.lead__actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
.lead,.lead__panel{transition:none}
.lead__panel{transform:none}
}
@media print{ .lead{display:none !important} }
/* ---------- The infrastructure convergence (home page, v2) ----------
Ten ingredients on a ring around the holding. Nodes are links; the
node colours follow the What exists / could / must be proven key. */
.cv__fig{margin:clamp(2rem,4vw,3rem) 0 0}
.cv{width:100%; height:auto; display:block; font-family:var(--font-sans)}
.cv__spokes line{stroke:#B9B5AC; stroke-width:1.4}
.cv__hub{fill:var(--paper-alt); stroke:var(--green-deep); stroke-width:2}
.cv__k{font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; fill:var(--ink-soft)}
.cv__big{font-family:var(--font-serif); font-size:30px; font-weight:600; fill:var(--green-deep)}
.cv__s{font-size:10.5px; fill:var(--ink-soft); letter-spacing:.01em}
.cv__t{font-family:var(--font-serif); font-size:14px; font-weight:600; fill:var(--green-deep)}
.cv__node rect{transition:transform .2s ease, filter .2s ease; transform-box:fill-box; transform-origin:center}
.cv__node:hover rect,.cv__node:focus-visible rect{transform:scale(1.04); filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}
.cv__node,.cv__node:hover{text-decoration:none}
.cv__node:focus-visible{outline:none}
.cv__node--exists rect{fill:var(--green-deep)}
.cv__node--exists .cv__t{fill:#fff}
.cv__node--exists .cv__s{fill:var(--on-dark-soft)}
.cv__node--could rect{fill:var(--accent-light)}
.cv__node--could .cv__s{fill:var(--green-mid)}
.cv__node--proven rect{fill:var(--paper); stroke:#7A5010; stroke-width:2; stroke-dasharray:5 4}
.cv__node--proven .cv__t,.cv__node--proven .cv__s{fill:#7A5010}
.cv__link{fill:none; stroke:var(--accent); stroke-width:3}
.cv__arrhead{fill:var(--accent)}
.cv__label rect{fill:#E2F0E7; stroke:var(--accent); stroke-width:1}
.cv__lt{font-size:11px; font-weight:700; fill:var(--accent)}
.cv__ls{font-size:10.5px; fill:var(--accent)}
.cv__legend{display:flex; flex-wrap:wrap; gap:.6rem 2rem; margin:.9rem 0 0; font-size:.85rem; color:var(--ink-soft)}
.cv__legend span::before{content:""; display:inline-block; width:.8rem; height:.8rem; border-radius:50%; margin-right:.45rem; vertical-align:-1px; box-sizing:border-box}
.cv__l1::before{background:var(--green-deep)}
.cv__l2::before{background:var(--accent-light); border:1px solid var(--accent)}
.cv__l3::before{background:#fff; border:2px dashed #7A5010}
.cv__l4::before{background:var(--accent); border-radius:0; height:3px; width:1.4rem; vertical-align:3px}
@media(max-width:640px){
/* the ring is unreadable this small: stack the nodes as a list instead */
.cv__fig{display:none}
}
/* three columns: what exists, could be developed, must be proven */
.three{display:grid; gap:1.5rem; margin:clamp(2rem,4vw,3rem) 0 0}
@media(min-width:800px){.three{grid-template-columns:repeat(3,1fr)}}
.three__col{background:#fff; border:1px solid var(--line); border-top:4px solid var(--green-deep); border-radius:6px; padding:1.4rem 1.4rem 1.6rem}
.three__col--could{border-top-color:var(--accent-light)}
.three__col--proven{border-top-color:#7A5010}
.three__k{display:block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--accent)}
.three__col--proven .three__k{color:#7A5010}
.three__col .ticks--bold li{font-size:.9rem; padding-block:.34rem}
.three__col--proven .ticks--bold li::before{background:#7A5010}
.three__col--could .ticks--bold li::before{background:var(--accent-light)}
.three__col--could .ticks--bold li::after{border-color:var(--green-deep)}
.three__k--light{color:var(--accent-light)}
.cvg .prop{margin-top:clamp(2.5rem,5vw,4rem)}
.section--dark .ticks--2{margin-top:1rem}
.section--dark .ticks li{color:var(--on-dark)}
/* ten reasons: theme headings between the card rows */
.theme{display:flex; align-items:center; gap:1rem; margin:clamp(2rem,4vw,3rem) 0 1.25rem; font-family:var(--font-sans); font-size:.8rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--accent)}
.theme::after{content:""; flex:1; height:1px; background:var(--line)}
.theme + .grid{margin-top:0}
/* the energy architecture, compact */
.arch{display:grid; gap:1.25rem; margin:clamp(2rem,4vw,3rem) 0 0; align-items:center}
@media(min-width:860px){.arch{grid-template-columns:1.1fr 4rem 1fr}}
.arch__in{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.arch__in li,.arch__out{background:#fff; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:4px; padding:.7rem 1rem}
.arch__in li b,.arch__out b{display:block; font-family:var(--font-serif); font-size:1.05rem; color:var(--green-deep); font-weight:600}
.arch__in li span,.arch__out span{display:block; font-size:.82rem; color:var(--ink-soft); margin-top:.15rem}
.arch__out{border-left-color:var(--green-deep); background:var(--green-deep); border-color:var(--green-deep); padding:1.4rem 1.3rem}
.arch__out b{color:#fff; font-size:1.3rem}
.arch__out span{color:var(--on-dark-soft)}
.arch__join{position:relative; min-height:2.5rem}
.arch__join::before{content:""; position:absolute; inset:0; margin:auto; width:2px; height:100%; background:var(--line)}
@media(min-width:860px){
.arch__join::before{width:100%; height:2px}
.arch__join::after{content:""; position:absolute; right:-1px; top:50%; width:.7rem; height:.7rem; border-right:2px solid var(--accent); border-top:2px solid var(--accent); transform:translateY(-50%) rotate(45deg)}
}
.arch__note{font-size:.92rem; color:var(--ink-soft); max-width:70ch; margin:1.5rem 0 0}
/* frequently asked questions */
.faq{margin:clamp(2rem,4vw,2.5rem) 0 0; border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1rem 0; font-family:var(--font-serif); font-size:1.12rem; font-weight:600; color:var(--green-deep)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+"; flex:none; width:1.6rem; height:1.6rem; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font-family:var(--font-sans); font-size:1.1rem; font-weight:400; color:var(--accent); transition:transform .2s ease}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item summary:hover{color:var(--accent)}
.faq__item summary:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:3px}
.faq__a{padding:0 0 1.25rem; max-width:72ch}
.faq__a p{margin:0 0 .8rem; font-size:.95rem}
.faq__a p:last-child{margin-bottom:0}
.faq__more{margin:1.5rem 0 0; font-size:.95rem}
.faq__item:target summary{color:var(--accent)}
/* the feasibility band carries the list of what a study covers */
.cta-band .eyebrow{color:var(--accent-light)}
.cta-band__list{margin:0 0 2rem; max-width:64ch}
.cta-band__list li{color:var(--on-dark)}
.cta-band__list li::before{border-color:var(--accent-light)}
/* ---------- community and FAQ pages (v2) ---------- */
.page-hero--community{--hero-img:url(images/visit-highway-cooma-1000.jpg); --hero-pos:50% 55%}
.page-hero--faq{--hero-img:url(images/visit-132kv-highway-1000.jpg); --hero-pos:50% 50%}
.three__note{font-size:.88rem; color:var(--ink-soft); margin:1.25rem 0 0}
.faq__head{margin-bottom:.5rem}
.faq__head .lede{margin-bottom:0}
.faq__tools{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.5rem 0 0}
.faq__item summary h3{font:inherit; margin:0; color:inherit}
.faq__meta{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.25rem; margin:1rem 0 0!important; font-size:.88rem}
.faq__meta a{font-weight:600}
.faq__meta .toc__copy{margin:0}
.faq__cat .faq{margin-top:1.5rem}
.faq__item.is-target{scroll-margin-top:7rem}
@media(prefers-reduced-motion:reduce){.faq__item summary::after{transition:none}}
/* the energy page flow with five sources (v2) */
@media(min-width:760px) and (max-width:1099px){.flow__sources--5{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.flow__sources--5{grid-template-columns:repeat(5,1fr)}}
/* ---------- the map's views as a dark control bar (v2) ----------
the chips keep their class and data-view so map.js is untouched; the
search suggestions reuse .viewnav__chip on a light background, so the
dark treatment is scoped to the bar */
.viewnav--bar .viewnav__bar{background:var(--green-deep); border-radius:6px; padding:1rem 1.25rem 1.1rem; color:var(--on-dark)}
.viewnav__head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .9rem; margin:0 0 .8rem; font-size:.92rem; color:var(--on-dark-soft)}
.viewnav__head strong{color:#fff; font-weight:600}
.viewnav__k{font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--accent-light)}
.viewnav__groups{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.2rem}
.viewnav__grp{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--on-dark-soft); margin-right:-.4rem}
.viewnav__sep{width:1px; height:1.6rem; background:rgba(255,255,255,.22)}
.viewnav--bar .viewnav__chip{border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.06); color:#fff}
.viewnav--bar .viewnav__chip:hover{border-color:rgba(255,255,255,.65); background:rgba(255,255,255,.14); color:#fff; box-shadow:none}
.viewnav--bar .viewnav__chip--zoom{border-style:dashed; color:var(--accent-light)}
.viewnav--bar .viewnav__chip[aria-current],.viewnav--bar .viewnav__chip[aria-pressed="true"]{background:var(--accent-light); border-color:var(--accent-light); border-style:solid; color:var(--green-deep)}
.viewnav--bar .viewnav__dot{box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.viewnav--bar .viewnav__chip[aria-current] .viewnav__dot{box-shadow:0 0 0 2px var(--green-deep)}
.viewnav--bar .viewnav__chip:focus-visible{outline:3px solid var(--accent-light); outline-offset:2px}
@media(max-width:640px){
.viewnav--bar .viewnav__bar{border-radius:0; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter)}
.viewnav__groups{display:block}
.viewnav__sep{display:none}
.viewnav__grp{display:block; margin:.6rem 0 .3rem}
.viewnav--bar ul{margin-inline:calc(var(--gutter) * -1); padding:.15rem var(--gutter) .5rem}
}
.layers__how{margin:0 0 .8rem; font-size:.84rem; line-height:1.45; color:var(--ink-soft)}
.layers__how strong{color:var(--ink); font-weight:600}
/* the FAQ's section chips, the map's bar reused; sections hide and show by chip */
.faqnav{margin:clamp(1.5rem,3vw,2.25rem) 0 0}
.faq__cat[hidden]{display:none}
.faqnav .viewnav__chip[aria-current]{font-weight:700}
.faq__cat,#faqnav{scroll-margin-top:7.5rem}
/* ----------------------------------------------------------
FAQ side navigation (wide screens). The section chips become a
sticky list down the left, with a count for each section and,
once a section is chosen, a list of its questions. Below 1000px
the chips stay a bar above the questions, as before. Without
JavaScript the sidebar is absent and the page is one column.
---------------------------------------------------------- */
.faqnav__n{flex:none; min-width:1.6rem; padding:.05rem .45rem; border-radius:999px; background:rgba(255,255,255,.16); font-size:.72rem; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; margin-left:.55rem}
.faqnav .viewnav__chip[aria-current] .faqnav__n{background:rgba(18,49,43,.16)}
/* position:relative: the visually hidden counts inside the chips would otherwise escape the scrolling row and widen the page on a phone */
.faqnav ul{position:relative}
.faqside__qs{display:none}
@media(min-width:1000px){
.js .faqlayout{display:grid; grid-template-columns:17.5rem minmax(0,1fr); gap:0 clamp(2rem,4vw,3.5rem); align-items:start; padding-top:clamp(1.5rem,3vw,2.5rem)}
.js .faqside{position:sticky; top:calc(var(--hdr-h, 4.25rem) + 1rem); max-height:calc(100vh - var(--hdr-h, 4.25rem) - 2rem); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin}
.js .faqside .faqnav{margin:0}
.js .faqnav .viewnav__bar{padding:1rem .9rem 1.05rem}
.js .faqnav .viewnav__head{display:block; margin-bottom:.5rem}
.js .faqnav .viewnav__head strong, .js .faqnav .viewnav__head span:not(.viewnav__k){display:none}
.js .faqnav .viewnav__k{display:block; margin-bottom:.25rem}
.js .faqnav ul{flex-direction:column; flex-wrap:nowrap; gap:.2rem; overflow:visible; margin:0; padding:0}
.js .faqnav li{width:100%}
.js .faqnav .viewnav__chip{display:flex; width:100%; justify-content:space-between; align-items:center; white-space:normal; text-align:left; line-height:1.3; padding:.5rem .7rem; border-radius:6px; border-color:transparent; background:transparent}
.js .faqnav .viewnav__chip:hover{background:rgba(255,255,255,.12); border-color:transparent}
.js .faqnav .viewnav__chip[aria-current],.js .faqnav .viewnav__chip[aria-current]:hover{background:var(--accent-light); color:var(--green-deep); border-color:transparent}
.js .faqside__qs{display:block; margin-top:1rem; padding:1rem; border:1px solid var(--line); border-radius:6px; background:var(--paper)}
.js .faqside__qs[hidden]{display:none}
.faqside__k{margin:0; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--accent)}
.faqside__qs ul{list-style:none; margin:.6rem 0 0; padding:0}
.faqside__qs li{margin:0}
.faqside__qs a{display:block; padding:.4rem .55rem; margin-left:-.55rem; font-size:.84rem; line-height:1.4; color:var(--ink-soft); text-decoration:none; border-left:3px solid transparent; border-radius:0 3px 3px 0}
.faqside__qs a:hover{color:var(--accent); background:var(--paper-alt)}
.faqside__qs a[aria-current="true"]{color:var(--green-deep); font-weight:600; border-left-color:var(--accent); background:var(--paper-alt)}
.faqside__qs a:focus-visible{outline:3px solid var(--focus); outline-offset:1px}
.js .secnav--faq{display:none}
.faqmain .faq__cat{background:none; padding-block:0 clamp(2.5rem,5vw,3.5rem)}
.faqmain .faq__cat > .wrap{padding-inline:0; max-width:none}
.faqmain > .faq__cat:not([hidden]) ~ .faq__cat:not([hidden]){border-top:1px solid var(--line); padding-top:clamp(2rem,4vw,3rem)}
.faqmain .faq__cat .faq__head h2{margin-top:.35rem}
}
@media print{
.faqside{display:none}
.faq__cat[hidden]{display:block!important}
}