/* ============================================================
   Robert Krause – one-pager
   Paleta a fonty vychádzajú z brandbooku KRAUSE (2024),
   layout a výraz sú navrhnuté nanovo pre web.
   ============================================================ */

/* ---------- Fonty (self-hosted) ---------- */
@font-face{font-family:Jost;src:url(../fonts/jost-latin-ext.woff2)format("woff2");font-weight:200 600;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Jost;src:url(../fonts/jost-latin.woff2)format("woff2");font-weight:200 600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Work Sans";src:url(../fonts/work-sans-latin-ext.woff2)format("woff2");font-weight:300 600;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Work Sans";src:url(../fonts/work-sans-latin.woff2)format("woff2");font-weight:300 600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif-italic-latin-ext.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif-italic-latin.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif-latin-ext.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif-latin.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokeny ---------- */
:root{
  --espresso:#150C06;
  --bark:#241509;
  --bark-2:#3B2314;
  --champagne:#E6C67C;
  --parchment:#F7EEE1;
  --cyan:#00B0BD;

  --ink:var(--parchment);
  --ink-mute:#B5A18B;
  --rule:rgba(230,198,124,.24);
  /* Silnejšia linka pre nosnú štruktúru (mriežky kariet). 1px čiara pri
     zlomkovom DPR – Windows 125 %, zoom prehliadača – stráca časť krytia
     antialiasingom; pri .24 sa tá slabšia už dala prehliadnuť. */
  --rule-strong:rgba(230,198,124,.36);

  --f-display:Jost,"Helvetica Neue",Arial,sans-serif;
  --f-body:"Work Sans","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Instrument Serif",Georgia,serif;

  --wrap:1180px;
  --pad:clamp(1.25rem,5vw,4rem);
  --sec-y:clamp(4.125rem,8.25vw,7.5rem);

  --ease:cubic-bezier(.22,.68,.24,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{
  margin:0;background:var(--espresso);color:var(--ink);
  font:400 clamp(1.05rem,.35vw + .98rem,1.18rem)/1.72 var(--f-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.05}
p{margin:0 0 1.1em}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--champagne);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;display:inline-flex;align-items:center;min-height:44px;background:var(--champagne);color:var(--espresso);padding:.7rem 1.1rem;font:500 .9rem var(--f-body);border-radius:2px}
.skip:focus{left:1rem;top:1rem}

/* ---------- Textúra ---------- */
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Spoločné prvky ---------- */
.wrap{position:relative;z-index:1;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.eyebrow{
  font:500 .78rem/1 var(--f-body);letter-spacing:.28em;text-transform:uppercase;
  color:var(--champagne);margin:0 0 1.8rem;display:flex;align-items:center;gap:.9rem;
}
.eyebrow::after{content:"";height:1px;flex:1;max-width:8rem;background:linear-gradient(90deg,var(--rule),transparent)}

/* Jost kreslí en dash široko – 0,74 em, kým jeho vlastná em dash má 0,89 em,
   takže v displejových nadpisoch pôsobí ako dlhá pomlčka. Zúžime ju len
   vodorovne na ~0,49 em (šírka písmena „n", čo je definícia en dashu).
   size-adjust by ju zmenšil aj zvisle a posunul k účiaru – vyzeralo by to
   ako podčiarkovník. Záporné okraje zoberú zvyšok pôvodnej šírky. */
.nd{font-style:normal;display:inline-block;transform:scaleX(.66);margin-inline:-.125em}

/* balance zarovná dĺžky riadkov v nadpisoch, pretty zabráni sirotám
   na konci odsekov. Prehliadače bez podpory to jednoducho ignorujú. */
.h2{font-family:var(--f-display);font-weight:300;font-size:clamp(2.3rem,5.4vw,4.3rem);letter-spacing:-.022em;margin-bottom:1.8rem;text-wrap:balance}
.h1-alt{font-family:var(--f-display);font-weight:300;font-size:clamp(2.5rem,6.2vw,4.8rem);letter-spacing:-.025em;margin-bottom:1.8rem}
em{font-family:var(--f-serif);font-style:italic;color:var(--champagne);font-weight:400}
.h2 em,.h1-alt em{font-size:1.08em}

.lead{font-size:clamp(1.22rem,.7vw + 1.05rem,1.5rem);font-weight:300;line-height:1.6;color:var(--ink);max-width:40ch;text-wrap:pretty}
.lead--wide{max-width:52ch;color:var(--ink-mute)}
.minih{font:500 .8rem/1 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--champagne);margin:0 0 1.5rem}
.minih--gap{margin-top:2.6rem}
.note{font-size:.98rem;color:var(--ink-mute);max-width:64ch;margin-top:2.6rem}
.note i,.hero__degrees i{font-style:normal;color:var(--champagne);opacity:.6;padding:0 .2em}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font:500 .86rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;
  padding:1.05rem 1.9rem;min-height:44px;border:1px solid var(--champagne);border-radius:999px;
  background:var(--champagne);color:var(--espresso);
  transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 34px -12px rgba(230,198,124,.6)}
.btn--ghost{background:transparent;color:var(--champagne);border-color:var(--rule)}
.btn--ghost:hover{border-color:var(--champagne);background:rgba(230,198,124,.08);box-shadow:none}
.btn--sm{padding:.78rem 1.3rem;font-size:.76rem}

/* ---------- Hlavička ---------- */
.topbar{
  position:fixed;inset:0 0 auto;z-index:80;display:flex;align-items:center;gap:2rem;
  padding:1.15rem var(--pad);transition:background .4s var(--ease),backdrop-filter .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.topbar.is-stuck{background:rgba(21,12,6,.82);backdrop-filter:blur(14px);border-bottom-color:var(--rule);padding-block:.8rem}

/* Wordmark je vektor prevzatý z brandbooku (vrátane „A“ bez priečky) */
/* Logo je odkaz na úvod – potrebuje dotykový cieľ, nie len výšku glyfov. */
.wordmark{display:flex;align-items:center;flex:none;min-height:44px;padding-right:.6rem;margin-right:auto;color:var(--ink);transition:color .3s var(--ease)}
.wordmark:hover{color:var(--champagne)}
.wordmark__mark{width:auto;height:1.05rem;display:block;flex:none}

/* Prepínač jazyka nahradil tlačidlo s CTA. Drží pozíciu aj vizuálny
   akcent, ktorý tam tlačidlo malo – aktívny jazyk je vyplnený. */
.lang{display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:999px;flex:none}
.lang__opt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.7rem;min-height:44px;border-radius:999px;
  font:500 .74rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-mute);
  transition:color .3s var(--ease),background .3s var(--ease);
}
.lang__opt:hover{color:var(--champagne)}
.lang__opt[aria-current]{background:var(--champagne);color:var(--espresso)}
.lang__opt[aria-current]:hover{color:var(--espresso)}

