/* Active portfolio system. Load after the archived study styles. */
.back-to-top {
  position:fixed;
  right:calc(16px + env(safe-area-inset-right,0px));
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:30;
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  padding:0;
  border:1px solid var(--ds-edge);
  border-radius:50%;
  background:#fff;
  color:var(--ink);
  box-shadow:0 2px 12px #0000000a;
  transition:background .2s,box-shadow .2s;
}
.back-to-top svg{width:28px;height:28px;transition:transform .2s}
@media(hover:hover){
  .back-to-top:hover{background:var(--bg);box-shadow:0 4px 16px #00000012}
  .back-to-top:hover svg{transform:translateY(-2px)}
}
.back-to-top:active svg{transform:translateY(-3px)}
@media(max-width:760px){
  .back-to-top{width:52px;height:52px}
  .back-to-top svg{width:24px;height:24px}
}
.final-preview {
  --ds-radius:12px;
  --ds-page-space:112px;
  --ds-section-space:112px;
  --ds-block-space:48px;
  --ds-content-space:32px;
  --ds-stage-inset:48px;
  --ds-stage-gap:32px;
  --ds-caption-space:12px;
  --ds-group-space:12px;
  --ds-anchor-offset:112px;
  --ds-edge:#e8e8e8;
  --radius:var(--ds-radius);
  --section:var(--ds-section-space);
}
.final-preview .intro{padding-block:var(--ds-page-space)}
.final-preview .case-page,.final-preview .about-page{padding-block:var(--ds-page-space)}
.final-preview .end-note{padding-block:var(--ds-page-space)}
.final-preview.c01 .home .works{gap:var(--ds-section-space)}
.final-preview .case-intro{margin-bottom:var(--ds-block-space)}
.final-preview .case-facts{margin-block:var(--ds-block-space) var(--ds-section-space)}
.final-preview .about-copy{margin-block:var(--ds-block-space) var(--ds-section-space)}
.final-preview .case-section{margin-bottom:var(--ds-section-space);scroll-margin-top:var(--ds-anchor-offset)}
.final-preview .case-section:last-child{margin-bottom:0}
.final-preview .case-section-heading{margin-bottom:var(--ds-content-space)}
.final-preview .case-section-heading .eyebrow,.final-preview .case-section-heading .label{margin-bottom:var(--ds-group-space)}
.final-preview .case-section-heading>p:last-child{margin-top:var(--ds-group-space)}
.final-preview .next-project{margin-top:var(--ds-section-space);padding-top:var(--ds-block-space)}
.final-preview .next-project h2{margin-bottom:var(--ds-content-space)}
.final-preview .figure-grid,.final-preview .figure-grid.states,.final-preview .figure-grid.phones,.final-preview .figure-grid.phones.three{gap:var(--ds-block-space)}
.final-preview .figure-grid.phones,.final-preview .case-date-feature,.final-preview .case-flow{padding:var(--ds-stage-inset);border-radius:var(--ds-radius)}
.final-preview .case-note{margin-block:var(--ds-content-space)}
.final-preview .case-subhead,.final-preview .case-related-screens h3{margin-top:var(--ds-block-space);margin-bottom:var(--ds-group-space)}
.final-preview .fp-more-content{margin-top:var(--ds-block-space)}
.final-preview .fp-content-types{gap:var(--ds-content-space);margin-block:var(--ds-content-space)}
.final-preview .fp-delivery{margin-bottom:var(--ds-content-space)}
.final-preview figure figcaption{margin-top:var(--ds-caption-space)}
.final-preview .vbl-clean{margin-top:var(--ds-content-space);--vbl-gap:var(--ds-block-space)}
.final-preview .vbl-layout-01>.vbl-figure+.vbl-group{margin-top:var(--ds-block-space)}
.final-preview .vbl-layout-01 .vbl-stack{gap:var(--ds-block-space)}
.final-preview .vbl-layout-01 .vbl-group{row-gap:var(--ds-block-space)}
.final-preview .vbl-clean figcaption{font-size:13px}
.final-preview .pm3{margin-top:var(--ds-content-space);--pm3-bottom-safe:var(--ds-content-space)}
.final-preview .pm3.pm3--01 .pm3__pin{padding:var(--ds-stage-inset);gap:var(--ds-stage-gap);border-radius:var(--ds-radius)}
.final-preview .pm3 .pm3__panel .fp-paris-grid{row-gap:var(--ds-content-space)}
.final-preview .pm3 .pm3__panel .fp-paris-grid figcaption{margin-top:var(--ds-caption-space)}

/* Clip the actual pixels, not a contain-sized box around them. */
.final-preview .visual{border-radius:var(--ds-radius)}
.final-preview .visual .visual-inner{container-type:size}
.final-preview .visual .ds-visual-screen{display:block;position:relative;flex:none;width:min(100%,calc(100cqh * var(--media-ratio)));aspect-ratio:var(--media-ratio);overflow:hidden;border-radius:var(--ds-radius);isolation:isolate}
.final-preview .visual.navigation .ds-visual-screen.tv{width:min(86%,calc(90cqh * var(--media-ratio)))}
.final-preview .visual.navigation .ds-visual-screen.phone{width:min(16%,calc(100cqh * var(--media-ratio)));margin-left:-7%;margin-bottom:-8%;z-index:1}
.final-preview .visual.riot .ds-visual-screen{width:min(29%,calc(100cqh * var(--media-ratio)))}
.final-preview .visual .ds-visual-screen>img{display:block;width:100%;height:100%;max-height:none;max-width:none;min-width:0;margin:0;object-fit:fill;border-radius:inherit;filter:none;outline:none}
.final-preview .visual.volleyball.case-hero .visual-inner{container-type:normal}
.final-preview .visual.volleyball.case-hero .ds-visual-screen{width:100%}
.final-preview main img{border-radius:var(--ds-radius);outline:1px solid var(--ds-edge);outline-offset:-1px}
.final-preview .vbl-screen,.final-preview .pm3__tile-window,.final-preview .fp-screen{position:relative;border-radius:var(--ds-radius);overflow:hidden;isolation:isolate;clip-path:inset(0 round var(--ds-radius))}
.final-preview .vbl-screen img{border-radius:0;outline:none}
.final-preview .pm3__tile-window img,.final-preview .fp-screen img{outline:none}
.final-preview .ds-visual-screen::after,.final-preview .vbl-screen::after,.final-preview .pm3__tile-window::after,.final-preview .fp-screen::after{content:'';position:absolute;inset:0;z-index:4;border:1px solid var(--ds-edge);border-radius:inherit;pointer-events:none}
.final-preview .pm3__tile-window{position:relative}

/* Review surface. Border options are local preview choices, not saved preferences. */
.final-preview .ds-review{padding-block:var(--ds-page-space);max-width:1280px}
.ds-review h1{font-size:clamp(36px,5vw,64px);line-height:1.15;max-width:18ch}
.ds-review .ds-lead{color:var(--muted);font-size:18px;line-height:1.7;max-width:50ch;margin-top:24px}
.ds-review section{margin-top:var(--ds-section-space)}
.ds-review section h2{font-size:30px;line-height:1.25;margin-bottom:16px}
.ds-review .ds-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 32px;margin-top:40px}
.ds-review .ds-option{min-width:0}
.ds-review .ds-example{width:100%;max-width:240px;margin:0 auto 24px}
.ds-review .ds-example .vbl-screen{position:relative;width:100%;aspect-ratio:375/628;background:white}
.ds-review .ds-example .vbl-screen img{position:absolute;inset:0;width:100%;max-width:none;height:auto;outline:none;border-radius:0}
.ds-review .ds-option h3{font-size:17px;letter-spacing:0;line-height:1.4}
.ds-review .ds-option p{font-size:14px;line-height:1.5;color:var(--muted);margin-top:6px}
.ds-review .ds-option a{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;font-size:14px;text-decoration:underline;text-underline-offset:5px}
.ds-review .ds-option-tag{font-size:12px;color:var(--ink);display:block;margin-top:4px;min-height:18px}
.ds-review .ds-links{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:32px}
.ds-review .ds-links a{min-height:44px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:5px;font-size:15px}
.ds-review .ds-table-wrap{overflow-x:auto;margin-top:32px}
.ds-review table{width:100%;border-collapse:collapse;text-align:left;font-size:15px;line-height:1.6}
.ds-review th,.ds-review td{padding:18px 20px 18px 0;border-bottom:1px solid var(--line);vertical-align:top}
.ds-review th{font-weight:550}
.ds-review td{color:var(--muted)}
.ds-review .ds-note{font-size:15px;color:var(--muted);line-height:1.7;margin-top:24px;max-width:65ch}
@media(max-width:900px){.ds-review .ds-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 .final-preview{--ds-page-space:80px;--ds-section-space:80px;--ds-block-space:32px;--ds-content-space:24px;--ds-stage-inset:32px;--ds-stage-gap:24px;--ds-anchor-offset:156px}
 .final-preview .case-section:has(.vbl-studies),.final-preview .case-section:has(.pm3){scroll-margin-top:var(--ds-anchor-offset)}
 .final-preview .case-toc{margin-bottom:var(--ds-block-space)}
 .final-preview .pm3{--pm3-top:156px}
 .final-preview .figure-grid.phones,.final-preview .case-date-feature,.final-preview .case-flow{padding:var(--ds-stage-inset)}
 .ds-review .ds-options{gap:40px 20px}
 .ds-review .ds-lead{font-size:16px}
 .ds-review th,.ds-review td{font-size:13px;padding-right:14px}
}

