body {
  margin:0;
  background:#24272c;
  color-scheme:dark;
}

#portfolio {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  container-type:inline-size;
  --dm-display:Fraunces,Georgia,serif;
  --dm-ink:#f2eee8;
  --dm-muted:#c3bfb9;
  --dm-accent:#dfbc8c;
  --dm-surface:#303338;
  --dm-line:#4c4d50;
  color:var(--dm-ink);
  font:400 18px/1.5 "DM Sans",sans-serif;
}

#portfolio *, #portfolio *::before {
  box-sizing:border-box;
}

#portfolio [hidden] {
  display:none;
}

#portfolio button {
  color:inherit;
  font:inherit;
  background:none;
  border:0;
  padding:0;
}

#portfolio a {
  color:inherit;
}

#portfolio .dm-stage {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  background:
    radial-gradient(ellipse at 100% 100%, #393b40 0, transparent 65%),
    #24272c;
}

#portfolio .dm-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  flex: 1 0 auto;
  width: min(100%, 1280px);
  min-height: min(62.5cqw, 800px);
  margin-inline: auto;
  padding-bottom: 48px;
}

#portfolio canvas {
  position:absolute;
  inset:0;
  z-index:-1;
  width:100%;
  height:100%;
}

#portfolio .dm-nav {
  display:flex;
  justify-content:flex-start;
  padding:16px 8.33cqw 0 8.33cqw;
}

#portfolio nav {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 14px;
}

#portfolio nav a {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 3px;
  border-bottom:1px solid transparent;
  color:var(--dm-muted);
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  text-decoration:none;
}

#portfolio nav a:hover, #portfolio nav a[aria-current="true"] {
  color:var(--dm-accent);
  border-color:currentColor;
}

#portfolio nav svg, #portfolio .dm-footer-links svg {
  flex:none;
  width:16px;
  height:16px;
}

#portfolio nav img {
  display:block;
  flex:none;
  border-radius:5px;
  object-fit:contain;
}

#portfolio .dm-home-icon {
  position:relative;
  display:block;
  width:24px;
  height:24px;
  overflow:hidden;
  border-radius:8px;
  background: linear-gradient(145deg, #4c4d50, #303338);
}

#portfolio .dm-home-icon::before {
  content:"";
  position:absolute;
  top:10px;
  left:7px;
  width:10px;
  height:9px;
  border-radius:1px 1px 2px 2px;
  background: #f2eee8;
}

#portfolio .dm-home-icon::after {
  content:"";
  position:absolute;
  top:5px;
  left:4px;
  width:16px;
  height:9px;
  background: #dfbc8c;
  clip-path:polygon(50% 0,100% 78%,89% 100%,50% 34%,11% 100%,0 78%);
}

#portfolio .dm-home-icon span {
  position:absolute;
  z-index:1;
  bottom:5px;
  left:11px;
  width:3px;
  height:5px;
  border-radius:1px 1px 0 0;
  background: #79716a;
}

#portfolio .dm-noir-icon {
  display:grid;
  place-items:center;
  flex:none;
  width:22px;
  height:22px;
  border-radius:7px;
  background:#392d29;
  color:#f6d397;
}

#portfolio .dm-noir-icon svg {
  width:15px;
  height:15px;
}

#portfolio .dm-pill {
  display:inline-flex;
  align-items:center;
  padding:8px clamp(11px,1.1cqw,18px);
  border-radius:100px;
  background:var(--dm-accent);
  color:#28231c;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
}

#portfolio .dm-pill:hover {
  background:#eacda7;
}

#portfolio .dm-copy {
  position:relative;
  margin:9.4cqw 0 0 8.33cqw;
  width:33%;
}

#portfolio .dm-copy p {
  margin:0 0 .9em;
  color:var(--dm-muted);
  font-size:17px;
  font-weight:400;
  line-height:1.56;
  text-wrap:pretty;
}

#portfolio h1 {
  margin:0 0 1.9cqw;
  font:500 clamp(40px,5.75cqw,82px)/1.07 var(--dm-display);
  letter-spacing:-.045em;
  text-wrap:balance;
}