.topnav{display:flex;gap:1.9rem}
.topnav a{font:400 .9rem/1 var(--f-body);color:var(--ink-mute);position:relative;display:inline-flex;align-items:center;min-height:44px;padding-block:.4rem;transition:color .3s var(--ease)}
.topnav a::after{content:"";position:absolute;left:0;bottom:.72rem;height:1px;width:0;background:var(--champagne);transition:width .35s var(--ease)}
.topnav a:hover,.topnav a.is-active{color:var(--ink)}
.topnav a.is-active::after,.topnav a:hover::after{width:100%}

.burger{display:none;flex:none;width:44px;height:44px;border:1px solid var(--rule);border-radius:999px;background:none;cursor:pointer;padding:0;place-items:center}
.burger span{display:block;width:16px;height:1px;background:var(--ink);margin:3px auto;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.burger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}

.mobilenav{position:fixed;inset:0;z-index:79;background:rgba(21,12,6,.97);backdrop-filter:blur(8px);display:grid;place-items:center}
.mobilenav[hidden]{display:none}
.mobilenav nav{display:grid;gap:.4rem;text-align:center}
.mobilenav a{font-family:var(--f-display);font-weight:300;font-size:clamp(2rem,8.5vw,2.8rem);letter-spacing:-.01em;padding:.3rem}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:8rem 0 0;overflow:hidden}
.hero__glow{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(46rem 34rem at var(--mx,72%) var(--my,32%),rgba(230,198,124,.11),transparent 62%),
    radial-gradient(38rem 30rem at 8% 88%,rgba(0,176,189,.09),transparent 64%);
  transition:background .5s linear;
}
.hero__inner{
  position:relative;z-index:1;max-width:var(--wrap);width:100%;margin-inline:auto;
  padding-inline:var(--pad);
  display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem);align-items:center;
}
.hero__text{position:relative;z-index:2}
/* Titulok v hero je dlhý – tesnejší preklad, aby držal na jednom riadku */
.hero .eyebrow{letter-spacing:.14em;gap:.8rem}
.hero .eyebrow::after{max-width:5rem}

