/* ==========================================================================
   MCCML layout and components. Depends on brand.css for all tokens.

   House style follows Monash Malaysia: Roboto Condensed 700 headings (often
   uppercase at section level), Roboto body copy, Monash Blue as the single
   accent, square corners, hairline #D2D2D2 rules instead of shadows.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute must win over the display values set further down. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Headings are Roboto Condensed 700, the Monash display convention. */
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--ink);
}
/* Condensed display sizes carry tighter leading; at 3rem+ 1.15 reads loose. */
h1, h2 { line-height: 1.04; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }
p  { margin: 0 0 1em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--monash-blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--monash-blue-hover); }
:focus-visible { outline: 3px solid var(--monash-blue); outline-offset: 2px; }

img { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

/* --- Layout primitives ---------------------------------------------------- */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 820px; }

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section--alt  { background: var(--surface-alt); }
.section--tint { background: var(--surface-grey); }
.section--deep { background: var(--dark); color: #fff; }
.section--deep h2, .section--deep h3 { color: #fff; }
/* :not(.btn) so that a button keeps its own foreground colour. Without it this
   rule outranks .btn--primary and drops white button text to pale blue. */
.section--deep a:not(.btn) { color: #8FC9EA; }
.section--deep p { color: var(--dark-ink); }
.section--deep .lede { color: #E0E0E0; }

.section + .section { border-top: 1px solid var(--rule-soft); }
.section--alt + .section, .section + .section--alt,
.section--tint + .section, .section + .section--tint,
.section--deep + .section, .section + .section--deep { border-top: 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--monash-blue); color: #fff; padding: .75rem 1.25rem; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

/* --- Typographic helpers --------------------------------------------------
   The uppercase condensed eyebrow is the most recognisable Monash section
   marker, so it carries the display face rather than the body face. */

.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--monash-blue);
  margin-bottom: .55rem;
}
.section--deep .eyebrow { color: #8FC9EA; }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 62ch; }
.muted { color: var(--ink-muted); }
.small { font-size: var(--step--1); }
.section-head { max-width: 72ch; margin-bottom: 2.75rem; }
/* A short blue bar above each section heading. Cheap, repeated, and the most
   direct way to keep Monash Blue present down the length of a page. */
.section-head--barred { padding-top: 1.5rem; border-top: 4px solid var(--monash-blue); }
.section--deep .section-head--barred { border-top-color: #fff; }

/* --- Header and navigation ------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
}
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 72px; }

/* Header lockup: the Monash logo, a hairline rule, then the laboratory name.
   The logo is referenced as an <img> rather than inlined because the file uses
   generic ids (SVGID_1_) that would collide with anything else on the page. */
.wordmark {
  display: flex; align-items: center; gap: .85rem;
  text-decoration: none; color: inherit; padding-block: .5rem;
  min-width: 0;
}
.wordmark__logo { height: 38px; width: auto; flex: none; }
.wordmark__rule {
  flex: none; width: 1px; align-self: stretch;
  background: var(--rule); margin-block: .3rem;
}
.wordmark__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.wordmark__name {
  font-family: var(--font-display); font-weight: 700; font-size: .98rem;
  color: var(--ink); letter-spacing: .01em;
}
.wordmark__sub { font-size: .72rem; color: var(--ink-muted); letter-spacing: .02em; }
.wordmark__short {
  display: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: .05em; color: var(--monash-blue);
}

/* Below this the full name crowds the menu button, so the short mark stands in.
   The laboratory's full name is the page heading immediately underneath. */
@media (max-width: 679px) {
  .wordmark__text { display: none; }
  .wordmark__short { display: block; }
  .wordmark__logo { height: 32px; }
  .wordmark { gap: .7rem; }
}

.nav-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--rule);
  padding: .5rem .75rem; font-family: var(--font-display); font-weight: 700;
  font-size: .9rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink); cursor: pointer;
}
.nav-toggle__bars { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block; text-decoration: none; color: var(--ink);
  font-size: .93rem; font-weight: 400; padding: .6rem .1rem;
}
.site-nav a:hover { color: var(--monash-blue); }
.site-nav a[aria-current="page"] { color: var(--monash-blue); font-weight: 500; }

@media (max-width: 899px) {
  /* Without JavaScript the nav stays open, so the site is still navigable.
     The .js class (set by an inline script in <head>) opts in to collapsing. */
  .site-nav { width: 100%; border-top: 1px solid var(--rule); padding-block: .5rem 1rem; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .site-header__inner { flex-wrap: wrap; }
  .site-nav a { padding: .7rem .25rem; border-bottom: 1px solid var(--rule-soft); }
  .site-nav li:last-child a { border-bottom: 0; }
}
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { margin-left: auto; }
  .site-nav ul { display: flex; gap: 1.6rem; align-items: center; }
  .site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--monash-blue); }
}

