@font-face{font-family:"Bodoni Moda";src:url(/fonts/bodoni-moda.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(/fonts/bodoni-moda-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url(/fonts/jost-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Jost";src:url(/fonts/jost-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url(/fonts/jost-500.woff2) format("woff2");font-weight:500;font-display:swap}
/* Layout: one long scroll like a concert programme — name as hero, then chapters marked by
   stacked syllable labels (the "MO/DE/RA/TI/ON" idea), dark wine ground, fuchsia for emphasis,
   a single green thread (bow-hair line, links, markers). Deliberately single dark look. */
:root{
  --bg:#1b0b14;         /* burgundy-black ground */
  --surface:#28111e;    /* raised wine */
  --wine:#6f1535;       /* bordó */
  --mauve:#c7a1b9;      /* mályva – secondary text */
  --fg:#f5e9f0;         /* main text, pinkish white */
  --fuchsia:#e23682;    /* accent */
  --green:#5fae84;      /* zöld akcentus */
  --line:rgba(199,161,185,.22);
  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --body:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
img{max-width:100%}[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--bg);color:var(--fg);font:300 1.0625rem/1.7 var(--body);margin:0}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.wrap{max-width:68rem;margin:0 auto;padding-inline:clamp(1rem,4vw,2.5rem)}

/* placeholder marker – shows what Veronika still needs to fill in */
.ph{}
.ph-note{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}

/* nav */
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.9rem;flex-wrap:wrap}
.logo{font:italic 500 1.35rem/1 var(--display);text-decoration:none}
.logo span{color:var(--fuchsia)}
nav ul{display:flex;gap:clamp(.9rem,2.5vw,2rem);list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{text-decoration:none;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mauve)}
nav a:hover{color:var(--fg)}

/* hero */
.hero{padding-block:clamp(3rem,9vw,6.5rem) clamp(2.5rem,6vw,4.5rem)}
.hero .wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1{font:400 clamp(3.2rem,11vw,7.5rem)/.92 var(--display);margin:0;letter-spacing:-.01em;text-wrap:balance}
.hero h1 em{display:block;font-style:italic;color:var(--fuchsia)}
.hero .role{font-size:.85rem;letter-spacing:.24em;text-transform:uppercase;color:var(--green);margin:0 0 1.4rem}
.hero .sub{font:italic 400 clamp(1.25rem,2.6vw,1.6rem)/1.35 var(--display);color:var(--mauve);margin:1.8rem 0 0;max-width:30ch}
.bow{height:2px;width:min(18rem,70%);background:linear-gradient(90deg,var(--green),transparent);margin-top:2rem}
.portrait{background-size:cover!important;background-position:center!important;aspect-ratio:1/1;max-width:100%;border-radius:2px;box-shadow:1.1rem 1.1rem 0 -1px var(--wine),1.1rem 1.1rem 0 0 var(--fuchsia);background:
  radial-gradient(120% 80% at 30% 20%,rgba(226,54,130,.35),transparent 60%),
  radial-gradient(90% 70% at 80% 90%,rgba(95,174,132,.18),transparent 65%),
  linear-gradient(160deg,var(--wine),var(--surface));
  display:grid;place-items:end center;padding:1.5rem;border:1px solid var(--line);position:relative;overflow:hidden}
.portrait::before{display:none;content:"";position:absolute;inset:16% 44% 20%;border-left:1px solid rgba(245,233,240,.25);border-right:1px solid rgba(245,233,240,.25)}

/* family photo */
.family{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;margin:2.5rem 0 0;max-width:52rem}
.family .photo{aspect-ratio:4/3;max-width:100%;border:1px solid var(--line);background:linear-gradient(160deg,var(--surface),var(--wine));display:grid;place-items:end start;padding:1rem;filter:saturate(.6)}
.family figcaption{font:italic 400 1rem/1.45 var(--display);color:var(--mauve)}
.family figcaption strong{display:block;font:500 .7rem var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:.6rem;font-style:normal}
.gen{display:flex;gap:.4rem;margin-top:1rem}
.gen span{width:.55rem;height:.55rem;border-radius:50%;border:1px solid var(--green)}
.gen span.me{background:var(--fuchsia);border-color:var(--fuchsia)}

/* quote band */
.quote{border-block:1px solid var(--line);padding-block:clamp(2rem,5vw,3rem)}
.quote p{font:italic 400 clamp(1.5rem,3.6vw,2.4rem)/1.3 var(--display);margin:0;max-width:34ch;text-wrap:balance}
.quote p::before{content:"„";color:var(--fuchsia)}
.quote p::after{content:"“";color:var(--fuchsia)}

/* chapters with syllable labels */
section.ch{padding-block:clamp(3rem,7vw,5.5rem);border-bottom:1px solid var(--line)}
section.ch .wrap{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem)}
.syl{font:600 clamp(1.5rem,3vw,2.1rem)/.95 var(--display);color:var(--wine);letter-spacing:.02em;margin:0;-webkit-text-stroke:1px var(--fuchsia);color:transparent}
.syl span{display:block}
h2{font:400 clamp(1.9rem,4vw,2.7rem)/1.1 var(--display);margin:0 0 1.2rem;text-wrap:balance}
h2 em{color:var(--fuchsia)}
.lead{max-width:62ch;color:var(--fg)}
.lead p{margin:0 0 1rem}
.muted{color:var(--mauve)}

/* milestones */
.miles{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:0;max-width:44rem}
.miles li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;padding-block:1rem;border-top:1px solid var(--line)}
.miles .yr{font:500 .9rem var(--body);letter-spacing:.1em;color:var(--green);font-variant-numeric:tabular-nums}

/* occasions */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
.card{background:var(--bg);padding:1.6rem 1.5rem 1.8rem;display:flex;flex-direction:column;gap:.5rem}
.card h3{font:italic 500 1.45rem/1.2 var(--display);margin:0}
.card .tag{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.card p{margin:0;color:var(--mauve)}

/* media */
.media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:2rem}
.clip{display:flex;flex-direction:column;gap:.8rem;text-decoration:none}
.clip .frame{aspect-ratio:16/10;max-width:100%;border:1px solid var(--line);border-radius:4px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--surface),var(--wine));transition:border-color .25s}
.clip:hover .frame{border-color:var(--fuchsia)}
.play{width:3.4rem;height:3.4rem;border-radius:50%;border:1px solid var(--fg);display:grid;place-items:center}
.play::after{content:"";border-left:14px solid var(--fg);border-block:9px solid transparent;margin-left:4px}
.clip strong{font:italic 500 1.2rem var(--display)}

