/* One material world: clear glass, pearlescent light, blue water. */
:root {
  --material-ink: #244667;
  --material-ink-soft: #566f89;
  --material-blue: #709fde;
  --material-pink: #edcbe9;
  --material-lilac: #c5c7f1;
  --material-glass-fill: linear-gradient(135deg, #ffffffc4 0%, #f7fbff7a 46%, #f4e9ff7a 100%);
  --material-stroke: #ffffffba;
  --material-blue-glow: #93c7ef4a;
  --material-pink-glow: #f0c5e954;
  --material-shadow: 0 12px 34px #456f9a12, inset 0 1px 0 #ffffffe0;
  --ink: var(--material-ink);
  --muted: var(--material-ink-soft);
  --line: #94b2d638;
}

body {
  background: #eef4fc;
}

::selection {
  color: #203d63;
  background: #d8d4f3;
}

.site-header {
  border-bottom-color: #ffffff33;
  background: linear-gradient(180deg, #234b7924, #76abe908);
}

body[data-page="work"] .site-header {
  color: var(--material-ink);
  background: linear-gradient(115deg, #f5faffb8, #f5f4ff7a 68%, #faecf794);
  border-bottom: 1px solid #ffffffa8;
  box-shadow: 0 1px 0 #7897c214;
}

.wordmark .mark {
  text-shadow: 1px 0 0 #dbefff4d, -1px 1px 0 #facbf266;
}

.site-header nav a:after {
  height: 2px;
  border-radius: 3px;
  background: linear-gradient(90deg, currentColor, #eacaf0);
}

.site-header nav a.active {
  text-shadow: 0 0 18px #e2d7ff52;
}

.pill.light {
  color: #294e7a;
  background: linear-gradient(118deg, #ffffffed, #eff6ffd9 63%, #f9e9fad9);
  border: 1px solid #ffffffd9;
  box-shadow: 0 9px 25px #2d548c15, inset 0 1px 0 #fff, inset 0 -1px 0 #d8cbf05e;
}

.pill.light:hover {
  background: linear-gradient(118deg, #fff, #eff6fff5 63%, #f3e3fff0);
  box-shadow: 0 12px 30px #2d548c24, inset 0 1px 0 #fff;
}

.pill .circle {
  background: linear-gradient(130deg, #d2ebf8b8, #dde5fab0 56%, #efdbf7b3);
  border: 1px solid #ffffffa3;
  box-shadow: inset 0 1px 2px #fff, 0 1px 3px #5279a714;
}

.motion-control {
  border: 1px solid #ffffff45;
  border-radius: 30px;
  padding: 9px 13px;
  background: linear-gradient(120deg, #edf7ff0d, #ffffff21);
  box-shadow: inset 0 1px 0 #ffffff24;
}

.text-link {
  color: #315b83;
  border-bottom-color: #7c9fc66b;
  transition: color .25s, border-color .25s;
}

.text-link:hover {
  color: #526fc1;
  border-bottom-color: #b695cf;
}

.section-kicker {
  color: #5c7693;
}

.intro-section,
.selected-section,
.home-end,
.about-bottom {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.intro-section {
  background:
    radial-gradient(ellipse at 8% 6%, #d1e8fdb5, transparent 53%),
    radial-gradient(ellipse at 94% 100%, #ebd8f6b0, transparent 48%),
    linear-gradient(145deg, #eaf3ff, #f4f7ff 56%, #f7edf9);
  border-top: 1px solid #ffffffb8;
}

/* The hero's oval edge continues as a quiet optical trace. */
.intro-section:before {
  content: "";
  position: absolute;
  width: min(47vw, 650px);
  height: min(66vw, 870px);
  left: -25%;
  top: -44%;
  border-radius: 50%;
  border: 18px solid #ffffff26;
  box-shadow: 2px 0 0 #fff9, 7px 0 1px #d8c9f16b, 10px 0 1px #b6dafa38, inset -2px 0 0 #a5c4ee47, inset -7px 0 0 #ffffff45;
  transform: rotate(37deg);
  z-index: -1;
  pointer-events: none;
}

.intro-section:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(126deg, transparent 35%, #ffffff66 36%, #fff0 39%, transparent 68%, #ffffff52 69%, transparent 73%);
  opacity: .45;
  z-index: -1;
  pointer-events: none;
}

.intro-grid h2 em {
  color: #638fc7;
}

.asterisk {
  color: #adc4ec;
  text-shadow: 1px 1px 0 #fff, -2px -1px 0 #dfc9efb3;
}

.body-copy,
.approaches p {
  color: var(--material-ink-soft);
}

.expertise-line {
  border-top: 1px solid #91acc838;
  box-shadow: inset 0 1px 0 #ffffffb8;
  color: #5b7a9b;
}

.expertise-line i {
  color: #9caedf;
}

.selected-section {
  background:
    radial-gradient(ellipse at 100% 3%, #dfd9f73b, transparent 46%),
    radial-gradient(ellipse at 0 85%, #cfe5fa52, transparent 48%),
    linear-gradient(180deg, #f4f6ff, #f6f9ff 68%, #edf4fd);
}

.selected-section:before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a9c8ed73 22%, #fff 55%, #e0bfdc85 80%, transparent);
  pointer-events: none;
}

.selected-grid .project-image {
  border: 1px solid #ffffffb8;
  border-radius: 12px;
  box-shadow: 0 12px 30px #5578a112, 0 1px 0 #82a5cd26;
}

.selected-grid .project-image .project-arrow {
  color: #fff;
  border-color: #ffffff9e;
  background: linear-gradient(135deg, #eaf5ff47, #afaee333);
  box-shadow: inset 0 1px 0 #ffffff73, 0 4px 14px #1938641f;
  backdrop-filter: blur(7px);
}

.selected-grid .project-card:hover .project-arrow {
  color: #31577e;
  background: #f5f5ffed;
}

.selected-grid .project-meta>span,
.selected-grid .project-category {
  color: #617c97;
}

.home-end {
  background:
    radial-gradient(ellipse at 16% 0, #c3dffa85, transparent 59%),
    radial-gradient(ellipse at 88% 87%, #eec9e8b0, transparent 48%),
    linear-gradient(115deg, #e1eefb, #e6eaf9 58%, #f3e6f5);
  border-top: 1px solid #fff9;
  border-bottom: 1px solid #ffffffb5;
}

.home-end:before {
  content: "";
  position: absolute;
  right: 16%;
  top: -58%;
  width: 245px;
  height: 440px;
  border: 19px solid #ffffff24;
  border-radius: 50%;
  transform: rotate(44deg);
  box-shadow: 2px 1px 0 #ffffffe0, 6px 3px 0 #d1c2ed85, 9px 5px 0 #abcbed4a, inset -2px -1px 0 #8aafdb57, inset -6px -3px 0 #ffffffe0;
  opacity: .7;
  z-index: -1;
  pointer-events: none;
}

.home-end>a {
  color: #355a7d;
}

.home-end>a>span {
  color: #789cc7;
  text-shadow: 1px 1px 0 #fff8;
  transition: transform .3s;
}

.home-end>a:hover>span {
  transform: translate(4px, -4px);
}

.about-page {
  background:
    radial-gradient(ellipse at 5% 32%, #a3d4f180, transparent 49%),
    radial-gradient(ellipse at 98% 52%, #e5c7ed85, transparent 48%),
    linear-gradient(180deg, #739cd8, #96b7e9 530px, #c9d9f2 820px, #edf2fb 1150px);
}

.about-sky {
  height: 980px;
  background: linear-gradient(0deg, #d2e1f4, #8cabe34a 45%, #84aae900), url('assets/hero.png') 68% 31% / cover;
  opacity: .38;
}

.about-top h1 {
  text-shadow: 0 2px 24px #446da730;
}

.about-top>p:last-child {
  color: #fff;
}

.giant-year {
  color: #ffffffeb;
  text-shadow: 0 2px 0 #cce4ff4d, 0 12px 30px #5e7eaf0f;
}

.timeline-card {
  border: 1px solid #ffffff70;
  border-radius: 12px;
  box-shadow: 0 15px 32px #41649426, 0 1px 0 #ead4ff7a;
}

.timeline-card.active {
  border-color: #ffffffd9;
  box-shadow: 0 20px 45px #355b8b29, 0 0 0 4px #edf5ff24, 3px 0 0 5px #edcdfc17;
}

.timeline-card:after {
  background: linear-gradient(0deg, #203758df, #263d622b 51%, transparent 80%);
}

.round-button {
  border-color: #ffffffb0;
  background: linear-gradient(135deg, #ffffff42, #e8f2ff24 63%, #f1dffc47);
  box-shadow: inset 0 1px 0 #ffffff80, 0 4px 16px #416b9a0d;
}

.round-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #ffffff78, #e8f2ff4a 63%, #f1dffc85);
}

.timeline-controller .round-button {
  color: #3b608c;
}

.timeline-ruler button {
  color: #365e8a;
}

.timeline-ruler button.active {
  color: #204870;
}

.timeline-ruler button.active:before {
  background: #eaf7ff;
  box-shadow: 0 0 8px #fff;
}

.chapter-description {
  color: #244e7a;
}

.chapter-description .chapter-date,
.chapter-description p {
  color: #355e86;
}

.chapter-tags span {
  color: #3e6289;
  background: linear-gradient(125deg, #edf5ff6b, #f6ebfc59);
  border-color: #ffffff9c;
  box-shadow: inset 0 1px 0 #fff7;
}

.about-bottom {
  background:
    radial-gradient(ellipse at 85% 85%, #e6d6f58c, transparent 55%),
    linear-gradient(125deg, #eaf3fe, #f2f6fc 57%, #f1edf9);
  border-top: 1px solid #ffffffa8;
}

.about-bottom:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 17%, #ffffff40 18%, transparent 20%, transparent 60%, #ffffff4d 61%, transparent 66%);
}

.approaches article {
  border-top-color: #7e9dc638;
  box-shadow: inset 0 1px 0 #ffffffbd;
}

.approaches article>span {
  color: #6a8bb5;
}

.contact-art {
  background-image: linear-gradient(90deg, #244e7b73, #244d7940 44%, transparent 72%), url('assets/hero.png');
}

.contact-content h1 em {
  color: #ebedff;
  text-shadow: 1px 1px 0 #d9c8f129;
}

.contact-email>a {
  border-bottom-color: #ffffffa8;
  box-shadow: 0 1px 0 #d4bcf438;
}

.contact-email .round-button {
  color: #fff;
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 5%;
  min-height: 44px;
  color: #607b95;
  background: linear-gradient(110deg, #eaf2fb, #eef2fc 58%, #f2eaf7);
  border-top-color: #ffffffb0;
  box-shadow: inset 0 1px 0 #ffffffa8;
}

.site-footer>a:first-child {
  justify-self: start;
  font-size: 12px;
  line-height: 19px;
  letter-spacing: .07em;
  color: #3f6283;
}

.site-footer>p {
  display: block;
  justify-self: center;
  text-align: center;
  font-size: 8px;
  line-height: 1.4;
}

.site-footer>span {
  justify-self: end;
  text-align: right;
  white-space: nowrap;
  font-size: 8px;
  line-height: 1.4;
}

dialog {
  border: 1px solid #ffffffdb;
  border-radius: 20px;
  background: linear-gradient(135deg, #f3f8ff, #f4f3fc 68%, #f9edf7);
  box-shadow: 0 30px 100px #15345638, 0 0 0 4px #eaf3ff1f;
}

dialog::backdrop {
  background: #18395c99;
  backdrop-filter: blur(7px);
}

.dialog-close {
  background: var(--material-glass-fill);
  border: 1px solid #ffffffe0;
  color: #274f75;
  box-shadow: var(--material-shadow);
}

.detail-play>span {
  background: linear-gradient(130deg, #e5f4ff33, #ecdeff26);
  box-shadow: inset 0 1px 0 #ffffff80, 0 8px 30px #10294926;
}

.detail-tagline,
.detail-section p {
  color: #536f89;
}

.detail-facts {
  border-color: #a0b8d54a;
  box-shadow: inset 0 1px 0 #fff9, 0 1px 0 #fff9;
}

.detail-facts small,
.detail-tools {
  color: #647f99;
}

.detail-gallery img {
  background: #e8eff8;
  border: 1px solid #ffffffb5;
  border-radius: 8px;
}

.toast {
  color: #294d73;
  background: linear-gradient(125deg, #f5fbfff2, #f1e9fff2);
  border-color: #fff;
  box-shadow: 0 7px 28px #27497526, inset 0 1px 0 #fff;
}

@media (max-width: 680px) {
  .site-header { background: linear-gradient(180deg, #254e802e, #254e8000); }
  .motion-control { padding: 8px 9px; }
  .intro-section:before { left: -73%; top: -4%; width: 90vw; height: 130vw; opacity: .5; }
  .intro-section:after { opacity: .25; }
  .home-end:before { right: -16%; top: -33%; width: 180px; height: 320px; opacity: .4; }
  .selected-grid .project-image { border-radius: 10px; }
  .timeline-card { border-radius: 10px; }
  .about-page { background: radial-gradient(ellipse at 98% 48%, #e5c7ed85, transparent 50%), linear-gradient(180deg, #739cd8, #96b7e9 500px, #c9d9f2 770px, #edf2fb 1080px); }
  .chapter-description p { color: #2f557c; }
  .contact-art { background-image: linear-gradient(90deg, #21477288, #284e7759 60%, #355c762b), url('assets/hero.png'); }
  .contact-content h1 { text-shadow: 0 2px 18px #274f7533; }
  .site-footer { grid-template-columns: 1fr 1fr; min-height: 0; padding: 7px 6%; gap: 3px 12px; }
  .site-footer>a:first-child { grid-column: 1; grid-row: 1; font-size: 10px; line-height: 14px; }
  .site-footer>span { grid-column: 2; grid-row: 1; font-size: 7px; }
  .site-footer>p { grid-column: 1 / -1; grid-row: 2; font-size: 7px; line-height: 11px; }
  dialog { border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pill, .text-link, .home-end>a>span, .site-header nav a:after { transition: none; }
  .home-end>a:hover>span, .pill:hover { transform: none; }
}