/* Project overview page: a short introduction, then the chapters arrive on a sealed, vertical scroll */
.pj-page .cs { padding-bottom: 120px; }
.pj-page .cs-chapter { margin-top: 48px; }
.pj-page .cs-chapter-title { margin-bottom: 22px; padding-bottom: 16px; }
.pj-page .cs-props { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; }
@media (max-width: 640px) { .pj-page .cs-props { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-wrap { margin-top: 0; }
.sc { --rw: 30px; --ease: cubic-bezier(.65,.05,.2,1); position: relative; width: 100%; margin: 0 auto; }
.sc-roll { position: relative; z-index: 3; height: var(--rw); margin: 0; border-radius: 11px; background: linear-gradient(180deg, #0F0F11 0%, #2A2A30 20%, #1F1F24 42%, #141417 72%, #0B0B0C 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), inset 0 -1px 0 rgb(0 0 0 / 60%), inset 0 0 0 1px rgb(255 255 255 / 5%), 0 14px 26px rgb(0 0 0 / 50%); }
.sc-roll::before, .sc-roll::after { content: ""; position: absolute; top: 3px; bottom: 3px; width: 14px; border-radius: 7px; background: linear-gradient(90deg, #0E0E10, #2C2C32 55%, #18181B); box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), inset 0 0 0 1px rgb(255 255 255 / 6%), 0 3px 8px rgb(0 0 0 / 50%); }
.sc-roll::before { left: -4px; } .sc-roll::after { right: -4px; }
.sc-paper { position: relative; z-index: 1; height: var(--h, 0px); overflow: hidden; margin: 0 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); transition: height 1.1s var(--ease); }
.sc-paper::before, .sc-paper::after { content: ""; position: absolute; left: 0; right: 0; height: 34px; pointer-events: none; z-index: 2; }
.sc-paper::before { top: 0; background: linear-gradient(180deg, rgb(0 0 0 / 45%), transparent); }
.sc-paper::after { bottom: 0; background: linear-gradient(0deg, rgb(0 0 0 / 45%), transparent); }
.sc-inner { position: absolute; left: 0; right: 0; top: 0; padding: 34px 40px; opacity: 0; transition: opacity .4s ease; }
.sc.is-open .sc-inner { opacity: 1; transition-delay: .5s; }
.sc-kicker { color: rgb(168 148 255); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sc-title { margin: 8px 0 16px; color: var(--bright); font-size: 19px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.sc-list { display: grid; margin: 0; padding: 0; list-style: none; }
.sc-item { border-top: 1px solid rgb(255 255 255 / 8%); }
.sc-item:last-child { border-bottom: 1px solid rgb(255 255 255 / 8%); }
.sc-link { position: relative; display: grid; grid-template-columns: 34px 28px minmax(0, 1fr) 20px; align-items: center; gap: 2px 14px; padding: 12px 4px; color: inherit; outline: none; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s var(--ease), background .25s ease, padding .25s ease; }
.sc.is-open .sc-link { opacity: 1; transform: none; transition-delay: calc(.8s + var(--i) * .12s), calc(.8s + var(--i) * .12s), 0s, 0s; }
.sc-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, rgb(91 52 255), rgb(31 107 255)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.sc-link:hover, .sc-link:focus-visible { background: rgb(91 52 255 / 10%); padding-left: 10px; }
.sc-link:hover::after, .sc-link:focus-visible::after { transform: scaleX(1); }
.sc-thumb { grid-row: 1 / span 2; width: 34px; height: 60px; border-radius: 6px; object-fit: cover; object-position: top; box-shadow: 0 0 0 1px rgb(255 255 255 / 12%); transition: transform .4s var(--ease); }
.sc-link:hover .sc-thumb, .sc-link:focus-visible .sc-thumb { transform: rotate(-4deg) scale(1.08); }
.sc-num { grid-row: 1 / span 2; color: rgb(168 148 255); font-size: 13px; font-style: normal; font-weight: 600; letter-spacing: .06em; }
.sc-link b { grid-column: 3; align-self: end; color: var(--bright); font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.sc-link span { grid-column: 3; align-self: start; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.sc-link svg { grid-row: 1 / span 2; grid-column: 4; width: 15px; height: 15px; color: var(--muted); transition: transform .3s var(--ease), color .2s ease; }
.sc-link:hover svg, .sc-link:focus-visible svg { color: var(--bright); transform: translateX(4px); }
/* the ribbon and the seal sit on the join of the two rollers */
.sc-ribbon { position: absolute; z-index: 4; left: calc(50% - 16px); width: 32px; top: -5px; height: calc(var(--rw) * 2 + 10px); border-radius: 3px; background: linear-gradient(180deg, rgb(255 255 255 / 20%), transparent 22%, transparent 55%, rgb(0 0 0 / 38%)) 0 0 / 100% 50% repeat-y, linear-gradient(90deg, #3A21B8, #6F55FF 50%, #3A21B8); box-shadow: 0 0 22px rgb(91 52 255 / 35%), 0 6px 12px rgb(0 0 0 / 45%), inset 0 0 0 1px rgb(255 255 255 / 10%); transition: transform .8s var(--ease), opacity .5s ease; pointer-events: none; }
.sc.is-open .sc-ribbon { opacity: 0; transform: translateY(-40px) rotate(-8deg); }
.sc-seal { position: absolute; z-index: 5; left: 50%; top: var(--rw); width: 76px; height: 76px; margin: -38px 0 0 -38px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .3s var(--ease); animation: sc-pulse 2.6s ease-in-out infinite; }
.sc-seal:hover { transform: scale(1.08) rotate(-4deg); animation: none; }
.sc-seal:active { transform: scale(.93); }
.sc-seal:focus-visible { outline: 2px solid var(--bright); outline-offset: 6px; }
.sc.is-open .sc-seal { pointer-events: none; animation: none; }
.sc-seal i { position: absolute; inset: 0; border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%; background: radial-gradient(circle at 34% 28%, #B7A6FF 0%, #7B5CFF 34%, #4A2BE0 70%, #2A1A9A 100%); box-shadow: inset 0 0 0 5px rgb(255 255 255 / 8%), inset 0 0 0 6px rgb(0 0 0 / 14%), inset 0 3px 5px rgb(255 255 255 / 35%), inset 0 -5px 8px rgb(0 0 0 / 30%); transition: transform .9s var(--ease), opacity .6s ease .1s; }
.sc-seal i:nth-child(1) { clip-path: polygon(0 0, 54% 0, 46% 30%, 56% 55%, 44% 78%, 52% 100%, 0 100%); transform-origin: 20% 90%; }
.sc-seal i:nth-child(2) { clip-path: polygon(54% 0, 100% 0, 100% 100%, 52% 100%, 44% 78%, 56% 55%, 46% 30%); transform-origin: 80% 90%; }
.sc-seal b { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: rgb(255 255 255 / 92%); font-size: 30px; font-weight: 700; font-style: italic; text-shadow: 0 -1px 0 rgb(0 0 0 / 30%), 0 1px 0 rgb(255 255 255 / 20%); transition: opacity .3s ease; }
.sc.is-open .sc-seal b { opacity: 0; }
.sc.is-open .sc-seal i:nth-child(1) { transform: translate(-30px, -90px) rotate(-38deg); opacity: 0; }
.sc.is-open .sc-seal i:nth-child(2) { transform: translate(30px, -110px) rotate(34deg); opacity: 0; }
@keyframes sc-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.sc-hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 24px 0 0; color: var(--text); font-size: 13px; text-align: center; transition: opacity .4s ease; }
.sc-hint b { padding: 3px 9px; border-radius: 999px; background: rgb(91 52 255 / 22%); color: rgb(168 148 255); font-size: 12px; font-weight: 600; }
.sc.is-open ~ .sc-hint { opacity: 0; pointer-events: none; height: 0; margin: 0; overflow: hidden; }
.sc-close { display: block; margin: 22px auto 0; padding: 7px 14px; border: 1px solid #333338; border-radius: 999px; background: none; color: var(--text); font-size: 12.5px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .4s ease, background .2s ease, color .2s ease; }
.sc.is-open ~ .sc-close { opacity: 1; pointer-events: auto; transition-delay: 1.6s, 0s, 0s; }
.sc-close:hover { background: var(--card); color: var(--bright); }
@media (max-width: 560px) { .sc-inner { padding: 28px 22px; } .sc-link { grid-template-columns: 30px 24px minmax(0, 1fr) 16px; gap: 2px 10px; } }
@media (prefers-reduced-motion: reduce) { .sc-paper, .sc-ribbon, .sc-seal i, .sc-link, .sc-inner { transition-duration: .01s; transition-delay: 0s !important; } .sc-seal { animation: none; } }

/* Horizontal intro: the words on the left, the scroll on the right */
.pj-intro { display: block; margin-top: 48px; }
.pj-eyebrow { margin-bottom: 18px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.pj-h { max-width: 28ch; color: var(--bright); font-size: 28px; font-weight: 500; letter-spacing: -.035em; line-height: 1.15; }
.pj-h mark { padding: 0 4px; margin: 0 -4px; background: linear-gradient(transparent 58%, rgb(var(--pr-rgb) / 38%) 58%) no-repeat 0 0 / 100% 100%; color: inherit; }
.js .pj-intro:not(.is-in) .pj-h mark { background-size: 0% 100%; }
.pj-h mark { transition: background-size 1s cubic-bezier(.3,.7,.2,1) .6s; }
.pj-obj { max-width: none; margin: 24px 0 0; padding-left: 16px; border-left: 2px solid rgb(91 52 255 / 70%); color: var(--bright); font-size: 16px; font-weight: 500; letter-spacing: -.015em; line-height: 1.45; white-space: nowrap; }
.pj-obj span { display: block; margin-bottom: 4px; color: var(--text); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pj-obj mark { padding: 0 3px; margin: 0 -3px; border-radius: 3px; background: rgb(91 52 255 / 18%); color: inherit; }
.pj-copy + .sc-wrap { margin-top: 36px; }
.pj-sub { max-width: 62ch; margin: 16px 0 0; color: var(--text); font-size: 14px; text-wrap: pretty; line-height: 1.8; }
.pj-sub strong { color: var(--bright); font-weight: 600; padding: 1px 3px; margin: 0 -3px; border-radius: 3px; background: rgb(91 52 255 / 16%); }
@media (max-width: 560px) { .pj-h { font-size: 24px; } }
@media (max-width: 720px) { .pj-obj { white-space: normal; text-wrap: balance; font-size: 15px; } }
.sc-seal { filter: drop-shadow(0 10px 12px rgb(0 0 0 / 45%)) drop-shadow(0 0 14px rgb(91 52 255 / 45%)); }

/* Where the project stands: three competitors in a row, then the gap the project fills */
.pj-stand { margin-top: 44px; }
.pj-stand .cs-prose { margin: 0; }
.pj-stand .cs-h3 { margin-bottom: 10px; }
.pj-stand .cs-mapfig { margin-top: 24px; }
.pj-stand-h { margin: 0 0 14px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
/* Where Natha stands: a table, the last row is Natha */
.pj-table-wrap { border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.pj-table { width: 100%; border-collapse: collapse; text-align: left; }
.pj-table thead th { padding: 12px 18px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pj-table tbody th, .pj-table td { padding: 16px 18px; border-top: 1px solid var(--rule); vertical-align: top; }
.pj-table tbody th { width: 22%; color: var(--bright); font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; }
.pj-table td { color: var(--text); font-size: 13px; line-height: 1.6; text-wrap: pretty; }
.pj-table td:nth-child(2) { width: 34%; }
.pj-pts { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pj-pts li { position: relative; padding-left: 16px; color: var(--text); font-size: 13px; line-height: 1.5; }
.pj-pts li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--pr-rgb)); }
@media (max-width: 640px) {
  .pj-table, .pj-table tbody, .pj-table tr, .pj-table th, .pj-table td { display: block; width: auto; }
  .pj-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pj-table tbody tr { padding: 14px 16px 16px; border-top: 1px solid var(--rule); }
  .pj-table tbody tr:first-child { border-top: 0; }
  .pj-table tbody th, .pj-table td { padding: 0; border: 0; width: auto; }
  .pj-table td, .pj-table td:nth-child(2) { width: auto; margin-top: 10px; }
  .pj-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
}
.pj-stand + .sc-wrap { margin-top: 44px; }

/* A chapter whose case study is not written yet: listed, but not a link */
.sc-link.is-soon { cursor: default; }
.sc-link.is-soon:hover { background: none; padding-left: 4px; }
.sc-link.is-soon:hover::after { transform: scaleX(0); }
.sc-link.is-soon:hover .sc-thumb { transform: none; }
.sc-link .sc-soon { grid-row: 1 / span 2; grid-column: 4; justify-self: end; padding: 3px 8px; border-radius: 999px; background: rgb(255 255 255 / 6%); color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sc-list.has-soon .sc-link { grid-template-columns: 34px 28px minmax(0, 1fr) auto; }
@media (max-width: 560px) { .sc-list.has-soon .sc-link { grid-template-columns: 30px 24px minmax(0, 1fr) auto; } }


/* Natha page: body copy fills the whole column */
.pj-natha .pj-sub { max-width: none; }
.pj-natha .pj-h { text-wrap: balance; }

/* the positioning prose uses the same soft violet highlight as the intro */
.pj-stand .cs-prose strong { background: rgb(91 52 255 / 16%); box-shadow: none; }

/* Positioning map on the Natha page: the highlighted dot is violet, not red */
.pj-natha .cs-mapfig { margin-top: 22px; }
.pj-natha .cs-dot.is-after b { background: rgb(124 96 255); box-shadow: 0 0 0 6px rgb(91 52 255 / 22%); animation: pj-glow 2.4s ease-in-out infinite; }
.pj-natha .pj-table-wrap { margin-top: 22px; }
@keyframes pj-glow { 50% { box-shadow: 0 0 0 10px rgb(91 52 255 / 8%); } }
@media (prefers-reduced-motion: reduce) { .pj-natha .cs-dot.is-after b { animation: none; } }

/* Second table: the gaps, paired with Natha's answers */
.pj-stand-h2 { margin-top: 30px; }
.pj-table-wrap-us { margin-top: 0; background: linear-gradient(100deg, rgb(91 52 255 / 14%), rgb(31 107 255 / 5%)); box-shadow: inset 0 0 0 1px rgb(91 52 255 / 45%); }
.pj-table-us thead th { color: rgb(168 148 255); }
.pj-table-us tbody th { width: 38%; color: var(--text); font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.6; }
.pj-table-us td { color: var(--bright); }
.pj-table-us tbody th, .pj-table-us td { border-top-color: rgb(91 52 255 / 25%); }
@media (max-width: 640px) { .pj-table-us tbody th { width: auto; color: var(--muted); } .pj-table-us td { margin-top: 6px; } .pj-table-us td::before { display: none; } }