#portfolio h2 {
  margin:0 0 .36em;
  font:500 clamp(32px,4.4cqw,52px)/1.08 var(--dm-display);
  overflow-wrap:anywhere;
  letter-spacing:-.04em;
  text-wrap:balance;
}

#portfolio .dm-typello-title img {
  display: block;
  width: clamp(128px, 18cqw, 230px);
  max-width: 100%;
  height: auto;
}

#portfolio .dm-noir-title img,
#portfolio .dm-glyph-title img,
#portfolio .dm-hockey-title img {
  display: block;
  width: clamp(205px, 26cqw, 355px);
  max-width: 100%;
  height: auto;
}

#portfolio .dm-label {
  margin:0 0 10px;
  color:var(--dm-accent);
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.025em;
  text-transform:uppercase;
}

#portfolio .dm-right .dm-copy {
  margin:10cqw 7% 0 auto;
  width:27%;
}

#portfolio .dm-project-copy {
  isolation: isolate;
  overflow: hidden;
  padding: clamp(15px, 2.3cqw, 30px);
}

#portfolio .dm-project-copy p {
  color: inherit;
  text-shadow: none;
}

#portfolio .dm-project-copy .dm-label {
  margin: 0 0 12px;
  font: italic 500 15px/1.2 var(--dm-display);
  letter-spacing: normal;
  text-transform: none;
}

#portfolio .dm-project-copy h2 {
  margin: 0 0 20px;
}

#portfolio .dm-project-copy .dm-lead {
  margin: 0 0 10px;
  font: 500 clamp(22px, 2.9cqw, 36px)/1.1 var(--dm-display);
  letter-spacing: -.035em;
  text-wrap: balance;
}

#portfolio .dm-project-copy .dm-description {
  margin: 0;
  font-size: 16px;
  line-height: 1.53;
}

#portfolio .dm-typello .dm-project-copy {
  color: #15334d;
  border: 1px solid #abc9df;
  border-radius: 19px 5px 19px 5px;
  background: radial-gradient(ellipse at 100% 100%, #d4eae3 0, transparent 67%), #eff8ff;
  box-shadow: 0 8px 20px #183c5a1c;
}

#portfolio .dm-typello .dm-label {
  color: #355674;
}

#portfolio .dm-typello .dm-project-copy::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -23px;
  bottom: -14px;
  width: 116px;
  height: 74px;
  border: 1px solid #2d668433;
  border-radius: 7px;
  background:
    radial-gradient(circle at center, transparent 13px, #2d668433 14px 15px, transparent 16px),
    linear-gradient(90deg, transparent 49.5%, #2d668433 49.5% 50.5%, transparent 50.5%);
  transform: rotate(-15deg);
}

#portfolio .dm-noir .dm-project-copy {
  color: #39271f;
  border: 1px solid #a86b374d;
  border-radius: 3px 17px 4px 12px;
  background: radial-gradient(ellipse at 100% 0, #e8c69e 0, transparent 60%), #fbebd5;
  box-shadow: 4px 5px 0 #c2936440;
}

#portfolio .dm-noir .dm-label {
  color: #755039;
}

#portfolio .dm-noir .dm-lead {
  font-style: italic;
}

#portfolio .dm-noir .dm-project-copy::after {
  content: "";
  position: absolute;
  top: 0;
  right: 17px;
  width: 27px;
  height: 33px;
  background: #ad7253;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 77%, 0 100%);
}

#portfolio .dm-glyph .dm-project-copy {
  color: #f8eed5;
  border: 1px solid #9b7d45;
  border-radius: 17px 5px 17px 5px;
  background: radial-gradient(ellipse at 95% 0, #385648 0, transparent 65%), #172f2a;
  box-shadow: 0 8px 20px #173c3a22;
}

#portfolio .dm-glyph .dm-label {
  color: #ead19a;
}

#portfolio .dm-glyph .dm-lead {
  color: #f7e3b3;
}

#portfolio .dm-glyph .dm-project-copy::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 17px;
  width: 9px;
  height: 9px;
  border: 1px solid #c4a567;
  transform: rotate(45deg);
}

#portfolio .dm-hockey .dm-project-copy {
  color: #e1f1fb;
  border: 1px solid #396e92;
  border-radius: 6px 26px 6px 26px;
  background: linear-gradient(155deg, #214d70 0, transparent 53%), #0c2541;
  box-shadow: 0 10px 22px #152f4e26;
}

