/*
 * TopAustraliaUniversities — layout layer.
 *
 * The owner asked for educads.com's theme and layout here, with this site's own
 * colours and its own hero picture. educads is a Phalcon app, so nothing was
 * copied: this is its rendered design system rebuilt from the measurements that
 * matter — a coloured band carrying the navigation, a grey page ground, white
 * cards with a one-pixel rule and an 8px radius, a 1200px column, a compact type
 * scale, and a dark footer that opens with a row of counts.
 *
 * The palette stays this site's own, and stays sober: the muted navy (#21508f)
 * carries action, ochre (#b86d0a) marks value and nothing else, surfaces are warm
 * neutrals. The owner saw a colourful version of this site once and asked for it
 * to be reverted, so saturation is a settled question here.
 *
 * LOAD ORDER MATTERS. The borrowed base theme is UNLAYERED, and an unlayered
 * rule beats a layered one (a Tailwind utility) however specific the utility is.
 * This file is unlayered and loads last, so it wins. See brand.css for the two
 * occasions that cost us an invisible button.
 */

:root {
  /* Drawn from brand.css rather than redeclared, so the two cannot drift. */
  --tau-ink: #141619;
  --tau-body: #2f353b;
  --tau-muted: #565c64;
  --tau-line: #e4eaf2;
  --tau-line-soft: #f0f4f9;
  --tau-bg: #ffffff;            /* page ground: cool. The warm beige it replaced was the
                                   dullness, and it fought the navy. */
  --tau-brand: #1763d6;
  --tau-brand-d: #1550b4;
  --tau-brand-dd: #15325d;
  --tau-brand-l: #5b93ea;
  --tau-tint: #f0f6ff;
  --tau-tint-2: #dbe9fe;
  --tau-accent: #c2690a;
  --tau-accent-ink: #a85f00;
  --tau-accent-tint: #fff6e8;
  --tau-foot: #121722;
  --tau-radius: 8px;
  --tau-container: 1200px;
}

/* ---------- ground ---------- */
body {
  background: var(--tau-bg);
  color: var(--tau-ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.tau-container {
  width: 100%;
  max-width: var(--tau-container);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* The site's own containers take the same column, so the chrome and the page
   bodies line up instead of stepping in and out by 80px. */
.site-header .container,
footer.ft .container,
main .mx-auto.max-w-7xl { max-width: var(--tau-container); }

/* ---------- the band: colour carrying the navigation ---------- */
.tau-band {
  position: relative;
  z-index: 5;
  overflow: visible;
  background: linear-gradient(180deg, var(--tau-brand-dd) 0%, var(--tau-brand-d) 46%, var(--tau-brand) 100%);
}
.tau-band::after {
  content: "";
  position: absolute;
  right: -140px;
  top: -260px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, 0) 64%);
}

.tau-nav-in {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 26px;
  height: 64px;
}
.tau-brand { display: block; flex: none; }
.tau-brand img { display: block; height: 34px; width: auto; }

.tau-menu { display: flex; align-items: center; gap: 22px; flex: 1; min-width: 0; }
.tau-menu > a,
.tau-menu .nav-dropdown-trigger {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: #fff;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  background: none;
}
.tau-menu > a:hover,
.tau-menu .nav-dropdown-trigger:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .6); }
.tau-menu > a.is-on,
.tau-menu .nav-item-dropdown.is-on .nav-dropdown-trigger { font-weight: 600; border-bottom-color: #fff; }

.tau-nav-search { margin-left: auto; flex: none; display: flex; }
.tau-nav-search input {
  width: 212px;
  height: 34px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .5);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font: inherit;
  font-size: 13px;
}
.tau-nav-search input::placeholder { color: rgba(255, 255, 255, .82); }
.tau-nav-search input:focus { outline: none; background: #fff; color: var(--tau-ink); }
.tau-nav-search input:focus::placeholder { color: var(--tau-muted); }
.tau-nav-search button {
  flex: none;
  width: 40px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 0 4px 4px 0;
  background: rgba(255, 255, 255, .15) !important;
  color: #fff !important;
  cursor: pointer;
}
.tau-nav-search button:hover { background: rgba(255, 255, 255, .28) !important; }

.tau-tagline {
  flex: none;
  font-size: 12px;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
  padding-left: 14px;
  margin-left: -10px;
  border-left: 1px solid rgba(255, 255, 255, .22);
}
.tau-tagline b { color: #fff; font-weight: 600; }

/* The mega menus are the site's own and keep their markup; here they are only
   redressed as a white panel hanging off the band. */
.tau-menu .nav-item-dropdown { position: relative; }
.tau-menu .dropdown-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 13px;
  z-index: 40;
  background: #fff;
  border: 1px solid var(--tau-line);
  border-radius: var(--tau-radius);
  box-shadow: 0 16px 36px rgba(16, 24, 43, .16);
  padding: 20px 24px;
}
.tau-menu .nav-item-dropdown:hover .dropdown-menu,
.tau-menu .nav-item-dropdown.open .dropdown-menu { display: block; }
.tau-menu .mega-menu { width: min(840px, calc(100vw - 48px)); }
.tau-menu .mega-menu-content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.tau-menu .mega-menu-title {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tau-muted);
}
.tau-menu .mega-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.tau-menu .mega-menu-list a { font-size: 13.5px; line-height: 18px; color: var(--tau-ink); text-decoration: none; }
.tau-menu .mega-menu-list a:hover { color: var(--tau-brand); }

.tau-burger { display: none; }

/* ---------- inner pages: a heading zone, then the ground ----------
   educads puts the breadcrumb and the h1 inside the coloured band because its
   templates hand them to the layout. Here they live in each page body, 92 of
   them, so instead the top of the page sits on a pale tint that fades into the
   ground. Same rhythm, and nothing can end up as white text on grey. */
body:not(.tau-home) main {
  background: linear-gradient(180deg, var(--tau-tint) 0, var(--tau-tint) 112px, var(--tau-bg) 268px);
}
body:not(.tau-home) main > div:first-child { padding-top: 26px; }

main h1 {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 38px;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--tau-ink);
}
main nav[aria-label="Breadcrumb"] { font-size: 12px; color: var(--tau-muted); }
main nav[aria-label="Breadcrumb"] a { color: var(--tau-muted); text-decoration: none; }
main nav[aria-label="Breadcrumb"] a:hover { color: var(--tau-brand); text-decoration: underline; }

/* Card geometry, applied once rather than page by page: the educads card is a
   white panel with a hairline and an 8px corner, not a 16px pill. */
main .rounded-2xl, main .rounded-xl, main .rounded-3xl { border-radius: var(--tau-radius); }
main .border-line { border-color: var(--tau-line); }

/* A grid item's default min-width is auto, which lets it refuse to shrink below
   its content and spill out of its track. On /universities at exactly 1024px
   the results column overran the page by 19px and clipped the right-hand card.
   This predates the redesign; min-width:0 is the standard answer and is what
   you want on a grid child in almost every case. */
main .grid > * { min-width: 0; }

/* The pager, redrawn to match: educads lets its page numbers wrap and centres
   them. Laravel's default paginator is one inline-flex row, so with 55 pages it
   ran 19px off the side of the page. Predates the redesign, same as above. */
