/* ==========================================================================
   Ing. Radka Roubcová — projektování vodního hospodářství
   ========================================================================== */

:root{
  color-scheme: light;

  /* ink / neutrals */
  --ink:      #0F1C22;
  --ink-2:    #172B33;
  --slate:    #48606A;
  --muted:    #778C94;
  --line:     #DEE4E3;
  --line-2:   #ECEFED;
  --paper:    #FCFBF8;
  --sand:     #F4F1E9;
  --sand-2:   #EBE6DA;

  /* accents */
  --teal:     #0E6B78;
  --teal-dk:  #0A4E58;
  --teal-lt:  #2A9DB0;
  --moss:     #5B7A55;
  --clay:     #A85B36;

  /* type */
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* metrics */
  --pad: clamp(1.25rem, 5vw, 5rem);
  --max: 1240px;
  --nav-h: 5.25rem;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height:1.68;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; height:auto; display:block; }

a{ color:var(--teal-dk); text-decoration:none; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--teal-lt); outline-offset:3px; border-radius:2px;
}

::selection{ background:var(--teal); color:#fff; }

/* --------------------------------------------------------------- typography */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.35rem, 1.3rem + 4.6vw, 4.5rem); }
h2{ font-size:clamp(1.85rem, 1.15rem + 2.6vw, 3rem); }
h3{ font-size:clamp(1.2rem, 1.02rem + .7vw, 1.5rem); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.lead{
  font-size:clamp(1.12rem, 1rem + .55vw, 1.4rem);
  line-height:1.6;
  color:var(--ink-2);
  font-family:var(--serif);
}

.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--teal);
  display:flex; align-items:center; gap:.85rem;
  margin:0 0 1.6rem;
}
.eyebrow::before{
  content:""; width:2.25rem; height:1px; background:currentColor; flex:none; opacity:.5;
}

.num{
  font-family:var(--mono);
  font-size:.72rem;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  letter-spacing:.06em;
}

/* ------------------------------------------------------------------ layout */

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(4rem, 8vw, 8.5rem); }
.section--tight{ padding-block:clamp(3rem, 5vw, 5rem); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------------------------------------------------------------- skip link */

.skip{
  position:absolute; left:.75rem; top:-4rem; z-index:200;
  background:var(--ink); color:#fff; padding:.7rem 1.1rem;
  font-family:var(--mono); font-size:.78rem; transition:top .18s;
}
.skip:focus{ top:.75rem; }

/* ------------------------------------------------------------------- header */

.site-head{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line-2);
}
.site-head__in{
  max-width:var(--max); margin-inline:auto; padding-inline:var(--pad);
  min-height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}

.brand{ display:flex; align-items:center; gap:.8rem; color:var(--ink); }
.brand__mark{ flex:none; width:2.1rem; height:2.1rem; color:var(--teal); }
.brand__txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand__name{ font-family:var(--serif); font-size:1.075rem; letter-spacing:-.01em; }
.brand__role{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-top:.2rem;
}

.nav{ display:flex; align-items:center; gap:.15rem; }
.nav a{
  position:relative;
  padding:.55rem .75rem;
  font-size:.845rem; font-weight:450; letter-spacing:.005em;
  color:var(--slate); border-radius:3px;
  transition:color .18s;
}
.nav a::after{
  content:""; position:absolute; left:.75rem; right:.75rem; bottom:.28rem;
  height:1px; background:var(--teal); transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--ink); }
.nav a[aria-current="page"]::after{ transform:scaleX(1); background:var(--ink); }

.nav-toggle{
  display:none; background:none; border:1px solid var(--line);
  width:2.75rem; height:2.75rem; border-radius:3px; cursor:pointer;
  align-items:center; justify-content:center; color:var(--ink);
}
.nav-toggle svg{ width:1.15rem; height:1.15rem; }
.nav-toggle .i-x{ display:none; }
.nav-toggle[aria-expanded="true"] .i-x{ display:block; }
.nav-toggle[aria-expanded="true"] .i-menu{ display:none; }

@media (max-width:940px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:.5rem var(--pad) 1.5rem;
    max-height:calc(100dvh - var(--nav-h)); overflow-y:auto;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s, transform .2s;
  }
  .nav[data-open="true"]{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ padding:.95rem .25rem; font-size:1.05rem; border-bottom:1px solid var(--line-2); }
  .nav a::after{ display:none; }
}

/* --------------------------------------------------------------------- hero */

