/* The theme is one inversion: the display shader flips the ink field and
   these flip the chrome on top of it, so both move together. The rgb triples
   are bare so they can be passed to rgba(). */
:root {
  --paper: #f7f6f2;
  --ink: #0b0c0e;

  --sheet: 255, 255, 255;
  --fg: 20, 22, 26;
  --fg-solid: #14161a;
  --avatar-border: rgba(10, 10, 10, 0.9);
  --avatar-bg: #fff;

  /* How much of the ink the cover lets through. */
  --veil: 0.88;
}

html.preload-inverted,
html.preload-inverted body,
body.inverted {
  --paper: #08090d;
  --ink: #f4f3ef;

  --sheet: 16, 17, 21;
  --fg: 236, 238, 242;
  --fg-solid: #eceef2;
  --avatar-border: rgba(240, 240, 240, 0.85);
  --avatar-bg: #000;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  font-family: "Helvetica Neue", "Inter", system-ui, sans-serif;
  font-weight: 300;
  background: var(--paper);
  color: var(--fg-solid);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* Canvas and cover are both fixed, so the page scrolls over a still
   background rather than dragging the simulation up with it. */
#inkCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(var(--sheet), var(--veil));
}

.page {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 96px 32px 140px;
}

/* ------------------------------------------------------------------ */
/* masthead                                                            */
/* ------------------------------------------------------------------ */

.masthead {
  margin-bottom: 96px;
}

/* Drag handle: pull it a little to invert the page, then it springs home.
   The transition animates the return, so it is suppressed while the pointer
   is down and the element tracks the finger directly. */
.reference {
  display: inline-block;
  margin-bottom: 30px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 460ms cubic-bezier(0.22, 1.2, 0.36, 1);
}

.reference:active,
.reference.is-dragging {
  cursor: grabbing;
}

.reference.is-dragging {
  transition: none;
}

.reference:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
  border-radius: 50%;
}

.reference img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  width: 72px;
  height: 72px;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  border: 2px solid var(--avatar-border);
  background: var(--avatar-bg);
}

h1 {
  margin: 0 0 12px;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 200;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.tagline {
  margin: 0 0 26px;
  max-width: 44ch;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--fg), 0.68);
}

.contact {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
}

.contact a {
  color: rgba(var(--fg), 0.72);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--fg), 0.22);
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}

.contact a:hover {
  color: var(--fg-solid);
  border-bottom-color: rgba(var(--fg), 0.6);
}

/* ------------------------------------------------------------------ */
/* content                                                             */
/* ------------------------------------------------------------------ */

.block {
  margin-bottom: 76px;
}

.block h2 {
  margin: 0 0 34px;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(var(--fg), 0.45);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(var(--fg), 0.14);
}

.entry {
  margin-bottom: 46px;
}

.entry:last-child {
  margin-bottom: 0;
}

/* Title and dates share a line on wide screens and stack on narrow ones. */
.entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 20px;
  margin-bottom: 4px;
}

.entry h3 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.when {
  margin: 0;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: rgba(var(--fg), 0.45);
  white-space: nowrap;
}

.where {
  margin: 0 0 16px;
  font-size: 0.93rem;
  color: rgba(var(--fg), 0.6);
}

.sub {
  margin: 20px 0 10px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(var(--fg), 0.5);
}

.entry ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry li {
  position: relative;
  margin-bottom: 11px;
  padding-left: 20px;
  font-size: 0.97rem;
  line-height: 1.62;
  color: rgba(var(--fg), 0.82);
}

.entry li:last-child {
  margin-bottom: 0;
}

.entry li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 8px;
  height: 1px;
  background: rgba(var(--fg), 0.38);
}

.skills {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 14px 24px;
  margin: 0;
}

.skills dt {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(var(--fg), 0.5);
}

.skills dd {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: rgba(var(--fg), 0.82);
}

.prose {
  margin: 0;
  max-width: 60ch;
  font-size: 0.97rem;
  line-height: 1.68;
  color: rgba(var(--fg), 0.82);
}

.colophon {
  padding-top: 30px;
  border-top: 1px solid rgba(var(--fg), 0.12);
}

.colophon p {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(var(--fg), 0.4);
}

/* ------------------------------------------------------------------ */
/* chat                                                                */
/* ------------------------------------------------------------------ */

.chat-launcher {
  position: fixed;
  right: 26px;
  bottom: 24px;
  z-index: 3;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: rgba(var(--fg), 0.7);
  background: rgba(var(--sheet), 0.86);
  border: 1px solid rgba(var(--fg), 0.18);
  border-radius: 999px;
  padding: 11px 20px;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

.chat-launcher:hover {
  color: var(--fg-solid);
  border-color: rgba(var(--fg), 0.45);
}

.panel {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.panel[hidden] {
  display: none;
}

.panel-inner {
  position: relative;
  width: min(680px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 72px 44px 32px;
  background: rgba(var(--sheet), 0.96);
  border-left: 1px solid rgba(var(--fg), 0.12);
  border-right: 1px solid rgba(var(--fg), 0.12);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.16);
  color: var(--fg-solid);
  animation: panelIn 240ms ease-out;
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.panel-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 21px;
  line-height: 1;
  font-weight: 300;
  color: rgba(var(--fg), 0.5);
  background: none;
  border: 0;
  cursor: pointer;
}

.panel-close:hover {
  color: rgba(var(--fg), 0.9);
}

.chat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex: none;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(var(--fg), 0.12);
}

.chat-head h2 {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(var(--fg), 0.45);
}

.chat-sound {
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: rgba(var(--fg), 0.45);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.chat-sound:hover {
  color: rgba(var(--fg), 0.85);
}

.chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: 24px 0 18px;
}

.chat-msg {
  margin: 0 0 18px;
  max-width: 52ch;
  font-size: 0.97rem;
  line-height: 1.62;
  white-space: pre-wrap;
}

.chat-msg--user {
  margin-left: auto;
  text-align: right;
  color: rgba(var(--fg), 0.5);
}

.chat-msg--assistant {
  color: rgba(var(--fg), 0.88);
}

.chat-msg.is-error {
  color: rgba(var(--fg), 0.5);
  font-style: italic;
}

.chat-msg.is-thinking::after {
  content: "...";
  letter-spacing: 0.2em;
  animation: chatThinking 1.2s steps(4, end) infinite;
}

@keyframes chatThinking {
  0%   { opacity: 0.25; }
  50%  { opacity: 0.8; }
  100% { opacity: 0.25; }
}

.chat-composer {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid rgba(var(--fg), 0.14);
  padding-top: 16px;
}

.chat-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.97rem;
  color: var(--fg-solid);
  background: none;
  border: 0;
  padding: 6px 0;
}

.chat-input::placeholder {
  color: rgba(var(--fg), 0.35);
}

.chat-input:focus {
  outline: none;
}

.chat-send {
  flex: none;
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: rgba(var(--fg), 0.6);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
}

.chat-send:hover {
  color: var(--fg-solid);
}

/* ------------------------------------------------------------------ */
/* responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 760px) {
  .page {
    padding: 64px 22px 120px;
  }

  .masthead {
    margin-bottom: 68px;
  }

  .block {
    margin-bottom: 58px;
  }

  .skills {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }

  .skills dd {
    margin-bottom: 14px;
  }

  .panel-inner {
    width: 100%;
    padding: 66px 22px 24px;
  }

  .chat-launcher {
    right: 16px;
    bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reference,
  .panel-inner {
    transition: none;
    animation: none;
  }
}