.hero__name{font-family:var(--f-display);font-weight:300;font-size:clamp(3rem,9vw,7.4rem);line-height:.88;letter-spacing:-.035em;margin:0 0 1.6rem}
.hero__name .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero__name .line>span{display:block;transform:translateY(115%);transition:transform 1.1s var(--ease)}
.hero__name .line:nth-child(2)>span{transition-delay:.12s}
body.ready .hero__name .line>span{transform:none}

.hero__degrees{font:400 .92rem/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:2.2rem}
.hero__claim{font-family:var(--f-display);font-weight:300;font-size:clamp(1.5rem,2.9vw,2.35rem);line-height:1.25;letter-spacing:-.01em;max-width:20ch;margin-bottom:1.3rem}
.hero__sub{color:var(--ink-mute);max-width:44ch;font-size:1.02rem;margin-bottom:0}

/* Kresba je jediný vizuál hero sekcie, takže stojí v toku – žiadne
   absolútne pozicovanie, ktoré by sa muselo doťahovať na každom breakpointe. */
.hero__figure{position:relative;justify-self:center;width:min(70vw,340px)}
.lineart{display:block;width:100%;height:auto;overflow:visible;pointer-events:none;color:var(--champagne);opacity:.92}
.lineart use{stroke-width:1}

/* Vodoznaky: tá istá značková kresba, tichšie a v iných výrezoch */
.oneline{position:absolute;pointer-events:none;z-index:0;overflow:hidden;color:var(--champagne);opacity:0;transition:opacity 1.6s var(--ease) .2s}
.oneline.reveal.is-in{opacity:.085}
.oneline svg{width:100%;height:auto;overflow:visible}
.oneline use{stroke-width:.8}
.oneline--edu{top:3%;right:-19%;width:min(42vw,430px)}
.oneline--pub{top:2%;right:-15%;width:min(34vw,350px)}
.oneline--contact{top:5%;right:-13%;width:min(36vw,400px)}
.oneline--contact.reveal.is-in{opacity:.13}
.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 3s var(--ease);transition-delay:var(--delay,.15s)}
body.ready .lineart .draw{stroke-dashoffset:0}
.pulses circle{opacity:0}
body.ready .pulses circle{opacity:1;transition:opacity .6s ease 2.2s}

.stats{
  position:relative;z-index:1;margin-top:clamp(3rem,7vw,5.5rem);
  max-width:var(--wrap);width:100%;margin-inline:auto;
  padding:1.8rem var(--pad);
  border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem;
}
.stats li{display:flex;flex-direction:column;gap:.35rem}
.stats__n{font-family:var(--f-serif);font-size:clamp(2.4rem,4vw,3.3rem);line-height:1;color:var(--champagne);font-variant-numeric:tabular-nums}
.stats__n--txt{letter-spacing:-.01em}
.stats__l{font:400 .82rem/1.4 var(--f-body);letter-spacing:.06em;color:var(--ink-mute);text-transform:uppercase;text-wrap:balance}

/* ---------- Sekcie ---------- */
.sec{position:relative;padding-block:var(--sec-y);overflow:hidden}
.sec--eco{background:linear-gradient(180deg,transparent,rgba(59,35,20,.34),transparent)}
.sec--contact{padding-bottom:0}

