/* brand.ntwrk.com.au prototype. Uses only tokens from tokens.css. */
@font-face{font-family:'Manrope';font-weight:400;font-display:swap;src:url(../fonts/manrope-latin-400-normal.PaqtzbVb.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:500;font-display:swap;src:url(../fonts/manrope-latin-500-normal.BYYD-dBL.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:600;font-display:swap;src:url(../fonts/manrope-latin-600-normal.4f0koTD-.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url(../fonts/manrope-latin-700-normal.BZp_XxE4.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-400-normal.DMJ8VG8y.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-500-normal.DSY6xOcd.woff2) format('woff2')}
*{box-sizing:border-box}
html{scroll-padding-top:80px}
html,body{margin:0;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--font-sans);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
code,kbd{font-family:var(--font-mono);font-size:max(.875em,12px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xs);padding:1px 5px}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:4px}

.main{padding:48px 56px 96px;min-width:0}
.toc{position:sticky;top:60px;align-self:start;padding:48px 24px 0 0;font-size:14px}
.toc p{font:400 12px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.toc a{display:block;text-decoration:none;color:var(--ink-2);padding:4px 0 4px 12px;border-left:1px solid var(--line)}
.toc a:hover{color:var(--ink);border-left-color:var(--primary)}

/* ---------- page head ---------- */
.crumb{font:400 12px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ph h1{font-size:clamp(2.25rem,1.6rem + 2.4vw,3.5rem);font-weight:700;letter-spacing:-.035em;line-height:1.02;margin:14px 0 0;max-width:18ch}
.ph .lede{font-size:19px;line-height:1.55;color:var(--ink-2);margin-top:18px;max-width:62ch}
.ph .meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:22px;padding-bottom:28px;border-bottom:1px solid var(--line);font:400 13px var(--font-mono);color:var(--mute)}
.badge{display:inline-flex;align-items:center;gap:6px;font:500 12px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-full);border:1px solid}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-ok{color:var(--ink);background:var(--primary-tint);border-color:var(--primary-edge)}
.b-draft{color:var(--warning);background:var(--warning-bg);border-color:var(--warning-edge)}
.b-input{color:var(--info);background:var(--info-bg);border-color:var(--info-edge)}
.b-fix{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-edge)}
.b-draft,.b-input,.b-fix,.b-ok{color:var(--ink)}
.b-draft::before{background:var(--warning)}.b-input::before{background:var(--info)}.b-fix::before{background:var(--danger)}.b-ok::before{background:var(--primary)}

/* ---------- content ---------- */
.sec{padding-top:56px}
.sec>h2{font-size:clamp(1.625rem,1.3rem + 1.2vw,2.25rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;display:flex;gap:14px;align-items:baseline}
.sec>h2 .n{font:400 13px var(--font-mono);letter-spacing:.1em;color:var(--mute);flex:none;transform:translateY(-4px)}
.sec>p,.sec>.prose{margin-top:14px;max-width:68ch;color:var(--ink-2);font-size:17px}
.sec>.prose p+p{margin-top:12px}
.sec h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:32px 0 10px}
.rules{list-style:none;margin:18px 0 0;padding:0;counter-reset:r;border-top:1px solid var(--line);max-width:76ch}
.rules li{counter-increment:r;display:grid;grid-template-columns:44px 1fr;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.rules li::before{content:counter(r,decimal-leading-zero);font:400 13px var(--font-mono);color:var(--mute);padding-top:3px}
.rules li b{color:var(--ink);font-weight:600}
.note{margin-top:20px;padding:16px 18px;border-radius:0 var(--radius-md) var(--radius-md) 0;border-left:3px solid var(--info);background:var(--info-bg);color:var(--ink);font-size:15px;max-width:76ch}
.note.draft{border-left-color:var(--warning);background:var(--warning-bg)}
.note.fix{border-left-color:var(--danger);background:var(--danger-bg)}
.note b.k{display:block;font:500 12px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;color:var(--ink-2)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px 22px}
.card h3,.card h4{margin:0 0 6px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.card p{color:var(--ink-2);font-size:15px}
.card .k{display:block;font:400 12px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.card.link{text-decoration:none;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.card.link:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.card.link .go{display:block;margin-top:12px;font-weight:600;font-size:15px;color:var(--ink)}
.card.link .go::after{content:"\00a0→";color:inherit}
.k{font:400 12px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.k.g{color:var(--mute);font-weight:500}
table.t{width:100%;border-collapse:collapse;margin-top:18px;font-size:15px}
.t th{text-align:left;font:400 12px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding:10px 12px 10px 0;border-bottom:1px solid var(--ink-2)}
.t td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.t td:first-child{color:var(--ink);font-weight:600}
.t code{white-space:nowrap}
.tw{overflow-x:auto}

/* do / don't */
.dd{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.dd>div{border-radius:var(--radius-md);padding:18px 20px;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--primary)}
.dd>div.no{border-top-color:var(--danger)}
.dd .h{font:500 12px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);display:flex;gap:8px;align-items:center;margin-bottom:10px}
.dd .no .h{color:var(--danger)}
.dd .h::before{content:"✓";font-size:14px}.dd .no .h::before{content:"✕"}
.dd q{display:block;quotes:none;font-size:17px;line-height:1.45;color:var(--ink)}
.dd .why{margin-top:10px;font-size:14px;color:var(--ink-2)}
.dd .src{margin-top:8px;font:400 12px var(--font-mono);color:var(--mute)}

/* example frame */
.ex{margin-top:22px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.ex-bar{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--card)}
.ex-bar .k{font-size:12px}
.ex-body{padding:28px}
.ex-body.flush{padding:0}
.ex-cap{padding:10px 16px;border-top:1px solid var(--line);font:400 13px/1.5 var(--font-mono);color:var(--mute);background:var(--card)}

/* colour */
.sw{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--card)}
.sw .chip{height:88px;display:flex;align-items:flex-end;padding:10px 12px;font:500 12px var(--font-mono)}
.sw .inf{padding:12px 14px}
.sw .inf b{display:block;font-size:15px}
.sw .inf code{background:none;border:0;padding:0;font-size:13px;color:var(--ink-2)}
.sw .inf p{font-size:13px;color:var(--mute);margin-top:6px;line-height:1.45}
.ratio{font:500 12px var(--font-mono);padding:2px 6px;border-radius:4px;background:var(--card);color:var(--ink)}

/* type specimens */
.spec{border-top:1px solid var(--line);padding:18px 0;display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:baseline}
.spec .m{font:400 12px/1.6 var(--font-mono);color:var(--mute)}
.spec .m b{display:block;color:var(--ink);font:500 12px var(--font-mono);letter-spacing:.1em;text-transform:uppercase}

/* buttons / inputs (site components, verbatim from redesign) */
.btn{font:600 15px var(--font-sans);display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h-button);padding:0 18px;border-radius:var(--radius-button);border:1px solid transparent;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast)}
.btn:active{transform:translateY(var(--move-press))}
.btn-lg{height:var(--h-button-lg);padding:0 24px;font-size:16px;border-radius:var(--radius-button-lg)}
.btn-sm{height:var(--h-button-sm);padding:0 12px;font-size:14px}
.btn-primary{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--mute)}
.btn-secondary:hover{background:var(--card);border-color:var(--ink)}
.link-arrow{font:600 16px/1.4 var(--font-sans);color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-button);background:var(--card)}.link-arrow:hover{border-color:var(--mute)}
.link-arrow::after{content:"\00a0→";color:inherit;display:inline-block;text-decoration:none}
.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-size:15px;font-weight:600;line-height:1.4}
.field-help{font-size:14px;color:var(--ink-2)}
.field-error{font-size:14px;color:var(--danger)}
.input{font:400 16px var(--font-sans);background:var(--card);color:var(--ink);border:1px solid var(--mute);border-radius:var(--radius-input);padding:0 14px;height:var(--h-input);width:100%}
.input::placeholder{font:400 14px var(--font-mono);letter-spacing:.02em;color:var(--mute)}
.input.focus{border-color:var(--primary);box-shadow:var(--shadow-focus)}
.input.err{border-color:var(--danger)}
.subscribe-row{display:flex;gap:8px}
.subscribe-row .input{flex:1 1 auto}
@media (max-width:560px){.subscribe-row{flex-direction:column}.subscribe-row .input{flex:0 0 auto;height:44px;min-height:44px}}

