/* JJK studio — component styles. All values come from tokens.css. */
.jjk-root, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Logo */
.jjk-logo { display: block; color: var(--ink); height: auto; }

/* Button — one rounded corner (bottom-right), like every piece of the logo */
.jjk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-12);
  font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid transparent; border-radius: var(--radius-0) var(--radius-0) var(--radius-sm) var(--radius-0);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 320ms cubic-bezier(.2,.7,.2,1), box-shadow 320ms cubic-bezier(.2,.7,.2,1), color 320ms cubic-bezier(.2,.7,.2,1), border-color 320ms cubic-bezier(.2,.7,.2,1);
}
.jjk-btn--md { height: var(--module); padding: 0 var(--space-24); }
.jjk-btn--sm { height: 36px; padding: 0 var(--space-16); font-size: 14px; }
.jjk-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.jjk-btn:disabled, .jjk-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; box-shadow: none; }
.jjk-btn__trail { display: inline-block; transition: transform 240ms cubic-bezier(.2,.7,.2,1); }
.jjk-btn:hover .jjk-btn__trail { transform: translateX(4px); }
.jjk-btn { position: relative; }
/* letter lift: each letter eases up/down on its own; the fx copy lifts the same letters, so the two layers stay aligned */
.jjk-btn__chars, .jjk-btn__label { display: inline-flex; }
.jjk-btn__ch { display: inline-block; transition: transform 160ms cubic-bezier(.2,.7,.2,1); will-change: transform; }
.jjk-btn__chevron { display: block; width: 15px; height: 15px; }
.jjk-btn--sm .jjk-btn__chevron { width: 13px; height: 13px; }
.jjk-btn__trail { display: inline-flex; align-items: center; }
.jjk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.jjk-btn--primary { background: var(--violet); color: var(--on-violet); }
.jjk-btn--secondary { background: color-mix(in srgb, var(--ink) 4.5%, transparent); color: var(--ink); border-color: var(--line-strong);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } /* a light frosted fill: what is behind it blurs */
.jjk-btn--ghost { background: transparent; color: var(--violet-text); padding-left: 0; padding-right: 0; height: auto; }

/* Hover = light that follows the cursor (--mx / --my, set by Button). */
/* The glow grows out of the cursor on enter and shrinks back on leave (--r is a registered length, so it animates). */
@property --r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.jjk-btn__fx, .jjk-btn--secondary::before { pointer-events: none; opacity: 0; --r: 0px; transition: --r 480ms cubic-bezier(.2,.7,.2,1), opacity 360ms cubic-bezier(.2,.7,.2,1); }
.jjk-btn__fx {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-12);
  padding: inherit; border-radius: inherit; background: var(--orange); color: var(--on-orange);
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx, 50%) var(--my, 50%), #000 0, #000 52%, transparent 100%);
          mask-image: radial-gradient(circle var(--r) at var(--mx, 50%) var(--my, 50%), #000 0, #000 52%, transparent 100%);
}
.jjk-btn:hover .jjk-btn__fx .jjk-btn__trail { transform: translateX(4px); }
/* Primary: a soft coral light under the cursor, the same as in the ProjectCard band — orange at most 45 % over violet,
   text stays on-violet (white ≥ 5:1 even at the centre). No mask: the light itself fades out towards --r. */