main nav[role="navigation"] .inline-flex,
main .pagination { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
main nav[role="navigation"] .inline-flex { max-width: 100%; }
main .bg-paper { background-color: var(--tau-bg); }

/* ---------- home: the hero ----------
   The gradient lives on .tau-hero-top, not on the whole hero, so that it
   FINISHES exactly where the picture starts. Put it on the section and the
   colour is still halfway through its run when the sky begins, which draws a
   visible seam straight across the page. */
.tau-hero {
  position: relative;
  z-index: 1;
  margin-top: -64px;           /* slides under the navigation so the colour runs behind it */
  overflow: hidden;
  background: rgb(38, 88, 181);   /* identical to the drawing's sky, top to bottom */
}
.tau-hero-top {
  position: relative;
  padding-top: 64px;           /* the height of the navigation sitting over it */
  /* The band used to stop exactly where the picture started, so it needed no
     bottom padding of its own. With the picture gone it is the whole hero and has
     to close itself. */
  padding-bottom: 30px;
  background: rgb(38, 88, 181);   /* flat blue, top to bottom */
}
/* The radial glow that used to sit here was removed: a flat field cannot carry
   a highlight without it reading as a smudge. */
/* educads' hero is 843px at 1485 wide: nav 64 + headline/search 185 + scene 565.
   Our nav is 64 and the scene is 565, so the whole difference sat in this block.
   26px off the padding lands the hero on 843. The remaining gap against their
   185 is our larger headline and two-line subtitle, which is a type choice. */
.tau-hero-in { position: relative; z-index: 2; padding-top: 22px; padding-bottom: 4px; }
.tau-hero-h {
  margin: 0 0 10px;
  text-align: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -.5px;
}
.tau-hero-sub {
  margin: 0 auto 26px;
  max-width: 62ch;
  text-align: center;
  color: rgba(255, 255, 255, .88);
  font-size: 15px;
  line-height: 23px;
}
/* The finder is the site's own component; it only needs the hero's shadow. */
.tau-hero-search { box-shadow: 0 12px 30px rgba(10, 26, 50, .26); border-radius: var(--tau-radius); }
.tau-hero-search > form { border-radius: var(--tau-radius) !important; border: 0 !important; }

/* 34.44% is the drawing's own 1800 x 620, so nothing is cropped and the
   building never loses its spire to an object-fit box. */
/* ---------- the hero picture is OUT (owner, 24 Oct 2026: "image hata ker hero
   section ki height kam kardo bus blue rehny do abhi") ----------
   .tau-hero-scene reserved 38.05% of the viewport width as HEIGHT — about 565px
   at 1485 wide — which is the height that has gone. The hero is now the nav strip
   plus the headline, subtitle and search bar on flat blue, roughly 340px instead
   of 900.

   The rules for the scene, its img and the fold curve are deleted rather than
   hidden: left in place they would keep reserving that padding-bottom even with
   no element to fill it. The blue itself is unchanged and still lives on
   .tau-hero and .tau-hero-top, so the colour is exactly what it was.
   public/images/hero-banner.jpg is left on disk, untouched, in case it comes
   back. */
.tau-hero-fold { display: none; }

/* ---------- home: the counts ---------- */
.tau-stats { background: #fff; border-bottom: 1px solid var(--tau-line); }
.tau-stats-in {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 52px;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}
.tau-stat { color: var(--tau-ink); text-decoration: none; }
.tau-stat b { font-size: 23px; font-weight: 700; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.tau-stat span { font-size: 13px; color: var(--tau-muted); }
.tau-stat:hover b { color: var(--tau-brand); }

/* ---------- sections, tiles, chips, lists ---------- */
.tau-sec { padding-top: 38px; }
.tau-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.tau-sec-head h2, .tau-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--tau-ink);
}
.tau-h2 { margin-bottom: 14px; }
.tau-sec-head a { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--tau-brand); text-decoration: none; }
.tau-sec-head a:hover { color: var(--tau-brand-d); text-decoration: underline; }

.tau-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tau-tile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--tau-line);
  border-radius: var(--tau-radius);
  padding: 14px 16px;
  color: var(--tau-ink);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.tau-tile:hover { border-color: var(--tau-brand); box-shadow: 0 4px 14px rgba(21, 50, 93, .08); color: var(--tau-ink); }
