/* Reset, type and the page frame. */

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
ol,ul{ padding-inline-start:0; list-style-position:outside; }
/* Any display rule of ours would otherwise defeat the hidden attribute. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  font-family:var(--font);
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--ink);
  background:var(--blue);          /* the frame colour shows around the page */
  -webkit-font-smoothing:antialiased;
}

img,svg,video{ display:block; max-width:100%; height:auto; }
table{ border-collapse:collapse; width:100%; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
button,input,select,textarea{ font:inherit; color:inherit; }

/* A registered or trade mark rides small and high wherever it appears. */
sup{ font-size:.55em; vertical-align:super; line-height:0; }
h1 sup, h2 sup, h3 sup{ font-size:.42em; }
h1,h2,h3,h4{ font-weight:600; line-height:1.2; letter-spacing:-0.01em; overflow-wrap:break-word; }
h1{ font-size:var(--step-title); font-weight:500; letter-spacing:-0.02em; }
h2{ font-size:var(--step-4); font-weight:500; }
h3{ font-size:var(--step-2); }
p{ text-wrap:pretty; }

/* A box-shadow ring is discarded in Windows High Contrast, so keep a real
   outline underneath it. */
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; box-shadow:var(--focus); border-radius:2px; }
@media (forced-colors: active){ :focus-visible{ outline:3px solid Highlight; } }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--paper); color:var(--blue); padding:.75rem 1rem; font-weight:600;
}
.skip:focus{ left:var(--frame); }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* The document: a white page inside a blue frame, as the manual is printed. */
.page{
  background:var(--paper);
  margin:var(--frame);
  min-height:calc(100dvh - var(--frame) * 2);
}

/* The frame is drawn over the window rather than around the document, so all
   four edges are on screen the whole way down. Left as a margin on the page,
   the top edge scrolls away with the first screen and the bottom one is only
   ever seen at the very end of the document. The margin above still holds the
   content clear of it, so the two line up exactly.
   It sits above the masthead and takes no pointer events, so nothing under it
   becomes unclickable. */
body::after{
  content:"";
  position:fixed; inset:0; z-index:60;
  border:var(--frame) solid var(--blue);
  pointer-events:none;
}
@media print{ body::after{ display:none; } }

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

.section{ padding-block:var(--section-y); }
/* Every section closes with a blue hairline, as the manual closes every slide
   and as the footer already does. In grey it read as an incidental divider
   rather than as the frame the document is built from. */
.section + .section,
/* The hero is not a .section, so the first divider on the home page was the
   only one missing. */
.hero + .section{ border-top:1px solid var(--blue); }

/* Each section holds the viewport, so the page reads as spreads rather than one
   long ribbon.
   Only where a section can plausibly fill the height it is given. A portrait
   tablet is 834 by 1112: holding the viewport there leaves a section with three
   hundred pixels of content floating in a thousand, which is a void, not a
   spread. Above this width the screen is landscape enough for the content to
   meet the height. */
@media (min-height: 620px) and (min-width: 900px){
  /* Only where the page is a set of designed spreads. On a page of documents
     the sections hold different amounts, so forcing each to a full screen and
     centring what is in it gave air above the content of 50, 152, 50 and 243
     pixels down one page. The reader reads that as broken spacing, because it
     is. Those pages get their content height and one padding instead. */
  main.spreads .section{ min-height:calc(100dvh - var(--header-clear)); }
  /* Except the split, which is as tall as its photograph. Holding it to the
     viewport would force the picture into a box half as wide as it is tall,
     and half the firm would be cropped out of the side of it.
     Written as a bare .section.split this lost to main.spreads .section on
     specificity, and the opener on those pages came out 828px tall around a
     476px photograph: 176px of empty above it and 176 below. */
  main.spreads .section.split,
  .section.split{ min-height:0; }
  main.spreads .section:not(.split){ display:flex; flex-direction:column; justify-content:center; }
  .hero{ min-height:calc(100dvh - var(--header-clear)); display:flex; align-items:center; }
}

/* Phone and portrait tablet. Sections are as tall as they need to be, with one
   floor so a short one does not read as an offcut, and the hero holds the first
   screen because it is the first thing seen. */
