:root {
    --sel-green: var(--sage, #304a3c);
    --sel-green-deep: var(--sage-deep, #20352a);
    --sel-rose: var(--dusty-rose, #bb7a97);
    --sel-rose-deep: var(--dusty-rose-deep, #9f607d);
    --sel-beige: var(--beige, #ede2db);
    --sel-off: var(--off-white, #f8f1ec);
    --sel-line: var(--line-strong, rgba(48,74,60,.42));
}

.sel-page {
    color: var(--sel-green);
    background: var(--sel-beige);
}

.sel-shell {
    width: min(1380px, calc(100% - 48px));
    margin: 0 auto;
    padding: clamp(34px, 5vw, 72px) 0 clamp(70px, 9vw, 130px);
}

/* Odstęp od sticky headera na stronach pojedynczych ćwiczeń.
   Desktop: 150px. Mobile ma osobną korektę w breakpointcie <=820px. */
.sel-single .sel-shell {
    padding-top: 150px;
}

.sel-eyebrow {
    display: inline-block;
    font-family: "Space Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sel-rose-deep);
}

.sel-breadcrumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 30px;
    font-family: "Space Mono", monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sel-breadcrumbs a { color: inherit; text-decoration: none; }

/* Jedna, nierozjezdzajaca sie strzalka SVG przez maskę CSS.
   Nie uzywamy Unicode ani skladania z dwoch pseudo-elementow,
   wiec iOS/Safari i desktop renderuja identyczny ksztalt. */
.sel-arrow {
    display:inline-block;
    flex:0 0 18px;
    width:18px;
    height:18px;
    color:currentColor;
    background-color:currentColor;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18L18 6M9 6H18V15' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:100% 100%;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18L18 6M9 6H18V15' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:100% 100%;
    font-size:0;
    line-height:0;
}
.sel-arrow::before,
.sel-arrow::after {
    content:none !important;
    display:none !important;
}
.sel-inline-arrow {
    display:inline-flex !important;
    align-items:center;
    gap:8px;
}


.sel-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    min-height: 0;
    align-items: stretch;
    border: 1px solid var(--sel-line);
    background: var(--sel-green-deep);
    color: var(--sel-off);
}

.sel-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(34px, 6vw, 82px);
}

.sel-hero__copy .sel-eyebrow { color: var(--sel-rose); }
.sel-hero h1 {
    margin: 16px 0 24px;
    max-width: 850px;
    font-family: "Archivo", sans-serif;
    font-size: clamp(44px, 6vw, 92px);
    line-height: .94;
    letter-spacing: -.055em;
    font-style: italic;
    color: var(--sel-off);
}
.sel-hero__title-main { display:block; }
.sel-hero__title-pl {
    display:block;
    margin-top:18px;
    font-family:"Space Mono",monospace;
    font-size:clamp(9px,1vw,12px);
    font-weight:700;
    line-height:1.4;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-style:normal;
    color:var(--sel-rose);
}
.sel-hero__tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:28px; }
.sel-hero__tags span,
.sel-card__tags span {
    border: 1px solid currentColor;
    padding: 7px 9px;
    font-family: "Space Mono", monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.sel-hero__media {
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgba(248,241,236,.06);
}
.sel-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.sel-hero__placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    font: 700 100px/1 "Archivo", sans-serif;
    color: rgba(248,241,236,.12);
}

.sel-long-description { margin-top:22px; }
.sel-long-description p { margin:0 0 18px; }
.sel-long-description p:last-child { margin-bottom:0; }

.sel-video-section { margin-top:clamp(44px,7vw,84px); }
.sel-video-section h2 { margin:12px 0 24px; }
.sel-video { margin:0; border:1px solid var(--sel-line); background:var(--sel-green-deep); overflow:hidden; }
.sel-video iframe,
.sel-video video { display:block; width:100%; aspect-ratio:16/9; height:auto; border:0; }
.sel-video>a { display:block; padding:24px; color:var(--sel-off); font-family:"Space Mono",monospace; text-decoration:none; }

.sel-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--sel-line);
    border-top: 0;
    background: rgba(248,241,236,.5);
}
.sel-facts article { min-height:130px; padding:24px; border-right:1px solid var(--sel-line); }
.sel-facts article:last-child { border-right:0; }
.sel-facts span { display:block; margin-bottom:12px; font:700 9px/1.3 "Space Mono",monospace; letter-spacing:.14em; color:var(--sel-rose-deep); }
.sel-facts strong { font:800 clamp(16px,1.7vw,24px)/1.2 "Archivo",sans-serif; }

.sel-content-grid {
    display:grid;
    grid-template-columns:minmax(0, 1fr) 320px;
    gap: clamp(42px, 7vw, 100px);
    align-items:start;
    margin-top:clamp(56px,8vw,110px);
}
.sel-content { min-width:0; }
.sel-copy-section,
.sel-steps,
.sel-mistakes,
.sel-related { margin:0 0 clamp(56px,8vw,96px); }
.sel-copy-section h2,
.sel-steps h2,
.sel-mistakes h2,
.sel-related h2,
.sel-sidebar h2,
.sel-archive-hero h1 {
    margin:12px 0 22px;
    font-family:"Archivo",sans-serif;
    font-size:clamp(34px,4vw,62px);
    line-height:1;
    letter-spacing:-.04em;
    color:var(--sel-green);
}
.sel-copy-section p,
.sel-steps p,
.sel-related p,
.sel-sidebar p,
.sel-archive-hero__description {
    font-family:"Space Mono",monospace;
    font-size:clamp(15px,1.4vw,19px);
    line-height:1.75;
}
.sel-muscles { display:grid; grid-template-columns:140px 1fr; gap:24px; padding:18px 0; border-top:1px solid var(--sel-line); }
.sel-muscles:last-child { border-bottom:1px solid var(--sel-line); }
.sel-muscles strong { font:800 14px/1.4 "Archivo",sans-serif; text-transform:uppercase; }
.sel-muscles p { margin:0; }

.sel-steps ol { list-style:none; padding:0; margin:28px 0 0; display:grid; gap:14px; counter-reset:none; }
.sel-steps li {
    display:grid;
    grid-template-columns:86px minmax(0,1fr);
    gap:28px;
    align-items:start;
    padding:26px;
    border:1px solid var(--sel-line);
    box-shadow:inset 4px 0 0 var(--sel-rose);
    background:rgba(248,241,236,.72);
}
.sel-step-no { display:grid; place-items:center; width:64px; height:64px; background:var(--sel-rose); color:var(--sel-off); font:700 13px/1 "Space Mono",monospace; }
.sel-steps li:nth-child(even) .sel-step-no { background:var(--sel-beige); border:1px solid var(--sel-green); color:var(--sel-green); }
.sel-steps h3 { margin:2px 0 8px; font:800 clamp(19px,2vw,27px)/1.16 "Archivo",sans-serif; color:var(--sel-green); }
.sel-steps p { margin:0; max-width:none; }

.sel-tip { margin:-28px 0 clamp(56px,8vw,96px); padding:24px 28px; border:1px solid var(--sel-line); box-shadow:inset 4px 0 0 var(--sel-green); background:rgba(48,74,60,.06); }
.sel-tip span { display:block; margin-bottom:9px; font:700 9px/1.2 "Space Mono",monospace; letter-spacing:.16em; color:var(--sel-green); }
.sel-tip p { margin:0; font:400 15px/1.7 "Space Mono",monospace; }

.sel-accordion { display:grid; gap:10px; }
.sel-accordion details { border:1px solid rgba(159,96,125,.55); background:rgba(248,241,236,.64); }
.sel-accordion summary { display:grid; grid-template-columns:56px minmax(0,1fr) 40px; gap:18px; align-items:center; padding:18px 20px; cursor:pointer; list-style:none; }
.sel-accordion summary::-webkit-details-marker{display:none}
.sel-accordion summary>span { display:grid; place-items:center; width:42px; height:42px; background:var(--sel-rose); color:var(--sel-off); font:700 11px/1 "Space Mono",monospace; }
.sel-accordion summary strong { font:800 clamp(17px,1.7vw,23px)/1.25 "Archivo",sans-serif; }
.sel-accordion summary>b { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--sel-rose); color:var(--sel-rose-deep); font:700 18px/1 "Space Mono",monospace; }
.sel-accordion details[open] summary>b { transform:rotate(45deg); }
.sel-accordion details>div { padding:0 78px 22px 94px; }
.sel-accordion p { margin:0; font:400 15px/1.7 "Space Mono",monospace; }

