@charset "UTF-8";
/* Portfolio and background extensions use the approved homepage design tokens. */
.project-page,.project-index,.document-page {
  min-width:0;
}

.project-hero,.document-hero {
  max-width:1080px;
}

.project-hero>.text-link {
  display:inline-block;
  margin-bottom:2.5rem;
}

.project-hero h1,.document-hero h1 {
  font-size:clamp(2.8rem,5.4vw,5.3rem);
  max-width:1050px;
  overflow-wrap:break-word;
}

.project-hero .lead,.document-hero .lead {
  max-width:790px;
  font-size:clamp(1rem,1.4vw,1.15rem);
  line-height:1.8;
  margin-top:1.8rem;
}

.project-section-nav,.project-end-nav {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 2rem;
}

.project-section-nav {
  margin-top:2rem;
}

.project-tags,.source-content .tag-container {
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  list-style:none;
  padding:0;
  margin:1.5rem 0 0;
}

.project-tags li,.source-content .tag {
  border:1px solid var(--line);
  border-radius:2rem;
  padding:.25rem .75rem;
  color:var(--plum);
  font-size:.68rem;
  line-height:1.5;
}

.project-index>section {
  border-top:1px solid var(--line);
}

.project-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:3.5rem 3rem;
}

.project-card {
  min-width:0;
}

.project-card-image {
  display:block;
  background:var(--rose);
  overflow:hidden;
  border:1px solid var(--line);
}

.project-card-image img {
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  transition:transform .25s;
}

.project-card-image:hover img {
  transform:scale(1.02);
}

.project-card-copy {
  padding-top:1.5rem;
}

.project-card-copy .eyebrow {
  margin-bottom:.8rem;
  font-size:.62rem;
}

.project-card h3 {
  font:400 clamp(1.6rem,2.5vw,2.2rem)/1.18 var(--serif);
  letter-spacing:-.025em;
  max-width:560px;
}

.project-card h3 a:hover {
  color:var(--plum);
}

.project-card-copy>p:not(.eyebrow) {
  font-size:.85rem;
  line-height:1.8;
  margin-top:.85rem;
  max-width:520px;
}

.project-card .project-tags {
  margin-top:1rem;
}

.project-card .text-link {
  display:inline-block;
  margin-top:1rem;
}

.project-overview {
  border-top:1px solid var(--line);
  padding-top:clamp(3rem,5vw,5rem);
}

.project-overview-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2.5rem 4rem;
  max-width:1100px;
}

.project-overview-grid>div {
  min-width:0;
  border-top:1px solid var(--line);
  padding-top:1.25rem;
}

.project-overview-grid h3 {
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--plum);
  margin-bottom:.8rem;
}

.project-overview-grid p {
  font-size:.88rem;
  line-height:1.85;
  max-width:500px;
}

.project-context-note {
  max-width:880px;
  padding:1.1rem 1.5rem;
  margin-bottom:2.5rem;
  border-left:2px solid var(--plum);
  background:var(--rose);
  font-size:.8rem;
  line-height:1.8;
}

.project-documentation,.document-content {
  max-width:1050px;
  min-width:0;
  overflow-wrap:anywhere;
}

.project-documentation>section,.source-content>section {
  padding-block:2.5rem;
  border-top:1px solid var(--line);
}

.project-documentation h2,.source-content h2 {
  font-size:clamp(1.9rem,3vw,2.7rem);
  letter-spacing:-.025em;
  margin-bottom:1.5rem;
}

.project-documentation h3,.source-content h3 {
  font:400 clamp(1.4rem,2.4vw,1.85rem)/1.25 var(--serif);
  letter-spacing:-.02em;
  margin-block:2rem 1rem;
  color:var(--ink);
}

.project-documentation h4,.source-content h4 {
  font-size:.9rem;
  color:var(--plum);
  margin-block:1.5rem .6rem;
}

.project-documentation p,.source-content p,
.project-documentation li,.source-content li {
  font-size:.9rem;
  line-height:1.85;
}

.project-documentation p+p,.source-content p+p {
  margin-top:1rem;
}

.project-documentation ul,.project-documentation ol,
.source-content ul,.source-content ol {
  padding-left:1.4rem;
  margin-block:1rem 1.5rem;
  color:var(--muted);
}

.project-documentation li+li,.source-content li+li {
  margin-top:.65rem;
}

.project-documentation strong,.source-content strong {
  color:var(--ink);
  font-weight:600;
}

