:root {
  color-scheme: light;
  --ink: #292c40;
  --muted-ink: #505166;
  --mist: #e6e3e8;
  --water: #b1acc4;
  --sun: #b96343;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { background: var(--water); color: var(--ink); font: 13px/1.75 var(--mono); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; border: 0; border-radius: 0; cursor: pointer; background: none; }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; }
a:hover, button:hover { color: #171b2e; }
button:disabled { cursor: default; opacity: .5; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
[hidden] { display: none !important; }
#scene-frame { position: fixed; inset: 0; overflow: hidden; background: var(--water); }
#harbor-canvas, #harbor-fallback { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#harbor-fallback { object-fit: cover; object-position: 50% 58%; filter: saturate(.30); }
#harbor-canvas { touch-action: pan-y; }
.atmosphere { position: fixed; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(232,225,217,.22), transparent 20%, transparent 65%, rgba(216,216,230,.36)); }
.site-header { position: relative; z-index: 4; display: flex; justify-content: center; padding: 24px 28px; pointer-events: none; }
.navigation { display: flex; align-items: center; gap: 30px; pointer-events: auto; }
.navigation button { min-height: 44px; padding: 7px 3px; color: var(--muted-ink); font-size: 12px; text-shadow: 0 0 16px #efe4d0; }
.navigation button[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 7px; text-decoration-color: #5a5568; }
.navigation button:hover { color: var(--ink); }
.intro { position: fixed; z-index: 2; left: max(36px, calc((100vw - 1050px) / 2)); bottom: 72px; max-width: 480px; padding: 22px 0 0; text-shadow: 0 1px 18px rgba(237,234,239,.9), 0 1px 5px rgba(237,234,239,.45); }
.intro::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -32px -44px -25px; background: radial-gradient(ellipse, rgba(225,223,235,.58) 0%, rgba(225,223,235,.18) 45%, transparent 72%); }
h1 { font: 400 19px/1.5 var(--mono); letter-spacing: -.045em; margin: 0 0 12px; }
.intro p { margin: 0; font-size: 13px; line-height: 1.9; }
.inline-link { display: inline; padding: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #747084; }
.social-links { display: flex; gap: 12px; align-items: center; margin-top: 15px; color: #46485e; font-size: 12px; }
.social-links a { text-decoration: none; }
.social-links a:hover { text-decoration: underline; }
.social-links span { opacity: .5; }
.content-panel { position: fixed; z-index: 3; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: rgba(225,224,234,.96); }
.panel-content { width: min(100% - 72px, 640px); margin: 130px auto 88px; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 32px; }
h2 { font: 400 22px/1.35 var(--mono); letter-spacing: -.055em; margin: 0; }
.back-button { color: var(--muted-ink); font-size: 11px; min-height: 44px; padding: 10px 0 10px 15px; }
.back-button:hover { text-decoration: underline; text-underline-offset: 5px; }
.back-button span { display: inline-block; transform: rotate(-90deg); }
.project { padding: 25px 0 28px; border-top: 1px solid rgba(72,68,93,.2); }
.project-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
h3 { margin: 0; font-size: 15px; font-weight: 400; letter-spacing: -.035em; }
h3 a { text-decoration: none; }
h3 a:hover { text-decoration: underline; }
h3 a span { display: inline-block; margin-left: 5px; font-size: 12px; color: var(--muted-ink); }
.project-kind { color: var(--muted-ink); font-size: 10px; white-space: nowrap; }
.project p { color: var(--muted-ink); font-size: 12px; line-height: 1.9; margin: 10px 0 0; max-width: 570px; }
.contact-link { display: inline-block; margin-top: 8px; font-size: 12px; }
.about-content { max-width: 570px; }
.about-content > p { margin: 0 0 23px; line-height: 2; color: var(--muted-ink); }
.about-content > p:first-of-type { color: var(--ink); font-size: 15px; }
.about-links { display: flex; gap: 28px; margin-top: 38px; font-size: 12px; }
body:not([data-view="harbor"]) .intro { visibility: hidden; }
body:not([data-view="harbor"]) .navigation button { text-shadow: none; }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 8px 12px; background: var(--mist); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; }
.noscript-note { position: fixed; bottom: 20px; left: 36px; font-size: 10px; }
@media (max-width: 600px) {
  .site-header { padding: 16px 24px; }
  .navigation { gap: 28px; }
  .navigation button { font-size: 11px; }
  .intro { left: 24px; right: 24px; bottom: 86px; max-width: none; }
  .intro::before { inset: -30px -24px -38px; background: linear-gradient(0deg, rgba(223,222,233,.74), rgba(223,222,233,.6) 45%, transparent); }
  h1 { font-size: 18px; margin-bottom: 9px; }
  .intro p { font-size: 11px; line-height: 1.95; }
  .social-links { font-size: 11px; gap: 10px; margin-top: 13px; }
  .panel-content { width: calc(100% - 48px); margin-top: 108px; }
  .panel-heading { margin-bottom: 20px; }
  h2 { font-size: 20px; }
  .project { padding: 20px 0 23px; }
  .project-heading { display: block; }
  .project-kind { display: block; margin-top: 4px; }
  .project p { font-size: 11px; margin-top: 9px; }
  .about-content > p { font-size: 12px; }
  .about-content > p:first-of-type { font-size: 14px; }
}
@media (max-height: 560px) and (min-width: 601px) {
  .site-header { padding-top: 10px; }
  .intro { bottom: 56px; }
  .intro h1 { font-size: 17px; margin-bottom: 5px; }
  .intro p, .social-links { font-size: 11px; }
  .social-links { margin-top: 8px; }
  .panel-content { margin-top: 90px; }
}
@media (prefers-reduced-motion: no-preference) {
  .navigation button, a { transition: color 140ms ease; }
}
#harbor-canvas { opacity: 0; }

@media (max-width: 600px) {
 .intro::before { background: none; }
 .atmosphere { background: linear-gradient(180deg, rgba(232,225,217,.15), transparent 24%, transparent 48%, rgba(224,223,235,.12) 64%, rgba(224,223,235,.72)); }
}
@media (max-width: 360px) and (max-height: 780px) {
 .intro { bottom: 45px; }
}


body[data-style="marks"] { --water: #dddbd5; }
body[data-style="marks"] .atmosphere { background: linear-gradient(180deg, rgba(221,219,213,.1), transparent 28%, transparent 65%, rgba(221,219,213,.24)); }
body[data-style="marks"] .intro::before { background: radial-gradient(ellipse, rgba(221,219,213,.7), rgba(221,219,213,.2) 48%, transparent 72%); }
body[data-style="marks"] .navigation button { text-shadow: 0 1px 8px #dddbd5; }
@media (max-width:600px){body[data-style="marks"] .intro::before { background:none; }body[data-style="marks"] .atmosphere { background:linear-gradient(180deg,transparent 50%,rgba(221,219,213,.45)); }}

/* Keep the harbor's masses and moving surface visible behind the restrained UI. */
.atmosphere, body[data-style="marks"] .atmosphere { background: linear-gradient(180deg, rgba(225,222,218,.08), transparent 18%, transparent 80%, rgba(224,223,229,.14)); }
.intro::before, body[data-style="marks"] .intro::before { background: radial-gradient(ellipse, rgba(225,223,235,.16), transparent 70%); }
.intro { text-shadow: 0 1px 3px rgba(242,239,239,.75), 0 0 10px rgba(239,237,240,.3); }
@media (max-width:600px){
 .atmosphere, body[data-style="marks"] .atmosphere { background:linear-gradient(180deg,transparent 80%,rgba(224,223,229,.14)); }
 .intro::before, body[data-style="marks"] .intro::before { background:none; }
}
@media (min-width:361px) and (max-width:600px) {
 .intro { bottom: 62px; }
}
@media (max-width:600px) {
 .intro p { font-size:12px; line-height:1.75; }
}

/* Feathered light in the painting supports the type without visible panels. */
.intro, .navigation { color: #252838; text-shadow: none; }
.intro { bottom: 80px; padding: 0; font-weight: 500; }
.intro::before, body[data-style="marks"] .intro::before {
  inset: -48px -64px;
  background: radial-gradient(ellipse farthest-side, rgba(242,239,232,.90) 32%, rgba(242,239,232,.72) 52%, rgba(242,239,232,.30) 75%, transparent 100%);
}
.intro h1 { font-size: 22px; font-weight: 500; line-height: 1.4; margin-bottom: 9px; }
.intro p { font-size: 14px; line-height: 1.75; }
.social-links { color: #343746; font-size: 13px; margin-top: 13px; }
.navigation {
  background: none;
  padding: 0 16px;
}
.navigation button, body[data-style="marks"] .navigation button {
  color: #343746;
  font-size: 13px;
  font-weight: 500;
  text-shadow: 0 1px 5px rgba(242,239,232,.9);
}
.navigation button[aria-current="page"] { color: #202330; text-decoration-color: currentColor; }
@media (max-width: 600px) {
  .intro { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .intro::before, body[data-style="marks"] .intro::before { inset: -32px -54px; }
  .intro h1 { font-size: 21px; margin-bottom: 8px; }
  .intro p { font-size: 13px; line-height: 1.75; }
  .social-links { font-size: 12px; margin-top: 10px; }
  .navigation { gap: 26px; }
  .navigation button, body[data-style="marks"] .navigation button { font-size: 12px; }
}
@media (max-width: 360px) {
  .intro p { font-size: 12.5px; }
}
@media (max-width: 360px) and (max-height: 780px) {
  .intro { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .intro h1 { font-size: 20px; margin-bottom: 6px; }
  .intro p { line-height: 1.7; }
  .social-links { font-size: 11.5px; margin-top: 8px; }
}

.blog-panel { display: grid; place-items: center; padding: 90px 24px; }
.coming-soon { margin: 0; font-size: 14px; letter-spacing: .02em; color: var(--muted-ink); }
.motion-control:focus { left: auto; right: 12px; }