/* site section patterns, scaled */
.mini{background:var(--bg);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line)}
.mini .sh .num{display:block;font:400 12px var(--font-mono);letter-spacing:.14em;color:var(--mute);margin-bottom:10px}
.mini .sh h2{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.06;max-width:22ch}

/* figures & charts */
.fig-cap{margin-top:12px;font:400 14px/1.5 var(--font-mono);color:var(--mute)}
.bars{display:flex;flex-direction:column;gap:14px}
.bar-row .lbl{font-size:15px;font-weight:600;margin-bottom:6px;display:flex;justify-content:space-between;gap:8px}
.bar-track{display:flex;align-items:center;gap:10px}
.bar{height:22px;border-radius:2px}
.bar-val{font:400 13px var(--font-mono);color:var(--ink-2);white-space:nowrap}
.stack{display:flex;height:26px;border-radius:2px;overflow:hidden}
.stack span{display:flex;align-items:center;justify-content:center;font:500 12px var(--font-mono);color:var(--bg)}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font:400 13px var(--font-mono);color:var(--ink-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.dots{display:grid;grid-template-columns:repeat(20,14px);gap:6px}
.dots i{width:14px;height:14px;border-radius:50%;background:var(--chart-c1)}
.dots i.h{background:transparent;border:1.5px solid var(--chart-c-hollow)}
.dots i.g{background:var(--chart-c2)}
.method{margin-top:18px;padding:16px 18px;background:var(--surface);border-radius:var(--radius-md);font-size:15px;color:var(--ink-2)}
.method b{color:var(--ink)}
.spec-tag{display:inline-block;font:500 12px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);border:1px dashed var(--mute);border-radius:4px;padding:2px 6px}