/* --- Hero -----------------------------------------------------------------
   Solid Monash Blue with white type, the standard Monash banner treatment. */

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--monash-blue);
  color: #fff;
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}
.hero > .container { position: relative; z-index: 2; }

/* Banner type sits on Monash Blue, so it is white rather than --ink. */
.hero h1 { color: #fff; max-width: 22ch; }
/* Banner headlines are set in caps. Condensed caps at display size need a
   touch of tracking to stop the letterforms crowding, and slightly tighter
   leading because caps carry no descenders. */
.hero h1, .page-head h1 { text-transform: uppercase; letter-spacing: .012em; line-height: .98; }
.hero .eyebrow { color: #fff; }
.hero__lede { font-size: var(--step-1); color: #fff; max-width: 58ch; margin-top: 1.25rem; }
.hero__meta { margin-top: 1.5rem; font-size: var(--step--1); color: #E3F0F8; letter-spacing: .02em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
/* A blue button on a blue banner would vanish, so invert it. */
.hero .btn--primary { background: #fff; color: var(--monash-blue); }
.hero .btn--primary:hover { background: #E8F1F7; color: var(--monash-blue); }

/* --- Hero device ----------------------------------------------------------
   Monash anchors a tall translucent white mark to the right of its banner
   (~20% of banner width, ~89% of its height, 0.35 alpha, revealed by a clip
   swipe). This follows that grammar with ten original figures, one per
   research project, each generated by simulating the method that project
   actually uses. They cross-fade on a ten-second cycle over a fixed
   measurement lattice, so the grid reads as constant and the figure as the
   variable. Decorative: the wrapper is aria-hidden, and the captions repeat
   information already carried by the research page. */

.hero__device {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: clamp(160px, 26vw, 330px);
  pointer-events: none;
  z-index: 1;
}
.hero__lattice { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__figs    { position: absolute; inset: 0; }

.dev-fig {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity .9s ease;
}
.dev-fig.is-active { opacity: 1; }
.dev-fig svg { position: absolute; inset: 0 0 86px 0; width: 100%; height: calc(100% - 86px); display: block; }

.dev-cap {
  position: absolute; left: 0; right: 0; bottom: 44px;
  padding-inline: 12px;
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .08em; line-height: 1.35;
}
.dev-cap b    { display: block; font-size: .72rem; font-weight: 700; color: #fff; opacity: .92; }
.dev-cap span { display: block; font-size: .66rem; font-weight: 400; color: #fff; opacity: .6; letter-spacing: .06em; }

/* --- Figure controls ------------------------------------------------------
   Ten ticks, one per figure. These are real buttons, so the banner carries a
   mechanism to stop the movement and choose a figure, which is what WCAG 2.2.2
   asks of anything that auto-updates. Clicking one hands control to the reader
   and the automatic cycle does not resume. The wrapper is pointer-events:none
   so the figures never intercept a click; the strip opts back in. */

.hero__dots {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; flex-wrap: wrap; gap: 4px;
  padding-inline: 12px;
  pointer-events: auto;
}
.dev-tick {
  width: 18px; height: 24px; padding: 0;
  border: 0; background: none; cursor: pointer;
  position: relative;            /* 18x24 hit target around a 4px tick */
}
.dev-tick::before {
  content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px;
  /* .62 alpha over Monash Blue flattens to #9EC8E0, which is 3.1:1 against the
     banner. WCAG 1.4.11 wants 3:1 for a control to be perceivable at all. */
  background: rgba(255, 255, 255, .62);
  transition: background .2s ease, height .2s ease, top .2s ease;
}
.dev-tick:hover::before { background: #fff; }
/* Colour alone cannot carry the active state here: any inactive tone light
   enough to clear 3:1 against the banner is then too close to white to give
   another 3:1 against the active tick. So the current figure is marked by
   size as well as colour, which also keeps 1.4.1 satisfied. */
.dev-tick[aria-current="true"]::before { background: #fff; height: 9px; top: 7px; }
.dev-tick:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* Figure elements. One accent (white) at varying alpha, as Monash does. */
.dev-lattice line { stroke: #fff; stroke-width: .6; opacity: .18; }
.dev-env     { fill: #fff; opacity: .13; }
.dev-series  { fill: none; stroke: #fff; stroke-width: 1.2; opacity: .58; stroke-linejoin: round; stroke-linecap: round; }
.dev-thin    { stroke-width: .9; opacity: .36; }
.dev-node    { fill: #fff; opacity: .95; }
.dev-dot     { fill: #fff; opacity: .5; }
.dev-gap     { stroke: #fff; stroke-width: .7; opacity: .3; }
.dev-gap--lead { stroke-width: 1.4; opacity: .7; }
.dev-link    { stroke: #fff; stroke-width: 1; opacity: .45; stroke-dasharray: 3 3; }
.dev-edge    { stroke: #fff; opacity: .42; }
.dev-box     { fill: none; stroke: #fff; stroke-width: 1.2; opacity: .7; }
.dev-branch  { stroke: #fff; stroke-width: 1.1; opacity: .5; }
.dev-traj    { fill: none; stroke: #fff; stroke-width: .7; opacity: .26; }
.dev-bar     { fill: #fff; opacity: .34; }
.dev-shock   { stroke: #fff; stroke-width: 1.2; opacity: .6; stroke-dasharray: 4 3; }
.dev-stream            { fill: #fff; }
.dev-stream--0 { opacity: .30; }
.dev-stream--1 { opacity: .16; }
.dev-stream--2 { opacity: .38; }
.dev-stream--3 { opacity: .12; }
.dev-stream--4 { opacity: .22; }

/* Keep the headline clear of the device on wide screens. */
@media (min-width: 861px) {
  .hero > .container { padding-right: clamp(190px, 29vw, 370px); }
}
/* Below that the banner is too narrow to carry both, so the type wins. */
@media (max-width: 860px) {
  .hero__device { display: none; }
}

/* Monash reveals its mark with a clip swipe; match the gesture, not the path.
   Under reduced-motion the reveal is dropped and site.js leaves the figures
   on the first one rather than cycling. */
@media (prefers-reduced-motion: no-preference) {
  .hero__device { animation: dev-reveal .9s ease-out both; }
  @keyframes dev-reveal {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0 0 0 0); }
  }
}

/* Inner pages open on the same blue banner as the homepage rather than a pale
   grey strip, so every page leads with the brand colour. The homepage keeps the
   rotating figures; inner pages carry the lattice alone, which holds the family
   resemblance without competing with the hero. */
.page-head {
  position: relative; overflow: hidden;
  background-color: var(--monash-blue);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 4.75rem);
}
.page-head > .container { position: relative; z-index: 2; }
.page-head h1 { color: #fff; max-width: 24ch; }
.page-head .eyebrow { color: #fff; }
.page-head .lede { color: #fff; margin-top: 1rem; }

.page-head__grid {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: clamp(180px, 40vw, 620px);
  z-index: 1; pointer-events: none;
  /* Without the fade the grid ends on a hard vertical edge and reads as a
     pasted-on panel rather than as texture in the banner. */
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%);
          mask-image: linear-gradient(to left, #000 45%, transparent 100%);
}
.page-head__grid svg { width: 100%; height: 100%; display: block; }
.page-head__grid .dev-lattice line { opacity: .3; }
@media (max-width: 720px) { .page-head__grid { display: none; } }

/* --- Buttons --------------------------------------------------------------
   Square, uppercase, condensed — the Monash call-to-action. */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: .95rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  padding: .85rem 1.75rem;
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--monash-blue); color: #fff; }
.btn--primary:hover { background: var(--monash-blue-hover); color: #fff; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--ghost:hover { background: rgba(255,255,255,.15); color: #fff; }
.btn--outline { background: transparent; color: var(--monash-blue); border-color: var(--monash-blue); }
.btn--outline:hover { background: var(--monash-blue); color: #fff; }

/* --- Stat strip ----------------------------------------------------------- */

/* Restrained figure grid: bordered cells, Monash Blue numerals at display
   size rather than billboard size. Used for supporting facts, not headlines. */
.stats { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 560px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); padding: 1.35rem 1.25rem; }
.stat__num {
  font-family: var(--font-display); font-size: var(--step-2);
  font-weight: 700; color: var(--monash-blue); line-height: 1;
}
.stat__label {
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); margin-top: .45rem;
}

/* --- Generic grid and cards ----------------------------------------------- */

.grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 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); } }
@media (min-width: 640px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--surface); border: 1px solid var(--rule);
  padding: 1.5rem;
  display: flex; flex-direction: column;
}
.card--link { text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.card--link:hover { border-color: var(--monash-blue); box-shadow: var(--shadow-md); color: inherit; }
/* Monash sets sub-headings in blue; card titles follow that. */
.card__title { font-size: var(--step-1); margin-bottom: .5rem; color: var(--monash-blue); }
.card__body { color: var(--ink); font-size: .96rem; }
.card__foot {
  margin-top: auto; padding-top: 1rem;
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft);
}
.card__rule { height: 4px; width: 44px; background: var(--monash-blue); margin-bottom: 1rem; }

/* --- Tags ----------------------------------------------------------------- */

.tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.tag {
  display: inline-block; font-size: .76rem; font-weight: 500; letter-spacing: .02em;
  padding: .28rem .6rem;
  background: var(--monash-blue-tint); color: var(--monash-blue);
  border: 1px solid var(--monash-blue-line);
}
.tag--plain { background: var(--surface-grey); color: var(--ink-soft); border-color: var(--rule); }
.tag--status {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  background: var(--ink); color: #fff; border-color: var(--ink);
}

/* --- Research theme and project cards ------------------------------------- */

.theme { padding-top: 2.5rem; }
.theme + .theme { margin-top: 3rem; border-top: 1px solid var(--rule); }
.theme__head { display: grid; gap: .5rem; margin-bottom: 1.75rem; max-width: 70ch; }
/* An oversized numeral anchors each theme and gives the long research page
   landmarks a reader can navigate by. */
.theme__num {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem); line-height: .8;
  color: var(--monash-blue); opacity: .28; letter-spacing: -.02em;
  margin-bottom: .25rem;
}
.theme__count {
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted);
}

.project {
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 4px solid var(--monash-blue);
  padding: 1.5rem;
}
.project__title { font-size: var(--step-1); margin-bottom: .6rem; color: var(--ink); }
.project__pis {
  font-size: var(--step--1); color: var(--ink-soft); margin-bottom: .9rem;
  display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: baseline;
}
.project__pis .label {
  font-family: var(--font-display); font-weight: 700; color: var(--ink-muted);
  letter-spacing: .07em; text-transform: uppercase; font-size: .72rem;
}
.project__desc { color: var(--ink); font-size: .96rem; }
.project__figures { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1.1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--rule-soft); }
.figure__num { display: block; font-family: var(--font-display); font-weight: 700; color: var(--monash-blue); font-size: 1.2rem; line-height: 1.1; }
.figure__label { display: block; font-size: .76rem; color: var(--ink-muted); }
.project__meta { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* --- People --------------------------------------------------------------- */

.person { display: flex; gap: 1rem; padding: 1.25rem; border: 1px solid var(--rule); background: var(--surface); }
.person--lead { flex-direction: column; gap: 1.25rem; padding: 1.75rem; border-top: 4px solid var(--monash-blue); }
@media (min-width: 640px) { .person--lead { flex-direction: row; gap: 1.5rem; } }

/* Square avatars, in keeping with the square-cornered Monash system. */
.avatar {
  flex: none; display: grid; place-items: center;
  width: 56px; height: 56px;
  background: var(--monash-blue-tint); color: var(--monash-blue);
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .04em;
  border: 1px solid var(--monash-blue-line);
  object-fit: cover;
}
.person--lead .avatar { width: 92px; height: 92px; font-size: 1.9rem; background: var(--monash-blue); color: #fff; border-color: var(--monash-blue); }

.person__name { font-size: var(--step-0); font-weight: 700; margin: 0 0 .15rem; }
.person--lead .person__name { font-size: var(--step-2); }
.person__role {
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--monash-blue); margin-bottom: .35rem;
}
.person__unit { font-size: var(--step--1); color: var(--ink-muted); }
.person__leads { margin: .75rem 0 0; padding: 0; list-style: none; font-size: var(--step--1); }
.person__leads li { padding-left: 1rem; position: relative; margin-bottom: .25rem; color: var(--ink-soft); }
.person__leads li::before { content: "\25B8"; position: absolute; left: 0; color: var(--monash-blue); }
.person__bio { margin-top: .85rem; color: var(--ink); font-size: .96rem; }

/* --- Spec lists (infrastructure) ------------------------------------------ */

.spec { border: 1px solid var(--rule); }
.spec__head { background: var(--surface-alt); padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--rule); }
.spec__head h3 { margin: 0; font-size: var(--step-0); color: var(--monash-blue); }
.spec__head .small { color: var(--ink-muted); }
.spec dl { margin: 0; padding: .5rem 1.35rem 1.1rem; }
.spec dt {
  font-family: var(--font-display); font-size: .76rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-muted); font-weight: 700; margin-top: .9rem;
}
.spec dd { margin: .15rem 0 0; font-size: .96rem; color: var(--ink); }

.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { padding: .65rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .96rem; }
.list-plain li:last-child { border-bottom: 0; }

.list-check { list-style: none; margin: 0; padding: 0; }
.list-check li { position: relative; padding: 0 0 .7rem 1.6rem; font-size: .96rem; color: var(--ink); }
.list-check li::before { content: "\2014"; position: absolute; left: 0; top: 0; color: var(--monash-blue); font-weight: 700; }

/* --- Timeline ------------------------------------------------------------- */

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 720px) { .timeline { grid-template-columns: repeat(4, 1fr); } }
.timeline li { background: var(--surface); padding: 1.35rem 1.25rem; }
.timeline__when {
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--monash-blue);
}
.timeline__what { margin-top: .4rem; font-size: .96rem; color: var(--ink); }

/* --- Callout and CTA ------------------------------------------------------ */

.callout {
  border: 1px solid var(--monash-blue-line); border-left: 4px solid var(--monash-blue);
  background: var(--monash-blue-tint);
  padding: 1.5rem;
}
.callout h3 { margin-bottom: .4rem; color: var(--monash-blue); }
.callout--plain { background: var(--surface-alt); border-color: var(--rule); border-left-color: var(--ink-muted); }
.callout--plain h3 { color: var(--ink); }

.cta { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 860px) { .cta { grid-template-columns: 1.6fr 1fr; } }
.cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- Placeholder slot (partners) ------------------------------------------ */

.slot {
  border: 1px dashed var(--rule);
  padding: 1.75rem 1.5rem; background: var(--surface-alt); text-align: center; color: var(--ink-muted);
}
.slot__label {
  font-family: var(--font-display); font-size: .76rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft);
}
.slot p { margin: .5rem 0 0; font-size: .92rem; }

/* --- Contact -------------------------------------------------------------- */

.enquiry { border: 1px solid var(--rule); border-top: 4px solid var(--monash-blue); padding: 1.5rem; background: var(--surface); }
.enquiry h3 { margin-bottom: .35rem; font-size: var(--step-0); color: var(--monash-blue); }
.enquiry p { font-size: .94rem; color: var(--ink); }
.enquiry a { font-weight: 500; word-break: break-word; }

address.plain { font-style: normal; line-height: 1.8; }

/* --- Footer --------------------------------------------------------------- */

.site-footer { background: var(--dark); color: var(--dark-ink); padding-block: 3.5rem 2rem; font-size: .93rem; }
.site-footer h2, .site-footer h3 {
  color: #fff; font-family: var(--font-display); font-size: .82rem;
  letter-spacing: .09em; text-transform: uppercase; margin-bottom: .9rem;
}
.site-footer a { color: var(--dark-ink); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 720px)  { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; } }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.2); display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; font-size: .84rem; color: #ABABAB; }
.footer-wordmark { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.15rem; letter-spacing: .05em; margin-bottom: .6rem; }

/* --- Print ---------------------------------------------------------------- */

@media print {
  .site-header, .nav-toggle, .site-nav, .hero__actions, .cta__actions, .skip-link,
  .hero__device, .hero__dots { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .hero, .section--deep, .site-footer { background: #fff !important; color: #000 !important; }
  .hero h1, .hero__lede, .hero .eyebrow, .hero__meta,
  .section--deep h2, .section--deep h3, .section--deep p, .section--deep .lede,
  .site-footer, .site-footer a { color: #000 !important; }
  .section { padding-block: 1.25rem; }
  .card, .project, .person, .spec, .timeline li { break-inside: avoid; border-color: #999; }
}