/* teaching links */
.teach{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.9rem;max-width:44rem}
.teach li{display:flex;gap:1rem;align-items:baseline}
.teach li::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--green);transform:translateY(-.1rem)}
.teach a{text-decoration-color:var(--green);text-underline-offset:4px}

/* personal facts */
dl.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.8rem 2rem;margin:1.5rem 0 0}
dl.facts dt{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green);padding-top:.3rem}
dl.facts dd{margin:0}

/* contact */
.contact{padding-block:clamp(4rem,9vw,6.5rem);text-align:left}
.contact h2{font-size:clamp(2.2rem,6vw,4rem);max-width:16ch}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.8rem}
.mail code{font:400 clamp(1.05rem,2.4vw,1.35rem) var(--body);padding:.8rem 1.1rem;border:1px solid var(--fuchsia);border-radius:2px;user-select:all;overflow-wrap:anywhere}
button.copy{font:500 .8rem var(--body);letter-spacing:.16em;text-transform:uppercase;background:var(--fuchsia);color:var(--fg);border:0;padding:.95rem 1.3rem;border-radius:2px;cursor:pointer}
button.copy:hover{background:var(--wine)}
.social{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;margin-top:2rem;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}
.social a{color:var(--mauve);text-decoration:none}
.social a:hover{color:var(--green)}
/* legal pages: quiet, readable, small */
.legal{border-top:1px solid var(--line);padding-block:clamp(2.5rem,6vw,4rem);font-size:.95rem;line-height:1.65}
.legal .wrap>*{max-width:65ch}
.legal h2{font-size:clamp(1.6rem,3vw,2rem);margin-bottom:.6rem}
.legal h3{font:500 .78rem var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin:1.8rem 0 .4rem}
.legal p{margin:0 0 .8rem}
footer{border-top:1px solid var(--line);padding-block:1.5rem;font-size:.8rem;color:var(--mauve)}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