/* ---------- O mne ---------- */
.about{display:grid;grid-template-columns:1fr;gap:clamp(2.4rem,5vw,4.5rem);align-items:start}
.about__text p{color:var(--ink-mute);max-width:46ch}
.about__text .lead{color:var(--ink)}
.about__fig{margin:0;position:relative}
.about__fig img{width:100%;border-radius:2px;border:1px rgb(118 101 61 / 36%) solid;filter:saturate(.75) contrast(1.05) brightness(.9)}
.about__fig figcaption{display:flex;justify-content:space-between;gap:1rem;margin-top:.8rem;font:400 .72rem/1.4 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.about__fig figcaption span{opacity:.6}

.pillars{display:grid;gap:1.6rem;margin-top:1.2rem;padding-top:2.4rem;border-top:1px solid var(--rule)}
.pillars h3{font-family:var(--f-display);font-weight:300;font-size:1.28rem;letter-spacing:.01em;color:var(--champagne);margin-bottom:.4rem}
.pillars p{margin:0;font-size:1rem;color:var(--ink-mute);text-wrap:pretty}

/* ---------- Vzdelanie ---------- */
.edu{margin-top:3rem;border-top:1px solid var(--rule)}
.edu li{
  position:relative;display:grid;grid-template-columns:1fr;gap:.2rem;
  padding:1.35rem 0 1.35rem 1.4rem;border-bottom:1px solid var(--rule);
  transition:padding-left .45s var(--ease);
}
.edu li::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--champagne);transform:translateY(-50%);transition:width .45s var(--ease)}
.edu li:hover{padding-left:2.4rem}
.edu li:hover::before{width:1.6rem}
.edu__deg{font-family:var(--f-display);font-weight:300;font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:-.005em;transition:color .35s var(--ease)}
.edu li:hover .edu__deg{color:var(--champagne)}
.edu__org{font-size:.95rem;color:var(--ink-mute)}
.edu__tag:not(:empty){
  justify-self:start;margin-top:.5rem;font:500 .66rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);border:1px solid rgba(0,176,189,.4);border-radius:999px;padding:.4rem .7rem;
}

/* ---------- Ekosystém ---------- */
/* Deliace čiary sú rámiky samotných kariet, nie 1px medzera v mriežke.
   Medzera prepúšťa pozadie kontajnera medzi dvoma nezávisle zaokrúhlenými
   boxmi – pri zlomkovom DPR (Windows 125 %, zoom prehliadača) sa jedna čiara
   vykreslí slabšie než druhá. Rámik sa zaokrúhľuje spolu s kartou. */
.eco{display:grid;grid-template-columns:1fr;gap:0;margin-top:3.2rem;border:1px solid var(--rule-strong)}
.eco__card{
  position:relative;background:var(--espresso);padding:2rem 1.7rem 2.2rem;overflow:hidden;
  border-bottom:1px solid var(--rule-strong);
  transition:background .45s var(--ease);
}
.eco__card:last-child{border-bottom:0}
.eco__card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(22rem 14rem at 12% 0%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%);
}
.eco__card::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--c);transform:scaleX(1);transform-origin:left;transition:transform .55s var(--ease)}
.eco__card:hover::before,.eco__card:focus-within::before{opacity:1}
.eco__card:hover::after,.eco__card:focus-within::after{transform:scaleX(1)}
.eco__card h3{position:relative;font-family:var(--f-display);font-weight:300;font-size:1.4rem;letter-spacing:.05em;margin-bottom:.9rem}
.eco__card h3 span{display:block;font-size:.82rem;letter-spacing:.26em;text-transform:uppercase;color:var(--c2);margin-top:.55rem;font-weight:500;transition:opacity .45s var(--ease);opacity:1}
.eco__card:hover h3 span,.eco__card:focus-within h3 span{opacity:1}
.eco__card p{position:relative;margin:0;font-size:1rem;color:var(--ink-mute);text-wrap:pretty}

/* ---------- Spolupráca ---------- */
.work{display:grid;grid-template-columns:1fr;gap:clamp(2.6rem,5vw,4.5rem);margin-top:3.4rem}

