@font-face {
  font-family: "Valley Sans";
  src: url("/fonts/ValleySans-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --page: #1e1e2e;
  --text: #d7d7f0;
  --muted: #9797bf;
  --surface: #14141c;
  --input: #171721;
  --placeholder: #585b70;
  --accent: #a072bd;
  --reading-width: 37.5rem;
  --image-width: 50rem;
}

* { box-sizing: border-box; }
/* Reserve scrollbar space before a long page needs it. */
html { background: var(--page); overflow-y: scroll; }
@supports (scrollbar-gutter: stable) {
  html { overflow-y: auto; scrollbar-gutter: stable; }
}
body {
  margin: 0;
  background: var(--page);
  color: var(--muted);
  font: 400 1rem/normal "Valley Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
h1, h2, h3, p, figure, ul { margin: 0; }
h1, h2, h3, strong { font-size: inherit; font-weight: 700; }
h1, h2, h3 { color: var(--text); }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.sr-only, .skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus { position: fixed; z-index: 10; top: 1rem; left: 1rem; padding: 1rem; background: var(--surface); }
.portfolio-page { display: flex; flex-direction: column; gap: 2.5rem; padding: 8rem 1.5rem; min-height: 100svh; }
.reading { width: min(100%, var(--reading-width)); margin-inline: auto; }
.profile-view { display: flex; flex-direction: column; gap: 2.5rem; overflow-anchor: none; }
.logo-row { padding: .25rem 1rem; }
.home-link { display: block; width: 2.25rem; height: 2.25rem; }
.home-link img { width: 100%; height: 100%; }
.identity { display: flex; flex-direction: column; gap: .25rem; padding: 1rem; }
.introduction { padding: 1rem; line-height: normal; }
.reading-copy { line-height: 1.375; }
.tabs, .actions { display: flex; flex-wrap: wrap; align-items: flex-start; padding: 1rem; }
.tabs a, .button { display: inline-flex; align-items: center; justify-content: center; padding: .5rem 1rem; border: 0; border-radius: 1rem; font-size: .875rem; line-height: normal; }
.tabs a[aria-current="page"], .button { background: var(--surface); color: var(--text); }
.tabs a:hover, .contact-row:hover { color: var(--text); }
.actions { gap: .5rem; }
.button-primary { background: var(--accent); }
.button:disabled { cursor: wait; }
.project-link, .contact-row { border-radius: 1rem; }
.project-link { display: flex; flex-direction: column; gap: .25rem; padding: 1rem; }
.project-link:hover, .project-link:focus-visible, .contact-row:hover, .contact-row:focus-visible { background: var(--surface); }
.project-name { color: var(--text); font-weight: 700; }
.project-platform { color: var(--muted); font-weight: 400; }
/* Reserve the icon's space before hover so text and row geometry stay still. */
.selected-work .project-link { position: relative; padding-inline-end: 4.625rem; min-height: 4.625rem; }
.project-icon { position: absolute; inset-inline-end: 1rem; top: 50%; transform: translateY(-50%); width: 2.625rem; height: 2.625rem; opacity: 0; pointer-events: none; }
.project-link:focus-visible .project-icon { opacity: 1; }
@media (hover: hover) {
  .project-link:hover .project-icon { opacity: 1; }
}
.tool-link { flex-direction: row; align-items: stretch; gap: 0; padding: 0; }
.tool-copy { display: flex; flex: 1; flex-direction: column; gap: .25rem; min-width: 0; padding: 1rem; }
.tool-action { display: flex; flex-shrink: 0; align-items: center; padding-inline: 1rem; font-size: .875rem; white-space: nowrap; }
.section-title { padding: 1rem; color: var(--muted); }
.detail-row { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1rem; }
.detail-row > :first-child { min-width: 0; }
.detail-meta { flex-shrink: 0; font-size: .875rem; white-space: nowrap; }
.education-school { color: var(--muted); font-weight: 400; }
.contact-row .detail-meta { overflow-wrap: anywhere; white-space: normal; }
.copy-section { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; line-height: 1.375; }
.copy-section ul { padding-left: 1.5rem; }
.product-image { width: min(100%, var(--image-width)); margin-inline: auto; border-radius: 1.2827rem; }
/* Size from the bitmap's ratio and round the image itself, using one edge. */
.product-image img, .phone-track img { width: 100%; height: auto; border-radius: inherit; }
.phone-gallery { width: calc(100% + 3rem); margin-inline: -1.5rem; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--surface) transparent; }
.phone-gallery::-webkit-scrollbar { height: .5rem; background: transparent; }
.phone-gallery::-webkit-scrollbar-track, .phone-gallery::-webkit-scrollbar-corner { background: transparent; }
.phone-gallery::-webkit-scrollbar-thumb { background: var(--surface); border-radius: 999px; }
.phone-gallery::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.phone-gallery.is-draggable { cursor: grab; }
.phone-gallery.is-dragging { cursor: grabbing; user-select: none; }
.phone-track { display: flex; gap: 2rem; width: max-content; padding-inline: max(2.5rem, calc((100% - 35.5rem) / 2)); }
.phone-track figure { flex: 0 0 13rem; width: 13rem; border-radius: 1rem; }
.faq-item { display: flex; flex-direction: column; gap: 1rem; }
.support-form { display: flex; flex-direction: column; gap: 2.5rem; }
.support-fields { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; }
.support-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.support-form input, .support-form select, .support-form textarea { width: 100%; min-width: 0; color: var(--text); border: 0; border-radius: .5rem; font-size: .875rem; }
.support-form select { appearance: none; background: var(--surface) url('/images/portfolio-v2/select-chevron.svg') no-repeat right 1rem center / 1rem 1rem; padding: .5rem 2.5rem .5rem 1rem; }
.support-form input, .support-form textarea { background: var(--input); padding: 1rem; }
.support-form textarea { min-height: 7.5rem; resize: vertical; }
.support-form ::placeholder { color: var(--placeholder); opacity: 1; }
.support-status { line-height: 1.375; }
.support-status[data-kind="error"] { color: #f38ba8; }
.utility-links { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 1rem; font-size: .875rem; }
.utility-links a { text-decoration: underline; text-underline-offset: .2em; }
.directory-link { display: block; }
.floating-header { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 2rem; max-width: calc(100% - 2rem); padding: .5rem 1.5rem; border-radius: 3.75rem; background: var(--surface); color: var(--text); box-shadow: 0 0 0 .5px rgb(151 151 191 / 25%); }
.floating-header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.floating-header .home-link { flex-shrink: 0; }
.copy-section a:not(.button) { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 640px) {
  .portfolio-page { padding: 3rem .5rem; }
  .detail-row { align-items: flex-start; }
  .detail-meta { flex-shrink: 1; text-align: right; }
  .contact-row .detail-meta { max-width: 70%; }
  .education-row { flex-direction: column; gap: .25rem; }
  .phone-gallery { width: calc(100% + 1rem); margin-inline: -.5rem; }
  .phone-track { padding-inline: 1.5rem; }
  .support-form input, .support-form select, .support-form textarea { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }