/* ==========================================================================
   Responsive layer for the personal homepage.
   Layout / presentation only — no page content is altered.
   ========================================================================== */

:root {
  --page-max: 928px;   /* original fixed table width, now a max-width */
  --gutter: 16px;
}

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

html {
  /* keep iOS from auto-inflating text in landscape */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0 var(--gutter);
  background: #fff;
  color: #1a1a1a;
  font-family: "Times New Roman", Times, "SimSun", "Songti SC",
               "Noto Serif CJK SC", serif;
  line-height: 1.2;     /* 1.65 -> 1.35 -> 1.2 ; next notch down = 1.1 */
  font-size: 15px;      /* base for text with no inline size: the long
                           publication / student lists — was browser 16px */
}

/* tighter vertical rhythm between blocks */
p,
ol,
ul {
  margin: 0.4em 0;
}

li {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Font scale
   The pages hard-code font sizes inline as pt (style="font-size:14pt"), which
   outranks any plain stylesheet rule — so these overrides need !important.
   Only 7 distinct values exist across the three pages; remap them here.
   SINGLE KNOB: change the right-hand column to go smaller / larger.
   -------------------------------------------------------------------------- */

[style*="font-size:20"], [style*="font-size: 20"] { font-size: 17pt !important; }  /* name  */
[style*="font-size:18"], [style*="font-size: 18"] { font-size: 15pt !important; }  /* name  */
[style*="font-size:16"], [style*="font-size: 16"] { font-size: 14pt !important; }  /* section heads */
[style*="font-size:14"], [style*="font-size: 14"] { font-size: 12pt !important; }  /* body copy */
[style*="font-size:12"], [style*="font-size: 12"] { font-size: 11pt !important; }
[style*="font-size:11"], [style*="font-size: 11"] { font-size: 10pt !important; }
[style*="font-size:10"], [style*="font-size: 10"] { font-size: 9pt  !important; }

/* index.html hard-codes font-family:"Arial" on three spans; inline styles win
   over the body rule, so override them explicitly.
   The Chinese name (潘治文) is deliberately set in KaiTi and is left alone —
   Times New Roman has no CJK glyphs so it would fall back anyway. */
[style*="Arial"] {
  font-family: "Times New Roman", Times, "SimSun", "Songti SC",
               "Noto Serif CJK SC", serif !important;
}

/* EXCEPTION — index.html contact block only:
   "Professor" + Department / Faculty / address / Location / Telephone / E-mail.
   That is the 2nd <p> inside the td[width="539"] name column; it keeps Arial
   while the rest of the site stays in Times New Roman. */
td[width="539"] p:nth-of-type(2),
td[width="539"] p:nth-of-type(2) span,
td[width="539"] p:nth-of-type(2) em {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

/* --------------------------------------------------------------------------
   index.html only — LARGER type

   Scoped with td[width="539"] (name + contact column) and td[colspan="3"]
   (bio + footer rows). Neither attribute appears in research.html or
   teaching.html, so these rules cannot leak into the other pages.
   The two selectors must beat the global pt remap above, hence the extra
   specificity (both use !important, so specificity decides).
   -------------------------------------------------------------------------- */

td[width="539"],
td[colspan="3"] {
  font-size: 16px;   /* text with no inline size — was 15px */
}

td[width="539"] [style*="font-size:20"],
td[width="539"] [style*="font-size: 20"],
td[colspan="3"] [style*="font-size:20"],
td[colspan="3"] [style*="font-size: 20"] { font-size: 19pt !important; }   /* 17 -> 19 */

td[width="539"] [style*="font-size:18"],
td[width="539"] [style*="font-size: 18"],
td[colspan="3"] [style*="font-size:18"],
td[colspan="3"] [style*="font-size: 18"] { font-size: 17pt !important; }   /* 15 -> 17 */

td[width="539"] [style*="font-size:14"],
td[width="539"] [style*="font-size: 14"],
td[colspan="3"] [style*="font-size:14"],
td[colspan="3"] [style*="font-size: 14"] { font-size: 13.5pt !important; } /* 12 -> 13.5 */

td[width="539"] [style*="font-size:10"],
td[width="539"] [style*="font-size: 10"],
td[colspan="3"] [style*="font-size:10"],
td[colspan="3"] [style*="font-size: 10"] { font-size: 10pt !important; }   /*  9 -> 10 */

/* --------------------------------------------------------------------------
   Overflow guards
   -------------------------------------------------------------------------- */

img {
  max-width: 100%;
  height: auto;          /* overrides the hard-coded width/height attributes */
  border: 0;
}

p,
li,
td,
span,
a,
div {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

a {
  overflow-wrap: anywhere;   /* long DOI / scholar URLs must not overflow */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

a > img {
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Page shell: the fixed 928px table becomes a fluid, centred container
   -------------------------------------------------------------------------- */

.CMP,
.CMP > div {
  width: 100%;
  max-width: 100%;
}

table {
  width: 100%;            /* beats the width="928" presentational attribute */
  max-width: var(--page-max);
  margin: 0 auto;
  border-collapse: collapse;
}

hr {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   "Back to Home" button
   -------------------------------------------------------------------------- */

button {
  padding: 4px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
  color: #1a1a1a;
  background: #f2f2f2;
  border: 1px solid #9a9a9a;
  border-radius: 5px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

button:hover {
  background: #e8e8e8;
}

button:active {
  background: #dcdcdc;
}

/* --------------------------------------------------------------------------
   Footer logos — order controlled here

   The images carry align="right" (= float:right). Consecutive right floats
   render in REVERSE source order, so the original page showed  UM | FIC.
   The footer is now a flex row, so the `order` values below decide the
   left-to-right sequence outright. Current setting:  UM | FIC.
   Swap the two numbers to show  FIC | UM  instead.
   -------------------------------------------------------------------------- */

p[align="right"],
p[style*="right"] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* the logo links are only 38px tall — pad them to ~44px for touch */
p[align="right"] a,
p[style*="right"] a {
  display: block;
  float: none;
  padding: 4px 6px;
  margin: 0;
}

/* drop the float so the link box wraps its image properly */
p[align="right"] img[align],
p[style*="right"] img[align] {
  float: none;
  display: block;
  margin: 0;
}

p[align="right"] a:first-of-type,
p[style*="right"] a:first-of-type { order: 2; }   /* FIC logo — right */
p[align="right"] a:last-of-type,
p[style*="right"] a:last-of-type  { order: 1; }   /* UM logo  — left  */

/* --------------------------------------------------------------------------
   Small screens: stack the two-column header, unfloat images, relax justify
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
  body {
    padding: 0 14px;
  }

  table,
  tbody,
  tr,
  td {
    display: block;
    width: 100%;
    height: auto;
  }

  td {
    padding: 0;
  }

  /* the portrait / logos were force-floated with align="right" */
  td img[align="right"],
  td img[align="left"] {
    float: none;
    display: block;
    margin: 12px auto;
  }

  /* footer logos centre themselves when they wrap onto separate rows */
  p[align="right"],
  p[style*="right"] {
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  body {
    padding: 0 12px;
  }

  /* justification produces wide word-rivers at phone widths */
  [style*="justify"] {
    text-align: left !important;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  ol,
  ul {
    padding-left: 1.4em;
  }
}

/* short landscape (phones held sideways) — trim vertical chrome */
@media (max-height: 480px) and (orientation: landscape) {
  body {
    padding: 0 12px;
  }
}