@media (max-width:760px){
  .hero .wrap{grid-template-columns:1fr}
  .portrait{width:100%}
  section.ch .wrap{grid-template-columns:1fr;gap:1rem}
  .syl{display:flex;gap:.1rem;font-size:1.3rem}
  .syl span{display:inline}
  .grid,.media,.family{grid-template-columns:1fr}
  .miles li{grid-template-columns:5rem minmax(0,1fr)}
  dl.facts{grid-template-columns:1fr;gap:.2rem}
  dl.facts dd{margin-bottom:.8rem}
}
.legal-page{border-top:0;padding-block:clamp(3rem,7vw,5rem)}
.legal-page h2{font-size:clamp(2.2rem,5vw,3.2rem)}
.back{padding-block:0 3rem}
.back a{color:var(--green);text-decoration:none;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}
/* hand-sketched violin with scattered doodles */
.hero{overflow:hidden}
.pwrap{position:relative;max-width:100%}
.doodles-svg{position:absolute;left:-47%;top:-19%;width:171%;height:auto;max-width:none;pointer-events:none;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.violin{position:absolute;left:-17%;bottom:-5%;height:78%;width:auto;pointer-events:none;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.violin .v-line{stroke:var(--fg);stroke-width:2}
.violin .v-line ellipse,.violin .v-shadow ellipse{fill:none}
.violin .v-shadow{stroke:var(--fuchsia);stroke-width:1.5;opacity:.75}
.violin .v-f path{stroke:var(--fuchsia);stroke-width:2}
.violin .v-f circle{fill:var(--fuchsia);stroke:none}
.violin .v-f .heart{fill:var(--fuchsia);stroke-width:1.5}
.violin .v-str path{stroke:var(--green);stroke-width:1}

.doodles-svg .doodles ellipse{fill:var(--fuchsia);stroke:none}
.doodles-svg .doodles g path{stroke:var(--fuchsia);stroke-width:2}
.doodles-svg .doodles .d2 ellipse,.doodles-svg .doodles .d5 ellipse{fill:var(--green)}
.doodles-svg .doodles .d2 path,.doodles-svg .doodles .d5 path{stroke:var(--green)}
.doodles-svg .doodles .beam{stroke-width:5}
.doodles-svg .twinkle{fill:var(--fg);stroke:var(--fg);stroke-width:1}
.doodles-svg .s2,.doodles-svg .s4{fill:var(--green);stroke:var(--green)}
.doodles-svg .swirl{stroke:var(--mauve);stroke-width:1.8}
.doodles-svg .w2{stroke:var(--green)}
.doodles-svg .dot.g{fill:var(--green)}.doodles-svg .dot.f{fill:var(--fuchsia)}.doodles-svg .dot.m{fill:var(--mauve)}
.violin .v-violin{transform-box:fill-box;transform-origin:50% 60%}
.doodles-svg .bob{animation:bob 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.doodles-svg .d2{animation-delay:-1s}.doodles-svg .d3{animation-delay:-2s}.doodles-svg .d4{animation-delay:-.6s;animation-duration:4.4s}.doodles-svg .d5{animation-delay:-2.8s}
.doodles-svg .twinkle{animation:twinkle 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.doodles-svg .s2{animation-delay:-.8s}.doodles-svg .s3{animation-delay:-1.5s}.doodles-svg .s4{animation-delay:-.3s}
@keyframes wiggle{0%,100%{rotate:-2deg}50%{rotate:4deg}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes twinkle{0%,100%{scale:1;opacity:1}50%{scale:.55;opacity:.6}}
@media (max-width:760px){.pwrap{max-width:16rem;width:100%;margin:2.5rem .5rem 1rem auto}.violin{left:-16%;height:78%;bottom:-5%}}
/* sections slide up into view on scroll (class is only added by script) */
.rv{opacity:0;translate:0 48px;transition:opacity .8s ease,translate .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rv-d,0s)}
.rv.in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;translate:none}}
/* calligraphic single-line violin: one path drawn with a slanted "nib" (5 offset copies) */
.violin .ink{stroke:var(--fg);stroke-width:2.4}
.violin .ink-f{stroke:var(--fuchsia);stroke-width:2.4}
.violin .ink-f circle{fill:var(--fuchsia);stroke:none}
.violin .hair{stroke:var(--mauve);stroke-width:1.1;stroke-dasharray:1;animation:ink 2.6s 1s cubic-bezier(.55,0,.25,1) both}
.violin #vInk path,.violin #vInkF path{stroke-dasharray:1;stroke-dashoffset:0;animation:ink 3.2s cubic-bezier(.55,0,.25,1) both}
.violin #vInk path:nth-child(2){animation-delay:.25s}.violin #vInk path:nth-child(3){animation-delay:.1s}.violin #vInk path:nth-child(4){animation-delay:.35s}
.violin #vInk path:nth-child(n+5){animation-delay:.6s}.violin #vInkF path{animation-delay:1.2s}
@keyframes ink{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}