:root {
  --paper: #fffffd;
  --ink: #000;
  --layout-unit: min(1px, calc(100vw / 740), calc(100dvh / 600));
  --sidebar-unit: min(var(--layout-unit), calc(100dvh / 740));
  --content-start: calc(26 * var(--sidebar-unit));
}
* { box-sizing: border-box; }
html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font: 12px/1.6 Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 3px; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid #6c7758; outline-offset: 4px; }
.site-layout {
  display: grid;
  grid-template-columns: calc(330 * var(--layout-unit)) minmax(0, 1fr);
  max-width: 1160px;
  /* Halfway between the compact 600-unit layout and the full viewport. */
  height: min(100dvh, calc(50dvh + 300 * var(--layout-unit)));
  margin: 0 auto;
}
.sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24 * var(--sidebar-unit));
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: calc(26 * var(--sidebar-unit));
}
.sidebar > * { flex-shrink: 0; }
.sidebar header { height: calc(20 * var(--sidebar-unit)); line-height: calc(20 * var(--sidebar-unit)); font-size: calc(12 * var(--sidebar-unit)); }
.wordmark { display: inline; margin: 0; font: calc(16 * var(--sidebar-unit)) Georgia, serif; text-decoration: none; letter-spacing: calc(-.3 * var(--sidebar-unit)); }
.life { min-width: 0; width: max-content; max-width: 100%; margin-top: calc(16 * var(--sidebar-unit)); }
h2 { font: normal calc(10 * var(--sidebar-unit))/1.55 Georgia, serif; letter-spacing: calc(-.4 * var(--sidebar-unit)); margin: 0 0 calc(14 * var(--sidebar-unit)); }
blockquote { margin: 0 0 calc(14 * var(--sidebar-unit)); font: italic calc(10 * var(--sidebar-unit))/1.55 Georgia, serif; }
/* Keep the credit within the poem without changing its width. */
.attribution { contain: inline-size; white-space: normal; font-size: calc(8 * var(--sidebar-unit)); line-height: 1.6; margin: 0; text-align: right; }
.life-diagram { display: flex; flex: 1; align-items: center; margin: 0; width: var(--poem-width, calc(240 * var(--sidebar-unit))); max-width: 100%; }
.sidebar-footer { margin-top: 0; width: var(--poem-width, calc(240 * var(--sidebar-unit))); max-width: 100%; }
.location-note { margin: 0; font-size: calc(8 * var(--sidebar-unit)); line-height: 1.15; }
.location-note p { margin: 0; }
.location-note .other-cities { margin-top: calc(1 * var(--sidebar-unit)); color: #777; }
.circles { position: relative; width: 90%; margin-inline: auto; }
.circles svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.circles g { cursor: pointer; outline: none; }
.ring-track, .ring-progress { filter: var(--ring-smoothing, none); }
.ring-tooltip { position: fixed; z-index: 10; pointer-events: none; padding: 3px 6px; border: 1px solid #d8d8d2; border-radius: 2px; background: var(--paper); color: var(--ink); font: 11px/1.3 Arial, Helvetica, sans-serif; white-space: nowrap; }
.ring-target { transition: stroke .15s; }
.circles g:hover .ring-target,
.circles g:focus-visible .ring-target,
.circles g[aria-pressed="true"] .ring-target { stroke: #000; stroke-opacity: .16; }
.circles g:focus-visible .ring-target { stroke-opacity: .45; stroke-width: 1.3; }
.social-links { display: flex; align-items: center; gap: calc(6 * var(--sidebar-unit)); margin-top: calc(8 * var(--sidebar-unit)); margin-left: calc(-8 * var(--sidebar-unit)); }
.social-links a { color: #b6b6b2; display: grid; place-items: center; width: calc(32 * var(--sidebar-unit)); height: calc(32 * var(--sidebar-unit)); text-decoration: none; }
.social-links svg { display: block; width: calc(15 * var(--sidebar-unit)); height: calc(15 * var(--sidebar-unit)); fill: currentColor; }
.content {
  font-family: Georgia, serif;
  min-width: 0;
  min-height: 0;
  margin-top: var(--content-start);
  height: calc(100% - var(--content-start));
  overflow: visible;
  /* Match the left text's bottom edge above its 32px social row and 8px gap. */
  padding: 0 calc(40 * var(--layout-unit)) calc(66 * var(--sidebar-unit));
}
#about { display: flex; flex-direction: column; height: 100%; }
.profile-intro { display: flex; align-items: center; gap: calc(16 * var(--layout-unit)); flex-shrink: 0; margin-bottom: calc(18 * var(--layout-unit)); }
.bio { flex: 1; min-width: 0; max-width: calc(350 * var(--layout-unit)); margin: 0; font-size: calc(8.5 * var(--layout-unit)); font-style: italic; line-height: 1.25; }
.portrait {
  flex-shrink: 0;
  width: calc(72 * var(--layout-unit));
  height: calc(72 * var(--layout-unit));
  border-radius: 0;
  overflow: hidden;
  margin: 0;
}
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-lists { display: flex; flex: 1; flex-direction: column; justify-content: space-between; font-family: Arial, Helvetica, sans-serif; font-size: calc(10 * var(--layout-unit)); line-height: 1.4; }
.profile-group { flex-shrink: 0; }
.profile-group + .profile-group { margin-top: calc(12 * var(--layout-unit)); }
.profile-group h2 { font: inherit; font-family: Georgia, serif; font-weight: 700; letter-spacing: normal; margin: 0 0 calc(4 * var(--layout-unit)); }
.profile-group p { margin: 0; }
.passion-projects p { line-height: 1.25; }
.passion-projects p + p { margin-top: calc(4 * var(--layout-unit)); }
.profile-list { list-style: none; padding: 0; margin: 0; line-height: 1.35; }
.profile-list li + li { margin-top: 0; }
.profile-list .list-detail { color: #999; }
.writers-list { columns: 2; column-gap: calc(20 * var(--layout-unit)); max-width: calc(280 * var(--layout-unit)); }
.writers-list li { break-inside: avoid; }
@media (max-height: 680px) {
  .profile-list { line-height: 1.2; }
}
@media (max-width: 600px) {
  :root {
    --layout-unit: min(1px, calc(100vw / 740), calc(100svh / 740));
  }
  /* Scale both columns together without stretching the gaps on tall phones. */
  .site-layout { height: calc(740 * var(--layout-unit)); }
  .life { margin-top: calc(32 * var(--sidebar-unit)); }
}
@media (prefers-reduced-motion: reduce) {
  .ring-target { transition: none; }
}