.sel-related__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.sel-related__grid a { display:flex; justify-content:space-between; gap:18px; align-items:center; min-height:82px; padding:18px 20px; border:1px solid var(--sel-line); color:var(--sel-green); text-decoration:none; font:800 17px/1.25 "Archivo",sans-serif; background:rgba(248,241,236,.52); }
.sel-related__grid .sel-arrow { flex-basis:22px; width:22px; height:22px; }
.sel-related__grid a:hover { border-color:var(--sel-rose-deep); }

.sel-sidebar { position:sticky; top:120px; display:grid; gap:18px; }
.sel-sidebar__card { padding:28px; border:1px solid var(--sel-line); background:var(--sel-green-deep); color:var(--sel-off); }
.sel-sidebar__card .sel-eyebrow { color:var(--sel-rose); }
.sel-sidebar__card h2 { color:var(--sel-off); font-size:32px; }
.sel-sidebar__card p { font-size:13px; color:rgba(248,241,236,.78); }
.sel-sidebar__card a { display:inline-block; margin-top:16px; color:var(--sel-off); font:700 10px/1.3 "Space Mono",monospace; text-decoration:none; border-bottom:1px solid currentColor; }
.sel-sidebar__support {
    border-color:var(--sel-rose-deep);
    background:var(--sel-rose);
    color:var(--sel-off);
}
.sel-sidebar__support .sel-eyebrow { color:var(--sel-off); opacity:.78; }
.sel-sidebar__support h2 { color:var(--sel-off); }
.sel-sidebar__support p { color:rgba(248,241,236,.86); }
.sel-sidebar__support a { color:var(--sel-off); }
.sel-sidebar__support .sel-arrow { flex-basis:16px; width:16px; height:16px; }
.sel-sidebar__links { display:grid; gap:8px; padding:22px; border:1px solid var(--sel-line); }
.sel-sidebar__links strong { margin-bottom:4px; font:800 14px/1.2 "Archivo",sans-serif; }
.sel-sidebar__links a { color:var(--sel-green); text-decoration:none; font:700 11px/1.45 "Space Mono",monospace; }
.sel-sidebar__links .sel-inline-arrow { justify-content:flex-start; }
.sel-sidebar__links .sel-arrow { flex-basis:12px; width:12px; height:12px; }

