/* ==========================================================================
   AISE Winter School 2027 — stylesheet
   Modernist: one ink on warm grey, a single signal red, 2px rules, Archivo
   throughout. Edit the tokens below to reskin the whole site.
   ========================================================================== */

:root {
  --paper:   #F3F2F2;
  --paper-2: #EAE9E9;
  --ink:     #201E1D;
  --ink-2:   #2D2B2B;
  --grey-1:  #444141;
  --grey-2:  #605D5D;
  --grey-3:  #7D7979;
  --grey-4:  #9B9797;
  --rule:    #D7D3D3;

  --accent:       #EC3013;
  --accent-hover: #DD2B0F;
  --accent-deep:  #AE1800;
  --accent-soft:  #FF9783;
  --accent-pale:  #FFE0D9;

  --sans: "Archivo", system-ui, Helvetica, Arial, sans-serif;

  --wrap: 1240px;
  --gutter: 32px;
  --line: 2px solid var(--ink);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Long unbroken strings — email addresses, URLs — wrap instead of pushing
     the page wider than a phone. */
  overflow-wrap: break-word;
}

a { color: var(--ink); }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: #FFC4B8; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 10px 14px;
  font: 600 13px/1 var(--sans); text-decoration: none;
}
.skip:focus { top: 8px; color: var(--paper); }

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

/* ------------------------------------------------------------------ type */

.eyebrow {
  font: 500 11px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey-4);
}

.h2 {
  font: 800 clamp(24px, 2.6vw, 32px)/1.05 var(--sans);
  letter-spacing: -.025em;
}

.h2--spaced { margin-bottom: 32px; }

.note { font: 400 15.5px/1.6 var(--sans); color: var(--grey-2); max-width: 60ch; }

.num { font: 700 13px/1 var(--sans); color: var(--accent); }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  text-decoration: none;
  font: 600 14px/1 var(--sans);
  padding: 15px 22px;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--accent);
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

.btn--line { background: transparent; border-color: var(--paper); color: var(--paper); }
.btn--line:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.btn--ink { background: var(--ink); border-color: var(--ink); font-weight: 700; padding: 16px 22px; }
.btn--ink:hover { background: #000; border-color: #000; }

/* ------------------------------------------------------------------- nav */

.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: var(--line);
}

.nav__inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.nav__mark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav__word { font: 800 17px/1 var(--sans); letter-spacing: -.02em; }

/* The AISE logo is a 5400 x 2400 lockup: a head mark plus four lines of
   wordmark and an "AISE 2026" line under the mark. At nav height the wordmark
   would be unreadable, so this window shows only the head mark — measured from
   the file as the blue pixels in (166,170)-(1315,2003), 1149 x 1833. */
.nav__logo {
  --mark-h: 36px;
  display: block; flex: none; overflow: hidden;
  height: var(--mark-h);
  width: calc(var(--mark-h) * 1149 / 1833);
}
.nav__logo img {
  display: block;
  height: calc(var(--mark-h) * 2400 / 1833);
  width: auto; max-width: none;
  margin-left: calc(var(--mark-h) * -166 / 1833);
  margin-top: calc(var(--mark-h) * -170 / 1833);
}

.nav__menu { display: flex; flex-wrap: wrap; gap: 22px; font: 500 13px/1 var(--sans); }
.nav__menu a { text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.nav__menu a.is-active { border-bottom-color: var(--accent); }

/* Desktop has the Register button; the collapsed menu needs its own link. */
.nav__menu-register { display: none; }

.nav__cta { font-size: 13px; padding: 11px 18px; border-width: 0; }

.nav__toggle {
  display: none;
  font: 600 13px/1 var(--sans);
  background: none; border: var(--line); color: var(--ink);
  padding: 9px 12px; cursor: pointer;
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border-bottom: var(--line);
  overflow: hidden;
}

.hero__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

.hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(32,30,29,.94) 0%, rgba(32,30,29,.88) 55%, rgba(32,30,29,.72) 100%);
}

.hero__inner { position: relative; padding-top: 112px; }

.hero__kicker {
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-soft);
}

.hero__title {
  margin-top: 26px;
  font: 800 clamp(40px, 6.4vw, 86px)/.98 var(--sans);
  letter-spacing: -.035em;
  max-width: 16ch;
}

.hero__sub {
  margin-top: 22px; max-width: 58ch;
  font: 400 clamp(16px, 1.5vw, 19px)/1.55 var(--sans);
  color: var(--rule);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 56px; }