.hero{ position:relative; overflow:hidden; background:var(--paper); }
.hero__contours{
  position:absolute; top:-14%; right:-14%; width:min(72rem,105%); pointer-events:none;
  opacity:.5; z-index:0;
}
.hero__in{
  position:relative; z-index:1;
  max-width:var(--max); margin-inline:auto; padding-inline:var(--pad);
  padding-block:clamp(3.5rem, 7vw, 7rem) clamp(3.5rem, 6vw, 6rem);
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2rem, 5vw, 4.5rem); align-items:center;
}
@media (max-width:900px){ .hero__in{ grid-template-columns:1fr; } }

.hero h1{ letter-spacing:-.025em; }
.hero h1 em{
  font-style:normal; display:block; color:var(--teal);
}
.hero__sub{ margin-top:1.75rem; max-width:42ch; }

.quote{
  margin:2.5rem 0 0; padding-left:1.4rem;
  border-left:2px solid var(--teal);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.05rem,1rem + .4vw,1.22rem); line-height:1.5;
  color:var(--ink-2); max-width:36ch;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.5rem; }

/* photo frame with technical-drawing overlay */
.frame{ position:relative; }
.frame__img{ position:relative; overflow:hidden; background:var(--sand-2); }
.frame__img img{ width:100%; height:100%; object-fit:cover; }
.frame__img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(15,28,34,.28), rgba(15,28,34,0) 58%),
    repeating-linear-gradient(to right, rgba(252,251,248,.055) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(to bottom, rgba(252,251,248,.055) 0 1px, transparent 1px 16.6666%);
}
.frame__tick{
  position:absolute; width:.85rem; height:.85rem; border:1px solid var(--teal); opacity:.85;
}
.frame__tick--tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.frame__tick--br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.frame__cap{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:.7rem; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}

.hero .frame__img{ aspect-ratio:4/5; }
@media (max-width:900px){ .hero .frame__img{ aspect-ratio:16/10; } }

/* ------------------------------------------------------------------ buttons */

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.5rem;
  font-family:var(--sans); font-size:.85rem; font-weight:500; letter-spacing:.02em;
  border:1px solid var(--ink); border-radius:2px;
  background:var(--ink); color:var(--paper);
  cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover{ background:var(--teal-dk); border-color:var(--teal-dk); }
.btn:active{ transform:translateY(1px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:transparent; color:var(--teal-dk); border-color:var(--teal); }
.btn svg{ width:.95rem; height:.95rem; flex:none; }

/* --------------------------------------------------------------- data strip */

.strip{ border-block:1px solid var(--line); background:var(--sand); }
.strip__in{
  max-width:var(--max); margin-inline:auto; padding:clamp(1.75rem,3vw,2.5rem) var(--pad);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1.75rem 2rem;
}
.stat__k{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.45rem;
}
.stat__v{ font-family:var(--serif); font-size:1.35rem; line-height:1.2; color:var(--ink); }
.stat__v small{ font-family:var(--sans); font-size:.82rem; color:var(--slate); display:block; margin-top:.2rem; }

/* ------------------------------------------------------------- prose blocks */

.cols{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(2rem,5vw,5rem); align-items:start;
}
@media (max-width:860px){ .cols{ grid-template-columns:1fr; gap:2rem; } }
.cols--even{ grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); }

.prose{ max-width:62ch; }
.prose h2{ margin-bottom:1.5rem; }
.prose h3{ margin:2.5rem 0 .9rem; }
.prose p+h3{ margin-top:2.5rem; }
.prose a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; }
.prose ul{ margin:0 0 1.4em; padding-left:0; list-style:none; }
.prose ul li{ position:relative; padding-left:1.5rem; margin-bottom:.55rem; }
.prose ul li::before{
  content:""; position:absolute; left:.1rem; top:.72em;
  width:.5rem; height:1px; background:var(--teal);
}
.prose ul ul{ margin-top:.6rem; margin-bottom:.9rem; }

.sticky-side{ position:sticky; top:calc(var(--nav-h) + 2rem); }
@media (max-width:860px){ .sticky-side{ position:static; } }

/* ------------------------------------------------------------- service list */

.svc{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.svc li{
  display:grid; grid-template-columns:3.25rem 1fr; align-items:baseline; gap:.5rem;
  padding:.95rem .25rem; border-bottom:1px solid var(--line-2);
  transition:background .2s, padding-left .2s;
}
.svc li:hover{ background:var(--sand); padding-left:.7rem; }
.svc li span:last-child{ font-size:1.02rem; color:var(--ink-2); }
@media (min-width:760px){
  .svc{ columns:2; column-gap:3.5rem; column-fill:balance; }
  .svc li{ break-inside:avoid; }
}

/* -------------------------------------------------------------- card / grid */

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.card{ background:var(--paper); padding:clamp(1.5rem,2.5vw,2.25rem); }
.card__ico{ color:var(--teal); width:1.6rem; height:1.6rem; margin-bottom:1.15rem; }
.card h3{ font-size:1.18rem; margin-bottom:.6rem; }
.card p{ font-size:.94rem; color:var(--slate); margin:0; }

/* ----------------------------------------------------------- software chips */

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; }
.chip{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em;
  padding:.42rem .7rem; border:1px solid var(--line); border-radius:2px;
  color:var(--slate); background:var(--paper);
}