.project-documentation p>a,.project-documentation li>a,
.source-content p>a,.source-content li>a {
  color:var(--plum);
  text-decoration:underline;
  text-underline-offset:.2em;
}

.project-subnav,.background-nav {
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.5rem;
  padding-block:1rem;
  margin-bottom:2.5rem;
  border-block:1px solid var(--line);
}

.project-subnav .button,.background-nav>a {
  min-height:44px;
  padding:.55rem 0;
  font-size:.75rem;
  color:var(--muted);
  border-bottom:1px solid transparent;
  text-align:left;
}

.project-subnav .button:hover,.background-nav>a:hover,
.background-nav>a[aria-current] {
  color:var(--plum);
  border-color:var(--plum);
}

.document-hero {
  margin-bottom:2.5rem;
}

.project-image-container,.figure-container {
  margin-block:2rem;
  min-width:0;
}

.project-documentation figure {
  margin:0;
  min-width:0;
}

.gallery-link {
  display:block;
  cursor:zoom-in;
  max-width:100%;
}

.project-documentation img {
  max-width:100%;
  width:auto;
  height:auto;
  margin-inline:auto;
  border:1px solid var(--line);
}

.project-documentation .project-image-container img {
  max-height:600px;
  object-fit:contain;
}

.project-documentation figcaption {
  font-size:.75rem;
  line-height:1.8;
  color:var(--muted);
  padding-top:.85rem;
  max-width:900px;
}

.project-documentation .gallery .figure-container+.figure-container {
  margin-top:2.5rem;
}

.project-documentation .grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem 2.5rem;
}

.project-documentation .grid>div,
.project-documentation .reveal,.project-documentation .fade {
  min-width:0;
}

.project-documentation .divider,.source-content .divider {
  margin-block:2.5rem;
  height:1px;
  background:var(--line);
}

.project-documentation .code-accord {
  min-width:0;
  max-width:100%;
  margin-block:1.5rem;
  border:1px solid var(--line);
  background:var(--white);
}

.code-accord>summary {
  cursor:pointer;
  padding:.9rem 1.25rem;
  font-size:.75rem;
  color:var(--plum);
  font-weight:600;
}

.code-accord[open]>summary {
  border-bottom:1px solid var(--line);
}

.project-documentation pre,.source-content pre {
  min-width:0;
  max-width:100%;
  margin:0;
  padding:1rem 1.25rem;
  overflow:auto;
  overscroll-behavior-inline:contain;
  background:#f0ece8;
  color:var(--ink);
  font:13px/1.65 Consolas,"Courier New",monospace;
  white-space:pre;
  overflow-wrap:normal;
  tab-size:2;
}

.project-documentation code,.source-content code {
  font:inherit;
}

.project-documentation :not(pre)>code,
.source-content :not(pre)>code,
.project-documentation .json,.project-documentation .node-name {
  font-family:Consolas,"Courier New",monospace;
  font-size:.9em;
  padding:.1rem .25rem;
  background:#eee7e9;
  color:var(--plum);
}

.project-documentation table,.source-content table {
  display:block;
  overflow-x:auto;
  max-width:100%;
  border-collapse:collapse;
  margin-block:1.5rem;
  font-size:.85rem;
}

.project-documentation th,.project-documentation td,
.source-content th,.source-content td {
  padding:.75rem 1rem;
  text-align:left;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}

.project-documentation th,.source-content th {
  color:var(--plum);
  font-weight:600;
}

.project-documentation .diagram {
  margin-block:2rem;
  padding:1rem;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  background:var(--white);
  border:1px solid var(--line);
}

.diagram>.step {
  max-width:360px;
  margin:0 auto 1.5rem;
}

.diagram .boundary {
  position:relative;
  border:1px dashed #bca6b2;
  padding:1.5rem;
  min-width:0;
}

.diagram .boundary-title {
  color:var(--plum);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:1.25rem;
}

.diagram .top-row {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
}

.diagram .bottom-row {
  margin-top:1.5rem;
}

.diagram .step {
  position:relative;
  border-top:2px solid var(--plum);
  background:var(--paper);
  padding:1rem;
}

.diagram .title {
  color:var(--ink);
  font-size:.9rem;
  font-weight:600;
  margin-bottom:.5rem;
}

.diagram .description {
  font-size:.75rem;
  line-height:1.7;
  color:var(--muted);
}

.diagram .top-row .step:not(:last-child):after {
  content:"→";
  position:absolute;
  top:45%;
  right:-1.15rem;
  color:var(--plum);
}