/* Approved Balanced typography across the portfolio. */
.final-preview{--ds-type-meta:.875rem;--ds-type-nav:.875rem;--ds-type-body:1.125rem}
.final-preview .nav-note,.final-preview .eyebrow,.final-preview .label,.final-preview .small,.final-preview figcaption,.final-preview .vbl-clean figcaption,.final-preview .case-section-heading .eyebrow,.final-preview .case-section-heading .label,.final-preview .case-facts .eyebrow,.final-preview .intro .eyebrow,.final-preview .fp-paris-grid figcaption,.final-preview .pm3 .pm3__panel .fp-paris-grid figcaption,.final-preview .pm3 .pm3__caption,.final-preview .pm3 .pm3__count,.final-preview .pm3 .pm3__eyebrow,.final-preview .fp-content-types figcaption,.final-preview .fp-showcase figcaption,.final-preview .fp-schedule-kit figcaption,.final-preview .work-meta p{font-size:var(--ds-type-meta);line-height:1.5}
.final-preview .case-section-heading>p:last-child,.final-preview .case-section>p,.final-preview .case-note-items dd,.final-preview .case-date-notes dd,.final-preview .case-facts>div>p:not(.eyebrow):not(.small){font-size:var(--ds-type-body);line-height:1.6}
.final-preview .site-nav nav,.final-preview .back-link{font-size:var(--ds-type-nav)}
.final-preview .pm3 .pm3__ruler{font-size:var(--ds-type-meta);line-height:1.5}
.final-preview .case-flow-caption,.final-preview .fp-more-content .fp-related{font-size:var(--ds-type-meta);line-height:1.5}
.final-preview .fp-delivery,.final-preview .fp-more-content>p,.final-preview .intro-bottom p,.final-preview .experience article p:not(.years){font-size:var(--ds-type-body);line-height:1.6}
@media(max-width:760px){
 .final-preview{--ds-type-meta:.8125rem;--ds-type-body:1rem}
 .final-preview .site-nav{height:auto;min-height:68px;padding-block:12px;gap:12px 20px;flex-wrap:wrap}
 .final-preview .site-nav nav{gap:16px;flex-wrap:wrap}
 .final-preview .site-nav nav a{min-height:44px}
}