@media (max-width: 899px), (max-height: 619px){
  /* On a phone a section is as tall as what is in it. Held to a screen each,
     the Company page carried 330px of white between its photograph and its
     history and 385px after the last line of its timeline, and the home page
     ran to sixteen screens of which four were padding. */
  main.spreads .section{ min-height:0; }
  .numbered.paired > li{ padding-block:.45rem; }
  main.spreads .section.split,
  .section.split{ min-height:0; }
  /* The split section is a grid of its own; it must not be turned into a column. */
  main.spreads .section:not(.split){ display:flex; flex-direction:column; justify-content:center; }
  .hero{ min-height:calc(100svh - var(--header-clear)); display:flex; align-items:center; }
}

/* ------------------------------------------------------- the phone's pages
   On a desktop a section is a spread and holds the window. On a phone five of
   the nine sections run to between 1.8 and 2.6 screens, so snapping to section
   tops alone gives a page, then two and a half screens of free scrolling, then
   another page. That is not a book.
   So on a phone the page is a finer unit than the section. Most of them are
   already in the markup: the pairs that sit side by side on a desktop, stacked
   here, are a page each. The rest are marked with a snap point partway down a
   run of equal things, which needs no new markup and so cannot disturb the
   desktop layout. */
@media (max-width: 899px){
  /* A pair that shares a section on a desktop becomes two pages here. Only on
     a spreads page: on a document page it left that one section with no
     padding at all while its neighbours carried 62, which is the uneven
     rhythm the reader sees on a phone. */
  main.spreads .cols-2 > *{
    display:flex; flex-direction:column; justify-content:center;
    /* Room inside the page, so the words never touch the top of the screen or
       the foot of it. Inside the height, not added to it. */
    padding-block:clamp(1.75rem, 4vh, 2.75rem);
  }
  /* Stacked, the two halves of a pair are separate pages and need to read as
     two things. Side by side on a desktop the rule between them does this. */
  main.spreads .cols-2 > * + *{ border-top:1px solid var(--rule); }
  /* A section that is only a pair needs no height of its own; its pages carry
     it. Its own padding and the gap between the pair would otherwise push each
     page past the screen it is meant to be. */
  main.spreads .section:has(> .wrap > .cols-2){ min-height:0; padding-block:0; }
  main.spreads .section:has(> .wrap > .cols-2) > .wrap{ padding-block:0; }
  /* and it must not be a snap point itself, or the reader gets a 62px page
     between the section top and the first of its pair. */
  html.snap main.spreads .section:has(> .wrap > .cols-2){ scroll-snap-align:none; }

  html.snap [data-page]{
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

}

/* Snapping is switched on by script, and only once every section is known to
   fit the screen. Proximity snapping fires unpredictably and feels like the
   page is arguing with you; mandatory snapping is only safe when nothing is
   taller than the viewport, otherwise it traps content out of reach. */
/* The header is sticky on every screen, so a jump to an anchor has to allow
   for it on every screen. Gated behind .snap, this only held on phones: on a
   desktop the year links on ASX Announcements put the section flush with the
   window top and the header covered its heading, so a jump to 2024 showed a
   column row and no year. */
html{ scroll-padding-top:var(--header-clear); }
html.snap{ scroll-snap-type:y mandatory; }
html.snap .hero,
html.snap .section{
  scroll-snap-align:start;
  /* A fast flick moves one spread, never three. */
  scroll-snap-stop:always;
}
html.snap .site-footer{ scroll-snap-align:start; }

/* Reduce Motion is not a reason to drop snapping. Snapping itself does not
   animate: the jump is instant unless scroll-behavior asks otherwise, and that
   is switched off below. Treating the two as the same thing turned the whole
   effect off for anyone with the iOS accessibility setting on, which is a lot
   of people. */
@media (prefers-reduced-motion: reduce){
  html.snap{ scroll-behavior:auto; }
}

/* Small caps label, used above every heading. */
.eyebrow{
  font-size:var(--step--2);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:500;
}

@media print{
  body{ background:#fff; }
  .page{ margin:0; }
  .site-header,.site-footer{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}