.diagram .persistence-layer {
  max-width:500px;
  margin-inline:auto;
}

.source-content .sources-container {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.75rem;
}

.source-content .source {
  min-width:0;
  border-top:1px solid var(--line);
}

.source-content .source>a {
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding-block:1.4rem;
}

.source-content .source img {
  width:48px;
  height:48px;
  object-fit:contain;
  flex-shrink:0;
  background:white;
}

.source-content .source .title {
  color:var(--ink);
  font-weight:600;
  font-size:.86rem;
  line-height:1.5;
}

.source-content .source .description {
  font-size:.75rem;
  line-height:1.7;
  margin-top:.35rem;
}

.source-content .source>a:hover .title {
  color:var(--plum);
  text-decoration:underline;
  text-underline-offset:.2em;
}

.project-end-nav {
  border-top:1px solid var(--line);
  padding-block:2rem 4rem;
}

.project-background-link>p:not(.eyebrow) {
  max-width:650px;
  margin-block:1.5rem;
  font-size:.9rem;
}

body.gallery-open {
  overflow:hidden;
}

.gallery-dialog {
  width:min(1400px,calc(100% - 2rem));
  max-width:calc(100% - 2rem);
  max-height:calc(100vh - 2rem);
  max-height:calc(100dvh - 2rem);
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  padding:clamp(.85rem,2vw,1.5rem);
  box-shadow:0 20px 80px #302b3159;
}

.gallery-dialog::backdrop {
  background:#302b31d9;
}

.gallery-dialog-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}

.gallery-dialog-toolbar h2 {
  font-size:1.4rem;
  letter-spacing:-.02em;
}

.gallery-close {
  display:inline-flex;
  align-items:center;
  gap:1rem;
  min-height:44px;
  background:var(--white);
  color:var(--ink);
  border:1px solid var(--line);
  padding:.4rem .8rem;
  cursor:pointer;
  font-size:.8rem;
}

.gallery-close:hover {
  border-color:var(--plum);
  color:var(--plum);
}

.gallery-close span {
  font-size:1.25rem;
}

.gallery-dialog figure {
  margin:0;
  min-width:0;
}

.gallery-dialog img {
  max-width:100%;
  width:auto;
  height:auto;
  max-height:calc(100vh - 13rem);
  max-height:calc(100dvh - 13rem);
  object-fit:contain;
  margin-inline:auto;
  background:var(--white);
}

.gallery-dialog figcaption {
  color:var(--muted);
  font-size:.75rem;
  line-height:1.6;
  margin-top:.8rem;
  overflow-wrap:anywhere;
}

.gallery-dialog-footer {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.5rem 1.5rem;
  margin-top:.5rem;
}

.gallery-dialog-footer p {
  font-size:.7rem;
}

@media(max-width:900px) {
  .project-grid {
    gap:2.75rem 2rem;
  }
  .project-overview-grid {
    gap:2rem;
  }
  .source-content .sources-container {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:600px) {
  .project-grid,.project-overview-grid,.project-documentation .grid {
    grid-template-columns:minmax(0,1fr);
  }
  .project-hero h1,.document-hero h1 {
    font-size:clamp(2.5rem,9vw,3.5rem);
  }
  .project-hero .lead,.document-hero .lead {
    margin-top:1.4rem;
    font-size:.95rem;
  }
  .project-section-nav,.project-end-nav {
    gap:.75rem 1.5rem;
  }
  .project-documentation>section,.source-content>section {
    padding-block:2rem;
  }
  .project-documentation p,.source-content p,
  .project-documentation li,.source-content li {
    font-size:.86rem;
  }
  .project-subnav,.background-nav {
    gap:.2rem 1.2rem;
  }
  .diagram .boundary {
    padding:1rem;
  }
  .diagram .top-row {
    grid-template-columns:minmax(0,1fr);
    gap:1.5rem;
  }
  .diagram .top-row .step:not(:last-child):after {
    content:"↓";
    top:auto;
    right:50%;
    bottom:-1.4rem;
  }
  .source-content .sources-container {
    grid-template-columns:minmax(0,1fr);
    gap:.5rem;
  }
  .source-content .source>a {
    padding-block:1.2rem;
  }
  .gallery-dialog {
    width:calc(100% - 1rem);
    max-width:calc(100% - 1rem);
  }
  .gallery-dialog-toolbar h2 {
    font-size:1.2rem;
  }
  .gallery-dialog-footer p {
    display:none;
  }
}