.jjk-btn--primary .jjk-btn__fx {
  background: radial-gradient(circle var(--r) at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--orange) 45%, transparent) 0, rgba(247, 71, 58, 0) 100%);
  color: var(--on-violet); -webkit-mask-image: none; mask-image: none;
}
.jjk-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) .jjk-btn__fx { opacity: 1; --r: 96px; }
/* Secondary: the same soft light, weaker (no violet fill underneath): orange at most 22 %; text stays ink. */
.jjk-btn--secondary .jjk-btn__fx {
  background: radial-gradient(circle var(--r) at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--orange) 22%, transparent) 0, rgba(247, 71, 58, 0) 100%);
  color: var(--ink); -webkit-mask-image: none; mask-image: none;
}
.jjk-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) .jjk-btn__fx { opacity: 1; --r: 96px; }
/* Ghost: the text itself turns orange and glows, only around the cursor. */
.jjk-btn--ghost .jjk-btn__fx {
  inset: -20px -28px; padding: 20px 28px; /* room so the glow is not clipped at the text box */
  background: transparent; color: var(--orange-text); text-shadow: 0 0 14px color-mix(in srgb, var(--orange) 70%, transparent);
  -webkit-mask-image: radial-gradient(circle var(--r) at calc(var(--mx, 50%) + 28px) calc(var(--my, 50%) + 20px), #000 0, #000 52%, transparent 100%);
          mask-image: radial-gradient(circle var(--r) at calc(var(--mx, 50%) + 28px) calc(var(--my, 50%) + 20px), #000 0, #000 52%, transparent 100%);
}
.jjk-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) .jjk-btn__fx { opacity: 1; --r: 80px; }
.jjk-btn--secondary::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: radial-gradient(circle var(--r) at var(--mx, 50%) var(--my, 50%), var(--orange) 0, rgba(247, 71, 58, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.jjk-btn--secondary:hover:not(:disabled):not([aria-disabled="true"])::before { opacity: 1; --r: 120px; }

/* Primary: the edge of the button (the 1 px stroke, same as the secondary button) turns light orange under the cursor. */
.jjk-btn--primary::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; --r: 0px;
  background: radial-gradient(circle var(--r) at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--orange) 65%, var(--orange-glow)) 0, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: --r 480ms cubic-bezier(.2,.7,.2,1), opacity 360ms cubic-bezier(.2,.7,.2,1);
}
.jjk-btn--primary:hover:not(:disabled):not([aria-disabled="true"])::after { opacity: 1; --r: 130px; }

/* Outer halo: the button's own shape (one rounded corner) glowing outward, lit only around the cursor. */
.jjk-btn { --halo: 70%; --o: 28px; }
[data-theme="light"] .jjk-btn { --halo: 45%; }
.jjk-btn__halo {
  position: absolute; inset: calc(var(--o) * -1); pointer-events: none; opacity: 0; --r: 0px;
  -webkit-mask-image: radial-gradient(circle var(--r) at calc(var(--mx, 50%) + var(--o)) calc(var(--my, 50%) + var(--o)), #000 0, transparent 100%);
          mask-image: radial-gradient(circle var(--r) at calc(var(--mx, 50%) + var(--o)) calc(var(--my, 50%) + var(--o)), #000 0, transparent 100%);
  transition: --r 480ms cubic-bezier(.2,.7,.2,1), opacity 360ms cubic-bezier(.2,.7,.2,1);
}
.jjk-btn__halo::before {
  content: ""; position: absolute; inset: var(--o);
  border-radius: var(--radius-0) var(--radius-0) var(--radius-sm) var(--radius-0);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--orange) var(--halo), transparent);
}
.jjk-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) .jjk-btn__halo,
.jjk-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) .jjk-btn__halo { opacity: 1; --r: 80px; }