#portfolio .dm-hockey .dm-label {
  color: #b3dcf3;
  font: 600 13px/1.25 "DM Sans", sans-serif;
  letter-spacing: .025em;
}

#portfolio .dm-hockey .dm-lead {
  color: #fff5d7;
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 700;
}

#portfolio .dm-hockey .dm-project-copy::before,
#portfolio .dm-hockey .dm-project-copy::after {
  content: "";
  position: absolute;
  z-index: -1;
  transform: skewX(-32deg);
}

#portfolio .dm-hockey .dm-project-copy::before {
  right: -14px;
  top: 0;
  width: 122px;
  height: 9px;
  background: linear-gradient(90deg, #6ec0ef 0 58%, transparent 58% 64%, #e7b85c 64% 82%, transparent 82% 88%, #6ec0ef 88%);
}

#portfolio .dm-hockey .dm-project-copy::after {
  right: -36px;
  bottom: -19px;
  width: 165px;
  height: 58px;
  background: repeating-linear-gradient(90deg, transparent 0 11px, #a6dbfa1c 11px 18px);
}

#portfolio .dm-fund .dm-project-copy {
  color:#e9f2f0;
  border:1px solid #32413f;
  border-radius:18px 5px 18px 5px;
  background:#1a2424;
}

#portfolio .dm-fund .dm-label {
  color:#6bd7b1;
}

#portfolio .dm-fund .dm-lead {
  color:#6bd7b1;
}

#portfolio .dm-fund .dm-description {
  color:#a4b4b1;
}

#portfolio .dm-fund-title {
  display:flex;
  align-items:center;
  gap:14px;
  font:500 clamp(34px,3.4cqw,46px)/.96 var(--dm-display);
  letter-spacing:-.035em;
}

#portfolio .dm-fund-title img {
  display:block;
  flex:none;
  width:clamp(52px,6cqw,72px);
  height:auto;
  border-radius:16px;
}

#portfolio .dm-fund-title span {
  text-wrap:nowrap;
}

#portfolio .dm-controls {
  position:absolute;
  bottom:8px;
  right:16px;
  display:flex;
  align-items:center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--dm-line);
  border-radius:99px;
  background: var(--dm-surface);
  color: var(--dm-accent);
}

#portfolio .dm-controls button {
  display:grid;
  place-items:center;
  min-width:32px;
  min-height:32px;
  border-radius:50%;
  background: #42454a;
}

#portfolio .dm-controls button:not(:disabled):hover {
  background: var(--dm-accent);
  color:#28231c;
}

#portfolio .dm-controls button:disabled {
  background:transparent;
  opacity:.35;
}

#portfolio .dm-controls svg {
  width:16px;
  height:16px;
}

#portfolio .dm-count {
  display:grid;
  gap:3px;
  padding:0 4px;
  font-size:11px;
  font-weight:600;
  line-height:1;
  font-variant-numeric:tabular-nums;
  text-align:center;
}

#portfolio .dm-count::after {
  content:"";
  height:2px;
  border-radius:99px;
  background: linear-gradient(to right, var(--dm-accent) var(--dm-progress, 16.667%), var(--dm-line) 0);
}

#portfolio .dm-count[data-scene-number="2"] {
  --dm-progress:33.333%;
}

#portfolio .dm-count[data-scene-number="3"] {
  --dm-progress:50%;
}

#portfolio .dm-count[data-scene-number="4"] {
  --dm-progress:66.667%;
}

#portfolio .dm-count[data-scene-number="5"] {
  --dm-progress:83.333%;
}

#portfolio .dm-count[data-scene-number="6"] {
  --dm-progress:100%;
}

#portfolio .dm-footer {
  display:flex;
  flex: 0 0 auto;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 20px;
  padding: 2px 8.33cqw;
  background:#24272c;
  color:var(--dm-ink);
  border-top:1px solid var(--dm-line);
  font-size: 12px;
}

#portfolio .dm-footer-links {
  display:flex;
  align-items:center;
  gap:4px;
}

#portfolio .dm-footer-links a {
  display:grid;
  place-items:center;
  width: 28px;
  height: 28px;
  border-radius:50%;
}