.tau-tile-t { font-size: 14px; font-weight: 600; }
.tau-tile-n { font-size: 12px; color: var(--tau-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.tau-chips { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; align-items: center; }
.tau-chips-l { font-size: 13px; color: var(--tau-muted); }
.tau-chip {
  font-size: 13px;
  font-weight: 500;
  color: var(--tau-brand-d);
  background: var(--tau-tint);
  border-radius: 999px;
  padding: 6px 14px;
  text-decoration: none;
}
.tau-chip:hover { background: var(--tau-tint-2); color: var(--tau-brand-dd); }

.tau-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.tau-list { background: #fff; border: 1px solid var(--tau-line); border-radius: var(--tau-radius); overflow: hidden; }
.tau-list-row {
  display: block;
  padding: 14px 16px;
  border-bottom: 1px solid var(--tau-line);
  color: var(--tau-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}
.tau-list-row:last-child { border-bottom: 0; }
.tau-list-row:hover { color: var(--tau-brand); background: #fbfaf8; }
.tau-list-row span { display: block; font-size: 12px; font-weight: 400; color: var(--tau-muted); margin-top: 3px; }

.tau-award {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--tau-line);
  color: var(--tau-ink);
  text-decoration: none;
  min-width: 0;
}
.tau-award:last-child { border-bottom: 0; }
.tau-award:hover { background: #fbfaf8; color: var(--tau-ink); }
.tau-award-mark {
  width: 44px;
  height: 44px;
  border-radius: var(--tau-radius);
  flex: none;
  background: var(--tau-tint);
  color: var(--tau-brand-d);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tau-award-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tau-award-meta { font-size: 12px; color: var(--tau-muted); }
.tau-award-t { font-size: 15px; font-weight: 600; line-height: 21px; }
/* A long deadline must shrink rather than crush its siblings: a nowrap flex
   child with flex:0 0 auto once collapsed a whole card to one word per line. */
.tau-due {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 30ch;
  font-size: 12px;
  font-weight: 600;
  color: var(--tau-accent-ink);
  background: var(--tau-accent-tint);
  border-radius: 4px;
  padding: 4px 8px;
  overflow-wrap: anywhere;
}
.tau-more { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--tau-brand); text-decoration: none; }
.tau-more:hover { color: var(--tau-brand-d); text-decoration: underline; }

.tau-card { background: #fff; border: 1px solid var(--tau-line); border-radius: var(--tau-radius); }
.tau-pad { padding: 18px; }
.tau-lead { font-size: 14px; line-height: 22px; color: var(--tau-body); }
.tau-lead p { margin: 0 0 10px; }
.tau-lead p:last-child { margin-bottom: 0; }

.tau-btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 6px;
  background: var(--tau-brand);
  color: #fff;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.tau-btn:hover { background: var(--tau-brand-d); color: #fff; }
.tau-btn-ghost { background: #fff; color: var(--tau-brand); border: 1px solid var(--tau-line); }
.tau-btn-ghost:hover { background: var(--tau-tint); color: var(--tau-brand-d); border-color: var(--tau-brand); }

/* Rows: a university or a course on a list. */
.tau-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 10px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--tau-line);
  border-radius: var(--tau-radius);
  transition: border-color .15s, box-shadow .15s;
}
.tau-row:hover { border-color: var(--tau-brand-l); box-shadow: 0 4px 14px rgba(21, 50, 93, .07); }
.tau-row-logo {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--tau-radius);
  overflow: hidden;
  border: 1px solid var(--tau-line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The logo component already positions itself with inset-0 and its own white
   backing. A max-width here shrank it to 86% AND, because it is absolutely
   positioned, pinned the shrunken image to the top-left corner, leaving a wedge
   of the monogram gradient showing down one side of every logo. */
.tau-row-logo img { width: 100%; height: 100%; object-fit: contain; }
.tau-row-body { flex: 1; min-width: 0; }
.tau-row-meta { font-size: 12px; color: var(--tau-muted); }
.tau-row-t { margin: 2px 0 8px; font-size: 16px; line-height: 22px; font-weight: 600; }
.tau-row-t a { color: var(--tau-ink); text-decoration: none; }
.tau-row-t a:hover { color: var(--tau-brand); }
.tau-row-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tau-row-chips span {
  font-size: 12px;
  font-weight: 500;
  background: #f4f2ef;
  color: var(--tau-body);
  border-radius: 4px;
  padding: 4px 8px;
  font-variant-numeric: tabular-nums;
}
.tau-row-chips span.is-key { color: var(--tau-brand-d); background: var(--tau-tint); font-weight: 600; }
.tau-row-side { width: 168px; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.tau-row-fee { font-size: 12px; color: var(--tau-muted); }
.tau-row-fee b { display: block; font-size: 15px; color: var(--tau-ink); font-variant-numeric: tabular-nums; }

/* ---------- footer ---------- */
footer.ft {
  margin-top: 56px;
  background: var(--tau-foot);
  color: #aeb6c2;
  border-top: 3px solid var(--tau-accent);
}
footer.ft a { color: #aeb6c2; text-decoration: none; }
footer.ft a:hover { color: #fff; }
footer.ft .ft-deck { background: none; padding: 0; border: 0; }

.tau-foot-stats { border-bottom: 1px solid #242b3a; }
.tau-foot-stats-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tau-foot-stat { display: block; padding: 26px 0 24px 24px; border-left: 1px solid #242b3a; }
.tau-foot-stat-n { display: block; font-size: 29px; line-height: 36px; font-weight: 700; letter-spacing: -.5px; color: #fff; font-variant-numeric: tabular-nums; }
.tau-foot-stat-l { display: block; font-size: 13px; color: #8a93a4; margin-top: 2px; }

.tau-foot-cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 40px; padding-top: 44px; padding-bottom: 36px; }
.tau-foot-about p { margin: 0 0 20px; font-size: 14px; line-height: 22px; color: #aeb6c2; max-width: 340px; }
.tau-foot-name { display: block; margin-bottom: 12px; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: #fff; }
.tau-foot-mail-l { margin-top: 20px; font-size: 13px; color: #8a93a4; }
.tau-foot-col { display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.tau-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.tau-foot-col h3.tau-foot-h,
.tau-foot-h {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8a93a4;
  margin: 0 0 5px;
}
.tau-foot-base { border-top: 1px solid #242b3a; }
.tau-foot-base-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 13px;
  color: #8a93a4;
}
.tau-foot-base-in nav { display: flex; flex-wrap: wrap; gap: 14px; }

/* The back-to-top button is the site's own: a script fixes it to the corner and
   footer.css paints it. It already carries the ochre accent, so it needs nothing
   here. Overriding it from this file does not work anyway, and leaving rules
   that lose every time is worse than not writing them. */

/* ---------- tablet ---------- */
@media (max-width: 1099px) {
  .tau-nav-search input { width: 150px; }
  .tau-tagline { display: none; }
  .tau-menu { gap: 16px; }
}

@media (max-width: 991px) {
  .tau-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
    width: 40px;
    height: 40px;
    padding: 0 9px;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 4px;
    cursor: pointer;
  }
  .tau-burger span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 1px; }

  .tau-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    box-shadow: 0 12px 28px rgba(16, 24, 43, .18);
    padding: 8px 20px 16px;
  }
  .tau-menu.active { display: flex; }
  .tau-menu > a,
  .tau-menu .nav-dropdown-trigger {
    color: var(--tau-ink);
    font-size: 15px;
    padding: 12px 0;
    border-bottom: 1px solid var(--tau-line-soft);
    display: block;
  }
  .tau-menu > a:hover,
  .tau-menu .nav-dropdown-trigger:hover { color: var(--tau-brand); border-bottom-color: var(--tau-line-soft); }
  .tau-menu .nav-item-dropdown { border-bottom: 1px solid var(--tau-line-soft); }
  .tau-menu .nav-item-dropdown .nav-dropdown-trigger { border-bottom: 0; }
  .tau-menu .dropdown-menu {
    position: static;
    width: auto;
    margin: 0 0 12px;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--tau-line);
    border-radius: 0;
    padding: 4px 0 4px 14px;
  }
  .tau-menu .nav-item-dropdown:hover .dropdown-menu { display: none; }
  .tau-menu .nav-item-dropdown.open .dropdown-menu { display: block; }
  .tau-menu .mega-menu-content { grid-template-columns: 1fr; gap: 16px; }
  .tau-nav-search { margin: 12px 0 0; width: 100%; }
  .tau-nav-search input { width: 100%; border-color: var(--tau-line); background: var(--tau-bg); color: var(--tau-ink); height: 40px; }
  .tau-nav-search input::placeholder { color: var(--tau-muted); }
  .tau-nav-search button { height: 40px; border-color: var(--tau-line); background: var(--tau-brand) !important; color: #fff !important; }

  /* Below .tau-nav-in, which is z-index 2 and therefore a stacking context of
     its own: the open menu lives INSIDE it, so its own z-index is compared at
     2, not at 30. At z-index 20 the overlay covered the menu and every tap on
     a menu item just closed it. */
  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(16, 24, 43, .4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s;
  }
  .mobile-menu-overlay.active { opacity: 1; visibility: visible; }

  .tau-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tau-two { grid-template-columns: minmax(0, 1fr); }
  .tau-foot-cols { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
  .tau-foot-about { grid-column: 1 / -1; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  .tau-container { padding: 0 16px; }
  .tau-brand img { height: 28px; }
  .tau-hero-in { padding-top: 18px; padding-bottom: 14px; }
  .tau-hero-h { font-size: 27px; }
  .tau-hero-sub { font-size: 14px; margin-bottom: 20px; }
  /* The drawing is 2.9:1. Left at that ratio on a phone the Quadrangle is
     110px tall and unreadable, so here it is cropped to its middle instead. */
  .tau-stats-in { gap: 10px 26px; padding-top: 16px; padding-bottom: 16px; }
  .tau-stat b { font-size: 19px; }
  .tau-tiles { grid-template-columns: minmax(0, 1fr); }
  .tau-award { flex-wrap: wrap; }
  .tau-due { max-width: 100%; }
  .tau-row { flex-wrap: wrap; }
  .tau-row-side { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; text-align: left; }
  .tau-row-fee b { display: inline; font-size: 14px; }
  .tau-foot-stats-in { grid-template-columns: 1fr 1fr; }
  .tau-foot-stat { padding: 18px 0 16px 16px; }
  .tau-foot-stat-n { font-size: 23px; line-height: 29px; }
  .tau-foot-cols { grid-template-columns: 1fr; gap: 26px; }
  main h1 { font-size: 24px; line-height: 31px; }
  body:not(.tau-home) main { background: linear-gradient(180deg, var(--tau-tint) 0, var(--tau-tint) 92px, var(--tau-bg) 230px); }
}

/* ---------- dark scheme ----------
   The site has no dark theme and never did: its surfaces, its borrowed base
   theme and its charts are all written for light. Declaring the scheme stops
   the browser from inverting form controls and leaving dark selects on white
   cards, which is the only way dark mode showed up here. */
:root { color-scheme: light; }

/* ── Collection filters: degrees read as checkboxes, subjects as a dropdown ──
   The degree control is a link wearing a checkbox, not an <input>: one degree
   per canonical URL, so a real multi-select would need a query string. */
.filter-list--check .filter-link { display: flex; align-items: center; gap: 9px; }
.filter-box {
  flex: 0 0 auto; width: 15px; height: 15px; border-radius: 3px;
  border: 1.5px solid var(--tau-line, #cfd6de); background: #fff; position: relative;
}
.filter-list--check .filter-link.is-active .filter-box {
  background: var(--tau-brand, #21508f); border-color: var(--tau-brand, #21508f);
}
.filter-list--check .filter-link.is-active .filter-box::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.filter-select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--tau-line, #cfd6de);
  border-radius: 8px; background: #fff; font: inherit; font-size: 14px;
  color: var(--tau-ink, #141619); cursor: pointer;
}
.filter-select:focus { outline: 2px solid var(--tau-brand, #21508f); outline-offset: 1px; }

/* ---------- the filter form ----------
   The degree radios are drawn as boxes: the control behaves as single-select,
   because one canonical address carries one degree, but reads as the checkbox
   the sidebar has always shown. appearance:none is what lets the native control
   be restyled at all. */
.filter-check { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; font-size: 14px; color: var(--tau-ink); }
.filter-check input {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 16px; height: 16px; margin: 0;
  border: 1.5px solid var(--tau-line); border-radius: 4px; background: #fff;
  cursor: pointer; position: relative;
}
.filter-check input:checked { border-color: var(--tau-accent); background: var(--tau-accent); }
.filter-check input:checked::after {
  content: ''; position: absolute; left: 4.5px; top: 1px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.filter-check input:focus-visible { outline: 2px solid var(--tau-accent); outline-offset: 2px; }
.filter-check:hover input { border-color: var(--tau-accent); }

.filter-submit {
  width: 100%; padding: 11px 16px; border: 0; border-radius: var(--tau-radius);
  background: var(--tau-accent); color: #fff; font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.filter-submit:hover { filter: brightness(.94); }

/* ---------- de-dull pass, batch 1 (27 Oct 2026) ----------
   Figures line up in a column only when they are tabular, and a directory is
   mostly figures. */
.tau-stat-n, .tau-fee, .collection-count, td.num, .tabular { font-variant-numeric: tabular-nums; }
/* The accent has one job: numbers. Ochre on a button AND a heading AND a border
   is why an accent stops registering. */
.tau-fee, .tau-num { color: var(--tau-accent); font-family: var(--font-display); font-weight: 700; }

/* ---------- de-dull pass, batch 2: the listing ----------
   A chip row above the heading, and result rows that are rows rather than
   boxes. Six bordered cards stacked read as a table; a hairline between them
   reads as a list, which is what it is. */
.tau-topchips {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0 0 14px; padding-bottom: 13px;
  border-bottom: 1px solid var(--tau-line);
}
.tau-topchip {
  display: inline-block; padding: 5px 11px; border-radius: 6px;
  background: #fff; border: 1px solid var(--tau-line);
  font-size: 12.5px; line-height: 1.3; color: var(--tau-body); text-decoration: none;
  white-space: nowrap;
}
.tau-topchip:hover { border-color: var(--tau-brand); color: var(--tau-brand); }
.tau-topchip--more { background: transparent; border-style: dashed; color: var(--tau-muted); }

/* Result rows: the card keeps its white, loses its box. The cards carry
   `.card` plus a per-kind class (program-card, university-card-horizontal), so
   `.card` is the handle; naming the per-kind classes missed every one of them. */
.results-grid > .card {
  /* collection.css sets `border: 1px solid var(--fj-border) !important` on
     .card, so specificity alone never wins here — the override has to be
     !important too. theme-modern.css does the same with border-radius. */
  border: 0 !important;
  border-bottom: 1px solid var(--tau-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.results-grid > .card:last-child { border-bottom: 0 !important; }
.results-grid { background: #fff; border: 1px solid var(--tau-line); border-radius: var(--tau-radius); overflow: hidden; }
.results-grid--scholarships { background: transparent; border: 0; border-radius: 0; }

/* On a phone the chip row wrapped to eight lines and pushed the h1 off the
   fold, which is the opposite of the point. One scrolling line instead. */
@media (max-width: 768px) {
  .tau-topchips {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin-inline: -16px; padding-inline: 16px;
  }
  .tau-topchips::-webkit-scrollbar { display: none; }
  .tau-topchip { flex: 0 0 auto; }
}

/* ---------- de-dull pass, batch 3: the programme fold ----------
   Logo, title and provider on the left; the fee on the right, largest thing on
   the page, because it is what the visit is for. */
.tau-prog-head { display: flex; align-items: flex-start; gap: 14px; margin-top: 20px; }
.tau-prog-logo { flex: 0 0 auto; }
.tau-prog-id { flex: 1 1 auto; min-width: 0; }
.tau-prog-title {
  margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 1.15;
  font-weight: 700; letter-spacing: -.3px; color: var(--tau-ink);
}
.tau-prog-at { margin: 5px 0 0; font-size: 14.5px; color: var(--tau-body); }
.tau-prog-at a { font-weight: 600; color: var(--tau-brand); }
.tau-prog-fee {
  flex: 0 0 auto; text-align: right; padding-left: 16px;
  border-left: 1px solid var(--tau-line-soft);
}
.tau-prog-fee-n {
  font-family: var(--font-display); font-size: 28px; line-height: 1.05; font-weight: 700;
  color: var(--tau-accent); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tau-prog-fee-l { margin-top: 2px; font-size: 12px; color: var(--tau-muted); }

/* On a phone the fee must not share a row with the title: it gets its own band. */
@media (max-width: 640px) {
  .tau-prog-head { flex-wrap: wrap; }
  .tau-prog-title { font-size: 25px; }
  .tau-prog-fee {
    flex: 1 1 100%; text-align: left; padding: 11px 14px; margin-top: 12px;
    border-left: 0; border-radius: var(--tau-radius); background: var(--tau-accent-tint);
  }
  .tau-prog-fee-n { font-size: 26px; color: var(--tau-accent-ink); }
  .tau-prog-fee-l { color: var(--tau-accent-ink); }
}

/* ---------- de-dull pass: type size and colour (29 Oct 2026) ----------
   Body was 15px/23px in a mid grey. Every modern directory measured for this
   pass — QS, Mastersportal, Coursera, Quora — sets 16px, and the grey was
   costing contrast at the smaller sizes rather than buying calm. */
body { font-size: 16px; line-height: 1.6; color: var(--tau-body); }
p, li { font-size: 16px; line-height: 1.65; }
.prose-content p, .prose-content li { font-size: 16.5px; line-height: 1.7; color: var(--tau-body); }
.text-ink-soft { color: var(--tau-body) !important; }
.collection-intro { font-size: 16.5px; line-height: 1.7; color: var(--tau-body); }

/* Headings carry Newsreader; give them the ink, not the body grey, and let the
   large sizes tighten so they do not drift apart at 16px body. */
h1, h2, h3 { color: var(--tau-ink); }
h1 { letter-spacing: -.4px; }
h2 { font-size: 23px; line-height: 1.25; }
h3 { font-size: 18.5px; line-height: 1.3; }

/* Small print stays small but must still pass contrast: 11-12px grey on white
   is where most of these pages were failing. */
/* ...but a SIZE utility must not decide COLOUR. This rule was repainting any
   element that also declared one, and both sides are (0,1,0), so the later
   file won: "AU #1" chips shipped grey-on-navy at 1.19:1, and five more
   colour utilities lost the same way. The grey now applies only where the
   markup has not asked for a colour of its own. */
.text-xs:not([class*="text-white"]):not([class*="text-brand"]):not([class*="text-ink"]):not([class*="text-gold"]):not([class*="text-accent"]),
.text-\[11px\]:not([class*="text-white"]):not([class*="text-brand"]):not([class*="text-ink"]):not([class*="text-gold"]):not([class*="text-accent"]),
small:not([class*="text-white"]):not([class*="text-brand"]):not([class*="text-ink"]):not([class*="text-gold"]):not([class*="text-accent"]) {
  color: var(--tau-muted);
}

/* ---------- long-form reference pages (29 Oct 2026) ----------
   The shell for a page like /phd-scholarships-in-australia: a reading column
   with a sticky rail. Built as .lf-* rather than inline classes because more
   pages of this shape are coming and they must not drift apart. */
.lf-wrap {
  max-width: 1140px; margin: 0 auto; padding: 0 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) 302px;
  gap: 36px; align-items: start;
}
.lf-main { min-width: 0; }

.lf-side { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 14px; }
.lf-card {
  background: #fff; border: 1px solid var(--tau-line); border-radius: 12px;
  padding: 15px 17px;
}
.lf-card-h {
  margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; color: var(--tau-muted);
}

/* On this page: a numbered list, because order is the point */
.lf-toc ol { margin: 0; padding: 0 0 0 2px; list-style: none; counter-reset: lf; }
.lf-toc li { counter-increment: lf; display: flex; gap: 9px; padding: 4px 0; }
.lf-toc li::before {
  content: counter(lf); flex: 0 0 auto; width: 17px;
  font-size: 11px; font-weight: 700; color: var(--tau-accent);
  font-variant-numeric: tabular-nums; line-height: 20px;
}
.lf-toc a { font-size: 13.5px; line-height: 20px; color: var(--tau-body); text-decoration: none; }
.lf-toc a:hover { color: var(--tau-brand); text-decoration: underline; }

.lf-facts { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.lf-facts dt { font-size: 12px; color: var(--tau-muted); }
.lf-facts dd {
  margin: 1px 0 0; font-family: var(--font-display); font-size: 19px; font-weight: 700;
  color: var(--tau-ink); font-variant-numeric: tabular-nums; line-height: 1.15;
}

.lf-related { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.lf-related a { font-size: 13.5px; line-height: 19px; }

/* Section rhythm: an h2 in a 3,000-word page needs to be findable while
   scrolling, which a size bump alone does not achieve. */
.lf-main h2 {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--tau-line);
  font-size: 25px; line-height: 1.2;
}
.lf-main > section:first-of-type h2 { margin-top: 28px; }
.lf-main h3 { margin-top: 26px; font-size: 18.5px; }
.lf-main h4 { margin-top: 16px; }
.lf-main p + ul, .lf-main p + ol { margin-top: 10px; }
.lf-main :target { scroll-margin-top: 90px; }

/* The comparison table becomes cards on a phone: a four-column table in a
   375px viewport is a horizontal scroll nobody performs. */
@media (max-width: 760px) {
  .lf-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lf-table, .lf-table tbody, .lf-table tr, .lf-table td { display: block; width: 100%; }
  .lf-table tr {
    border: 1px solid var(--tau-line); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 10px; background: #fff;
  }
  .lf-table td { border: 0; padding: 3px 0; display: flex; gap: 10px; font-size: 13.5px; }
  .lf-table td::before {
    content: attr(data-label); flex: 0 0 88px;
    font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--tau-muted); line-height: 19px;
  }
  .lf-table td:first-child { display: block; margin-bottom: 4px; }
  .lf-table td:first-child::before { display: none; }
}

@media (max-width: 991px) {
  .lf-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lf-side { position: static; }
  .lf-toc { display: none; }   /* the article is right there; the list is not help */
}

/* ---------- brighter pass (29 Oct 2026) ----------
   The page ground is white now, so the lift has to come from where the colour
   sits, not from a darker field behind it. Verified on white: brand 5.54:1,
   body 12.40:1, muted 6.75:1, accent 3.95:1 (used only on display figures). */
:root { --tau-ok: #0b7a5c; --tau-ok-tint: #e8f7f1; --tau-shadow: 0 1px 2px rgba(23,99,214,.06), 0 8px 24px rgba(16,42,86,.06); }

body { background: #fff; }

/* Cards lose the grey outline and gain a soft, blue-cast lift. A hairline on a
   white page draws a box; a shadow lets the card sit on it. */
.lf-card, .results-grid, .rounded-xl.border.border-line, .lf-table {
  border-color: var(--tau-line);
  box-shadow: var(--tau-shadow);
}

/* Tinted bands instead of a tinted page: the eye gets rhythm without the whole
   screen going grey. */
.lf-main > section:nth-of-type(even) {
  background: linear-gradient(180deg, var(--tau-tint) 0, #fff 420px);
  border-radius: 14px;
  padding: 2px 20px 22px;
  margin-inline: -20px;
}

/* Headings: h1 keeps Newsreader for the editorial note, h2 and h3 move to the
   sans at 700 so they read crisp rather than literary at smaller sizes. */
.lf-main h2, .lf-main h3 {
  font-family: var(--font-body); font-weight: 700; letter-spacing: -.3px;
  color: var(--tau-ink);
}
.lf-main h2 { border-top-color: var(--tau-tint-2); }

/* Links carry the bright blue and underline on hover only, so a paragraph of
   prose is not a field of rules. */
.prose-content a:not(.lf-btn), .lf-main p a:not(.lf-btn) { color: var(--tau-brand); text-decoration: none; }
.prose-content a:not(.lf-btn):hover, .lf-main p a:not(.lf-btn):hover { text-decoration: underline; }

/* Chips and badges brighten with the palette. */
.bg-brand-50 { background: var(--tau-tint) !important; }
.text-brand-700, .text-brand-600 { color: var(--tau-brand) !important; }
.bg-paper-dark { background: #f3f6fb !important; }

/* The sidebar is the one place that keeps a tint, so the rail reads as a rail. */
.lf-side .lf-card { background: #fff; }
.lf-side .lf-card:first-child { background: var(--tau-tint); border-color: var(--tau-tint-2); }

/* A figure is the brightest thing on the page and must stay legible: the amber
   is only ever used at display sizes, never on 12px labels. */
.tau-num, .lf-facts dd { color: var(--tau-accent); }
.lf-facts dt { color: var(--tau-muted); }

/* Something upstream sets list-style-type:none on every ul, so Tailwind's
   .list-disc rendered as plain indented lines with no markers at all. Rather
   than fight that with !important on a property that is already being reset,
   the markers are drawn: amber dots, which also suit the brighter palette. */
.lf-main ul.list-disc, .prose-content ul { list-style: none; padding-left: 0; }
.lf-main ul.list-disc > li, .prose-content ul > li {
  position: relative; padding-left: 22px; margin-bottom: 6px;
}
.lf-main ul.list-disc > li::before, .prose-content ul > li::before {
  content: ''; position: absolute; left: 5px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tau-accent);
}
.lf-main ol.list-decimal { list-style: none; padding-left: 0; counter-reset: lfo; }
.lf-main ol.list-decimal > li {
  position: relative; padding-left: 26px; margin-bottom: 6px; counter-increment: lfo;
}
.lf-main ol.list-decimal > li::before {
  content: counter(lfo) '.'; position: absolute; left: 2px; top: 0;
  font-weight: 700; color: var(--tau-accent); font-variant-numeric: tabular-nums;
}

/* ---------- listicle pass (29 Oct 2026) ----------
   Ported from the pattern the owner pointed at, scholarshipsrank.com, measured
   rather than guessed: DM Sans throughout, body 16px, paragraphs 17px/26px,
   text #29294b (a deep indigo, not grey), white ground, a violet link.

   Their link is #7873ff, which is 3.69:1 on white and fails AA for body text.
   #5b52e8 holds the same look at 5.50:1, so that is what ships. */
/* SCOPED, not :root. These tokens were written for one long-form page and,
   declared globally, they repainted the whole site: the header gradient reads
   --tau-brand, so the navigation band went violet, and every component designed
   against the navy palette drifted with it. They now reach only the long-form
   wrapper, where custom properties inherit to everything inside it. */
.lf-wrap {
  --tau-ink: #29294b;
  --tau-body: #29294b;
  --tau-muted: #5f5f80;
  --tau-brand: #5b52e8;
  --tau-brand-d: #4a41cc;
  --tau-tint: #f1f0fe;
  --tau-tint-2: #ddd9fb;
  --tau-line: #e7e6f3;
  --tau-line-soft: #f2f1fa;
}

/* `body` was in this list too, which changed the body face site-wide. */
.lf-main, .prose-content { font-family: 'DM Sans', var(--font-body); }
.lf-main p, .prose-content p, .lf-main li, .prose-content li {
  font-size: 17px; line-height: 26px; color: var(--tau-body);
}
.lf-main h1, .tau-prog-title {
  font-family: 'DM Sans', var(--font-body);
  font-size: 44px; line-height: 1.12; font-weight: 700; letter-spacing: -1px;
  color: var(--tau-ink);
}
.lf-main h2 {
  font-family: 'DM Sans', var(--font-body);
  font-size: 28px; font-weight: 700; letter-spacing: -.5px;
  margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--tau-line);
}
.lf-main h3 { font-family: 'DM Sans', var(--font-body); font-size: 21px; font-weight: 700; letter-spacing: -.3px; }
.lf-main h4 {
  font-family: 'DM Sans', var(--font-body);
  font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--tau-muted); margin: 18px 0 8px;
}

/* The shortlist: the first thing a reader wants, numbered and scannable. */
.lf-shortlist { list-style: none; padding: 0; margin: 0; counter-reset: sl; }
.lf-shortlist li {
  counter-increment: sl; position: relative;
  padding: 14px 16px 14px 54px; margin-bottom: 8px;
  background: #fff; border: 1px solid var(--tau-line); border-radius: 12px;
}
.lf-shortlist li::before {
  content: counter(sl); position: absolute; left: 14px; top: 13px;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--tau-tint); color: var(--tau-brand-d);
  font-size: 13px; font-weight: 700; line-height: 26px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.lf-shortlist li > a { font-size: 16.5px; font-weight: 700; color: var(--tau-brand); text-decoration: none; }
.lf-shortlist li > a:hover { text-decoration: underline; }
.lf-tag { display: block; font-size: 14.5px; line-height: 21px; color: var(--tau-body); margin-top: 2px; }
.lf-where { display: block; font-size: 13px; color: var(--tau-muted); margin-top: 3px; }

/* Each award as its own card, numbered to match the shortlist. */
.lf-item {
  background: #fff; border: 1px solid var(--tau-line); border-radius: 16px;
  padding: 22px 24px; margin-top: 18px;
  box-shadow: 0 1px 2px rgba(41,41,75,.04), 0 10px 30px rgba(41,41,75,.05);
}
.lf-item h3 { display: flex; align-items: center; gap: 12px; margin: 0; }
.lf-rank {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  background: var(--tau-brand); color: #fff;
  font-size: 15px; font-weight: 700; line-height: 34px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.lf-item-where { margin: 9px 0 0; font-size: 14px; color: var(--tau-muted); }
.lf-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%;
          background: var(--tau-tint-2); margin: 0 9px 2px; vertical-align: middle; }
.lf-item ul { margin: 0; }
.lf-item-links { margin: 18px 0 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lf-btn {
  display: inline-block; background: var(--tau-brand); color: #fff;
  font-size: 14.5px; font-weight: 700; padding: 10px 18px; border-radius: 10px;
  text-decoration: none;
}
.lf-btn:hover { background: var(--tau-brand-d); color: #fff; }
.lf-link-plain { font-size: 14px; color: var(--tau-muted); text-decoration: underline; }

/* Markers follow the violet now, not the amber. */
.lf-main ul.list-disc > li::before, .prose-content ul > li::before { background: var(--tau-brand); }

/* The figures in the rail keep the one warm colour, so numbers still stand out
   against a page that is otherwise indigo and violet. */
.lf-facts dd, .tau-num { color: var(--tau-accent); }

@media (max-width: 760px) {
  .lf-main h1, .tau-prog-title { font-size: 32px; letter-spacing: -.6px; }
  .lf-main h2 { font-size: 24px; }
  .lf-item { padding: 18px 16px; border-radius: 14px; }
}

/* The button label must win against the prose link colour: `.lf-main p a` is
   (0,1,2) and `.lf-btn` was (0,1,0), so white was repainted violet and the
   label vanished into its own background. Scoped, not forced with !important. */
.lf-main .lf-btn, .lf-main p a.lf-btn { color: #fff; text-decoration: none; }
.lf-main .lf-btn:hover, .lf-main p a.lf-btn:hover { color: #fff; background: var(--tau-brand-d); }

/* ---------- home page: blocks, carousels and a table (29 Oct 2026) ----------
   Ported from the shape of scholarshipsads.com's home page, which alternates
   two devices: dense BLOCKS of facet links that carry the internal linking, and
   CAROUSELS of cards that carry the browsing, separated by tinted bands.

   What is not ported: their faces. That site runs Gotham, which is licensed to
   it and is not ours to serve, so the type here stays Newsreader and DM Sans —
   the pair already approved on this site. Their colour and chrome are theirs
   too; every colour below is this site's own token. */

/* A dense grid of facet links, each carrying its live count. This is the block
   that does the internal-linking work. */
.tau-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
  gap: 8px;
}
.tau-block {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 11px 14px; background: #fff;
  border: 1px solid var(--tau-line); border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--tau-ink); text-decoration: none;
  transition: border-color .15s, background .15s;
}
.tau-block:hover { border-color: var(--tau-brand); background: var(--tau-tint); color: var(--tau-brand-d); }
.tau-block i {
  font-style: normal; font-size: 12.5px; font-weight: 700;
  color: var(--tau-accent); font-variant-numeric: tabular-nums;
}

/* A tinted band, so the page reads as separate sections rather than one scroll. */
.tau-strip { background: var(--tau-tint); padding: 30px 0 38px; margin-top: 38px; }
.tau-strip .tau-sec { padding-top: 0; }

/* Carousel. Scroll-snap and two buttons — no library, and it still works with
   the keyboard and with JavaScript off, because it is just a scrolling list. */
.tau-caro-wrap { position: relative; }
.tau-caro {
  display: flex; gap: 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 2px 14px; scrollbar-width: none;
}
.tau-caro::-webkit-scrollbar { display: none; }
.tau-caro > * { scroll-snap-align: start; flex: 0 0 268px; }
.tau-caro-btn {
  position: absolute; top: 36%; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--tau-line); background: #fff; color: var(--tau-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; cursor: pointer; z-index: 2;
  box-shadow: 0 2px 10px rgba(41, 41, 75, .13);
}
.tau-caro-btn:hover { border-color: var(--tau-brand); color: var(--tau-brand); }
.tau-caro-btn[hidden] { display: none; }
.tau-caro-prev { left: -14px; }
.tau-caro-next { right: -14px; }

/* The three card faces used inside carousels. */
.tau-ucard, .tau-acard, .tau-gcard {
  display: flex; flex-direction: column; gap: 7px;
  padding: 16px; background: #fff; text-decoration: none;
  border: 1px solid var(--tau-line); border-radius: 14px;
}
.tau-ucard:hover, .tau-acard:hover, .tau-gcard:hover { border-color: var(--tau-brand); }
.tau-ucard-logo {
  width: 46px; height: 46px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--tau-line); display: flex; align-items: center; justify-content: center;
  background: #fff; flex: 0 0 auto;
}
.tau-ucard-t, .tau-acard-t, .tau-gcard-t {
  font-family: var(--font-display); font-size: 16.5px; font-weight: 700;
  line-height: 1.25; color: var(--tau-ink);
}
.tau-ucard-m, .tau-acard-m, .tau-gcard-m { font-size: 12.5px; color: var(--tau-muted); }
.tau-ucard-f { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--tau-muted); }
.tau-ucard-f b { font-family: var(--font-display); font-size: 17px; color: var(--tau-accent); font-variant-numeric: tabular-nums; }
.tau-acard-tag {
  align-self: flex-start; font-size: 11.5px; font-weight: 700; padding: 3px 9px;
  border-radius: 5px; background: var(--tau-tint); color: var(--tau-brand-d);
}
.tau-gcard-x { font-size: 13px; line-height: 19px; color: var(--tau-body, var(--tau-ink)); }

/* The fee table. This is the one thing on this site that no competing listicle
   publishes, so it gets a table of its own rather than a sentence. */
.tau-table-wrap {
  overflow-x: auto; background: #fff;
  border: 1px solid var(--tau-line); border-radius: 14px;
}
.tau-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.tau-table th, .tau-table td { padding: 11px 15px; text-align: left; border-bottom: 1px solid var(--tau-line); }
.tau-table thead th {
  font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--tau-muted); background: var(--tau-tint); border-bottom: 0;
}
.tau-table tbody tr:last-child td { border-bottom: 0; }
.tau-table tbody tr:hover { background: var(--tau-tint); }
.tau-table td.n {
  text-align: right; white-space: nowrap; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--tau-accent);
}
.tau-table td.c { text-align: right; font-variant-numeric: tabular-nums; color: var(--tau-muted); }
.tau-table a { color: var(--tau-brand); font-weight: 600; text-decoration: none; }
.tau-table a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .tau-blocks { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
  .tau-block { padding: 10px 12px; font-size: 13.5px; }
  .tau-caro > * { flex: 0 0 236px; }
  .tau-caro-btn { display: none; }
  .tau-strip { padding: 24px 0 30px; margin-top: 30px; }
}

/* ---------- theme repair pass (29 Oct 2026) ----------
   Four faults, all of them mine from the same day, plus the dullness the owner
   has been pointing at since the de-dull pass.

   1. The home page's band class collided with .tau-band on <header>, so the
      navigation band went pale and its white links sat at 1.13:1. Renamed to
      .tau-strip at the source; nothing to undo here.
   2. The long-form page's palette was declared on :root and repainted the whole
      site. Scoped to .lf-wrap; the navy palette is the site's again.
   3. The logo tagline read as a seventh navigation link and duplicated the real
      "Study in Australia" item six positions to its right.
   4. Section headings sat at 20px against 17px content, so nothing announced a
      section; cards had no depth; and the accent was on so many numbers at once
      that it stopped being an accent. */

/* --- 3. the tagline is a label, not a link --- */
.tau-tagline {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .56);
  padding-left: 16px;
  margin-left: -6px;
  border-left: 1px solid rgba(255, 255, 255, .18);
}
/* "Australia" in solid white was the part that read as a link. */
.tau-tagline b { color: rgba(255, 255, 255, .78); font-weight: 600; }

/* --- 4a. a section heading should announce a section --- */
.tau-sec-head h2, .tau-h2 {
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.tau-sec-head { align-items: baseline; margin-bottom: 18px; }
.tau-sec { padding-top: 46px; }

/* --- 4b. depth. A hairline on white is not a card; it is a rectangle. --- */
.tau-ucard, .tau-acard, .tau-gcard {
  box-shadow: 0 1px 2px rgba(20, 34, 60, .05), 0 6px 18px rgba(20, 34, 60, .05);
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.tau-ucard:hover, .tau-acard:hover, .tau-gcard:hover {
  box-shadow: 0 2px 4px rgba(20, 34, 60, .07), 0 14px 32px rgba(20, 34, 60, .10);
  transform: translateY(-2px);
}
.tau-block:hover { box-shadow: 0 2px 10px rgba(20, 34, 60, .07); }

/* The carousel cards were bottom-heavy with dead space under the fee. */
.tau-caro > * { flex: 0 0 258px; }
.tau-ucard { gap: 5px; padding: 15px 16px 16px; }
.tau-ucard-f { padding-top: 10px; border-top: 1px solid var(--tau-line-soft); }
.tau-ucard-f b { display: block; font-size: 16px; line-height: 20px; }
.tau-acard { gap: 6px; min-height: 148px; }
.tau-acard-t { font-size: 15.5px; }

/* --- 4c. accent discipline. Ochre marks ONE number, not a whole table. --- */
.tau-table td.n { color: var(--tau-body); font-weight: 600; }
.tau-table td.n.is-key { color: var(--tau-accent-ink); font-weight: 700; }
.tau-table thead th { color: var(--tau-muted); }
.tau-table th[scope="row"] a { color: var(--tau-brand-dd); }
.tau-table th[scope="row"] a:hover { color: var(--tau-brand); }
.tau-table tbody tr:hover { background: var(--tau-tint); }

/* The counts beside a facet are supporting figures, not the headline. */
.tau-block i { color: var(--tau-muted); font-weight: 600; }
.tau-block:hover i { color: var(--tau-accent-ink); }

/* --- the tinted strip: cooler and shallower, so bands separate without shouting --- */
.tau-strip { background: var(--tau-line-soft); padding: 2px 0 42px; margin-top: 46px; }
.tau-strip .tau-sec { padding-top: 40px; }

/* `footer.ft a` (0,1,1) paints every footer link grey, which also caught the
   solid CTA sitting in the footer: grey label on a blue button, 2.71:1. Beaten
   on specificity rather than with !important, the way the rest of this file
   resolves these. */
footer.ft a.tau-btn,
footer.ft .tau-btn { color: #fff; }
footer.ft a.tau-btn-ghost,
footer.ft .tau-btn-ghost { color: var(--tau-brand); }

/* Tailwind's accent-500 is #d99311. White on it is 2.58:1, which fails AA for
   the hero search button and everywhere else the pair is used. The site's own
   --tau-accent-ink (#a85f00) is the same hue at 5.43:1, so the pair is darkened
   rather than the label being greyed. Only the white-on-accent combination is
   touched; accent-500 behind dark text is left alone. */
.bg-accent-500.text-white,
button.bg-accent-500.text-white { background-color: var(--tau-accent-ink); }
.bg-accent-500.text-white:hover,
button.bg-accent-500.text-white:hover { background-color: #8d5000; }

/* ---------- the facet blocks get the display face (29 Oct 2026) ----------
   The subject grid is the first real content on the home page and it was set
   in the body sans at 14px, which read as a list of links rather than as an
   index. Newsreader is the face already approved for this site, and at this
   size it gives the block the editorial weight the owner asked for.

   Applied to all three grids — subjects, degree levels, states — because they
   are one component; setting only subjects in serif would look like a mistake. */
.tau-block {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.3;
  padding: 12px 15px;
}
/* The count stays in the sans: tabular figures are what a number wants, and it
   keeps the name as the thing being read. */
.tau-block i {
  font-family: var(--font-body);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* The gold "Star rating" chip: #a98d4f on its own 10% tint is 3.18:1 and fails
   AA for 11px text. Darkened to the same hue at 5.9:1. */
.text-gold-700, [class*="text-gold-700"] { color: #6b561c; }

/* The chip actually carries text-gold-500 (#a98d4f), which on its own 10% tint
   is 3.18:1. Tailwind v4 defines it in a layer, so it is matched by attribute
   here rather than by class, and the hue is kept while the value is darkened. */
[class~="text-gold-500"] { color: #6b561c; }

/* ---------- subject tiles (29 Oct 2026) ----------
   Built to the reference the owner sent: no card borders, just hairline rules
   forming a grid, a line icon over the name, and on hover a soft tinted panel
   with rounded corners that sits over the rules while the label turns brand
   blue. A centred "View all" closes the block.

   The count is gone from the tile on purpose — the reference has none, and a
   figure beside every name is what made the old pills read as a table. The
   counts still live on the pages these link to. */
.tau-tilewrap { overflow: hidden; }
.tau-tilegrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--tau-line-soft);
  margin-bottom: -1px;          /* clipped by .tau-tilewrap: kills the last row's rule */
}
.tau-subjtile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 152px;
  padding: 30px 16px 28px;
  text-align: center;
  text-decoration: none;
  color: var(--tau-ink);
  border-right: 1px solid var(--tau-line-soft);
  border-bottom: 1px solid var(--tau-line-soft);
  border-radius: 14px;
  transition: background .16s ease, box-shadow .16s ease, color .16s ease, border-color .16s ease;
}
.tau-tilegrid > .tau-subjtile:nth-child(4n) { border-right-color: transparent; }

.tau-subj-icon { width: 34px; height: 34px; color: var(--tau-brand); flex: none; }
.tau-subjtile b {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* The hovered tile lifts off the grid: its own rules go transparent so the
   rounded panel is not cut by them. */
.tau-subjtile:hover,
.tau-subjtile:focus-visible {
  background: var(--tau-tint);
  border-color: transparent;
  color: var(--tau-brand);
  box-shadow: 0 1px 2px rgba(20, 34, 60, .05), 0 12px 30px rgba(20, 34, 60, .10);
  outline: none;
}
.tau-subjtile:focus-visible { box-shadow: 0 0 0 2px var(--tau-brand); }

.tau-viewall {
  display: block;
  margin: 26px auto 0;
  width: fit-content;
  font-size: 15px;
  font-weight: 600;
  color: var(--tau-brand);
  text-decoration: none;
}
.tau-viewall:hover { color: var(--tau-brand-d); text-decoration: underline; }

@media (max-width: 1000px) {
  .tau-tilegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tau-tilegrid > .tau-subjtile:nth-child(4n) { border-right-color: var(--tau-line-soft); }
  .tau-tilegrid > .tau-subjtile:nth-child(3n) { border-right-color: transparent; }
}
@media (max-width: 640px) {
  .tau-tilegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tau-tilegrid > .tau-subjtile:nth-child(3n),
  .tau-tilegrid > .tau-subjtile:nth-child(4n) { border-right-color: var(--tau-line-soft); }
  .tau-tilegrid > .tau-subjtile:nth-child(2n) { border-right-color: transparent; }
  .tau-subjtile { min-height: 126px; padding: 22px 10px 20px; gap: 11px; }
  .tau-subj-icon { width: 28px; height: 28px; }
  .tau-subjtile b { font-size: 15px; }
}

/* ---------- degree levels as a carousel (29 Oct 2026) ----------
   Nine levels in a grid wrapped onto two ragged rows. In one scrolling row they
   read as a single scale and the band stays one line deep. */
.tau-caro--tight > * { flex: 0 0 206px; }
.tau-lvlcard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 86px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--tau-line);
  border-radius: 12px;
  text-decoration: none;
  color: var(--tau-ink);
  box-shadow: 0 1px 2px rgba(20, 34, 60, .04);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, color .16s ease;
}
.tau-lvlcard b {
  font-family: var(--font-display);
  font-size: 16.5px;
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -.01em;
}
.tau-lvlcard i {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tau-muted);
  font-variant-numeric: tabular-nums;
}
.tau-lvlcard:hover {
  border-color: var(--tau-brand);
  color: var(--tau-brand);
  box-shadow: 0 2px 4px rgba(20, 34, 60, .07), 0 12px 28px rgba(20, 34, 60, .09);
  transform: translateY(-2px);
}
.tau-lvlcard:hover i { color: var(--tau-brand-d); }

@media (max-width: 640px) {
  .tau-caro--tight > * { flex: 0 0 176px; }
  .tau-lvlcard { min-height: 76px; padding: 13px 15px; }
  .tau-lvlcard b { font-size: 15px; }
}

/* The fee on a university card is 16px bold, so AA wants 4.5 and --tau-accent
   (#c2690a) gives 3.95 on white. The ink variant is the same hue at 5.43. */
.tau-ucard-f b { color: var(--tau-accent-ink); }