.sel-archive-hero { max-width:1000px; padding:clamp(28px,5vw,70px) 0; }
.sel-archive-hero h1 { font-size:clamp(50px,7vw,104px); font-style:italic; }
.sel-archive-hero__description { max-width:880px; }
.sel-filter {
    display:grid;
    grid-template-columns:1.4fr repeat(4,1fr) auto auto;
    gap:10px;
    padding:18px;
    border:1px solid var(--sel-line);
    background:rgba(248,241,236,.56);
}
.sel-filter label { display:grid; gap:6px; }
.sel-filter label>span { font:700 8px/1.2 "Space Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }
.sel-filter input,
.sel-filter select { width:100%; min-height:46px; border:1px solid var(--sel-line); background:var(--sel-off); color:var(--sel-green); padding:0 12px; font:400 11px/1.3 "Space Mono",monospace; border-radius:0; }
.sel-filter button,
.sel-filter__clear { align-self:end; min-height:46px; display:grid; place-items:center; padding:0 16px; border:1px solid var(--sel-green); background:var(--sel-green); color:var(--sel-off); text-decoration:none; font:700 9px/1.2 "Space Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.sel-filter__clear { background:transparent; color:var(--sel-green); }
.sel-archive-meta { margin:26px 0 14px; font:700 10px/1.4 "Space Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }

.sel-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.sel-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--sel-line); background:rgba(248,241,236,.6); }
.sel-card__media { display:block; aspect-ratio:4/3; overflow:hidden; background:var(--sel-green-deep); }
.sel-card__media img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .35s ease; }
.sel-card:hover .sel-card__media img { transform:scale(1.035); }
.sel-card__placeholder { display:grid; place-items:center; width:100%; height:100%; font:800 76px/1 "Archivo",sans-serif; color:rgba(248,241,236,.12); }
.sel-card__body { display:flex; flex:1; flex-direction:column; padding:24px; }
.sel-card h2 { margin:10px 0 12px; font:800 clamp(24px,2.5vw,36px)/1 "Archivo",sans-serif; letter-spacing:-.035em; }
.sel-card h2 a { color:var(--sel-green); text-decoration:none; }
.sel-card__polish-name { display:block; margin:-2px 0 14px; }
.sel-card p { margin:0 0 18px; font:400 12px/1.65 "Space Mono",monospace; }
.sel-card__tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.sel-card__tags span { color:var(--sel-green); font-size:8px; }
.sel-card__link { display:inline-block; align-self:flex-start; margin-top:20px; color:var(--sel-green); text-decoration:none; border-bottom:1px solid currentColor; font:700 9px/1.4 "Space Mono",monospace; letter-spacing:.08em; }

