/* Content extensions inherit the individual concept's own palette and type. */
.demo-depth{--depth-line:color-mix(in srgb,var(--ink) 22%,transparent);--depth-tint:color-mix(in srgb,var(--accent) 17%,var(--paper));padding:clamp(28px,5cqw,90px);overflow:hidden;border-top:1px solid var(--depth-line);font-family:var(--body);background:var(--paper);color:var(--ink)}
.demo-depth h2{font-family:var(--display);font-size:clamp(32px,4.6cqw,76px);line-height:1.03;letter-spacing:-.04em;margin:12px 0 24px}.demo-depth h3{font-family:var(--display);font-size:clamp(24px,2.5cqw,38px);line-height:1.15;margin:18px 0 12px}.demo-depth p{font-family:var(--body);font-size:clamp(15px,1.4cqw,19px);line-height:1.7;max-width:56ch;margin:0}.depth-kicker,.depth-photo-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.5}.depth-narrative{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,5cqw,80px);margin-bottom:clamp(36px,6cqw,100px)}.depth-photo{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--depth-tint)}.depth-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .7s}.depth-photo:hover img{transform:scale(1.035)}.depth-photo-label{position:absolute;bottom:18px;left:18px;right:18px;background:var(--paper);color:var(--ink);padding:12px 16px;width:fit-content;max-width:calc(100% - 36px)}.depth-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}.depth-tags span{padding:8px 12px;border:1px solid var(--depth-line);font-size:12px}.depth-journey{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:40px 0 80px}.depth-step{padding-top:20px;border-top:1px solid var(--depth-line)}.depth-number{font:clamp(36px,5cqw,70px)/1 var(--display);color:var(--ink);opacity:.45}.depth-discover{display:grid;grid-template-columns:1.15fr 1fr;gap:50px;margin:65px 0 85px;align-items:stretch}.depth-options{display:flex;flex-direction:column;gap:0;margin-top:32px}.demo-depth .depth-choice{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:20px 0;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--depth-line);border-radius:0;font:500 clamp(17px,2cqw,24px)/1.3 var(--body);text-align:left;cursor:pointer;transition:padding .25s,background .25s,color .25s}.depth-choice span{transition:transform .25s}.depth-choice:hover span{transform:translate(3px,-3px)}.demo-depth .depth-choice[aria-pressed=true]{padding-left:18px;padding-right:18px;background:var(--accent);color:var(--accent-ink)}.depth-answer{padding:clamp(26px,4cqw,60px);background:var(--depth-tint);display:flex;flex-direction:column;justify-content:center;min-height:330px}.depth-symbol{font-size:68px;line-height:1;margin-bottom:12px;display:block;align-self:flex-start;transition:transform .65s}.depth-answer:hover .depth-symbol{transform:rotate(45deg)}.depth-action{color:var(--ink);text-decoration:none;display:block;width:fit-content;border-bottom:1px solid currentColor;padding:8px 0;margin-top:30px;font-size:14px}.depth-questions{display:grid;grid-template-columns:1fr 1.2fr;gap:45px;padding-top:35px;border-top:1px solid var(--depth-line);margin-bottom:15px}.depth-questions h2{font-size:clamp(28px,3cqw,48px)}.depth-questions details{border-bottom:1px solid var(--depth-line)}.depth-questions summary{padding:22px 0;font-size:16px;cursor:pointer;display:flex;justify-content:space-between;gap:20px;list-style:none}.depth-questions summary::-webkit-details-marker{display:none}.depth-questions summary span{transition:transform .25s}.depth-questions details[open] summary span{transform:rotate(45deg)}.depth-questions details p{padding-bottom:25px;font-size:15px}.demo-depth :is(button,a,summary):focus-visible{outline:2px solid var(--ink);outline-offset:5px}
/* Eight distinct visual and motion grammars. */
.depth-mode-0 .depth-photo{padding:10px;border:1px solid var(--depth-line)}.depth-mode-0 .depth-intro{text-align:center}.depth-mode-0 .depth-tags{justify-content:center}.depth-mode-0 .depth-journey{text-align:center;gap:0;border:1px solid var(--depth-line)}.depth-mode-0 .depth-step{border-top:0;padding:30px;border-right:1px solid var(--depth-line)}.depth-mode-0 .depth-step:last-child{border-right:0}.depth-mode-0 .depth-answer{border:1px solid var(--depth-line);background:transparent}.depth-mode-0 .depth-symbol{font-size:42px}
.depth-mode-1{padding-left:0;padding-right:0}.depth-mode-1 .depth-narrative{grid-template-columns:1.6fr 1fr;gap:0}.depth-mode-1 .depth-intro{padding:5cqw}.depth-mode-1 .depth-photo{aspect-ratio:4/4.6}.depth-mode-1 .depth-photo-label{left:0;bottom:0;padding:22px}.depth-mode-1 .depth-tags span{border:0;padding:0;border-bottom:1px solid var(--depth-line)}.depth-mode-1 :is(.depth-journey,.depth-discover,.depth-questions){margin-left:5cqw;margin-right:5cqw}.depth-mode-1 .depth-answer{background:var(--ink);color:var(--paper)}.depth-mode-1 .depth-answer .depth-action{color:var(--paper)}.depth-mode-1 .depth-number{font-size:24px;opacity:1}.depth-mode-1 .depth-step{border-top:3px solid var(--ink)}
.depth-mode-2{background:var(--depth-tint)}.depth-mode-2 .depth-photo{border-radius:45% 45% 12% 12%;transform:rotate(-3deg);border:4px solid var(--ink)}.depth-mode-2 .depth-photo-label{border-radius:20px}.depth-mode-2 .depth-tags span{border-radius:50px;background:var(--paper);border:2px solid var(--ink)}.depth-mode-2 .depth-journey{gap:18px}.depth-mode-2 .depth-step{background:var(--paper);border:2px solid var(--ink);border-radius:25px;padding:25px;box-shadow:5px 5px 0 var(--ink)}.depth-mode-2 .depth-number{display:inline-flex;background:var(--accent);color:var(--accent-ink);opacity:1;font-size:30px;border-radius:50%;width:55px;height:55px;align-items:center;justify-content:center}.depth-mode-2 .depth-answer{border-radius:45px 12px 45px 12px;background:var(--paper);border:2px solid var(--ink)}.depth-mode-2 .depth-choice{border-bottom:2px solid var(--ink)}.depth-mode-2 .depth-symbol{transform:rotate(-12deg)}
.depth-mode-3 .depth-narrative{grid-template-columns:1fr 1.3fr}.depth-mode-3 .depth-intro h2{text-transform:uppercase;font-size:clamp(42px,6cqw,100px)}.depth-mode-3 .depth-photo{clip-path:polygon(0 0,90% 0,100% 10%,100% 100%,10% 100%,0 90%)}.depth-mode-3 .depth-tags span{background:var(--ink);color:var(--paper);border:0;text-transform:uppercase;font-weight:700}.depth-mode-3 .depth-step{border-top:6px solid var(--accent)}.depth-mode-3 .depth-number{font-size:90px;font-weight:900;letter-spacing:-.08em}.depth-mode-3 .depth-answer{background:var(--accent);color:var(--accent-ink);clip-path:polygon(0 0,92% 0,100% 8%,100% 100%,0 100%)}.depth-mode-3 .depth-action{color:var(--accent-ink)}.depth-mode-3 .depth-discover{gap:0}.depth-mode-3 .depth-prompt{border:2px solid var(--ink);padding:30px}
.depth-mode-4 .depth-narrative{grid-template-columns:1.2fr 1fr;align-items:start}.depth-mode-4 .depth-photo{aspect-ratio:4/3}.depth-mode-4 .depth-intro{padding-top:20px}.depth-mode-4 .depth-journey{display:block;max-width:900px;margin-left:auto;margin-right:auto}.depth-mode-4 .depth-step{display:grid;grid-template-columns:60px 1fr 1.4fr;gap:25px;padding:25px 0;align-items:baseline}.depth-mode-4 .depth-step h3{margin:0}.depth-mode-4 .depth-number{font-size:28px;opacity:1}.depth-mode-4 .depth-discover{grid-template-columns:1fr 1.6fr}.depth-mode-4 .depth-answer{background:transparent;border:1px solid var(--depth-line);box-shadow:8px 8px 0 var(--depth-tint)}.depth-mode-4 .depth-tags{border-top:1px solid var(--depth-line);padding-top:20px}.depth-mode-4 .depth-tags span{padding:0;border:0;font-style:italic}
.depth-mode-5 .depth-narrative{grid-template-columns:1fr 1fr;border:1px solid var(--depth-line);gap:0}.depth-mode-5 .depth-intro{padding:35px}.depth-mode-5 .depth-photo{aspect-ratio:1}.depth-mode-5 .depth-journey{gap:0}.depth-mode-5 .depth-step{padding:30px;border:1px solid var(--depth-line)}.depth-mode-5 .depth-number{font:18px var(--body);opacity:1}.depth-mode-5 .depth-discover{grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--depth-line)}.depth-mode-5 .depth-prompt{padding:35px}.depth-mode-5 .depth-answer{background-image:linear-gradient(var(--depth-line) 1px,transparent 1px),linear-gradient(90deg,var(--depth-line) 1px,transparent 1px);background-size:40px 40px}.depth-mode-5 .depth-answer p,.depth-mode-5 .depth-answer h3{background:var(--depth-tint)}.depth-mode-5 .depth-symbol{font-size:48px}
.depth-mode-6 .depth-photo{border-radius:50% 50% 4px 4px;aspect-ratio:4/4.8}.depth-mode-6 .depth-intro h2{font-weight:400}.depth-mode-6 .depth-tags span{border-radius:40px}.depth-mode-6 .depth-journey{gap:40px}.depth-mode-6 .depth-step{text-align:center;border:0;padding:30px 15px;background:var(--depth-tint);border-radius:150px 150px 25px 25px}.depth-mode-6 .depth-number{font-size:30px}.depth-mode-6 .depth-answer{border-radius:120px 15px 15px 15px;padding-top:75px}.depth-mode-6 .depth-questions{margin-top:100px}
.depth-mode-7 .depth-photo{aspect-ratio:1.3;border-radius:10px;box-shadow:0 0 35px color-mix(in srgb,var(--accent) 15%,transparent)}.depth-mode-7 .depth-tags span{border-radius:20px;border-color:var(--accent)}.depth-mode-7 .depth-journey{grid-template-columns:1fr;gap:0}.depth-mode-7 .depth-step{display:grid;grid-template-columns:80px 1fr 1.5fr;gap:25px;align-items:center;padding:30px 0}.depth-mode-7 .depth-number{color:var(--ink);font-size:46px}.depth-mode-7 .depth-answer{border-radius:20px;background:linear-gradient(135deg,var(--depth-tint),var(--paper));border:1px solid var(--accent)}.depth-mode-7 .depth-options{gap:12px}.depth-mode-7 .depth-choice{border:1px solid var(--depth-line);padding:16px;border-radius:30px}.depth-mode-7 .depth-choice[aria-pressed=true]{box-shadow:0 0 20px color-mix(in srgb,var(--accent) 25%,transparent)}
.depth-variant-1 .depth-narrative .depth-photo{order:2}.depth-variant-1 .depth-narrative{margin-top:60px}.depth-variant-2 .depth-journey .depth-step:nth-child(2){background:var(--depth-tint)}
/* Reveal only when observed; content stays readable if JS or observers are unavailable. */
[data-depth-reveal].depth-pending{opacity:0;transform:translateY(22px);transition:opacity .65s ease var(--delay,0ms),transform .65s cubic-bezier(.2,.75,.25,1) var(--delay,0ms)}
.depth-mode-0 [data-depth-reveal].depth-pending{transform:translateY(12px)}.depth-mode-1 [data-depth-reveal].depth-pending{transform:translateX(-20px)}.depth-mode-2 [data-depth-reveal].depth-pending{transform:translateY(20px) rotate(-2deg) scale(.97)}.depth-mode-3 [data-depth-reveal].depth-pending{transform:translateX(28px)}.depth-mode-4 [data-depth-reveal].depth-pending{transform:translateY(16px)}.depth-mode-5 [data-depth-reveal].depth-pending{transform:scale(.98)}.depth-mode-6 [data-depth-reveal].depth-pending{transform:translateY(30px);transition-duration:.9s}.depth-mode-7 [data-depth-reveal].depth-pending{transform:translateY(15px);transition-duration:.5s}
[data-depth-reveal].depth-pending.depth-visible{opacity:1;transform:none}.depth-switching{animation:depthAnswer .35s ease both}@keyframes depthAnswer{from{opacity:.5;transform:translateY(6px)}to{opacity:1;transform:none}}
@container (max-width:650px){.demo-depth .depth-narrative,.demo-depth .depth-discover,.demo-depth .depth-questions{grid-template-columns:1fr;gap:25px}.demo-depth .depth-narrative .depth-photo{order:0;aspect-ratio:4/3}.demo-depth .depth-journey{grid-template-columns:1fr;gap:20px;margin-bottom:45px}.demo-depth .depth-step{padding:22px}.depth-mode-4 .depth-step,.depth-mode-7 .depth-step{grid-template-columns:42px 1fr;gap:15px;padding-left:0;padding-right:0}.depth-mode-4 .depth-step p,.depth-mode-7 .depth-step p{grid-column:2}.depth-mode-6 .depth-step{border-radius:25px}.depth-mode-0 .depth-step{border-right:0;border-bottom:1px solid var(--depth-line)}.depth-mode-0 .depth-step:last-child{border-bottom:0}.depth-mode-1 .depth-narrative{gap:0}.depth-mode-5 .depth-narrative,.depth-mode-5 .depth-discover{gap:0}.depth-discover{margin-top:40px;margin-bottom:45px}.depth-answer{min-height:270px}.depth-questions{margin-top:40px}.depth-mode-6 .depth-questions{margin-top:50px}.depth-mode-3 .depth-intro h2{font-size:clamp(38px,10cqw,70px)}}
@media(prefers-reduced-motion:reduce){.demo-depth *,[data-depth-reveal].depth-pending{animation:none!important;transition:none!important;transform:none!important;opacity:1!important}}
/* Existing product sections receive restrained interactions too. */
.site-demo .product-grid article{transition:transform .35s ease}.site-demo .product-grid article img{transition:filter .5s ease}.site-demo[data-motion="0"] .product-grid article:hover{transform:translateY(-5px)}.site-demo[data-motion="1"] .product-grid article:hover{transform:translateY(-3px) rotate(-.6deg)}.site-demo[data-motion="2"] .product-grid article:hover{transform:scale(1.015)}.site-demo .product-grid article:hover img{filter:saturate(1.08)}.site-demo .product-grid article button span{transition:transform .25s}.site-demo .product-grid article button:hover span{transform:translate(3px,-3px)}
@media(prefers-reduced-motion:reduce){.site-demo .product-grid article,.site-demo .product-grid article img,.site-demo .product-grid article button span{transition:none!important;transform:none!important;filter:none!important}}