/* Fonts are self-hosted on purpose: no requests to Google or any other third party. */
@font-face { font-family: "Lato"; src: url("fonts/lato-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/lato-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/lato-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/lato-bolditalic.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }

/* Layout: the look of the original Google Site. A centred title, then three columns:
   photo and bio | publications | working papers, work in progress, sleeping dogs lying.
   Colours and sizes are taken from that site. */
:root {
  --paper: #ffffff;
  --ink: #222222;
  --title: #3d85c6;
  --heading: #226e93;
  --link: #006580;
  --flag: #ff0000;
  --muted: #6b6b6b;
  --rule: #c9ccd1;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 14.67px;
  line-height: 1.65;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

a { color: var(--link); text-decoration: underline; text-underline-offset: 0.12em; }
a:hover { color: var(--title); }
a:focus-visible { outline: 2px solid var(--title); outline-offset: 2px; border-radius: 2px; }

.site { max-width: 940px; margin: 0 auto; padding-block: 56px 72px; }

.name {
  margin: 0 0 56px;
  text-align: center;
  font-weight: 700;
  font-size: 60px;
  line-height: 1.1;
  color: var(--title);
  text-wrap: balance;
}

.columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  align-items: start;
}
.col { min-width: 0; }
.col > section + section,
.col > details + section,
.col > section + details { margin-top: 36px; }

/* Left column */
.portrait { display: block; width: 100%; height: auto; aspect-ratio: 600 / 797; object-fit: cover; }
.bio { margin: 24px 6px 0; text-align: justify; line-height: 2; hyphens: auto; }
.contact { margin: 28px 0 0; text-align: center; font-weight: 700; }

/* Section headings */
h2 {
  margin: 0 0 16px;
  text-align: center;
  font-weight: 400;
  font-size: 25.33px;
  line-height: 1.4;
  color: var(--heading);
}

/* Paper lists */
.papers { margin: 0; padding-left: 22px; list-style: square; }
.papers > li + li { margin-top: 10px; }
.papers ul { margin: 4px 0 0; padding-left: 18px; list-style: square; }
.t { font-weight: 700; }
.wip .t { text-decoration: underline; text-underline-offset: 0.12em; }
.j { font-weight: 700; font-style: italic; }
.flag { color: var(--flag); }

/* Sleeping dogs lying: folded by default; the dog wakes up when the section opens */
.fold > summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  border-radius: 3px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:focus-visible { outline: 2px solid var(--title); outline-offset: 4px; }
.fold > summary h2 { margin-bottom: 2px; }
.fold[open] > summary { margin-bottom: 14px; }
.hint { display: block; margin-top: 2px; font-size: 12.5px; font-style: italic; color: var(--muted); }
.fold[open] .hint { display: none; }

.dog { display: block; margin: 0 auto; width: 108px; height: auto; color: var(--ink); overflow: visible; }
.dog .line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dog .ground { fill: none; stroke: var(--rule); stroke-width: 1.2; stroke-linecap: round; }
.dog .dot { fill: currentColor; }
.dog .z path { fill: none; stroke: var(--heading); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dog .eye-open { display: none; }
.fold[open] .dog .eye-open { display: inline; }
.fold[open] .dog .eye-shut,
.fold[open] .dog .z { display: none; }
.fold > summary:hover .dog { color: var(--heading); }

@media (prefers-reduced-motion: no-preference) {
  .dog .z path { animation: drift 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .dog .z path:nth-child(2) { animation-delay: 1.2s; }
  .dog .z path:nth-child(3) { animation-delay: 2.4s; }
}
@keyframes drift {
  0% { opacity: 0; transform: translate(0, 3px); }
  25%, 70% { opacity: 1; }
  100% { opacity: 0; transform: translate(2px, -5px); }
}

/* Tablets and phones: one column. The column wrappers dissolve so the sections can be
   reordered: photo and bio, working papers, publications, work in progress, sleeping dogs. */
@media (max-width: 820px) {
  .site { padding-block: 40px 56px; }
  .name { font-size: 46px; margin-bottom: 36px; }
  .columns { display: flex; flex-direction: column; gap: 44px; }
  .col:not(.about) { display: contents; }
  .col > section + section,
  .col > details + section,
  .col > section + details { margin-top: 0; }
  .about { width: 100%; max-width: 420px; margin-inline: auto; order: 0; }
  .wps { order: 1; }
  .pubs { order: 2; }
  .wip { order: 3; }
  .fold { order: 4; }
}
@media (max-width: 420px) {
  .name { font-size: 38px; }
}

@media print {
  .fold > summary .dog, .hint { display: none; }
  a { text-decoration: none; }
}