/* ------------------------------------------------------------- project list */

.proj{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.proj__item{ border-bottom:1px solid var(--line-2); }
.proj__row{
  width:100%; display:grid; grid-template-columns:3.5rem 1fr auto; gap:1rem;
  align-items:baseline; text-align:left;
  padding:1.15rem .3rem; background:none; border:0; cursor:default;
  font:inherit; color:inherit;
  transition:background .2s, padding-left .2s;
}
.proj__item:hover .proj__row{ background:var(--sand); padding-left:.75rem; }
.proj__ttl{ font-size:1.02rem; line-height:1.45; color:var(--ink-2); }
.proj__meta{
  font-family:var(--mono); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:.4rem;
}
.proj__item--has button.proj__row{ cursor:pointer; }
.proj__meta svg{ width:.8rem; height:.8rem; transition:transform .25s; }
.proj__item--open .proj__meta{ color:var(--teal); }
.proj__item--open .proj__meta svg{ transform:rotate(45deg); }
.proj__gal{ display:none; padding:.25rem .3rem 1.75rem; }
.proj__item--open .proj__gal{ display:block; }
.proj__gal ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr)); gap:1rem;
}
.proj__gal a{ display:block; position:relative; background:var(--sand-2); overflow:hidden; border:1px solid var(--line); }
.proj__gal img{ width:100%; aspect-ratio:4/3; object-fit:contain; background:#fff; padding:.4rem; transition:transform .4s cubic-bezier(.22,1,.36,1); }
.proj__gal a:hover img{ transform:scale(1.04); }

/* ---------------------------------------------------------------- lightbox */

.lb{
  position:fixed; inset:0; z-index:300; display:none;
  background:rgba(10,20,25,.975);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem);
}
.lb[data-open="true"]{ display:flex; }
.lb img{ max-width:100%; max-height:82vh; object-fit:contain; background:#fff; }
.lb__cap{
  position:absolute; left:0; right:0; bottom:1.25rem; text-align:center;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:rgba(252,251,248,.72);
  padding-inline:1.5rem;
}
.lb__x{
  position:absolute; top:1rem; right:1rem; width:2.75rem; height:2.75rem;
  background:none; border:1px solid rgba(252,251,248,.3); color:#fff; cursor:pointer;
  display:grid; place-items:center; border-radius:2px;
}
.lb__x:hover{ background:rgba(252,251,248,.1); }
.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:3rem; height:3rem; background:none; border:1px solid rgba(252,251,248,.3);
  color:#fff; cursor:pointer; display:grid; place-items:center; border-radius:2px;
}
.lb__nav:hover{ background:rgba(252,251,248,.1); }
.lb__nav--prev{ left:1rem; } .lb__nav--next{ right:1rem; }
.lb svg{ width:1.1rem; height:1.1rem; }

/* ------------------------------------------------------------------- table */

.tbl-scroll{ overflow-x:auto; margin:1.75rem 0 0; border:1px solid var(--line); }
table.tbl{ width:100%; min-width:44rem; border-collapse:collapse; font-size:.86rem; }
table.tbl th,table.tbl td{
  padding:.8rem .85rem; text-align:left; vertical-align:top;
  border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
}
table.tbl th{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:500; background:var(--ink); color:var(--paper); border-color:rgba(252,251,248,.18);
}
table.tbl tr:first-child+tr td{
  background:var(--sand); font-family:var(--sans); font-size:.76rem;
  color:var(--slate); line-height:1.45;
}
table.tbl td:last-child,table.tbl th:last-child{ border-right:0; }
table.tbl tbody tr:last-child td{ border-bottom:0; }
table.tbl td[rowspan]{ font-family:var(--mono); font-weight:500; background:var(--sand); color:var(--ink); }

/* --------------------------------------------------------------- callout */

.callout{
  border-left:2px solid var(--teal); background:var(--sand);
  padding:1.4rem 1.6rem; margin:2rem 0;
}
.callout p:last-child{ margin-bottom:0; }
.callout__t{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--teal); margin-bottom:.7rem;
}

/* --------------------------------------------------------------- contact */

.contact-grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