.acc details{border-top:1px solid var(--rule)}
.acc details:last-child{border-bottom:1px solid var(--rule)}
.acc summary{
  position:relative;list-style:none;cursor:pointer;padding:1.2rem 2.6rem 1.2rem 0;
  font-family:var(--f-display);font-weight:300;font-size:clamp(1.12rem,1.6vw,1.38rem);
  transition:color .3s var(--ease);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--champagne)}
.acc summary::after,.acc summary::before{content:"";position:absolute;right:.2rem;top:50%;background:var(--champagne);transition:transform .4s var(--ease),opacity .3s var(--ease)}
.acc summary::after{width:13px;height:1px;transform:translateY(-50%)}
.acc summary::before{width:1px;height:13px;right:.7rem;transform:translateY(-50%)}
.acc details[open] summary{color:var(--champagne)}
.acc details[open] summary::before{transform:translateY(-50%) rotate(90deg);opacity:0}
.acc details p{margin:0 0 1.6rem;font-size:1.02rem;color:var(--ink-mute);max-width:48ch}

/* Tá istá oprava ako pri .eco – čiara patrí karte, nie medzere v mriežke. */
.fmt{display:grid;gap:0;border:1px solid var(--rule-strong)}
.fmt li{background:var(--espresso);padding:1.3rem 1.4rem;border-bottom:1px solid var(--rule-strong);transition:background .4s var(--ease)}
.fmt li:last-child{border-bottom:0}
.fmt li:hover{background:rgba(59,35,20,.55)}
.fmt h4{font-family:var(--f-display);font-weight:300;font-size:1.18rem;color:var(--champagne);margin-bottom:.35rem}
.fmt p{margin:0;font-size:.98rem;color:var(--ink-mute);text-wrap:pretty}


/* ---------- Publikácie ---------- */
.shelf{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:1.2rem;
  margin-top:3rem;padding-bottom:1.4rem;overflow-x:auto;
  scroll-snap-type:x proximity;scroll-padding-inline-start:0;
  /* Bez toho ťahanie poličky na iOS spustí gesto „späť" prehliadača. */
  overscroll-behavior-x:contain;
  /* Odtieňovaný pravý okraj hovorí, že polička pokračuje. Maska sa viaže
     na viditeľný box, nie na posúvaný obsah, takže ostáva na mieste. */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 3.5rem),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 3.5rem),transparent);
  scrollbar-width:thin;scrollbar-color:rgba(230,198,124,.35) transparent;
}
.book{margin:0;scroll-snap-align:start;position:relative}
/* Odkaz obaľuje len obrázok (figcaption musí byť priamym potomkom figure),
   pseudo-prvok ho roztiahne cez celú kartu – klikateľná je aj s popisom. */
