/* Reference canvas: 1600 × 900. Two columns, native text, no dependencies. */
* { box-sizing: border-box; }
body {
  max-width: 1600px;
  margin: auto;
  padding: 52px 44px 40px 74px;
  display: grid;
  grid-template-columns: 376px minmax(0, 1fr);
  gap: 26px;
  background: white;
  color: black;
  font: 21px/1.28 "Calibri Light", Calibri, "Segoe UI", sans-serif;
}
p, h1, h2 { margin: 0; }
main, main section, .degree > * { min-width: 0; overflow-wrap: anywhere; }
h1, h2 { font-size: 1em; font-weight: 700; }
a { color: #0070c0; text-underline-offset: 4px; }
a:focus-visible { outline: 2px solid #0070c0; outline-offset: 3px; }

/* Sidebar. The crop matches the PowerPoint picture's source rectangle. */
aside { border-right: 2px solid black; padding: 30px 55px 0 0; }
.portrait { position: relative; overflow: hidden; width: 205px; height: 266px; margin: 0 0 26px 59px; border: 1px solid black; }
.portrait img { position: absolute; width: 122.646%; height: 112.634%; max-width: none; left: -9.983%; top: 0; }
h1 { width: 250px; margin-left: 37px; padding-bottom: 0; text-align: center; white-space: nowrap; }
h1 span { font-family: STKaiti, KaiTi, serif; font-weight: 400; }
.name { width: 250px; margin-left: 37px; padding: 9px 0; text-align: center; border-bottom: 2px solid; font-weight: 700; }
small { font-size: .85em; }
.current {
  position: relative;
  margin: 32px 0 0 8px;
  border: 1px solid #78ad48;
  padding: 30px 11px 35px;
  color: #617d51;
  font-size: 1em;
  line-height: 1.23;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}
.current::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 28px;
  height: 28px;
  background: #dce5d7;
  border-top: 1px solid #78ad48;
  border-left: 1px solid #78ad48;
  transform: skew(-14deg, -14deg);
  transform-origin: bottom left;
}
.current a { color: #2e5592; }
.contact { margin: 40px 0 0 4px; font-size: 17.25px; line-height: 1.23; }

/* Main content. */
main { padding-top: 17px; min-width: 0; }
.hello, .intro { padding-left: 5px; }
.intro { font-size: 1em; }
.motivation { margin-top: 16px; border: 2px solid; padding: 5px 11px 7px; }
.definition { font-size: 17.25px; line-height: 1.22; }
ul { list-style: none; margin: 0; padding-left: 60px; font-size: 1em; line-height: 1.23; }
li::before { content: "* "; }
.outside { margin: 33px 5px 15px; font-size: 1em; line-height: 1.23; }
.education, .research { padding: 20px 5px 0; }
.degree { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; }
.education { margin-top: 24px; padding-bottom: 25px; }
.research { padding-top: 12px; }
footer { margin-top: 42px; font-size: 15px; }

/* Preserve proportions on smaller desktop screens; allow text to flow. */
@media (min-width: 901px) and (max-width: 1450px) {
  body { padding: 36px; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; }
  aside { padding: 40px 28px 0 0; }
  .portrait { margin-left: 23px; }
  h1, .name { width: 240px; margin-left: 0; }
  .degree { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
@media (max-width: 900px) {
  body { display: block; padding: 24px; font-size: 20px; }
  aside { border: 0; padding: 0; max-width: 340px; margin: auto auto 32px; }
  .portrait { margin: 0 auto 20px; }
  h1, .name { width: fit-content; min-width: 250px; margin: auto; text-align: center; }
  .current, .intro, .outside, ul { font-size: 1em; }
  .contact, .definition { font-size: 18px; overflow-wrap: anywhere; }
  .contact { margin-top: 24px; }
  main { padding: 0; }
  ul { padding-left: 20px; }
  .degree { display: block; }
  .desktop-break { display: none; }
}

/* Native project accordion: no JavaScript; Enter/Space toggles each item. */
details { margin-top: 18px; border-bottom: 1px solid #bbb; padding-bottom: 14px; }
summary { cursor: pointer; font-size: 1em; }
summary span { font-weight: 700; }
summary time { display: block; margin-left: 22px; color: #555; font-size: .85em; }
summary:focus-visible { outline: 2px solid #0070c0; outline-offset: 4px; }
.project { margin: 12px 0 0 22px; font-size: 1em; }
.project p { margin-bottom: 6px; }
.project ul { list-style: disc; padding-left: 22px; font-size: 1em; line-height: 1.4; }
.project li { margin-top: 6px; }
.project li::before { content: none; }
.status { margin-left: 10px; }

/* Desktop: each column scrolls independently within the viewport. */
@media (min-width: 901px) {
  body {
    --right-gutter: max(44px, calc((100vw - 1600px) / 2 + 44px));
    height: 100dvh;
    overflow: hidden;
  }
  /* Extend the scroll surface to the window edge, keeping the content inset. */
  main {
    margin-right: calc(-1 * var(--right-gutter));
    padding-right: var(--right-gutter);
  }
  aside, main { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
  aside { scrollbar-width: thin; }
}

@media (min-width: 901px) and (max-width: 1450px) {
  body { --right-gutter: 36px; }
}

/* Reference uses italic questions and smaller explanatory text. */
.motivation ul { font-size: 17.25px; font-style: italic; }