.dl{ margin:0; border-top:1px solid var(--line); }
.dl__row{ display:grid; grid-template-columns:8rem 1fr; gap:1rem; padding:.85rem .2rem; border-bottom:1px solid var(--line-2); }
.dl dt{ font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); padding-top:.2rem; }
.dl dd{ margin:0; color:var(--ink-2); }
.dl dd a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; }
@media (max-width:520px){ .dl__row{ grid-template-columns:1fr; gap:.2rem; } }

/* ------------------------------------------------------------------- form */

.form{ display:grid; gap:1.15rem; }
.field{ display:grid; gap:.45rem; }
.field label{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--slate);
}
.field label .req{ color:var(--clay); }
.field input,.field textarea{
  font:inherit; font-size:.97rem; color:var(--ink);
  padding:.8rem .9rem; background:var(--paper);
  border:1px solid var(--line); border-radius:2px;
  transition:border-color .18s, box-shadow .18s;
}
.field input:hover,.field textarea:hover{ border-color:var(--muted); }
.field input:focus,.field textarea:focus{
  outline:0; border-color:var(--teal); box-shadow:0 0 0 3px rgba(42,157,176,.14);
}
.field textarea{ resize:vertical; min-height:8rem; }
.field[data-err="true"] input,.field[data-err="true"] textarea{ border-color:var(--clay); }
.field__err{ font-size:.8rem; color:var(--clay); display:none; }
.field[data-err="true"] .field__err{ display:block; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
@media (max-width:600px){ .form__row{ grid-template-columns:1fr; } }
.form__note{ font-size:.82rem; color:var(--muted); margin:0; }
.form__ok{
  display:none; border-left:2px solid var(--moss); background:#F1F4EE;
  padding:1.1rem 1.3rem; font-size:.92rem; color:var(--ink-2);
}
.form[data-sent="true"] .form__ok{ display:block; }

/* ----------------------------------------------------------------- footer */

.site-foot{
  background:var(--ink); color:rgba(252,251,248,.72);
  position:relative; overflow:hidden;
  padding-block:clamp(3rem,5vw,4.5rem) 2rem;
  font-size:.9rem;
}
.site-foot__contours{
  position:absolute; bottom:-45%; left:-8%; width:min(60rem,90%); opacity:.3; pointer-events:none;
}
.site-foot__in{ position:relative; z-index:1; }
.site-foot a{ color:#fff; }
.site-foot a:hover{ color:var(--teal-lt); }
.foot-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap:2.5rem; padding-bottom:2.75rem;
}
.foot__h{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.17em; text-transform:uppercase;
  color:rgba(252,251,248,.45); margin-bottom:1rem;
}
.foot__name{ font-family:var(--serif); font-size:1.3rem; color:#fff; margin-bottom:.5rem; }
.foot-nav{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.foot-bar{
  border-top:1px solid rgba(252,251,248,.14); padding-top:1.5rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
  color:rgba(252,251,248,.5);
}

/* ------------------------------------------------------------ page header */

.page-head{ border-bottom:1px solid var(--line); background:var(--sand); position:relative; overflow:hidden; }
.page-head__contours{ position:absolute; top:-60%; right:-6%; width:min(46rem,80%); opacity:.42; pointer-events:none; }
.page-head__in{
  position:relative; z-index:1;
  max-width:var(--max); margin-inline:auto; padding:clamp(2.75rem,5vw,4.75rem) var(--pad);
}
.page-head p{ max-width:52ch; margin-top:1.25rem; }
.crumb{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1.25rem;
}
.crumb a{ color:var(--muted); }
.crumb a:hover{ color:var(--teal); }

/* --------------------------------------------------------------- reveal fx */

.js [data-reveal]{ opacity:0; transform:translateY(14px); }
.no-motion [data-reveal],
html:not(.js) [data-reveal]{ opacity:1 !important; transform:none !important; }

/* ------------------------------------------------------------------ figure */

figure{ margin:0; }
figcaption{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-top:.7rem; line-height:1.5;
}
.cert{
  display:inline-block; border:1px solid var(--line); padding:.6rem; background:var(--paper);
  transition:border-color .2s, transform .2s;
}
.cert:hover{ border-color:var(--teal); transform:translateY(-2px); }

/* --------------------------------------------------- certifikát – rozměry */
.cert{ max-width:min(100%, 22rem); }
@media (max-width:860px){
  .cert{ max-width:min(100%, 17rem); }
}

/* -------------------------------------------- portrét v úzkém sloupci */
.frame.sticky-side{ max-width:min(100%, 22rem); }
@media (max-width:860px){
  .frame.sticky-side{ max-width:min(100%, 18rem); }
}

/* portrét bez technického rastru */
.frame__img--plain::after{
  background:linear-gradient(to top, rgba(15,28,34,.10), rgba(15,28,34,0) 40%);
}