.facts {
  position: relative;
  border-top: 2px solid var(--grey-2);
  background: rgba(32,30,29,.72);
}

.facts__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.facts__grid > div { padding: 22px 24px; border-right: 2px solid var(--grey-2); }
.facts__grid > div:first-child { padding-left: 0; }
.facts__grid > div:last-child { padding-right: 0; border-right: 0; }
.facts__value { margin-top: 9px; font: 700 18px/1.2 var(--sans); }

/* ------------------------------------------------------------- sections */

.band { border-bottom: var(--line); }
.band--tint { background: var(--paper-2); }
.band__inner { padding-block: 64px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 48px;
}

.band__head { margin-bottom: 36px; }

.band__row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 32px;
}

.tag {
  font: 500 12px/1 var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--grey-2);
}

/* ---------------------------------------------------------------- ledger */

.ledger {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 0 28px;
  font: 400 15px/1.6 var(--sans);
  border-bottom: var(--line);
}

.ledger dt, .ledger dd { padding: 16px 0; border-top: 1px solid var(--rule); }
.ledger dt { font-weight: 600; }
.ledger dt:first-of-type, .ledger dd:first-of-type { border-top: var(--line); }
.ledger .sub { color: var(--grey-2); }
.ledger a { color: var(--accent-deep); }

/* ------------------------------------------------------ previous editions */

.editions { border-bottom: var(--line); }

.edition {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px 28px;
  padding: 18px 0;
  border-top: var(--line);
  font: 400 15px/1.6 var(--sans);
}
.edition + .edition { border-top-width: 1px; border-top-color: var(--rule); }
.edition__name { font-weight: 700; }
.edition__meta { color: var(--ink-2); }
.edition__meta .sub { color: var(--grey-2); }
.edition__link a { font-weight: 600; color: var(--accent-deep); white-space: nowrap; }

/* -------------------------------------------------------------- sponsors */

.sponsors__inner { padding-block: 48px; align-items: center; }

.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
  gap: 16px;
}

.logos a {
  border: var(--line);
  background: #fff;
  height: 110px;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 12px;
}

.logos img { width: 100%; height: 100%; object-fit: contain; }

/* The Monash file is 300×300 with the mark in a 274×81 band at (13, 109). */
.logo-crop { display: block; width: 100%; aspect-ratio: 274 / 81; overflow: hidden; }
.logos .logo-crop img {
  width: calc(100% * 300 / 274); height: auto; max-width: none;
  margin-left: calc(-100% * 13 / 274);
  margin-top: calc(-100% * 109 / 274);
}

/* ----------------------------------------------------------------- about */

.prose {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 34px;
  font: 400 15.5px/1.65 var(--sans);
  color: var(--ink-2);
}
.prose p + p { margin-top: 18px; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 24px;
}
.cards--about { margin-top: 44px; }
.cards--topics { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

.card { border: var(--line); background: var(--paper); padding: 24px; }
.card h3 { margin-top: 14px; font: 700 17px/1.25 var(--sans); }
.card p { margin-top: 8px; font: 400 14px/1.6 var(--sans); color: var(--grey-2); }

.card--topic { padding: 28px 24px; }
.card--topic h3 { margin: 16px 0 14px; font-size: 19px; line-height: 1.2; }
.card--topic ul { display: flex; flex-direction: column; gap: 7px; font: 400 14px/1.5 var(--sans); color: var(--grey-1); }
.card--topic li { padding-top: 7px; border-top: 1px solid var(--rule); }

/* ---------------------------------------------------------- rule items */

.items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 28px 36px;
}
.items--campus { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 26px 32px; align-content: start; }

.item { border-top: var(--line); padding-top: 14px; }
.item h3 { font: 700 16px/1.25 var(--sans); }
.item p { margin-top: 7px; font: 400 14px/1.6 var(--sans); color: var(--grey-2); }

/* ---------------------------------------------------------------- people */

.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 32px 24px;
}

.portrait {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  background: var(--rule);
}
.person h3 { margin-top: 12px; font: 700 15px/1.25 var(--sans); }
.person p { margin-top: 3px; font: 400 13px/1.4 var(--sans); color: var(--grey-2); }

/* ---------------------------------------------------------------- campus */

.campus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; margin-top: 32px; }

.map__frame {
  aspect-ratio: 4 / 3;
  border: var(--line);
  background: var(--rule);
}
.map__frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1); }
.map figcaption { margin-top: 12px; font: 400 13.5px/1.55 var(--sans); color: var(--grey-2); }
.map figcaption a { color: var(--accent-deep); }

