/* Source-code invitations, in each project's own visual language. */
.project-source { --source-accent: #ffdf32; --source-ink: #f6f8ff; --source-muted: #c4d1f5; --source-panel: #192858; --source-line: #b7c8ff40; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 26px; margin-top: 40px; border: 1px solid var(--source-line); border-radius: 18px; background: var(--source-panel); color: var(--source-ink); position: relative; overflow: hidden; }
.project-source::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--source-accent); }
#e-reklamo .project-source { --source-accent: #ff7517; --source-ink: #48220d; --source-muted: #77523b; --source-panel: #fff3e4; --source-line: #48220d25; }
#booklat .project-source { --source-accent: #edb537; --source-panel: #102c4c; --source-muted: #c2cfdf; --source-line: #edb53755; }
.project-source-art { align-self: stretch; min-height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; border-radius: 10px; border: 1px solid var(--source-line); background-image: radial-gradient(var(--source-line) 1px, transparent 1px); background-size: 14px 14px; }
.project-source-glyph { font: 600 38px/1 var(--f-mono); letter-spacing: -.1em; color: var(--source-accent); }
.project-source-trail { display: flex; align-items: center; justify-content: space-between; width: 72px; position: relative; }
.project-source-trail::before { content: ''; position: absolute; inset: 4px 0 auto; height: 1px; background: var(--source-accent); opacity: .6; }
.project-source-trail i { position: relative; width: 9px; height: 9px; border: 2px solid var(--source-accent); border-radius: 50%; background: var(--source-panel); }
.project-source-trail i:last-child { background: var(--source-accent); }
.project-source-art-label { font: 7px/1.5 var(--f-mono); letter-spacing: .08em; color: var(--source-muted); }
.project-source-copy { min-width: 0; }
.project-source-kicker { display: flex; align-items: center; gap: 9px; font: 9px/1.6 var(--f-mono); letter-spacing: .12em; color: var(--source-muted); }
.project-source-kicker img { width: 26px; height: 26px; padding: 5px; background: #fff; border-radius: 50%; }
.project-source h3 { font-family: inherit; font-size: clamp(22px, 2.5vw, 32px); font-weight: 600; line-height: 1.22; letter-spacing: -.035em; margin: 14px 0 10px; color: var(--source-ink); }
.project-source p { font-size: 13px; line-height: 1.8; max-width: 60ch; color: var(--source-muted); }
.project-source-path { display: block; margin-top: 18px; font: 10px/1.8 var(--f-mono); overflow-wrap: anywhere; color: var(--source-muted); }
.project-source-path strong { color: var(--source-ink); font-weight: 500; }
.project-source-action { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 10px 14px; font-size: 12px; font-weight: 600; }
.project-source-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--source-panel); background: var(--source-accent); font-size: 23px; }
.project-source-action small { grid-column: 1 / -1; font-size: 9px; font-weight: 400; color: var(--source-muted); }
.project-source:focus-visible { outline: 3px solid var(--source-accent); outline-offset: 5px; }
@media (prefers-reduced-motion: no-preference) { .project-source { transition: border-color .25s, box-shadow .25s; }.project-source-arrow { transition: translate .25s, rotate .25s; } }
@media (hover: hover) and (pointer: fine) { .project-source:hover { border-color: var(--source-accent); box-shadow: 0 14px 30px #0002; } html[data-motion='on'] .project-source:hover .project-source-arrow { translate: 2px -2px; rotate: 8deg; } }
@media (max-width: 1100px) { .project-source { grid-template-columns: 110px minmax(0, 1fr); gap: 24px; }.project-source-action { grid-column: 2; width: fit-content; }.project-source-art { grid-row: 1 / 3; } }
@media (max-width: 600px) { .project-source { grid-template-columns: minmax(0, 1fr); padding: 22px; gap: 22px; }.project-source-art { display: none; }.project-source-action { grid-column: 1; width: 100%; }.project-source-action small { font-size: 10px; }.project-source-path { font-size: 10px; } }