/* PUBLIC-001 — Shared project compositions: real screenshots, CSS device frames. */
:root{--showcase-kannel:#efebe3;--showcase-infomaja:#e8ece5;--showcase-frame:#202420;--showcase-shadow:0 24px 38px -20px #20242055}
.recent-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.recent-project{display:block;min-width:0;color:var(--ink);text-decoration:none}
.recent-project-copy{display:block;padding:24px 0 0}
.recent-project-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px}
.recent-project-heading strong{font:500 clamp(28px,3.3vw,46px)/1.1 var(--display);letter-spacing:-.055em}
.recent-project-heading>span{font-size:26px}
.recent-project-copy>span:not(.recent-project-heading){display:block;font-size:clamp(16px,1.6vw,21px);line-height:1.5}
.recent-project-copy small{display:block;margin-top:8px;color:var(--muted,#666);font-size:13px}
.project-showcase{position:relative;display:block;isolation:isolate;overflow:hidden;aspect-ratio:1.25;background:var(--showcase-kannel)}
.showcase-infomaja{background:var(--showcase-infomaja)}
.screen{position:absolute;display:block;background:#fff;border:1px solid #20242022;border-radius:8px;padding:5px;box-shadow:var(--showcase-shadow);overflow:hidden}
.screen img{display:block;width:100%;height:auto;max-height:none;object-fit:initial;border-radius:3px}
.screen-secondary{width:80%;left:12%;top:18%;transform:rotate(9deg)}
.screen-primary{width:85%;left:4%;top:37%;transform:rotate(-6deg)}
.screen-tablet{width:85%;left:5%;top:14%;padding:8px;background:var(--showcase-frame);border-radius:14px;transform:rotate(-5deg)}
.screen-tablet .screen-viewport{display:block;aspect-ratio:1.52;overflow:hidden;border-radius:6px;background:#fff}
.screen-phone{width:22%;right:5%;bottom:9%;padding:5px;border-radius:20px;background:var(--showcase-frame);transform:rotate(8deg)}
.screen-phone .screen-viewport{display:block;aspect-ratio:390/770;overflow:hidden;border-radius:14px;background:#fff}
.theme-veebikannel{--page:#ebe5d8;--ink:#263f33;--accent:#263f33;--line:#263f3330;--stage:var(--showcase-kannel);--story:#fffefb;--story-ink:#263f33;--gallery:#e5e0d5;--gallery-ink:#263f33;--tile:#fffefb;--focus:#263f33}
.theme-infomaja{--page:#dde4d7;--ink:#222e26;--accent:#222e26;--line:#222e2630;--stage:var(--showcase-infomaja);--story:#fffefb;--story-ink:#222e26;--gallery:#dce2d6;--gallery-ink:#222e26;--tile:#fffefb;--focus:#222e26}
.visual .project-showcase{aspect-ratio:1.7;max-width:1120px}
.visual .screen-secondary{width:66%;left:25%;top:10%}
.visual .screen-primary{width:69%;left:8%;top:32%}
.visual .screen-tablet{width:78%;left:7%;top:7%}
.visual .screen-phone{width:18%;right:8%;bottom:5%}
.showcase-note{margin:24px 0 0;font-size:13px;opacity:.75}
.project-external{display:inline-flex;gap:36px;align-items:center;min-height:48px;margin-top:16px;font:500 20px var(--display);text-underline-offset:6px}
.gallery figure.project-detail-shot{display:block;padding:0;border-radius:6px}
.detail-shot-viewport{overflow:hidden}
.project-detail-shot img{max-height:none}
.project-detail-shot figcaption{padding:20px 24px;font-size:14px;line-height:1.5}
.recent-project:focus-visible{outline:2px solid currentColor;outline-offset:8px}
.recent-project-heading>span{transition:transform var(--motion-fast) var(--motion-easing)}
.recent-project:hover .recent-project-heading>span{transform:translate(3px,-3px)}
@media(max-width:760px){.recent-projects{grid-template-columns:1fr;gap:40px}.recent-project-copy{padding-top:18px}.recent-project-heading strong{font-size:34px}.visual .project-showcase{aspect-ratio:1.25}.visual .screen-primary{width:85%;left:4%;top:37%}.visual .screen-secondary{width:80%;left:12%;top:18%}.visual .screen-tablet{width:85%;left:5%;top:14%;padding:5px;border-radius:10px}.visual .screen-phone{width:22%;right:5%;bottom:9%;padding:3px;border-radius:13px}.screen-phone .screen-viewport{border-radius:10px}.screen-tablet{padding:5px;border-radius:10px}.project-detail-shot figcaption{padding:16px}.showcase-note{font-size:12px}}
@media(prefers-reduced-motion:reduce){.recent-project-heading>span{transition:none}.recent-project:hover .recent-project-heading>span{transform:none}}

/* Project intro uses the shared external-link style as a clear opening action. */
.project-intro{display:flex;align-items:center;justify-content:space-between;gap:40px}
.project-intro-copy{min-width:0;flex:1}
.project-open{flex:none;margin:0;padding:16px 22px;border:1px solid currentColor;text-decoration:none;gap:24px;transition:background var(--motion-fast) var(--motion-easing),color var(--motion-fast) var(--motion-easing)}
.project-open:hover{background:var(--ink);color:var(--page)}
@media(max-width:900px){.project-intro{flex-direction:column;align-items:flex-start;gap:28px}.project-open{font-size:18px}}
@media(prefers-reduced-motion:reduce){.project-open{transition:none}}

/* PUBLIC-001 Infomaja: front-facing tablet and a phone with its lower edge forward.
   Hardware metal/bezel colours belong to the device illustration, not the UI palette. */
.showcase-infomaja{perspective:1600px}
.showcase-infomaja .screen-tablet{transform:none;top:8%;left:4%;width:82%;padding:clamp(7px,1.1vw,14px);border:2px solid #9c9f9b;border-radius:clamp(14px,2.2vw,28px);background:linear-gradient(135deg,#383b37,#111410 55%,#323630);box-shadow:inset 0 0 0 2px #555a52,0 0 0 1px #e0e3dd,0 22px 32px -18px #20242055;overflow:visible}
.showcase-infomaja .screen-tablet:before{content:"";position:absolute;top:4px;left:50%;width:4px;height:4px;border-radius:50%;background:#101715;box-shadow:inset 0 0 0 1px #484f49}
.showcase-infomaja .screen-tablet .screen-viewport{aspect-ratio:4/3;border-radius:clamp(6px,1.1vw,16px)}
.showcase-infomaja .screen-phone{right:5%;bottom:5%;width:21%;padding:clamp(4px,.65vw,8px);border:2px solid #a2a69e;border-radius:clamp(18px,2.6vw,34px);background:linear-gradient(120deg,#4a4e47,#141713 25%,#22261f);transform:rotateX(13deg) rotateY(-19deg) rotateZ(8deg);box-shadow:inset 0 0 0 1px #63685e,3px 2px 0 #71766b,5px 4px 0 #282d24,12px 22px 25px -12px #20242066;overflow:visible}
.showcase-infomaja .screen-phone .screen-viewport{aspect-ratio:390/844;border-radius:clamp(12px,1.9vw,25px)}
.showcase-infomaja .screen-phone:before{content:"";position:absolute;z-index:2;top:clamp(7px,1vw,12px);left:50%;transform:translateX(-50%);width:25%;height:clamp(4px,.7vw,8px);border-radius:20px;background:#121510;box-shadow:inset -3px 0 0 #2f3830}
.showcase-infomaja .screen-phone:after{content:"";position:absolute;right:-4px;top:24%;height:13%;width:3px;border-radius:2px;background:linear-gradient(#aaa,#555)}
.visual .showcase-infomaja{aspect-ratio:1.5}
.visual .showcase-infomaja .screen-tablet{width:81%;left:4%;top:5%}
.visual .showcase-infomaja .screen-phone{width:21%;right:5%;bottom:5%}
@media(max-width:760px){.visual .showcase-infomaja{aspect-ratio:1.35}.visual .showcase-infomaja .screen-tablet{width:85%;left:3%;top:8%}.visual .showcase-infomaja .screen-phone{width:23%;right:4%;bottom:9%}}

/* PUBLIC-001: Kaader uses the supplied public demo in a shared laptop composition. */
.theme-kaader{--page:#f8f9f7;--ink:#1b2935;--accent:#1b2935;--line:#1b293535;--stage:#164f8f;--story:#fffefc;--story-ink:#1b2935;--gallery:#e1eaf0;--gallery-ink:#1b2935;--tile:#fffefc;--focus:#164f8f;--footer-paper:#152e45;--footer-ink:#f8f9f7}
.showcase-kaader{display:grid;place-items:center;background:#edf1f4;aspect-ratio:1.5;padding:6% 5% 8%;box-sizing:border-box}
.theme-kaader .showcase-kaader{background:var(--stage)}
.theme-kaader .footer-surface{--chrome-paper:var(--footer-paper);--chrome-ink:var(--footer-ink);--focus:var(--footer-ink);background:var(--footer-paper)}
.kaader-device{position:relative;width:100%;padding:clamp(6px,1vw,12px);border:2px solid #969b9e;border-radius:clamp(10px,1.5vw,20px);background:#222629;box-shadow:0 20px 30px -18px #20242055}
.kaader-device img{display:block;width:100%;height:auto;border-radius:5px}
.kaader-device:after{content:"";position:absolute;bottom:-10px;left:-3%;width:106%;height:10px;background:linear-gradient(#d6dadd,#959c9f);border-radius:2px 2px 50% 50%;box-shadow:0 6px 12px -4px #20242044}
.visual .showcase-kaader{aspect-ratio:1.5;max-width:none}
.recent-project--wide{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;margin-top:48px;background:#edf1f4}
.recent-project--wide .recent-project-copy{padding:28px 32px 28px 0}
.recent-project--wide .recent-project-heading strong{font-size:clamp(32px,4vw,48px)}
@media(max-width:760px){.recent-project--wide{grid-template-columns:1fr;gap:0;margin-top:40px;background:none}.recent-project--wide .recent-project-copy{padding:18px 0 0}.recent-project--wide .recent-project-heading strong{font-size:34px}.visual .showcase-kaader{aspect-ratio:1.5}}