/*
  jstedman.com, adapted from Jon Barron's website:
  https://github.com/jonbarron/jonbarron.github.io
*/

/* Lato, self-hosted (SIL Open Font License 1.1, see fonts/OFL.txt).
   Each style is split into latin + latin-ext subsets; browsers only fetch what the page uses. */
@font-face {
  font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/lato-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/lato-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/lato-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/lato-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/lato-400i-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/lato-400i-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lato"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("fonts/lato-700i-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("fonts/lato-700i-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Colours: light palette first, dark palette (screens only, so printing stays light) below ---- */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #1a1a1a;
  --muted: #5f6368;
  --link: #1772d0;        /* Barron blue */
  --link-hover: #ac610c;  /* Barron's #f09228 orange, darkened to pass WCAG AA on white */
  --highlight: #ffffd0;   /* Barron's pale-yellow highlighted paper */
  /* teaser illustration */
  --card: #ffffff;
  --card-edge: rgba(0, 0, 0, 0.08);
  --apple: #d8443c;
  --stem: #7a5230;
  --leaf: #4c9a52;
  --bowl: #e4eaf1;
  --bowl-edge: #6d7f94;
}
@media screen and (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --text: #efefef;
    --muted: #a3a3a3;
    --link: #3a8adc;
    --link-hover: #f09228;
    --highlight: #1f1e0d;
    --card: #181818;
    --card-edge: rgba(255, 255, 255, 0.09);
    --apple: #e8605a;
    --stem: #b58a62;
    --leaf: #6dbb72;
    --bowl: #2f3846;
    --bowl-edge: #93a4b8;
  }
}

/* ---- Base ---- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  padding: 0 16px;
  background: var(--bg);
  color: var(--text);
  /* rem sizes: identical to Barron's px at default settings, but follow the reader's browser font size */
  font: 0.9375rem/1.55 "Lato", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
}
main,
footer {
  max-width: 800px;
  margin: 0 auto;
}
p {
  text-wrap: pretty;
}
a {
  color: var(--link);
  text-decoration: none;
}
a:hover,
a:focus-visible {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}
:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 2px;
}
strong {
  font-weight: 700;
}
h2 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.3;
}

/* ---- Intro: name, bio and links on the left; photo on the right ---- */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 63fr) minmax(0, 37fr);
  column-gap: 5%;
  align-items: center;
  padding: 0 16px;
}
.name {
  margin: 0;
  padding-top: 20px;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}
.links {
  text-align: center;
}
.photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  margin-block: 20px;  /* keeps the photo off the window edge if the bio gets shorter */
}

/* ---- Research + papers ---- */
.research {
  padding: 16px;
}
.research p {
  margin: 0.6em 0 0;
}
.paper {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  column-gap: 24px;
  align-items: center;
  margin: 10px 0;
  padding: 16px;
}
.paper.highlight {
  background: var(--highlight);
}
.paper-text {
  line-height: 1.45;
}
.papertitle {
  margin: 0;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
}
.paper-text > a,
.paper-text > strong {
  white-space: nowrap;  /* keep each author's name on one line */
}
.paper-text p {
  margin: 0.8em 0 0;
  line-height: 1.55;
}

/* Teaser: "every apple is in a bowl". Hovering the paper moves the apples
   from one scope reading to the other (Barron's hover-swap, in SVG). */
.teaser svg,
.teaser img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.teaser img {
  aspect-ratio: 1;
  object-fit: cover;
}
.teaser svg {
  overflow: visible;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--card-edge);
}
.teaser:focus {
  outline: none;  /* focusable only by tap/click (tabindex="-1"), never by keyboard */
}
.scope text {
  fill: var(--muted);
  font-size: 11px;
  text-anchor: middle;
}
.scope .scope-sentence {
  font-size: 11.5px;
  font-style: italic;
}
.apple circle { fill: var(--apple); }
.apple .shine { fill: #fff; opacity: 0.35; }
.apple .leaf  { fill: var(--leaf); }
.apple .stem  {
  fill: none;
  stroke: var(--stem);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.bowl {
  fill: var(--bowl);
  stroke: var(--bowl-edge);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.apple {
  transition: transform 0.7s cubic-bezier(0.45, 0, 0.2, 1);
}
.a1 { transform: translate(44px, 98px); }
.a2 { transform: translate(104px, 98px); transition-delay: 0.06s; }
.a3 { transform: translate(128px, 98px); transition-delay: 0.12s; }
.paper:hover .a1, .paper:focus-within .a1 { transform: translate(32px, 98px); }
.paper:hover .a2, .paper:focus-within .a2 { transform: translate(56px, 98px); }
.paper:hover .a3, .paper:focus-within .a3 { transform: translate(44px, 77px); }
/* captions: the old one fades out before the new one fades in */
.scope-reading {
  transition: opacity 0.18s ease;
}
.scope .surface {
  transition-delay: 0.18s;
}
.scope .inverse,
.paper:hover .surface,
.paper:focus-within .surface {
  opacity: 0;
  transition-delay: 0s;
}
.paper:hover .inverse,
.paper:focus-within .inverse {
  opacity: 1;
  transition-delay: 0.18s;
}
@media (prefers-reduced-motion: reduce) {
  .apple,
  .scope-reading {
    transition: none;
  }
}

/* ---- Footer ---- */
footer {
  padding: 24px 0 40px;
  color: var(--muted);
  font-size: 0.8125rem;
  text-align: right;
}
footer a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 2px;
}

/* ---- Small screens (640px at default text size): photo above the bio, teaser above the paper ---- */
@media (max-width: 40em) {
  body {
    font-size: 1rem;
  }
  .intro {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }
  .photo {
    order: -1;
    width: min(200px, 55vw);
    margin: 28px auto 0;
  }
  .name {
    padding-top: 12px;
  }
  .links {
    line-height: 2.2;
  }
  .links a {
    padding: 8px 6px;  /* bigger tap targets, same look */
    margin: 0 -6px;
  }
  .research {
    padding: 16px 0;
  }
  .paper {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    margin-inline: -16px;  /* band runs edge to edge; its padding puts the text back on the page gutter */
  }
  .teaser {
    width: 180px;
    margin: 0 auto;
  }
}

/* ---- Print: light palette, black links, URLs after paper links ---- */
@page {
  margin: 15mm;
}
@media print {
  body {
    padding: 0;
    font-size: 10.5pt;
  }
  a {
    color: #000;
  }
  .intro,
  .paper {
    break-inside: avoid;
  }
  .paper.highlight {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .paper-links a[href^="http"]::after {
    content: " <" attr(href) ">";
    font-size: 8.5pt;
    word-break: break-all;
  }
  footer {
    display: none;
  }
}