.book__link{display:block;color:inherit}
.book__link::after{content:"";position:absolute;inset:0}
.book__link:focus-visible{outline:none}
.book__link:focus-visible img{outline:2px solid var(--champagne);outline-offset:4px}
.book img{
  width:100%;aspect-ratio:4.22/6;object-fit:contain;
  border:1px solid rgba(230,198,124,.18);box-shadow:0 14px 34px -18px rgba(0,0,0,.6);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.book:hover img{transform:translateY(-8px) rotate(-1.2deg);box-shadow:0 22px 44px -20px rgba(59,35,20,.6)}
.book figcaption{margin-top:.8rem;font:400 .84rem/1.45 var(--f-body);color:var(--ink-mute)}
.book figcaption b{display:block;font-weight:500;color:var(--champagne);font-size:.74rem;letter-spacing:.16em;margin-top:.2rem}

.cols{display:grid;grid-template-columns:1fr;gap:clamp(2.4rem,5vw,4rem);margin-top:clamp(3.4rem,6vw,5rem);padding-top:clamp(2.4rem,5vw,3.4rem);border-top:1px solid var(--rule)}
.awards li{display:grid;gap:.15rem;padding:.85rem 0;border-bottom:1px solid var(--rule)}
.awards b{font-family:var(--f-display);font-weight:400;font-size:1.12rem;letter-spacing:.01em}
.awards span{font-size:.96rem;color:var(--ink-mute);text-wrap:pretty}

/* ---------- Kontakt ---------- */
.sec--contact{background:linear-gradient(180deg,transparent,rgba(59,35,20,.4))}
.contact{margin-top:3rem;display:flex;flex-wrap:wrap;align-items:center;gap:2rem;justify-content:space-between}
.contact__mail{
  font-family:var(--f-display);font-weight:300;font-size:clamp(1.6rem,4.6vw,3.1rem);letter-spacing:-.02em;
  color:var(--champagne);position:relative;padding-bottom:.15em;
}
.contact__mail::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--champagne);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.contact__mail:hover::after{transform:scaleX(1);transform-origin:left}
.social{display:flex;flex-wrap:wrap;gap:.6rem}
.social a{
  display:inline-flex;align-items:center;min-height:44px;
  font:400 .8rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:999px;padding:.85rem 1.2rem;color:var(--ink-mute);
  transition:border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.social a:hover{border-color:var(--champagne);color:var(--champagne);transform:translateY(-2px)}

.foot{margin-top:clamp(4rem,8vw,7rem);border-top:1px solid var(--rule);padding-block:1.6rem}
.foot__in{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;justify-content:center;text-align:center;font:400 .76rem/1.6 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ============================================================
   Breakpoints
   ============================================================ */
@media (min-width:600px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .pillars{grid-template-columns:repeat(3,1fr)}
  .eco{grid-template-columns:repeat(2,1fr)}
  .eco__card{border-right:0;border-bottom:1px solid var(--rule-strong)}
  .eco__card:nth-child(2n+1){border-right:1px solid var(--rule-strong)}
  .eco__card:nth-last-child(-n+2){border-bottom:0}
  .fmt{grid-template-columns:repeat(2,1fr)}
  .fmt li:nth-child(2n+1){border-right:1px solid var(--rule-strong)}
  .fmt li:nth-last-child(-n+2){border-bottom:0}
  .cols{grid-template-columns:repeat(2,1fr)}
  .shelf{grid-auto-columns:minmax(170px,1fr)}
}

@media (min-width:900px){
  .about{grid-template-columns:1.15fr .85fr}
  .about .pillars{grid-column:1/-1;margin-top:1.6rem}
  .work{grid-template-columns:1.15fr .85fr}
  .eco{grid-template-columns:repeat(3,1fr)}
  .eco__card,.eco__card:nth-child(2n+1){border-right:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong)}
  .eco__card:nth-child(3n){border-right:0}
  .eco__card:nth-last-child(-n+3){border-bottom:0}
  .fmt{grid-template-columns:1fr}
  .fmt li{border-right:0;border-bottom:1px solid var(--rule-strong)}
  .fmt li:nth-child(2n+1){border-right:0}
  .fmt li:last-child{border-bottom:0}
  .edu li{grid-template-columns:1.1fr 1fr auto;align-items:center;gap:1.5rem}
  .edu__tag:not(:empty){margin-top:0;justify-self:end}
}

@media (min-width:1024px){
  .hero{padding-top:6rem}
  .hero__inner{grid-template-columns:1.12fr .88fr;gap:clamp(2rem,4vw,3.5rem)}
  .hero__figure{width:100%;max-width:440px;justify-self:end}
  .hero__name{margin-bottom:2rem}
  .shelf{
    grid-auto-flow:row;grid-template-columns:repeat(5,1fr);grid-auto-columns:auto;
    overflow:visible;gap:1.6rem 1.4rem;scroll-snap-type:none;
    -webkit-mask-image:none;mask-image:none;
  }
}

/* Do 899 px sa navigácia skladá do zásuvky */
@media (max-width:899px){
  .topnav{display:none}
  .topbar{gap:.9rem}
  .burger{display:grid}
  .hero{min-height:100svh;padding-top:5rem}

  /* Bez odsadenia zľava – na užších displejoch má zoznam využiť celú šírku.
     Odsadenie drží miesto pre linku, ktorá vybieha pri :hover, a to je aj tak
     vec ukazovadla, nie dotyku. Od 900 px, kde má zoznam tri stĺpce, ostáva. */
  .edu li{padding-left:0}
  .edu li:hover{padding-left:0}
  .edu li:hover::before{width:0}
}

/* Do 767 px: kresba ide do pozadia ako vodoznak, nie nad text. V toku nad
   textom zaberala pol obrazovky a odsúvala meno aj claim pod ohyb, hoci text
   je dôležitejší. Absolútne pozicovanie tu nič neriskuje – prvok je čisto
   dekoratívny (aria-hidden) a text nad ním má vlastnú vrstvu. */
@media (max-width:767px){
  .hero__figure{
    /* Výška je naviazaná na textový blok (inset 0 zhora aj zdola), takže
       kresba nikdy nepretečie pod čiaru so štatistikami – šírku si dopočíta
       z pomeru strán sama, nech je text akokoľvek dlhý. */
    order:0;position:absolute;inset:0 -8% 0 auto;
    width:auto;height:100%;display:flex;align-items:center;
    margin:0;justify-self:auto;z-index:0;pointer-events:none;
  }
  /* Rovnaké krytie ako vodoznak v sekcii Kontakt – drží to jednotný jazyk. */
  .lineart{height:100%;width:auto;max-width:none;opacity:.10}
  .lineart use{stroke-width:1.6}

  .hero .eyebrow{font-size:.60rem;letter-spacing:.085em;margin-bottom:1.1rem}
  .hero .eyebrow::after{display:none}
  .hero__text{position:relative;z-index:1}
  .hero__claim,.hero__sub{max-width:32ch}
  .hero__name{font-size:clamp(2.9rem,13.5vw,4.6rem);margin-bottom:1.2rem}
  .hero__degrees{margin-bottom:1.8rem}
}

/* Na úzkych telefónoch (iPhone SE a menšie) sa 43-znakový nadtitulok
   nezmestí na riadok – ešte o kúsok zúžime preklad aj stupeň písma. */
@media (max-width:389px){
  .hero .eyebrow{font-size:.55rem;letter-spacing:.05em}
}

/* Najužšie telefóny (320–360 px): anglický nadtitulok je o 5 znakov dlhší
   než slovenský a inak by sa zlomil na dva riadky so sirotou. */
@media (max-width:360px){
  .topbar{gap:.55rem;padding-inline:.85rem}
  .wordmark__mark{height:.92rem}
  .hero .eyebrow{font-size:.52rem;letter-spacing:.04em}
  /* Inak sa riadok titulov zlomí a „MBA" ostane samo na druhom riadku. */
  .hero__degrees{font-size:.82rem;letter-spacing:.12em}
}

/* 768–1023 px (iPad na výšku): hero na dva stĺpce. Kresba vycentrovaná
   nad textom zarovnaným vľavo pôsobila neusadene.
   Horná hranica je nutná – tento blok je v súbore až za pravidlami pre
   1024 px, takže bez nej by ich pri rovnakej špecificite prebil. */
@media (min-width:768px) and (max-width:1023px){
  .hero__inner{grid-template-columns:1.25fr .75fr;gap:clamp(1.6rem,3vw,3rem)}
  .hero__figure{order:0;justify-self:end;width:100%;max-width:300px;margin-bottom:0}
  .lineart use{stroke-width:1.2}
  .hero__claim,.hero__sub{max-width:34ch}
  /* Užší textový stĺpec – bez tohto sa „PORADCA" zlomí na druhý riadok. */
  .hero .eyebrow{font-size:.68rem;letter-spacing:.09em;gap:.6rem}
  .hero .eyebrow::after{max-width:2.5rem}
}

@media (min-width:900px){
  .mobilenav{display:none !important}
}

/* ---------- Redukovaný pohyb ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .hero__name .line>span{transform:none}
  .draw{stroke-dashoffset:0}
  .oneline{opacity:.085}
  .oneline--contact{opacity:.13}
  .pulses{display:none}
}