#portfolio .dm-footer-links a:hover {
  background:var(--dm-surface);
}

#portfolio .dm-footer-links img {
  display:block;
  object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.88;
}

#portfolio .dm-footer-links a:hover img,
#portfolio .dm-footer-links a:focus-visible img {
  opacity:1;
}

@container (max-width:620px) {
  #portfolio .dm-footer {
    gap: 2px 8px;
    padding-inline: 14px;
  }

  #portfolio .dm-footer-links {
    gap: 0;
  }

  #portfolio .dm-nav {
    padding:14px 20px 0;
  }
  #portfolio nav {
    gap:2px 10px;
  }
  #portfolio .dm-frame {
    min-height:440px;
    padding-bottom:calc(62.5cqw + 52px);
  }
  #portfolio .dm-copy, #portfolio .dm-right .dm-copy {
    margin:48px 20px 0;
    width:auto;
    text-shadow:0 1px 12px #24272c;
  }
  #portfolio h1 {
    font-size:clamp(40px,9cqw,54px);
  }
  #portfolio .dm-copy p {
    max-width:34ch;
  }
}

@media (pointer:coarse) {
  #portfolio .dm-controls button {
    min-width:44px;
    min-height:44px;
  }
  #portfolio nav a, #portfolio .dm-pill {
    min-height:44px;
  }
  #portfolio nav a[data-scene="0"], #portfolio .dm-footer-links a {
    width:44px;
    height:44px;
    justify-content:center;
  }

  #portfolio .dm-footer {
    padding-block: 0;
  }
}

#portfolio:not(.is-animated) .dm-controls, #portfolio:not(.is-animated) canvas {
  display:none;
}

#portfolio.is-animated .dm-cover {
  display:none;
}

#portfolio:not(.is-animated) article {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  align-items:center;
  gap:5cqw;
  padding:36px 8.33cqw;
  scroll-margin-top:16px;
}

#portfolio:not(.is-animated) .dm-copy {
  width:auto;
  margin:0;
}

#portfolio:not(.is-animated) .dm-right .dm-cover {
  order:-1;
}

#portfolio .dm-cover {
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
  cursor:zoom-in;
}

#portfolio .dm-image-open {
  position:absolute;
  z-index:1;
  border-radius:24px;
  cursor:zoom-in;
}

#portfolio .dm-lightbox:not([open]) {
  display:none;
}

#portfolio .dm-lightbox {
  --dm-image-gap:clamp(12px,2vw,28px);
  position:fixed;
  inset:0;
  width:100%;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:var(--dm-image-gap);
  border:0;
  background:transparent;
  color:var(--dm-ink);
  overflow:hidden;
}

#portfolio .dm-lightbox[open] {
  display:flex;
  flex-direction:column;
}

#portfolio .dm-lightbox::backdrop {
  background:#090c10b3;
}

html.dm-image-viewing {
  overflow:hidden;
}

#portfolio .dm-lightbox .dm-image-close {
  position:absolute;
  top:8px;
  right:8px;
  z-index:1;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid #ffffff38;
  border-radius:50%;
  background:#171b20e8;
  color:var(--dm-ink);
  font-size:30px;
  line-height:1;
  cursor:pointer;
}

#portfolio .dm-lightbox .dm-image-close:hover {
  color:var(--dm-accent);
  border-color:var(--dm-accent);
}

#portfolio .dm-lightbox-viewport {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  touch-action:pan-x pan-y pinch-zoom;
}

#portfolio .dm-lightbox-image {
  position:relative;
  flex:none;
}

#portfolio .dm-lightbox-image img {
  display:block;
  flex:none;
  width:auto;
  height:auto;
  max-width:calc(100vw - 2 * var(--dm-image-gap));
  max-height:calc(100dvh - 2 * var(--dm-image-gap));
  object-fit:contain;
}

@container (max-width:620px) {
  #portfolio:not(.is-animated) .dm-frame {
    padding-bottom:20px;
  }
  #portfolio:not(.is-animated) article {
    grid-template-columns:minmax(0,1fr);
    gap:16px;
    padding-inline:20px;
  }
  #portfolio:not(.is-animated) .dm-right .dm-cover {
    order:0;
  }
}