/* Critical: base, navigation and cookie preferences. */
.portfolio-section-page:not(.portfolio-section-enhanced) .portfolio-header { display: none; }
html, body  {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

html {
    box-sizing: border-box;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}



.flexy {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.flex-col {

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;

}

@media (min-width: 720px) {
    .flex-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

}



header, section, footer {
    padding: 0 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}



@media (min-width: 960px) {

    header, section, footer {
        padding: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }


}

header > div, section  > div, footer  > div {
    width: 100%;
    max-width: 1140px;
    position: relative;

}


.rightout {
    padding-right: 0;
}
.leftout {
    padding-left: 0;
}

.relativni {
    position: relative
}




@media (max-width: 720px) {
    .hamburger_area {

        background-color: white;
        margin: 0 auto 0 6px;
        padding: 10px;
        position: relative;
        vertical-align: bottom;
        min-width: 30px;
        display: inline-block;
        -webkit-transition: width 250ms ease-in;
        -o-transition: width 250ms ease-in;
        transition: width 250ms ease-in;
        box-sizing: content-box;

    }

    .hamburger_area span {
        background: black;
        display: block;
        height: 4px;
        margin: 3px 1px;
        position: relative;
        -o-transition: transform .2s;
        -webkit-transition: transform .2s;
        transition: transform .2s;
    }

    nav .menu {
        display: none;
    }


    .hamburger_area.active span:first-child{
        -webkit-transform: translateY(0px) rotate(45deg);
        -moz-transform: translateY(0px) rotate(45deg);
        -ms-transform: translateY(0px) rotate(45deg);
        -o-transform: translateY(0px) rotate(45deg);
        transform: translateY(0px) rotate(45deg);
        transform-origin: 18% 61%;
    }

    .hamburger_area.active span:nth-child(2){
        -webkit-transform: translateY(0px) rotate(-45deg);
        -moz-transform: translateY(0px) rotate(-45deg);
        -ms-transform: translateY(0px) rotate(-45deg);
        -o-transform: translateY(0px) rotate(-45deg);
        transform: translateY(0px) rotate(-45deg);
        transform-origin: 45% 100%;

    }

    .hamburger_area.active span:nth-child(3){
        display: none;
    }

}



@media (min-width: 720px) {
    .hamburger_area {
        display: none;
    }

    nav.menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

}


nav .menu.visible {
    display: block;
}



.toploader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 0;
    display: none;
    z-index: 10000;
    border: 6px solid #f3f3f3;
    border-top: 6px solid black;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}


[role=button], a, area, button, input, label, select, summary, textarea {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}
@font-face {
    font-family: "Portfolio Roboto";
    src: url("fonts/roboto-regular-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Portfolio Condensed";
    src: url("fonts/roboto-condensed-regular-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Portfolio Roboto";
    src: url("fonts/roboto-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
}
@font-face {
    font-family: "Portfolio Condensed";
    src: url("fonts/roboto-condensed-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
}
.portfolio-page, .portfolio-page--library {
    --u: clamp(.85px, .13192612vw, 1.9px);
    --portfolio-bg: #111b22;
    --portfolio-text: #ece5df;
    --portfolio-muted: #b4b9bc;
    --portfolio-peach: #f8b39e;
    --portfolio-line: #354149;
    background-color: var(--portfolio-bg);
    background-position: center top;
    background-size: min(100vw, 1440px) auto;
    background-repeat: no-repeat;
    color: var(--portfolio-text);
    font-family: "Portfolio Roboto", Arial, sans-serif;
    font-size: calc(12 * var(--u));
    line-height: 1.3;
}
.portfolio-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 20;
    padding: 12px 18px;
    background: var(--portfolio-peach);
    color: var(--portfolio-bg);
    transform: translateY(-160%);
}
.portfolio-skip-link:focus { transform: translateY(0); }
.portfolio-header {
    padding: 0;
    position: relative;
    z-index: 5;
    min-height: calc(64 * var(--u));
}
.portfolio-header__inner { align-items: center; justify-content: space-between; gap: calc(24 * var(--u)); }

@media (max-width: 700px) {
    .portfolio-page, .portfolio-page--library { --u: 1px; font-size: 14px; background-image: none; }
    .portfolio-header { min-height: 82px; }
    .portfolio-header__inner { gap: 14px; }
    .portfolio-header__inner .portfolio-button--small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .portfolio-document, .portfolio-page { scroll-behavior: auto; }
}
.portfolio-page--library { background-position: center 100svh; }
.nav { padding: 0; position: relative; background: #111b22; --library-panel-padding: 30px; }
.nav__heading { font-weight: 400; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.container { position: relative; width: 100%; max-width: none; height: 100vh; height: 100svh; max-height: 100vh; isolation: isolate; }
.nav__background { position: absolute; inset: 0; display: block; pointer-events: none; }
.back_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.nav__navigation { position: absolute; inset: 0; width: 100%; max-width: 1920px; margin-inline: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(min-content, auto); align-content: space-evenly; align-items: center; gap: 34px 24px; padding: 48px 28px; overflow: auto; overscroll-behavior: auto; scrollbar-width: thin; scrollbar-color: #df9b78 #17232b; }
.nav__tile { position: relative; justify-self: center; width: fit-content; max-width: 100%; min-width: 0; padding: 0 12px 12px; pointer-events: none; transform: skewY(var(--panel-tilt, 5deg)); --library-hit-area: polygon(12px 0, calc(100% - 12px) 0, calc(100% - 12px) calc(100% - 12px), 12px calc(100% - 12px)); --panel-side-shape: polygon(12px 0, 12px calc(100% - 12px), 0 100%, 0 12px); --panel-bottom-shape: polygon(12px calc(100% - 12px), calc(100% - 12px) calc(100% - 12px), 100% 100%, 0 100%); --panel-inner-shape: polygon(13px 1px, calc(100% - 13px) 1px, calc(100% - 13px) calc(100% - 13px), 13px calc(100% - 13px)); --panel-top-edge: polygon(12px 0, calc(100% - 12px) 0, calc(100% - 12px) 2px, 12px 2px); --panel-corner-c: calc(100% - 12px) calc(100% - 12px); --panel-corner-d: 12px calc(100% - 12px); }
.nav__panel { position: absolute; inset: 0; container-type: size; display: block; isolation: isolate; user-select: none; --panel-light: #f1e3d8; --panel-mid: #d9c7c0; --panel-dark: #b9aaa9; --panel-highlight: #fff5e7b3; --panel-shade: #746d8252; --panel-veil: #fff7e647; --panel-side: #4c4140; --panel-bottom: #382f30; --panel-edge: #f3ded0; filter: brightness(var(--library-brightness, 1)) drop-shadow(0 0 var(--library-glow-radius, 3px) var(--library-glow-color, #ffb18a66)) drop-shadow(0 0 12px #ff78421a); transition: filter .18s ease; }
.nav__panel::before,
.nav__panel::after,
.nav__panel-face,
.nav__panel-face::before,
.nav__panel-face::after,
.nav__panel-light,
.nav__panel-light::before,
.nav__panel-light::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.nav__panel::before { background: radial-gradient(ellipse 22cqw 10cqw at var(--panel-corner-d), #ffaf70cc, transparent 100%), linear-gradient(125deg, var(--panel-side), var(--panel-bottom)); clip-path: var(--panel-side-shape); }
.nav__panel::after { background: radial-gradient(ellipse 28cqw 9cqw at var(--panel-corner-d), #fff1bccc 0%, #ff793dbb 25%, transparent 100%), radial-gradient(ellipse 28cqw 9cqw at var(--panel-corner-c), #ffe6b5dd 0%, #ff6e35bb 25%, transparent 100%), linear-gradient(170deg, var(--panel-side), var(--panel-bottom)); clip-path: var(--panel-bottom-shape); }
.nav__panel-face { z-index: 1; background: radial-gradient(ellipse 32cqw 11cqw at var(--panel-corner-d), #fff5d9 0%, #ff9a58 25%, transparent 100%), radial-gradient(ellipse 32cqw 11cqw at var(--panel-corner-c), #fff6da 0%, #ff9250 25%, transparent 100%), linear-gradient(180deg, #fff7ea, var(--panel-edge) 45%, #ffb177); clip-path: var(--library-hit-area); }
.nav__panel-face::before { background:
    radial-gradient(ellipse 30cqw 12cqw at var(--panel-corner-d), #ffd09c88, transparent 100%),
    radial-gradient(ellipse 30cqw 12cqw at var(--panel-corner-c), #ffb87c88, transparent 100%),
    radial-gradient(ellipse 52% 115% at 108% 40%, transparent 43%, var(--panel-veil) 51%, transparent 63%),
    radial-gradient(ellipse 56% 120% at -8% 92%, transparent 35%, var(--panel-veil) 48%, transparent 63%),
    radial-gradient(ellipse 68% 105% at 98% 8%, var(--panel-highlight), transparent 76%),
    radial-gradient(ellipse 74% 105% at 6% 100%, var(--panel-shade), transparent 74%),
    radial-gradient(ellipse 54% 95% at 8% -22%, #ffffff38, transparent 76%),
    linear-gradient(130deg, transparent 22%, var(--panel-veil) 53%, transparent 77%),
    linear-gradient(125deg, var(--panel-light) 0%, var(--panel-mid) 44%, var(--panel-dark) 80%, var(--panel-light) 100%); clip-path: var(--panel-inner-shape); }
.nav__panel-face::after { background: linear-gradient(90deg, #fffdf5, #fff8e9 65%, #ffe4c4); clip-path: var(--panel-top-edge); }
.nav__panel-light { z-index: -1; }
.nav__panel-light::before { background: radial-gradient(ellipse 18cqw 8cqw at var(--panel-corner-d), #ff9d54cc 0%, #ff602c88 30%, transparent 100%), radial-gradient(ellipse 18cqw 8cqw at var(--panel-corner-c), #ffad62dd 0%, #ff6c3488 30%, transparent 100%); filter: blur(6px); }
.nav__panel-light::after { background: radial-gradient(ellipse 5cqw 3cqw at var(--panel-corner-d), #fffce8 0%, #ffe0a6 18%, #ff813cbb 42%, transparent 100%), radial-gradient(ellipse 5cqw 3cqw at var(--panel-corner-c), #fffce8 0%, #ffe0a6 18%, #ff813cbb 42%, transparent 100%); filter: blur(1px); }
.jmeno .nav__panel,
.nav__tile--consultant .nav__panel { --panel-light: #168493; --panel-mid: #0a6577; --panel-dark: #094b5c; --panel-highlight: #8be0d478; --panel-shade: #092d435c; --panel-veil: #b3f1d52b; --panel-side: #124550; --panel-bottom: #092f3b; --panel-edge: #56b9be; }
.nav__tile--wordpress .nav__panel,
.nav__tile--interviews .nav__panel { --panel-light: #ffb24e; --panel-mid: #f18c32; --panel-dark: #da6d2d; --panel-highlight: #ffedb980; --panel-shade: #ac452542; --panel-veil: #fff0b23b; --panel-side: #8a461d; --panel-bottom: #562d1b; --panel-edge: #ffd094; }
.nav__tile--anthologies .nav__panel,
.nav__tile--events .nav__panel { --panel-light: #ff604b; --panel-mid: #e9433a; --panel-dark: #ba2a32; --panel-highlight: #ffb18b7a; --panel-shade: #80152e45; --panel-veil: #ffe6b333; --panel-side: #862329; --panel-bottom: #4f1720; --panel-edge: #ff9682; }
.nav__text { position: relative; display: grid; place-items: center; width: 100%; min-height: 88px; padding: var(--library-panel-padding); color: #201d23; }
.nav__button { position: relative; display: grid; place-items: center; width: 100%; min-height: 88px; height: auto; padding: var(--library-panel-padding); margin: 0; border: 0; background: transparent; color: #201d23; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.nav__tile--wordpress .nav__button,
.nav__tile--interviews .nav__button { min-height: 176px; }
.nav__tile--wordpress,
.nav__tile--interviews { grid-column: span 2; width: min(420px, 100%); }
.nav__label { display: block; min-width: 0; max-width: 100%; font: 400 clamp(16px, 1.55vw, 23px)/1.2 "Portfolio Condensed", "Arial Narrow", sans-serif; overflow-wrap: anywhere; text-align: center; text-transform: uppercase; text-wrap: balance; }
.jmeno { font-weight: 400; grid-column: 2 / 4; grid-row: 1; }
.jmeno .nav__label { font-size: clamp(25px, 2.5vw, 36px); letter-spacing: .035em; }
.nav__tile--tagline { grid-column: 2 / 4; grid-row: 2; }
.nav__tile--tagline .nav__label { font-size: clamp(17px, 1.7vw, 24px); text-transform: none; }
.nav__tile--interviews { grid-column: 3 / 5; grid-row: 1; }
.nav__tile--anthologies { grid-column: 4; grid-row: 2; }
.jmeno .nav__text,
.nav__tile--consultant .nav__button { color: #f6efdf; }
.nav__tile:has(.nav__button:hover) .nav__panel,
.nav__tile--selected .nav__panel { --library-brightness: 1.15; --library-glow-radius: 5px; }
.nav__tile:has(.nav__button:focus-visible) .nav__panel { --library-brightness: 1.2; --library-glow-radius: 5px; --library-glow-color: #fff2d9; }
.nav__button:focus-visible { outline: 2px solid #fff7e6; outline-offset: -6px; }
.nav__tile--portrait { grid-column: 1; grid-row: 1 / 3; justify-self: center; width: min(100%, 190px); min-height: 230px; height: 100%; transform: none; }
.nav__portrait-photo { display: block; position: relative; width: 100%; max-height: 250px; aspect-ratio: 3 / 4; margin: 30px 0; object-fit: cover; object-position: center 30%; border: 3px solid #b9c4bb; border-radius: 50%; }
.nav__identity { --portrait-size: 230px; grid-column: 1 / 3; grid-row: 1 / 3; justify-self: start; display: grid; grid-template-columns: minmax(0, var(--portrait-size)) minmax(0, max-content); grid-template-rows: auto auto; align-items: center; gap: 16px 20px; width: fit-content; max-width: 100%; }
.nav__identity > .nav__tile--portrait { grid-column: 1; grid-row: 1 / 3; align-self: center; width: var(--portrait-size); height: var(--portrait-size); min-height: 0; aspect-ratio: 1; padding: 30px; }
.nav__identity .nav__tile--portrait .nav__portrait-photo {
    width: 100%; height: 100%; max-height: none; aspect-ratio: 1; margin: 0; transform: translateY(-6px); border-radius: 50%; border-width: 1px; }
.nav__identity > .jmeno { grid-column: 2; grid-row: 1; justify-self: start; align-self: end; }
.nav__identity > .nav__tile--tagline { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; }
.react { --panel-tilt: -5deg; --panel-side-shape: polygon(calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
.nav__tile--technologie { --panel-tilt: -5deg; --panel-side-shape: polygon(calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
.nav__tile--consultant { --panel-tilt: -5deg; --panel-side-shape: polygon(calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
.nav__tile--digitalni-historie { --panel-tilt: -5deg; --panel-side-shape: polygon(calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
.nav__tile--lyrics { --panel-tilt: -5deg; --panel-side-shape: polygon(calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
.nav__tile--interviews { --panel-tilt: -5deg; --panel-side-shape: polygon(calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
.nav__tile--anthologies { --panel-tilt: -5deg; --panel-side-shape: polygon(calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
.nav__tile--articles { --panel-tilt: -5deg; --panel-side-shape: polygon(calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
.nav__tile--links { --panel-tilt: -5deg; --panel-side-shape: polygon(calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
.nav__tile--events { --panel-tilt: -5deg; --panel-side-shape: polygon(calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
.nav__status { position: absolute; z-index: 3; left: 50%; bottom: 12px; max-width: calc(100% - 24px); padding: 8px 14px; transform: translateX(-50%); border: 1px solid #f8b39e66; border-radius: 6px; background: #111b22ee; color: #f8d4c6; font: 400 14px/1.4 "Portfolio Roboto", Arial, sans-serif; text-align: center; pointer-events: none; }
.nav__status:empty { display: none; }
@media (max-width: 1000px) {
    .nav__navigation { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 30px 16px; padding: 35px 16px calc(104px + env(safe-area-inset-bottom)); }
    .jmeno, .nav__tile--tagline { grid-column: 2 / 4; }
    .nav__tile--interviews, .nav__tile--anthologies { grid-column: auto; grid-row: auto; }
    .nav__tile--interviews { grid-column: span 2; }
    .nav__identity { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 600px) {
    .nav__navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 8px; padding: 24px 6px calc(104px + env(safe-area-inset-bottom)); }
    .nav__tile--portrait { grid-column: 1 / -1; grid-row: auto; height: auto; min-height: 0; width: 150px; }
    .nav__tile--portrait .nav__portrait-photo { margin-block: 20px; max-height: 145px; }
    .jmeno, .nav__tile--tagline { grid-column: 1 / -1; grid-row: auto; }
    .nav__label { font-size: 16px; }
    .nav__status { font-size: 12px; }
    .nav__identity { --portrait-size: clamp(96px, 30vw, 140px); grid-template-columns: minmax(0, var(--portrait-size)) minmax(0, 1fr); gap: 12px; width: 100%; }
    .nav__identity > .nav__tile--portrait { padding: 16px; }
    .nav__identity .jmeno .nav__label { font-size: 18px; }
    .nav__identity .nav__tile--tagline .nav__label { font-size: 16px; }
}
@media (max-width: 420px) {
    .nav__navigation { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-inline: 16px; }
    .nav__tile--wordpress, .nav__tile--interviews { grid-column: 1 / -1; }
    .nav__identity { --portrait-size: clamp(180px, 56vw, 220px); grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, auto); justify-items: center; gap: 20px; }
    .nav__identity > .nav__tile--portrait { grid-column: 1; grid-row: 1; padding: 22px; }
    .nav__identity > .jmeno { grid-column: 1; grid-row: 2; justify-self: center; align-self: center; }
    .nav__identity > .nav__tile--tagline { grid-column: 1; grid-row: 3; justify-self: center; align-self: center; }
}
@media (prefers-reduced-motion: reduce) { .nav__panel { transition: none; } }
@supports (clip-path: polygon(round 6px, 0 0, 100% 0, 100% 100%, 0 100%)) {
    .nav__tile { --library-hit-area: polygon(round 6px, 12px 0, calc(100% - 12px) 0, calc(100% - 12px) calc(100% - 12px), 12px calc(100% - 12px)); --panel-side-shape: polygon(round 6px, 12px 0, 12px calc(100% - 12px), 0 100%, 0 12px); --panel-bottom-shape: polygon(round 6px, 12px calc(100% - 12px), calc(100% - 12px) calc(100% - 12px), 100% 100%, 0 100%); --panel-inner-shape: polygon(round 6px, 13px 1px, calc(100% - 13px) 1px, calc(100% - 13px) calc(100% - 13px), 13px calc(100% - 13px)); }
    .react { --panel-side-shape: polygon(round 6px, calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
    .nav__tile--technologie { --panel-side-shape: polygon(round 6px, calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
    .nav__tile--consultant { --panel-side-shape: polygon(round 6px, calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
    .nav__tile--digitalni-historie { --panel-side-shape: polygon(round 6px, calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
    .nav__tile--lyrics { --panel-side-shape: polygon(round 6px, calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
    .nav__tile--interviews { --panel-side-shape: polygon(round 6px, calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
    .nav__tile--anthologies { --panel-side-shape: polygon(round 6px, calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
    .nav__tile--articles { --panel-side-shape: polygon(round 6px, calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
    .nav__tile--links { --panel-side-shape: polygon(round 6px, calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
    .nav__tile--events { --panel-side-shape: polygon(round 6px, calc(100% - 12px) 0, 100% 12px, 100% 100%, calc(100% - 12px) calc(100% - 12px)); }
}
@media (min-width: 1101px) {
    .nav__navigation { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(88px, auto); gap: 28px 18px; }
    .nav__identity { grid-area: 1 / 1 / 3 / 6; }
    .nav__tile--reference { grid-area: 3 / 1 / 5 / 3; height: 100%; }
    .nav__tile--wordpress { grid-area: 3 / 3 / 5 / 6; height: 100%; }
    .nav__tile--osint { grid-area: 5 / 2 / 6 / 6; }
    .nav__tile--video { grid-area: 3 / 6 / 4 / 8; }
    .react { grid-area: 1 / 7 / 2 / 10; }
    .nav__tile--technologie { grid-area: 2 / 7 / 3 / 10; }
    .nav__tile--consultant { grid-area: 4 / 6 / 5 / 9; }
    .nav__tile--digitalni-historie { grid-area: 5 / 6 / 6 / 10; }
    .nav__tile--lyrics { grid-area: 6 / 6 / 7 / 10; }
    .nav__tile--interviews { grid-area: 1 / 10 / 3 / 13; height: 100%; }
    .nav__tile--anthologies { grid-area: 3 / 10 / 4 / 13; }
    .nav__tile--articles { grid-area: 4 / 10 / 5 / 13; }
    .nav__tile--links { grid-area: 5 / 10 / 6 / 13; }
    .nav__tile--events { grid-area: 6 / 10 / 7 / 13; }
    .nav__tile--reference .nav__button,
    .nav__tile--wordpress .nav__button,
    .nav__tile--interviews .nav__button { height: 100%; }
}
#portfolio-app { display: contents; }
.nav__button { text-decoration: none; }
#portfolio-app[data-react-ready="true"] > .portfolio-main { display: none; }
.portfolio-footer { display: none; }
.cookie-preferences { position: fixed; bottom: max(16px, env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); z-index: 10001; color: #f1e2d8; font: 400 14px/1.6 "Portfolio Roboto", Arial, sans-serif; }
.cookie-preferences, .cookie-preferences * { box-sizing: border-box; }
.cookie-preferences__trigger { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 16px; border: 1px solid #f8b39e70; border-radius: 8px; background: linear-gradient(135deg, #34414a, #19252e); color: #f1e2d8; box-shadow: 0 5px 24px #0005, inset 0 1px 0 #ffe5d514; cursor: pointer; list-style: none; transition: border-color .2s, background-color .2s; }
.cookie-preferences__trigger::-webkit-details-marker { display: none; }
.cookie-preferences__trigger:hover, .cookie-preferences[open] .cookie-preferences__trigger { border-color: #f8b39e; background: #2b3943; }
.cookie-preferences__trigger:focus-visible { outline: 2px solid #f8b39e; outline-offset: 4px; }
.cookie-preferences__icon { color: #f8b39e; font: 28px/1 Georgia, serif; }
.cookie-preferences__panel { display: block; position: absolute; bottom: calc(100% + 12px); left: 0; width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 100px); overflow-y: auto; padding: 24px; border: 1px solid #f8b39e60; border-radius: 12px 12px 12px 3px; background: radial-gradient(ellipse at top right, #f8b39e12, transparent 65%), #19252e; box-shadow: 0 18px 60px #0007, inset 0 1px 0 #fff1; }
.cookie-preferences .cookie-preferences__eyebrow { margin: 0 0 10px; color: #f8b39e; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.cookie-preferences h2 { margin: 0 0 16px; color: #f1e2d8; font: 400 26px/1.2 Georgia, serif; }
.cookie-preferences p { margin: 0 0 18px; color: #bdc6cc; font-size: 14px; line-height: 1.7; }
.cookie-preferences__status { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 0; border-block: 1px solid #f8b39e26; }
.cookie-preferences__status strong { padding: 3px 9px; border: 1px solid #f8b39e55; border-radius: 20px; color: #f8b39e; background: #f8b39e0a; font-size: 12px; font-weight: 500; }
.cookie-preferences .cookie-preferences__note { margin: 14px 0 0; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .cookie-preferences__trigger { transition: none; } }
.cookie-preferences__icon::before { content: "◌"; }

#portfolio-app[data-runtime-loading="true"] .nav__button { cursor: progress; }

.cookie-preferences:not([open]) .cookie-preferences__panel { display: none; }