/* prev/next */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:72px;padding-top:28px;border-top:1px solid var(--line)}
.pn a{text-decoration:none;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card)}
.pn a:hover{border-color:var(--mute)}
.pn a span{display:block;font:400 12px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pn a b{display:block;margin-top:4px;font-size:17px}
.pn .nx{text-align:right;grid-column:2}
.foot{border-top:1px solid var(--line);background:var(--surface);padding:28px var(--gutter);font:400 13px var(--font-mono);color:var(--mute);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:1279px){.toc{display:none}.main{padding:44px 40px 88px}}
@media (max-width:899px){
  .main{padding:32px var(--gutter) 72px}
  .grid3,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .ph .lede{font-size:17px}
  .grid2,.grid3,.grid4,.dd{grid-template-columns:1fr}
  .spec{grid-template-columns:1fr;gap:6px}
  .ex-body{padding:18px}
  .sec>p,.sec>.prose{font-size:16px}
  .pn{grid-template-columns:1fr}.pn .nx{grid-column:1}
  .dots{grid-template-columns:repeat(10,14px)}
  .t{font-size:14px}
}
[data-theme=dark] .top .wm svg g[fill="#0F1A14"]{fill:var(--ink)}
[data-theme=dark] .top .wm svg g[fill="#2A7048"]{fill:var(--primary)}
.cf{display:inline;color:var(--ink-2)}
.cf .badge{font-size:12px;padding:1px 7px;vertical-align:1px;margin-right:2px}

/* responsive example internals */
.og{container-type:inline-size;width:100%;aspect-ratio:1200/630;background:#0E1411;position:relative;border-radius:6px;overflow:hidden}
.slide{container-type:inline-size}
.mh-burger{display:none}
@media (max-width:560px){
  .wh{grid-template-columns:1fr!important;gap:22px!important}
  .mh-nav{display:none!important}
  .mh-burger{display:inline-flex;margin-left:auto;width:32px;height:32px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:var(--card)}
  .mh-cta{display:none!important}
}
.nw{white-space:nowrap}

/* presentations: slide renders */
.slide-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px;margin-top:20px}
.slide-grid.one{grid-template-columns:1fr;max-width:760px}
.slide-fig{margin:0}
.slide-fig img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.slide-fig figcaption{margin-top:10px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.slide-fig figcaption b{display:block;color:var(--ink);font-weight:600}
.slide-fig figcaption code{font-size:12px;margin-left:6px;vertical-align:1px}
.slide-fig .lc{display:block}
@media (max-width:760px){.slide-grid{grid-template-columns:1fr}}
@media (max-width:760px){.t.wide{min-width:680px}}


/* ---------- navigation: left rail + mobile drawer (1.1.5-draft, 13 Oct 2026) ----------
   Pattern follows the Truo brand book (header + sticky grouped rail, sheet under 900px).
   Forest budget: the active-page marker is the rail's only Forest use. Labels ink/mute. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:60}.skip:focus{top:12px}
.top{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:16px;height:60px;padding:0 var(--gutter);min-width:0}
.top .wm{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;color:var(--ink)}
.top .wm svg{height:20px;width:auto;display:block;flex:none}
.top .wm .lab{font:400 12px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-left:12px;border-left:1px solid var(--line);white-space:nowrap}
.top .ver{white-space:nowrap;font:500 12px var(--font-mono);letter-spacing:.06em;color:var(--ink);background:var(--warning-bg);border:1px solid var(--warning-edge);padding:3px 8px;border-radius:var(--radius-full)}
.theme-btn{margin-left:auto}
.icon-btn{flex:none;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);cursor:pointer}
.icon-btn:hover{border-color:var(--mute)}
.theme-btn .i-sun{display:none}[data-theme=dark] .theme-btn .i-sun{display:block}[data-theme=dark] .theme-btn .i-moon{display:none}
.menu-btn,.side-head,.scrim{display:none}
.shell{display:grid;grid-template-columns:272px minmax(0,1fr) 220px;max-width:1440px;margin:0 auto}
.side{position:sticky;top:60px;align-self:start;height:calc(100vh - 60px);height:calc(100dvh - 60px);overflow-y:auto;overscroll-behavior:contain;border-right:1px solid var(--line);padding:20px 16px 40px var(--gutter);min-width:0}
.side-search{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;margin:0 0 20px -10px;border:1px solid var(--line);border-radius:var(--radius-input);background:var(--card);color:var(--mute)}
.side-search:focus-within{border-color:var(--ink-2);box-shadow:var(--shadow-focus)}
.side-search svg{flex:none}
.navq{flex:1 1 auto;min-width:0;border:0;background:transparent;color:var(--ink);font:400 14px var(--font-sans);height:100%;outline:none}
.navq::placeholder{color:var(--mute);opacity:1}
.navq::-webkit-search-cancel-button{display:none}
.side-search kbd{font-size:12px;color:var(--mute)}
.navq-empty{font-size:14px;color:var(--mute);margin:0 0 12px}
.grp+.grp{margin-top:20px}
.grp-h{font:400 12px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 6px}
.side ul{list-style:none;margin:0;padding:0}
.side a{display:flex;justify-content:space-between;align-items:center;gap:8px;text-decoration:none;font:500 15px/1.35 var(--font-sans);color:var(--ink-2);padding:7px 10px;margin-left:-10px;border-radius:6px;border-left:2px solid transparent;min-width:0}
.side a>span:first-child{min-width:0;overflow-wrap:anywhere}
.side a:hover{background:var(--surface);color:var(--ink)}
.side a[aria-current=page]{color:var(--ink);font-weight:700;background:var(--surface);border-left-color:var(--ink);border-radius:0 6px 6px 0}
.side a .st{flex:none;font:500 12px var(--font-mono);letter-spacing:.06em;color:var(--ink-2);background:var(--warning-bg);border:1px solid var(--warning-edge);border-radius:4px;padding:0 5px}
.toc{position:sticky;top:60px;align-self:start;padding:48px 24px 0 0;font-size:14px}
.toc p{font:400 12px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.toc a{display:block;text-decoration:none;color:var(--ink-2);padding:4px 0 4px 12px;border-left:1px solid var(--line)}
.toc a:hover{color:var(--ink);border-left-color:var(--ink-2)}
@media (max-width:1279px){.shell{grid-template-columns:256px minmax(0,1fr)}}
@media (max-width:899px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .top-in{gap:12px;height:56px}
  .menu-btn{display:inline-flex;width:44px;height:44px}
  .icon-btn{width:44px;height:44px}
  .side{display:none;position:fixed;top:0;left:0;bottom:0;z-index:50;width:min(360px,88vw);height:100%;border-right:1px solid var(--line);background:var(--bg);padding:0 20px 40px;box-shadow:var(--shadow-2)}
  .side.open{display:block}
  .side-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1;background:var(--bg);height:56px;margin:0 -20px 12px;padding:0 12px 0 20px;border-bottom:1px solid var(--line)}
  .side-title{font:400 12px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
  .side-search{margin-left:0}.side a{margin-left:0;padding:10px 12px;min-height:44px}
  .scrim{display:block;position:fixed;inset:0;z-index:45;background:color-mix(in oklab,var(--ink) 40%,transparent)}
  .scrim[hidden]{display:none}
  body.nav-open{overflow:hidden}
}
@media (max-width:560px){.top .wm .lab,.top .ver .d{display:none}.top .ver{font-size:12px}}
@media (max-width:359px){.top .ver{display:none}}
@media (prefers-reduced-motion:no-preference){.side.open{animation:navin .18s var(--ease-out)}@keyframes navin{from{transform:translateX(-12px);opacity:0}}}
/* narrow-screen containment: wide figures scroll inside their frame, never the page (13 Oct 2026) */
.main,.sec,.card,.ex,.ex-body,.grid2>*,.grid3>*,.grid4>*{min-width:0}
@media (max-width:420px){.card,.ex-body{overflow-x:auto}}
.sec div{min-width:0}
@media (max-width:420px){.sec>div{max-width:100%;overflow-x:auto}}