/* ---------------------------------------------------------- registration */

.register { background: var(--accent); color: #fff; }

.register__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 40px;
  align-items: end;
}

.register__kicker {
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-pale);
}

.register h2 {
  margin-top: 20px; max-width: 18ch;
  font: 800 clamp(30px, 4vw, 52px)/1.02 var(--sans);
  letter-spacing: -.03em;
}

.register p { margin-bottom: 24px; max-width: 46ch; font: 400 16px/1.6 var(--sans); }
.register a:not(.btn) { color: #fff; }

/* ---------------------------------------------------------------- footer */

.foot { background: var(--ink); color: var(--rule); }

.foot__inner {
  padding-top: 52px; padding-bottom: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 32px;
}

.foot__mark { font: 800 20px/1 var(--sans); letter-spacing: -.02em; color: var(--paper); }
.foot p:not(.eyebrow):not(.foot__mark) { margin-top: 10px; font: 400 14px/1.6 var(--sans); }
.foot a { color: var(--paper); }

.foot__base {
  padding-top: 18px; padding-bottom: 40px;
  border-top: 1px solid var(--grey-1);
  display: flex; justify-content: space-between; gap: 16px;
  font: 400 12.5px/1 var(--sans); color: var(--grey-4);
}
.foot__base a { color: var(--grey-4); text-decoration: none; }
.foot__base a:hover { color: var(--paper); }

/* Anchor targets stop below the sticky nav instead of sliding under it. The nav
   is about 70px tall; the extra leaves the heading a little air. */
[id] { scroll-margin-top: 88px; }

/* ---------------------------------------------------------------- reveal */

.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 960px) {
  .nav__toggle { display: block; }
  .nav__cta { display: none; }
  .nav__inner { flex-wrap: wrap; }
  .nav__menu {
    display: none;
    width: 100%;
    flex-direction: column; gap: 0;
    font-size: 15px;
    border-top: 1px solid var(--rule);
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu a { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .nav__menu a.is-active { border-bottom-color: var(--rule); color: var(--accent-deep); }
  .nav__menu-register { display: block; font-weight: 700; color: var(--accent-deep); }

  .split, .campus { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  /* Four facts across stop fitting well before phone width — below here they
     become a fixed 2 x 2 rather than letting the grid orphan one onto a row. */
  .facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts__grid > div,
  .facts__grid > div:first-child,
  .facts__grid > div:last-child { padding: 18px 0; border-right: 0; }
  .facts__grid > div:nth-child(odd) { padding-right: 16px; border-right: 2px solid var(--grey-2); }
  .facts__grid > div:nth-child(even) { padding-left: 16px; }
  .facts__grid > div:nth-child(-n+2) { border-bottom: 2px solid var(--grey-2); }

  .hero__inner { padding-top: 88px; }
}

@media (max-width: 720px) {
  :root { --gutter: 16px; }

  .hero__inner { padding-top: 64px; }
  .hero__cta { margin-bottom: 44px; }
  .band__inner { padding-block: 48px; }
  .sponsors__inner { padding-block: 40px; }

  .facts__value { font-size: 16px; }

  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .logos a { height: 88px; }

  .cards--about { margin-top: 32px; }
  .card, .card--topic { padding: 20px; }

  .map__frame { aspect-ratio: 1 / 1; }

  .ledger { grid-template-columns: minmax(0, 1fr); }
  .ledger dt { padding-bottom: 2px; }
  .ledger dd { border-top: 0; padding-top: 0; }
  .ledger dd:first-of-type { border-top: 0; }

  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }

  .edition { grid-template-columns: minmax(0, 1fr); gap: 6px; }

  .register__inner { gap: 24px; }

  .foot__base { flex-direction: column; gap: 12px; }
}

/* Small phones: stack the hero buttons and the registration button full
   width so every tap target spans the screen. */
@media (max-width: 420px) {
  .nav__word { font-size: 15px; }
  .nav__logo { --mark-h: 30px; }

  .hero__cta { flex-direction: column; }
  .hero__cta .btn, .register .btn { display: block; width: 100%; text-align: center; }

  .facts__grid > div:nth-child(odd) { padding-right: 12px; }
  .facts__grid > div:nth-child(even) { padding-left: 12px; }
  .facts__value { font-size: 15px; }

  .people { gap: 20px 12px; }
  .person h3 { font-size: 14px; }
}