.design-card-page { position:fixed; inset:0; display:block;overflow-y:auto; padding:8.5rem 2rem 5.5rem; }
.design-card-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:40px; width:min(100%,calc(var(--card-width,660px) * 2 + 40px)); margin-inline:auto; }
.design-card-page[hidden] { display:none; }
.page.is-design-home .stage { display:none; }
.page.is-catalogue-home.is-design-home .config-panel { display:block; }
.page.is-design-home .site-nav { opacity:1; filter:none; pointer-events:auto; transform:translateX(-50%); }
interactive-project-card { position:relative; z-index:0; display:block; width:min(var(--card-width,1000px),100%); perspective:var(--card-perspective,1100px); outline-offset:12px; }
interactive-project-card:hover,
interactive-project-card:focus-within { z-index:10; }
.card-surface { pointer-events:none; position:relative; width:100%; aspect-ratio:var(--card-aspect,2); transform-style:preserve-3d; border:var(--card-border,1px) solid var(--card-border-color,#888888); border-radius:var(--card-radius,12px); background:var(--card-bg,#c8c8c8); }
.card-layer { opacity:0; position:absolute; transform-style:preserve-3d; border:1px solid #999; border-radius:5px; background:#b6b6b6; pointer-events:none; }
.card-layer:nth-child(1){background:#a9a9a9;}
.card-layer:nth-child(2){background:#dedede;}
.card-layer:nth-child(3){background:#aaaaaa;}
.card-light { position:absolute; inset:0; border-radius:inherit; pointer-events:none; transform:translateZ(1px); }
@media(max-width:700px){ .design-card-page{padding:8rem 1.25rem 2rem;} .design-card-row{gap:40px;} interactive-project-card{width:min(var(--card-width),100%);} .page.is-design-home .config-panel{max-height:45svh;} }

.card-layer.has-sprite { border:0; background:transparent; border-radius:0; container-type:size; }
.card-layer.has-sprite { box-shadow:none !important; }
.card-sprite { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background-size:400% 200%; background-repeat:no-repeat; }
.card-sprite.is-bunny { --sprite-ratio:0.75; background-image:url('Assets/Card Sprites/bunny-stable.webp'); }
.card-sprite.is-dragon { --sprite-ratio:1.428571; background-image:url('Assets/Card Sprites/dragon.webp'); }
.card-sprite { width:min(100cqw,calc(100cqh * var(--sprite-ratio))); height:min(100cqh,calc(100cqw / var(--sprite-ratio))); }

@media (max-width:700px), (hover:none) and (pointer:coarse) {
  .design-card-page { display:block;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:8.5rem 1.5rem 5rem; }
  .design-card-row { grid-template-columns:minmax(0,1fr);gap:48px;width:100%;margin:0 auto;max-width:600px; }
  interactive-project-card { justify-self:center; }
  interactive-project-card.is-scroll-focused { z-index:10; }
  .motion-enable { position:fixed;right:1rem;bottom:1rem;z-index:70;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font:inherit;font-size:14px;padding:10px 14px; }
}

.design-intro { width:min(100%,760px);margin:0 auto 4rem;color:var(--ink);font-family:'Geist',sans-serif; }
.design-intro h1 { margin:0 0 1.5rem;font-size:clamp(24px,2.4vw,32px);font-weight:400;line-height:1.35;letter-spacing:-.025em;text-wrap:pretty; }
.design-intro p { margin:0;font-size:18px;font-weight:300;line-height:1.65;text-wrap:pretty; }
.design-intro p + p { margin-top:1rem; }
@media(max-width:700px), (hover:none) and (pointer:coarse) {
 .design-intro { max-width:600px;margin-bottom:3rem; }
 .design-intro h1 { font-size:24px; }
 .design-intro p { font-size:16px;line-height:1.6; }
}

/* Shared project call to action, in normal flow directly below each paragraph. */
.project-explore { position:static;align-self:flex-start;flex-shrink:0;display:block;width:max-content;max-width:100%;margin:8px 0 0;padding:10px 18px;border:0;border-radius:6px;background:#fff;color:#202020;font-family:'Geist',sans-serif;font-size:14px;font-weight:500;line-height:1.3;text-align:left;cursor:pointer;pointer-events:auto;opacity:0;visibility:hidden;transition:opacity 200ms ease-out,background 150ms ease-out; }
.is-project-active.is-button-ready .project-explore { opacity:1;visibility:visible; }
.project-explore:hover { background:#f2f2f2; }
.project-explore:focus-visible { outline:2px solid currentColor;outline-offset:3px; }
@media(max-width:1000px){.project-explore { font-size:12px; }}
@media(prefers-reduced-motion:reduce){.project-explore { transition:none; }}
@media(max-width:360px){
 .fw-copy { left:5%;top:26%;width:90%;gap:6px; }
 .fw-copy h2 { font-size:14px; }.fw-copy p { font-size:11px;width:100%; }
}
@media(max-width:360px){
 .fw-copy { top:22%; }
 .rm-copy h2 { font-size:14px; }.rm-copy p { font-size:11px; }
}

/* Project chips replace descriptions inside each existing copy layer. */
.project-chips { display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;width:100%;max-width:100%;font-family:'Geist',sans-serif; }
.project-chip { max-width:100%;box-sizing:border-box;padding:5px 9px;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 28%,transparent);border-radius:999px;background:color-mix(in srgb,currentColor 9%,transparent);color:inherit;font-size:12px;font-weight:400;line-height:1.3;overflow-wrap:anywhere;opacity:0;transform:translateY(5px);transition:opacity calc(140ms / var(--chip-speed,1)) ease-out,transform calc(160ms / var(--chip-speed,1)) cubic-bezier(.22,1,.36,1); }
.is-project-active .project-chip { opacity:1;transform:translateY(0);transition-delay:calc((80ms + var(--chip-index) * 50ms) / var(--chip-speed,1)); }
.fsg-copy .project-chips { width:190%;max-width:calc(224% - 1px); }
@media(max-width:1000px){.project-chip { font-size:11px;padding:4px 7px; }}
@media(min-width:1200px) and (max-width:1799px){.is-sidebar-design .project-chip { font-size:11px;padding:4px 7px; }.is-sidebar-design .fsg-copy .project-chips { width:100%;max-width:100%; }}
@media(max-width:1000px){.fsg-copy .project-chips { width:100%;max-width:100%; }}
@media(max-width:360px){.project-chips { gap:4px; }.project-chip { font-size:10px;padding:3px 6px; }}
@media(prefers-reduced-motion:reduce){.project-chip { transition:none;transform:none; }}

interactive-project-card[role="link"] { cursor:pointer; }

/* Shared Figma button geometry; project colour rules remain independent. */
.page .project-explore { padding:16px 26px; }
.explore-roll { display:inline-flex;vertical-align:top;line-height:inherit; }
.explore-roll-char { position:relative;display:inline-grid;overflow:hidden;line-height:inherit; }
.explore-roll-current,.explore-roll-next { display:block;grid-area:1/1;transition:transform 220ms cubic-bezier(.22,1,.36,1),filter 220ms ease; }
.explore-roll-next { transform:translateY(100%);filter:blur(2px); }
@media(hover:hover) and (pointer:fine){
 .project-explore:hover .explore-roll-current { transform:translateY(-100%);filter:blur(2px); }
 .project-explore:hover .explore-roll-next { transform:translateY(0);filter:blur(0); }
 .project-explore:hover :is(.explore-roll-current,.explore-roll-next) { transition-duration:260ms;transition-delay:var(--roll-delay); }
}
@media(prefers-reduced-motion:reduce){
 .explore-roll-current,.explore-roll-next { transition:none!important;transform:none!important;filter:none!important; }
 .explore-roll-next { visibility:hidden; }
}

/* Concise project summaries share the existing card-copy reveal. */
.page .project-summary{width:100%;max-width:46ch;margin:0;font-family:'Geist',sans-serif;font-size:clamp(11px,1.9cqw,14px);line-height:1.45;font-weight:400;color:inherit;text-wrap:pretty;}
@media(max-width:700px){
 .page.is-design-home interactive-project-card .card-surface{aspect-ratio:1;}
 .page :is(.anchor-copy,.rieker-copy,.jewellery-copy,.additional-copy){gap:8px;}
}