@font-face {
  font-family: Geist;
  src: url('./assets/geist-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Geist;
  src: url('./assets/geist-italic-variable.woff2') format('woff2');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: light;
  --background: #fff;
  --text: #2a2a2a;
  --muted: #8d8d8d;
  --accent: #ff25b5;
  --border: #e9eaeb;
  --column-width: 27.5rem;
  --section-gap: clamp(1rem, 5.77dvh, 3rem);
  font-family: Geist, Arial, sans-serif;
  color: var(--text);
  background: var(--background);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}
* { box-sizing: border-box; }
html { height: 100%; overflow: hidden; }
body { margin: 0; height: 100dvh; overflow: hidden; font-size: .875rem; line-height: 1.5; }
p, h1, h2, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: underline; text-underline-position: from-font; text-decoration-skip-ink: none; }
a[href] { transition: color 140ms ease; }
a[href]:hover { color: #bc147f; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
::selection { background: #ffe0f4; color: var(--text); }
.page { width: min(var(--column-width), calc(100% - 3rem)); height: 100dvh; margin-inline: auto; padding-top: max(env(safe-area-inset-top), clamp(1rem, 9.62dvh, 5rem)); padding-bottom: max(env(safe-area-inset-bottom), clamp(1rem, 4.8dvh, 2.5rem)); display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(.75rem, 3dvh, 2rem); }
.content-viewport { min-height: 0; min-width: 0; }
.portfolio { width: 100%; display: flex; flex-direction: column; gap: var(--section-gap); transform: scale(var(--content-scale, 1)); transform-origin: top center; }
.introduction { display: flex; flex-direction: column; gap: .5rem; }
.profile { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(.5rem, 1.92dvh, 1rem); }
.badges { display: flex; flex-wrap: wrap; }
.badges li { padding: 4px 8px; border: 1px solid var(--border); border-radius: 100px; line-height: 1rem; box-shadow: 0 1px 2px #0000000d; }
.bio-tagline { font-size: 12px; font-style: italic; opacity: .5; }
.bio { display: grid; gap: clamp(.5rem, 1.92dvh, 1rem); }
.bio strong, .bio a { font-weight: 500; }
.bio a { text-decoration: none; white-space: nowrap; }
h2 { font-size: inherit; font-weight: 500; line-height: 1.125rem; color: var(--muted); }
.writings { display: grid; gap: .375rem; }
.writing-list { display: grid; gap: .375rem; }
.writing-list li { min-height: 34px; display: flex; align-items: center; line-height: 1.5rem; }
.book-row { gap: 1rem; }
.book-row > a { flex: 0 1 306px; }
.book-label { position: relative; display: grid; place-items: center; flex: 0 0 42.62px; height: 20.5px; color: var(--accent); font-size: .625rem; line-height: 1rem; font-style: italic; }
.book-label img { position: absolute; left: -.5px; top: -.5074px; }
.book-label span { position: relative; }
.elsewhere { display: grid; gap: .75rem; }
.social-links { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.social-links a { display: inline-block; padding-block: 4px; line-height: 1rem; }
.site-footer { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; font-size: .625rem; line-height: 1rem; color: var(--muted); }
footer em { color: var(--accent); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 520px) {
  body { font-size: .875rem; line-height: 1.5; }
  .page { width: calc(100% - 2rem); padding-top: max(env(safe-area-inset-top), 2.5rem); padding-bottom: max(env(safe-area-inset-bottom), 1rem); }
  .portfolio { gap: 3rem; }
  .profile { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .badges { font-size: .75rem; }
  .badges li { border: 0; padding: 4px 8px; box-shadow: inset 0 0 0 1px var(--border), 0 1px 2px #0000000d; }
  .bio { gap: 1rem; }
  .writing-list { gap: .375rem; grid-auto-rows: minmax(34px, auto); }
  .writing-list li { min-height: 0; line-height: 1.5rem; }
  .book-row { gap: 19px; margin-left: -2px; }
  .book-row > a { flex: 0 1 296px; }
  .social-links a { min-height: 24px; }
  .elsewhere { gap: .75rem; }
  .site-footer { flex-wrap: wrap; font-size: .625rem; line-height: 1rem; }
}
@media (max-width: 359px) {
  .writing-list { grid-auto-rows: minmax(34px, auto); }
  .book-row { gap: .75rem; margin-left: 0; }
  .book-row > a { flex: 1; }
}
@media (max-width: 520px) and (max-height: 700px) {
  .page { padding-top: max(env(safe-area-inset-top), 1.5rem); }
  .portfolio { gap: 1.5rem; }
  .profile, .bio { gap: .75rem; }
}
@media (min-width: 600px) and (max-height: 500px) {
  .page { --column-width: 47.5rem; padding-block: max(env(safe-area-inset-top), 1rem) max(env(safe-area-inset-bottom), 1rem); }
  .portfolio { display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 2rem; row-gap: 1rem; align-items: start; }
  .introduction { grid-row: span 2; }
  .profile { flex-direction: row; align-items: center; gap: .75rem; }
  .badges { font-size: .6875rem; }
  .badges li { padding-inline: 6px; }
  .book-row > a { flex: 1; }
  .writing-list li { line-height: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { a[href] { transition: none; } }