@font-face{font-family:Barlow;src:url('assets/fonts/Barlow-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/fonts/Barlow-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/fonts/Barlow-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}

:root {
  color-scheme: light;
  --paper: #d8d8d8;
  --ink: #161919;
  --muted: #555b5b;
  --accent: #0cf0cf;
  --font: 'Barlow', Arial, sans-serif;
  --title-size: clamp(20px, 6vw, 30px);
  --text-size: calc(var(--title-size) * .618);
  --space: calc(var(--text-size) / 2);
  --page-gutter: clamp(16px, 4vw, 56px);
  --page-width: 1280px;
  --control-size: 44px;
  --radius: 8px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--text-size)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.visually-hidden, .skip { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip:focus { position: fixed; z-index: 10; top: var(--page-gutter); left: var(--page-gutter); width: auto; height: auto; clip: auto; background: var(--accent); padding: var(--space) calc(2 * var(--space)); }

/* One page frame owns the horizontal inset of the header and body. */
.page-shell { width: 100%; max-width: calc(var(--page-width) + 2 * var(--page-gutter)); margin-inline: auto; padding: calc(3 * var(--space)) var(--page-gutter) calc(6 * var(--space)); }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--space)); }
.identity h1 { display: flex; align-items: center; gap: calc(2 * var(--space)); margin: 0; font-size: var(--title-size); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; }
.identity h1 span { display: block; font-size: var(--text-size); font-weight: 500; line-height: 1.2; letter-spacing: .035em; white-space: nowrap; }
.download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: .5em;
  min-height: var(--control-size);
  padding: .5em 1em;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: #102421;
  font: 700 var(--text-size)/1.2 var(--font);
  text-align: right;
  text-decoration: none;
  white-space: nowrap;
}
.download svg { width: 1em; height: 1em; flex: none; }
.download:hover { background: #16e6cb; }
.download-area { margin-top: calc(3 * var(--space)); }
.download-body { max-width: 100%; white-space: normal; }
/* Reserve the lower button's space so visibility changes never move the page. */
.header-download-visible .download-body { visibility: hidden; }

.content-layout { display: grid; gap: calc(4 * var(--space)); margin-top: var(--space); }
.carousel { position: relative; min-width: 0; outline-offset: 0; }
.stage { position: relative; height: min(calc(100svh - 12 * var(--text-size)), 62vw, 760px); min-height: 120px; overflow: hidden; background: var(--paper); touch-action: pan-y pinch-zoom; }
.slides { position: relative; width: 100%; height: 100%; background: var(--paper); isolation: isolate; }
.slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; min-width: 0; height: 100%; overflow: hidden; background: var(--paper); opacity: 0; visibility: hidden; pointer-events: none; }
.slide.is-current { opacity: 1; visibility: visible; z-index: 1; }
.slide.is-entering { opacity: 1; visibility: visible; z-index: 2; }
.slide img {
  display: block;
  flex: none;
  height: 100%;
  width: auto;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
}
.tap-zone { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; border: 0; padding: 0; background: transparent; cursor: pointer; touch-action: pan-y pinch-zoom; }
.tap-zone.previous { left: 0; }
.tap-zone.next { right: 0; }
.tap-zone:focus-visible { outline-offset: -4px; }
.carousel-controls, .pagination { display: flex; justify-content: center; align-items: center; height: var(--control-size); }
.carousel-controls { gap: var(--space); }
.rotation { display: grid; place-items: center; width: var(--control-size); height: var(--control-size); flex: none; border: 0; padding: var(--space); background: transparent; border-radius: 50%; cursor: pointer; }
.rotation svg { width: 1em; height: 1em; }
.rotation:hover { background: #ffffff45; }
.rotation .play-icon { display: none; }
.rotation.is-paused .pause-icon { display: none; }
.rotation.is-paused .play-icon { display: block; }
.dot { display: grid; place-items: center; width: 24px; height: var(--control-size); padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 2px; }
.dot::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #707777; transition: transform .25s, background .25s; }
.dot[aria-current=true]::after { transform: scale(1.8); background: var(--ink); }

.about { width: 100%; min-width: 0; }
.description { margin: 0; letter-spacing: -.012em; }
.contact { margin-top: calc(4 * var(--space)); color: var(--muted); }
.contact p { margin: 0; }
.contact > p { font-weight: 700; color: var(--ink); }
.contact-toggle, .copy-email { min-height: var(--control-size); padding: var(--space) 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.contact-details { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space) calc(2 * var(--space)); margin-top: var(--space); }
.contact-details[hidden] { display: none; }
.email-link { text-underline-offset: 4px; overflow-wrap: anywhere; }
.contact-status { flex-basis: 100%; }
.contact-status:empty { display: none; }

@media (max-width: 900px) {
  .identity h1 { flex-direction: column; align-items: flex-start; gap: var(--space); }
}
@media (max-width: 700px) {
  .download-header .manuscript-word { display: block; }
  .stage { height: min(calc(100svh - 12 * var(--text-size)), 90vw); margin-inline: calc(-1 * var(--page-gutter)); }
  .carousel-controls { margin-inline: calc(-1 * var(--page-gutter)); }
}
/* The text column needs 18 text ems before it can sit beside the book. */
@media (min-width: 1024px) {
  .page-shell { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding-block: calc(3 * var(--space)); }
  .masthead { justify-content: center; }
  .download-header { display: none; }
  .download-area { text-align: center; }
  .download-body, .header-download-visible .download-body { visibility: visible; }
  .content-layout { grid-template-columns: minmax(0, 1.8fr) minmax(18em, 1fr); align-items: center; gap: calc(6 * var(--space)); }
  .stage { height: auto; aspect-ratio: 4 / 3; max-height: calc(100svh - 12 * var(--text-size)); }
  .slide img { width: 100%; height: 100%; object-fit: contain; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}