/* Tag — capsule from the colour render */
.jjk-tag {
  display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-12);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0;
  white-space: nowrap; /* sentence case, as written — no uppercase */
}
.jjk-tag--neutral { background: var(--surface-200); color: var(--ink-muted); }
.jjk-tag--violet { background: var(--violet-soft); color: var(--violet-text); }
.jjk-tag--orange { background: var(--orange-soft); color: var(--orange-text); }
.jjk-tag--outline { background: transparent; color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Hero — title, lead and actions in the lower-left corner; a huge render that runs out of the frame.
   Follows the page theme, soft tonal gradient top to bottom. Sized in container units (cqw), so it scales with the frame, not the window. */
.jjk-hero {
  container-type: inline-size; position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--surface-100) 0%, var(--surface-200) 100%); color: var(--ink); font-family: var(--font-sans);
}
[data-theme="light"] .jjk-hero { background: linear-gradient(180deg, var(--surface-100) 0%, #ffffff 100%); }
.jjk-hero--wide { aspect-ratio: 1440 / 1024; }
.jjk-hero--tall { aspect-ratio: 630 / 1024; }

.jjk-hero__stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.jjk-hero__render { position: absolute; display: block; max-width: none; height: auto; user-select: none; animation: jjk-drift 14s ease-in-out infinite alternate; }
.jjk-hero--wide .jjk-hero__render { left: 42cqw; top: 4.4cqw; width: 119cqw; }
.jjk-hero--tall .jjk-hero__render { left: 5.6cqw; top: -92cqw; width: 88.5cqw; --dx: 0cqw; --dy: 3cqw; }
@keyframes jjk-drift { from { transform: translate(0, 0); } to { transform: translate(var(--dx, -4cqw), var(--dy, 0)); } }

.jjk-hero__copy { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.jjk-hero--wide .jjk-hero__copy { left: 8.5cqw; bottom: 8cqw; width: 33cqw; }
.jjk-hero--tall .jjk-hero__copy { left: 13cqw; bottom: 9cqw; width: 78cqw; }
.jjk-hero__title { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.jjk-hero--wide .jjk-hero__title { font-size: 9.3cqw; }
.jjk-hero--tall .jjk-hero__title { font-size: 16cqw; line-height: 1.12; }
.jjk-hero__line { display: block; }
/* the brand lockup: "studio" in Playfair Display Italic, tracking 0 (never the negative tracking of Sora) */
.jjk-hero__line--accent { font-family: var(--font-serif, "Playfair Display", Georgia, serif); font-style: italic; font-weight: 500; letter-spacing: 0; font-synthesis: none; }
.jjk-hero__lead { margin: var(--space-24) 0 0; max-width: 30ch; color: var(--ink-muted); font-size: 18px; line-height: 28px; font-weight: 300; }
.jjk-hero--tall .jjk-hero__lead { margin-top: var(--space-16); font-size: 16px; line-height: 24px; }
.jjk-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-24); }
.jjk-hero--tall .jjk-hero__actions { margin-top: var(--space-16); }

.jjk-hero.is-still .jjk-hero__render { animation: none; }
@media (prefers-reduced-motion: reduce) { .jjk-hero .jjk-hero__render { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .jjk-btn__ch { transform: none !important; }
  .jjk-btn, .jjk-btn__trail, .jjk-btn__fx, .jjk-btn--secondary::before, .jjk-btn--primary::after, .jjk-btn__halo { transition: none; }
}

/* ProjectCard — the render with sharp corners and no frame; the caption (title + client) sits under it, always visible.
   On hover the render zooms 3 % and a solid violet band slides up over its bottom edge with the tags and "Zobrazit projekt ›".
   Without hover (touch) the band stays hidden and the tags join the caption instead. */
.jjk-pc { position: relative; display: flex; flex-direction: column; gap: var(--space-16); color: inherit; text-decoration: none; }
.jjk-pc:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.jjk-pc__media { position: relative; display: block; overflow: hidden; background: var(--surface-0); }
.jjk-pc__img { display: block; width: 100%; height: auto; transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
.jjk-pc__img.is-fill { height: 100%; object-fit: cover; }
.jjk-pc:hover .jjk-pc__img, .jjk-pc:focus-visible .jjk-pc__img { transform: scale(1.03); }

/* the band: solid violet, sharp edge, slides up by 40 % of its height while it fades in */
.jjk-pc__band { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12) var(--space-16);
  padding: var(--space-16) var(--space-24); background: var(--violet); color: var(--on-violet); pointer-events: none;
  opacity: 0; translate: 0 40%; transition: opacity 300ms cubic-bezier(.2,.7,.2,1), translate 420ms cubic-bezier(.2,.7,.2,1); }
.jjk-pc:hover .jjk-pc__band, .jjk-pc:focus-visible .jjk-pc__band { opacity: 1; translate: 0 0; }
/* a soft coral light in the band that follows the cursor — the button's hover, toned down: orange at most 45 % over violet,
   text stays on-violet (white ≥ 5:1 even at the centre of the light) */
.jjk-pc__band::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; --r: 0px;
  background: radial-gradient(circle var(--r) at var(--lx, 50%) var(--ly, 50%), color-mix(in srgb, var(--orange) 45%, transparent) 0, rgba(247, 71, 58, 0) 100%);
  transition: --r 480ms cubic-bezier(.2,.7,.2,1), opacity 360ms cubic-bezier(.2,.7,.2,1); }
.jjk-pc:hover .jjk-pc__band::before { opacity: 1; --r: 192px; }
.jjk-pc__band > * { position: relative; }
.jjk-pc__tags { display: flex; flex-wrap: wrap; gap: var(--space-8); min-width: 0; }
.jjk-pc__band .jjk-tag { background: rgba(255, 255, 255, 0.16); color: var(--on-violet); }
.jjk-pc__cta { display: inline-flex; align-items: center; gap: var(--space-8); margin-left: auto; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.jjk-pc__cta svg { width: 14px; height: 14px; display: block; transition: transform 240ms cubic-bezier(.2,.7,.2,1); }
.jjk-pc:hover .jjk-pc__cta svg { transform: translateX(4px); }

/* the caption under the render */
.jjk-pc__caption { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.jjk-pc__title { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.jjk-pc__meta { font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: .02em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.jjk-pc__caption .jjk-pc__tags { display: none; margin-top: var(--space-8); }
@media (hover: none) {
  .jjk-pc__band { display: none; }
  .jjk-pc__caption .jjk-pc__tags { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .jjk-pc__band { translate: 0 0; }
  .jjk-pc__band, .jjk-pc__band::before, .jjk-pc__img, .jjk-pc__cta svg { transition: none; }
  .jjk-pc:hover .jjk-pc__img { transform: none; }
}

/* Link. Text links (in running text): hover and keyboard focus draw a plain 1 px underline in the link's own colour; a visited link is muted (ink-faint).
   Navigation items (variant nav): a thin violet → orange line unrolls from the left on hover and rolls back to the left when the cursor leaves
   (as on the current web). The current item: 3 px, always there. */
@property --a { syntax: "<number>"; inherits: false; initial-value: 0; }
.jjk-link { color: var(--link); text-decoration: none; }
.jjk-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.jjk-link--text { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: transparent;
  transition: text-decoration-color 300ms cubic-bezier(.2,.7,.2,1); }
.jjk-link--text:hover, .jjk-link--text:focus-visible { text-decoration-color: currentColor; }
.jjk-link--text:visited, .jjk-link--text.is-visited { color: var(--ink-faint); }
.jjk-link--text[aria-current="page"] { text-decoration-thickness: 3px; text-decoration-color: currentColor; }

.jjk-link--nav { --lt: 1.5px; --lp: 6px;
  display: inline-block; white-space: nowrap; padding: 10px 0 var(--lp); color: var(--ink);
  font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: 0.01em;
  background-image: linear-gradient(90deg, var(--violet), var(--orange));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% var(--lt);
  transition: background-size 320ms cubic-bezier(.16,1,.3,1); }
.jjk-link--nav:visited { color: var(--ink); }
.jjk-link--nav:hover, .jjk-link--nav:focus-visible { background-size: 100% var(--lt); }
.jjk-link--nav[aria-current="page"] { --lt: 3px; background-size: 100% var(--lt); }

/* Navigation — the compact rules follow the width of the navigation itself (container query), not the window */
.jjk-nav { container-type: inline-size; font-family: var(--font-sans); position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--surface-0) 72%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.jjk-nav__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); padding: var(--space-16) var(--space-48); }
.jjk-nav__logo { display: block; line-height: 0; flex: none; }
.jjk-nav__logo:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.jjk-nav__menu { display: flex; align-items: center; gap: var(--space-48); }
.jjk-nav__list { display: flex; align-items: center; gap: var(--space-32); margin: 0; padding: 0; list-style: none; }
.jjk-nav__toggle { display: none; position: relative; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.jjk-nav__toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.jjk-nav__bars { position: absolute; left: 8px; right: 8px; top: 50%; height: 0; }
.jjk-nav__bars span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), opacity 200ms cubic-bezier(.2,.7,.2,1); }
.jjk-nav__bars span:nth-child(1) { transform: translateY(-8px); }
.jjk-nav__bars span:nth-child(2) { transform: translateY(-0.75px); }
.jjk-nav__bars span:nth-child(3) { transform: translateY(6.5px); }
.jjk-nav.is-open .jjk-nav__bars span:nth-child(1) { transform: translateY(-0.75px) rotate(45deg); }
.jjk-nav.is-open .jjk-nav__bars span:nth-child(2) { opacity: 0; }
.jjk-nav.is-open .jjk-nav__bars span:nth-child(3) { transform: translateY(-0.75px) rotate(-45deg); }
/* mobile: the items and the CTA fold into a panel under the bar */
@container (max-width: 720px) {
  .jjk-nav__bar { padding: var(--space-12) var(--space-16); }
  .jjk-nav__toggle { display: block; }
  .jjk-nav__menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: var(--space-32);
    padding: var(--space-16) var(--space-16) var(--space-32); background: var(--surface-0); border-bottom: 1px solid var(--line);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 240ms cubic-bezier(.2,.7,.2,1), transform 320ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 320ms; }
  .jjk-nav.is-open .jjk-nav__menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .jjk-nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
  .jjk-nav__menu .jjk-link--nav { font-size: 28px; line-height: 36px; letter-spacing: -0.01em; }
}
@media (prefers-reduced-motion: reduce) { .jjk-nav__bars span, .jjk-nav__menu { transition: none !important; } }

/* Accent — one or two words in Playfair Display Italic; inherits size, line height and colour from the text around it */
.jjk-accent { font-family: var(--font-serif, "Playfair Display", Georgia, serif); font-style: italic; font-weight: 500; letter-spacing: 0; font-synthesis: none; }

/* Quote — a client reference */
.jjk-quote { margin: 0; max-width: 720px; color: var(--ink); }
.jjk-quote__text { margin: 0; }
.jjk-quote__text p { margin: 0; font-family: var(--font-serif, "Playfair Display", Georgia, serif); font-style: italic; font-weight: 500;
  font-size: 32px; line-height: 44px; letter-spacing: 0; font-synthesis: none; text-wrap: pretty; }
.jjk-quote__by { display: flex; flex-direction: column; margin-top: var(--space-16); font-family: var(--font-sans); font-size: 14px; line-height: 22px; }
.jjk-quote__author { color: var(--ink); font-weight: 600; }
.jjk-quote__role { color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .jjk-link--nav { transition: none; } .jjk-link--text { transition: none; } }