.sel-pagination { margin-top:42px; }
.sel-pagination ul { display:flex; gap:8px; list-style:none; padding:0; }
.sel-pagination a,.sel-pagination span { display:grid; place-items:center; min-width:42px; height:42px; border:1px solid var(--sel-line); color:var(--sel-green); text-decoration:none; font:700 10px/1 "Space Mono",monospace; }
.sel-pagination .current { background:var(--sel-green); color:var(--sel-off); }
.sel-empty { padding:60px 28px; border:1px solid var(--sel-line); text-align:center; }
.sel-empty>span { font:700 12px/1 "Space Mono",monospace; color:var(--sel-rose-deep); }
.sel-empty h2 { font:800 42px/1 "Archivo",sans-serif; }
.sel-empty a { color:var(--sel-green); font:700 10px/1.4 "Space Mono",monospace; }

@media (max-width: 1120px) {
    .sel-filter { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .sel-filter button,.sel-filter__clear { align-self:stretch; }
    .sel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .sel-content-grid { grid-template-columns:minmax(0,1fr) 280px; gap:42px; }
}

@media (max-width: 820px) {
    .sel-shell { width:min(100% - 28px, 720px); }
    .sel-single .sel-shell { padding-top: 130px; }
    .sel-hero { grid-template-columns:1fr; min-height:0; }
    .sel-hero__copy { padding:34px 26px 40px; }
    .sel-hero h1 { font-size:clamp(42px,13vw,68px); }
    .sel-facts { grid-template-columns:repeat(2,1fr); }
    .sel-facts article:nth-child(2) { border-right:0; }
    .sel-facts article:nth-child(-n+2) { border-bottom:1px solid var(--sel-line); }
    .sel-content-grid { grid-template-columns:1fr; }
    .sel-sidebar { position:static; }
    .sel-steps li { grid-template-columns:56px minmax(0,1fr); gap:18px; padding:18px 16px; }
    .sel-step-no { width:48px; height:48px; font-size:11px; }
    .sel-accordion summary { grid-template-columns:46px minmax(0,1fr) 34px; gap:12px; padding:14px; }
    .sel-accordion summary>span { width:38px; height:38px; }
    .sel-accordion details>div { padding:0 18px 18px 72px; }
    .sel-related__grid { grid-template-columns:1fr; }
    .sel-grid { grid-template-columns:1fr; }
    .sel-filter { grid-template-columns:1fr; }
    .sel-archive-hero h1 { font-size:clamp(46px,13vw,72px); }
    .sel-muscles { grid-template-columns:1fr; gap:6px; }
}