/* Shared product pages: the same paper, typography and rhythm as the portfolio. */
.project-page {
    --project-accent: #98442a;
    --project-tint: #eae1d6;
    --project-dark: #302823;
    --project-light: #efb798;
}
.theme-atmos {
    --project-accent: #245c68;
    --project-tint: #dce6e8;
    --project-dark: #223238;
    --project-light: #bbd7d9;
}
.theme-hub {
    --project-accent: #605181;
    --project-tint: #e5e2ed;
    --project-dark: #2c2936;
    --project-light: #d1c5e9;
}
.project-page ::selection { background: var(--project-accent); color: #fff; }
.project-page :focus-visible { outline-color: var(--project-accent); }
.project-page [hidden] { display: none !important; }
.detail-header { gap: 25px; }
.detail-header .detail-back { margin-left: auto; }
.detail-back { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; white-space: nowrap; }
.detail-back:hover { color: var(--project-accent); }
.detail-header .header-controls { gap: 0; }
.project-kicker { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); padding-top: 31px; }
.project-kicker > span:last-child { text-align: right; }
.product-hero-grid { display: grid; grid-template-columns: 1.7fr 1fr; align-items: center; gap: 54px; padding-block: 67px 64px; }
.product-heading { min-width: 0; }
.product-heading h1 { font-size: clamp(64px, 8.4vw, 122px); line-height: .99; font-weight: 500; letter-spacing: -6px; }
.product-tagline { margin-top: 28px; font-size: clamp(23px, 2.6vw, 37px); line-height: 1.5; letter-spacing: -.9px; }
.product-tagline .serif { color: var(--project-accent); }
.product-description { font-size: 14px; line-height: 1.95; color: var(--muted); max-width: 575px; margin-top: 18px; }
.product-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 21px 28px; margin-top: 29px; }
.button-project { background: var(--project-accent); color: white; }
.button-project:hover { background: var(--project-dark); }
.product-actions .text-link { border-bottom: 1px solid var(--line); padding-block: 8px; }
.product-actions .text-link:hover { color: var(--project-accent); }
.product-emblem { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; color: var(--project-accent); background-image: radial-gradient(#b6b8ad80 .75px, transparent .75px); background-size: 22px 22px; }
.product-emblem > svg { width: 100%; height: 100%; overflow: visible; }
.product-emblem::before, .product-emblem::after { content: '+'; position: absolute; font-family: var(--mono); font-size: 17px; font-weight: 300; color: #a6a79d; }
.product-emblem::before { top: 0; left: 0; }
.product-emblem::after { bottom: 0; right: 0; }
.product-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 23px; }
.product-facts > div { padding-inline: 30px; border-left: 1px solid var(--line); }
.product-facts > div:first-child { padding-left: 0; border: 0; }
.product-facts dt { font-size: 10px; color: var(--muted); letter-spacing: 1px; margin-bottom: 9px; }
.product-facts dd { font-size: 13px; line-height: 1.7; margin: 0; }
.product-section-nav { display: flex; gap: 37px; align-items: center; padding-block: 23px; font-size: 11px; overflow-x: auto; scrollbar-width: thin; }
.product-section-nav a { white-space: nowrap; padding-block: 6px; border-bottom: 1px solid transparent; }
.product-section-nav a:hover { color: var(--project-accent); border-color: currentColor; }
.product-gallery { padding-top: 40px; }
.gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.gallery-heading .eyebrow { color: var(--muted); }
.gallery-title { font-size: 24px; font-weight: 400; letter-spacing: -.5px; line-height: 1.4; }
.gallery-stage { background: var(--project-tint); padding: 42px 48px 25px; overflow: hidden; }
.gallery-slide { margin: 0; }
.gallery-slide[hidden] { display: none; }
.gallery-slide img { width: 100%; height: min(53vw, 600px); object-fit: contain; object-position: center; filter: drop-shadow(0 18px 18px #20252a1f); }
.theme-fire .gallery-slide img { height: min(40vw, 500px); }
.gallery-slide figcaption { text-align: center; margin: 25px auto 0; font-size: 11px; line-height: 1.8; color: var(--project-accent); min-height: 20px; }
.gallery-toolbar { display: none; justify-content: space-between; align-items: center; gap: 20px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.product-gallery.is-ready .gallery-toolbar { display: flex; }
.gallery-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.gallery-tabs button { font-size: 10px; background: transparent; border: 1px solid var(--line); padding: 11px 15px; border-radius: 24px; line-height: 1.3; }
.gallery-tabs button[aria-pressed=true] { background: var(--project-accent); border-color: var(--project-accent); color: #fff; }
.gallery-tabs button:hover:not([aria-pressed=true]) { background: var(--project-tint); }
.gallery-navigation { display: flex; align-items: center; gap: 13px; }
.gallery-navigation button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 36px; height: 36px; padding: 6px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 18px; }
.gallery-navigation button:hover { background: var(--project-tint); }
.gallery-count { font-family: var(--mono); font-size: 10px; white-space: nowrap; min-width: 45px; text-align: center; }
.gallery-expand { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: transparent; border: 0; font-size: 10px; padding: 10px 0; white-space: nowrap; }
.gallery-expand:hover { color: var(--project-accent); }
.gallery-navigation button.gallery-expand { width: auto; border: 0; border-radius: 0; font-size: 10px; margin-left: 8px; }
.product-section { padding-block: 89px 95px; }
.project-page .section-heading h2 { font-size: clamp(30px, 3.2vw, 44px); max-width: 680px; }
.project-page .section-heading h2 .serif { color: var(--project-accent); }
.project-page .section-intro { max-width: 365px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 42px; }
.theme-fire .feature-grid { grid-template-columns: repeat(2, 1fr); }
.feature-item { padding-top: 23px; border-top: 1px solid var(--line); }
.feature-number { color: var(--project-accent); display: block; margin-bottom: 27px; }
.feature-item h3 { font-size: 20px; font-weight: 400; letter-spacing: -.5px; line-height: 1.5; }
.feature-item p { color: var(--muted); font-size: 12px; line-height: 1.95; margin-top: 13px; }
.product-story { background: var(--project-dark); color: var(--paper); padding-block: 72px; }
.story-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 90px; align-items: center; }
.story-copy .eyebrow { color: var(--project-light); }
.story-copy h2 { font-size: clamp(28px, 3.2vw, 45px); font-weight: 400; line-height: 1.45; letter-spacing: -1px; margin-top: 23px; }
.story-copy h2 .serif { color: var(--project-light); }
.story-copy > p:not(.eyebrow) { font-size: 13px; line-height: 1.95; color: #d1d0ca; margin-top: 20px; }
.story-visual { min-width: 0; color: var(--project-light); }
.story-visual svg { display: block; max-width: 100%; width: 100%; height: auto; }
.workflow-list { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.workflow-list li { position: relative; padding: 24px 0 24px 47px; border-top: 1px solid #ffffff29; counter-increment: step; }
.workflow-list li::before { content: '0' counter(step); position: absolute; top: 29px; left: 0; font: 10px var(--mono); color: var(--project-light); }
.workflow-list h3, .workflow-list strong { font-size: 19px; font-weight: 400; line-height: 1.5; }
.workflow-list p { font-size: 12px; color: #d1d0ca; line-height: 1.9; margin-top: 8px; }
.product-note { font-size: 11px; line-height: 1.9; color: var(--muted); margin-top: 20px; }
.product-story .product-note { color: #b9bfbd; }
.demo-links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.demo-link, .demo-links > a { border: 1px solid var(--line); padding: 29px; display: flex; align-items: center; gap: 24px; font-size: 17px; line-height: 1.5; transition: background .2s; }
.demo-links > a:hover { background: var(--project-tint); }
.demo-links > a { display: grid; grid-template-columns: 1fr auto; gap: 17px; }
.demo-links > a > .mono { grid-column: 1 / -1; color: var(--muted); }
.demo-links h3 { font-size: 20px; font-weight: 400; }
.demo-links > a > span:last-child { font-size: 27px; color: var(--project-accent); }
.demo-links .demo-platform { display: block; font-size: 11px; color: var(--muted); }
.demo-links .demo-play { width: 49px; height: 49px; border: 1px solid var(--project-accent); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: var(--project-accent); }
.demo-links .demo-arrow { margin-left: auto; color: var(--project-accent); font-size: 28px; }
.product-cta { padding-block: 80px 82px; }
.cta-panel { background: var(--project-tint); position: relative; padding: 51px 57px; }
.cta-panel > .eyebrow { color: var(--project-accent); }
.cta-panel h2 { font-size: clamp(29px, 3.4vw, 49px); font-weight: 400; line-height: 1.4; letter-spacing: -1px; margin-top: 20px; }
.cta-panel h2 .serif { color: var(--project-accent); }
.cta-panel > p:not(.eyebrow) { font-size: 13px; color: var(--muted); line-height: 1.9; margin-top: 18px; max-width: 780px; }
.cta-panel .text-link { border-color: #7b798954; }
.cta-panel > .button { margin-top: 23px; }
.edition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 35px; }
.edition { padding: 29px; border: 1px solid #79748657; }
.edition h3 { font-size: 23px; font-weight: 500; letter-spacing: -.5px; }
.edition .edition-price { margin-block: 17px 14px; font-size: 34px; letter-spacing: -1px; }
.edition p { font-size: 12px; line-height: 1.9; color: var(--muted); }
.edition ul { padding-left: 17px; color: var(--muted); font-size: 12px; line-height: 2.1; margin-block: 20px; }
.edition .text-link { font-size: 12px; }
.project-next { padding-block: 35px 46px; border-top: 1px solid var(--line); }
.project-next > .eyebrow, .project-next > .mono { color: var(--muted); }
.project-next > a { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-top: 21px; }
.project-next h2 { font-size: clamp(40px, 5.7vw, 80px); font-weight: 400; line-height: 1.2; letter-spacing: -2.5px; }
.project-next a p { margin-top: 12px; color: var(--muted); font-size: 12px; }
.project-next > a > span:last-child { font-size: 60px; color: var(--project-accent); transition: transform .25s; }
.project-next > a:hover > span:last-child { transform: translate(5px, -5px); }
.project-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-block: 25px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.project-footer > div { display: flex; flex-wrap: wrap; gap: 22px; }
.project-footer a:hover { color: var(--project-accent); }
.image-dialog { width: min(1440px, 95vw); max-width: none; max-height: 95dvh; padding: 22px; border: 1px solid #ffffff35; background: var(--paper); color: var(--ink); }
.image-dialog::backdrop { background: #171b1de6; backdrop-filter: blur(7px); }
.dialog-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 15px; }
.dialog-header > span { font: 11px var(--mono); color: var(--muted); }
.dialog-close { background: transparent; border: 1px solid var(--line); width: 38px; height: 38px; display: grid; place-items: center; font-size: 23px; }
.dialog-image { width: 100%; height: auto; max-height: 75dvh; object-fit: contain; }
.dialog-caption { margin-top: 17px; font-size: 12px; text-align: center; line-height: 1.8; }
@media (max-width: 1100px) {
    .product-hero-grid { gap: 26px; padding-block: 54px; }
    .product-heading h1 { letter-spacing: -4px; }
    .product-tagline { font-size: 28px; }
    .product-description { font-size: 13px; }
    .gallery-stage { padding: 32px 30px 22px; }
    .gallery-toolbar { flex-wrap: wrap; gap: 15px; }
    .feature-grid { gap: 28px; }
    .story-grid { gap: 50px; }
    .cta-panel { padding: 41px; }
}
@media (max-width: 760px) {
    .detail-header { gap: 13px; }
    .detail-back { font-size: 10px; gap: 6px; }
    .detail-header .language-switch { gap: 4px; }
    .project-kicker { padding-top: 25px; font-size: 8px; letter-spacing: .6px; }
    .project-kicker > span:last-child { display: none; }
    .product-hero-grid { grid-template-columns: 1fr; gap: 25px; padding-block: 40px 31px; }
    .product-heading h1 { font-size: clamp(52px, 13vw, 91px); letter-spacing: -3px; }
    .theme-fire .product-heading h1 { font-size: 96px; }
    .product-tagline { font-size: 26px; margin-top: 22px; letter-spacing: -.5px; }
    .product-description { font-size: 12px; margin-top: 17px; }
    .product-actions { margin-top: 23px; gap: 17px 22px; }
    .product-actions .button { font-size: 11px; padding: 15px 17px; gap: 24px; }
    .product-emblem { max-width: 270px; margin-inline: auto; }
    .product-facts { padding-block: 19px; gap: 0; }
    .product-facts > div { padding-inline: 14px; }
    .product-facts > div:last-child { padding-right: 0; }
    .product-facts dt { font-size: 8px; letter-spacing: .3px; line-height: 1.7; }
    .product-facts dd { font-size: 10px; line-height: 1.8; overflow-wrap: anywhere; }
    .product-section-nav { gap: 24px; padding-block: 19px; font-size: 10px; }
    .product-gallery { padding-top: 23px; }
    .gallery-heading { align-items: flex-start; flex-direction: column; gap: 11px; margin-bottom: 20px; }
    .gallery-title { font-size: 21px; }
    .gallery-stage { padding: 21px 12px 15px; }
    .gallery-slide img { height: 61vw; }
    .theme-fire .gallery-slide img { height: 43vw; }
    .gallery-slide figcaption { font-size: 10px; margin-top: 16px; }
    .gallery-toolbar { gap: 16px; padding-block: 17px; }
    .gallery-tabs { gap: 6px; }
    .gallery-tabs button { font-size: 9px; padding: 10px 12px; }
    .gallery-navigation { gap: 11px; }
    .gallery-navigation button { width: 33px; height: 33px; }
    .gallery-expand { font-size: 9px; margin-left: auto; }
    .product-section { padding-block: 57px 58px; }
    .project-page .section-heading h2 { font-size: 30px; }
    .feature-grid { grid-template-columns: 1fr 1fr; gap: 28px 22px; }
    .feature-number { margin-bottom: 16px; font-size: 9px; }
    .feature-item { padding-top: 17px; }
    .feature-item h3 { font-size: 18px; }
    .feature-item p { font-size: 11px; line-height: 1.9; margin-top: 10px; }
    .product-story { padding-block: 48px; }
    .story-grid { grid-template-columns: 1fr; gap: 34px; }
    .story-copy h2 { font-size: 30px; margin-top: 18px; }
    .story-copy > p:not(.eyebrow) { font-size: 12px; }
    .story-visual { max-width: 400px; width: 100%; margin-inline: auto; }
    .workflow-list li { padding: 21px 0 21px 41px; }
    .workflow-list li::before { top: 27px; }
    .workflow-list h3 { font-size: 18px; }
    .workflow-list p { font-size: 11px; }
    .product-note { font-size: 10px; }
    .demo-links { grid-template-columns: 1fr; gap: 14px; }
    .demo-links > a { padding: 23px; font-size: 15px; gap: 18px; }
    .product-cta { padding-block: 54px 54px; }
    .cta-panel { padding: 30px 23px; }
    .cta-panel h2 { font-size: 30px; }
    .cta-panel > p:not(.eyebrow) { font-size: 12px; }
    .edition-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 27px; }
    .edition { padding: 23px; }
    .edition h3 { font-size: 22px; }
    .edition ul { font-size: 11px; }
    .project-next { padding-block: 29px 31px; }
    .project-next h2 { font-size: 39px; letter-spacing: -1.5px; }
    .project-next > a > span:last-child { font-size: 43px; }
    .project-footer { font-size: 9px; padding-block: 22px; gap: 17px; }
    .image-dialog { padding: 14px; }
    .dialog-header { margin-bottom: 12px; }
    .dialog-caption { font-size: 11px; }
}
@media (max-width: 380px) {
    .detail-header .wordmark { font-size: 11px; }
    .detail-header .brand-mark { width: 25px; }
    .detail-header { gap: 10px; }
    .detail-header .detail-back { font-size: 9px; }
    .feature-grid, .theme-fire .feature-grid { grid-template-columns: 1fr; }
    .product-heading h1 { font-size: 46px; }
    .product-tagline { font-size: 24px; }
    .gallery-tabs button { padding-inline: 9px; }
    .product-facts > div { padding-inline: 10px; }
    .project-next h2 { font-size: 32px; }
}

/* Interactive studies retain their static SVG fallback until initialization succeeds. */
.product-emblem.is-interactive { display: block; aspect-ratio: auto; place-items: normal; }
.project-art-stage { position: relative; width: 100%; aspect-ratio: 1.1; touch-action: pan-y; cursor: crosshair; }
.project-art-stage > svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.project-art-stage:focus-visible { outline: 1px dashed var(--project-accent); outline-offset: 4px; }
.project-art-controls { display: flex; align-items: center; width: 100%; gap: 10px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.project-art-caption { flex: 1; font-size: 8px; letter-spacing: .7px; white-space: nowrap; }
.project-art-state { font-size: 7px; letter-spacing: 1px; color: var(--muted); }
.project-art-toggle { display: grid; place-items: center; width: 31px; height: 31px; padding: 0; flex-shrink: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--project-accent); font-size: 15px; }
.project-art-toggle:hover { border-color: var(--project-accent); }
.project-art-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.project-art-mode { background: transparent; padding: 7px 10px; min-height: 30px; border: 1px solid transparent; border-radius: 20px; font-size: 9px; color: var(--muted); transition: color .25s, background .25s; }
.project-art-mode:hover { color: var(--project-accent); border-color: var(--project-tint); }
.project-art-mode[aria-pressed=true] { color: white; background: var(--project-accent); }
.project-art-hint { margin-top: 14px; color: var(--muted); font-size: 9px; letter-spacing: .7px; }
.product-emblem.is-interactive::after { display: none; }
@media (max-width: 760px) {
    .product-emblem.is-interactive { max-width: 360px; margin-top: 7px; }
    .project-art-stage { aspect-ratio: 1.15; }
    .project-art-controls { padding-block: 9px; }
    .project-art-caption { font-size: 8px; }
    .project-art-mode { padding: 9px 11px; }
    .project-art-hint { margin-top: 12px; font-size: 8px; }
}
@media (max-width: 380px) {
    .project-art-modes { gap: 4px; }
    .project-art-mode { padding: 8px 9px; font-size: 8px; }
    .project-art-state { font-size: 6px; }
}