/* Layout: one calm editorial column. Three grounds only: Rólam on warm ivory, Referenciáim on powder blush, Kapcsolat on ivory.
   Subsections are separated by a hairline and whitespace; a narrow label rail carries the small uppercase labels. */
:root {
  /* Brand palette (approved): three colours, plus derived dark neutrals for text */
  --ivory: #FAF8F5;      /* Warm Ivory */
  --blush: #F2E3E2;      /* Powder Blush */
  --taupe: #796B65;      /* Warm Taupe: lines, icons, accents */
  --ink: #2E2724;        /* body text and headings: 13.8:1 on ivory, 11.8:1 on blush */
  --taupe-text: #665852; /* secondary text: 6.4:1 on ivory, 5.5:1 on blush */
  --line: color-mix(in srgb, var(--taupe) 32%, var(--ivory));

  /* Two families, one hierarchy */
  --display: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --body: 'Manrope', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --t-title: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);        /* Cormorant 500: section titles */
  --t-statement: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); /* Cormorant 500: editorial statements */
  --t-item: 1.3125rem;                                     /* Cormorant 500: item headings */
  --t-lead: 1.0625rem;                                     /* Manrope: hero supporting text */
  --t-body: 1rem;                                          /* Manrope 400 */
  --t-small: 0.875rem;                                     /* Manrope: metadata, nav, buttons */
  --t-label: 0.75rem;                                      /* Manrope 600 uppercase labels */
  --track-label: 0.12em;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1160px;
  --rhythm: clamp(72px, 9vw, 120px);
  --sub-gap: clamp(44px, 5.5vw, 72px);
  color-scheme: light;
}

@font-face { font-family: 'Manrope'; src: url('fonts/manrope.woff') format('woff'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/cormorant.woff') format('woff'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/cormorant-italic.woff') format('woff'); font-weight: 300 700; font-style: italic; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.7;
  font-feature-settings: "kern" 1;
}
img { max-width: 100%; display: block; }
a { color: var(--ink); text-underline-offset: 0.22em; text-decoration-thickness: 1px; text-decoration-color: var(--taupe); }
a:hover { color: var(--taupe-text); }
:focus-visible { outline: 1.5px solid var(--taupe); outline-offset: 4px; border-radius: 2px; }
.icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--gutter); top: 12px; z-index: 10; background: var(--ivory); padding: 8px 14px; }

/* Shared type roles */
.eyebrow, .section-label, .ph-tag, .contact-list .label {
  margin: 0; font-family: var(--body); font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--taupe-text); line-height: 1.5;
}
.lead, .about-open, .contact-line {
  font-family: var(--display); font-weight: 500; font-size: var(--t-statement); line-height: 1.38; color: var(--ink); text-wrap: pretty;
}

/* Header */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  background: color-mix(in srgb, var(--ivory) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--taupe) 14%, var(--ivory));
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; }
.brand { font-family: var(--display); font-size: 1.375rem; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav a { color: var(--taupe-text); text-decoration: none; font-size: var(--t-small); font-weight: 400; }
.nav a:hover { color: var(--ink); }
.lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label);
  color: var(--ink) !important; text-decoration: none;
}
.lang:hover { border-color: var(--taupe); }
@media (max-width: 640px) {
  .site-header .wrap { flex-wrap: wrap; row-gap: 2px; min-height: 0; padding-block: 10px 8px; }
  .nav { width: 100%; justify-content: space-between; gap: 12px; }
  .nav ul { gap: 20px; }
  .nav a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* Hero: positioning line, then the approved statement, beside the portrait */
.hero { padding-block: clamp(40px, 6vw, 88px) var(--rhythm); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.hero .eyebrow { margin-bottom: 26px; }
.intro { display: grid; gap: 20px; max-width: 34em; }
.intro .lead { margin: 0; max-width: 26em; }
.intro-now, .intro-drive { margin: 0; font-size: var(--t-lead); line-height: 1.65; max-width: 32em; }
.intro-now { color: var(--taupe-text); }
.intro-drive { color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; margin-top: 36px; }
.btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 24px;
  background: var(--taupe); color: var(--ivory) !important; text-decoration: none;
  font-size: var(--t-small); font-weight: 600; border-radius: 999px;
  transition: background-color .25s ease;
}
.btn:hover { background: var(--ink); }
.link-quiet { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--t-small); font-weight: 600; color: var(--ink); text-decoration: none; }
.link-quiet span { border-bottom: 1px solid var(--taupe); padding-bottom: 2px; transition: border-color .25s ease; }
.link-quiet:hover { color: var(--ink); }
.link-quiet:hover span { border-bottom-color: var(--ink); }
.link-quiet .icon { color: var(--taupe); transition: transform .25s ease; }
.link-quiet:hover .icon { transform: translateX(3px); }

/* Portrait: a plain rectangle, no frame */
.portrait { margin: 0; justify-self: end; width: 100%; max-width: 380px; }
.portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; background: var(--blush); }

@media (max-width: 820px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .portrait { order: -1; justify-self: start; max-width: 300px; }
}
@media (max-width: 560px) {
  .hero { padding-top: 20px; }
  .hero .wrap { gap: 24px; }
  .portrait { max-width: 220px; }
  .hero .eyebrow { margin-bottom: 18px; }
  .intro { gap: 14px; }
  .intro-now, .intro-drive { font-size: var(--t-body); }
  .actions { margin-top: 28px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .hero .intro, .hero .actions { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
  .hero .intro { animation-delay: .08s; }
  .hero .actions { animation-delay: .16s; }
}
@keyframes rise { from { transform: translateY(12px); opacity: .001; } to { transform: none; opacity: 1; } }

/* Main sections */
.section-head { padding-bottom: clamp(32px, 4.5vw, 56px); }
.section-title { margin: 0; font-family: var(--display); font-weight: 500; font-size: var(--t-title); line-height: 1.1; color: var(--ink); display: flex; align-items: center; gap: 22px; }
.section-title::after { content: ""; flex: 1 1 auto; max-width: 120px; height: 1px; background: var(--line); }
.main-section.refs { background: var(--blush); padding-block: var(--rhythm); }
.main-section.refs .section-title::after { background: color-mix(in srgb, var(--taupe) 32%, var(--blush)); }
.main-section.contact { padding-block: var(--rhythm); }

/* Rólam subsections: one ivory ground, separated by a hairline */
.section { padding-block: 0 var(--sub-gap); }
.section.sub + .section.sub > .wrap::before {
  content: ""; grid-column: 1 / -1; height: 1px; background: var(--line); margin-bottom: calc(var(--sub-gap) - clamp(20px, 4vw, 56px));
}
.section .wrap { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); column-gap: clamp(20px, 4vw, 56px); row-gap: 0; align-items: start; }
.section-label { padding-top: 0.55em; }
.section-body { min-width: 0; max-width: 720px; }
.section-body > p { margin: 0 0 1.1em; max-width: 38em; }
.section-body > p:last-child { margin-bottom: 0; }
.about-open { margin: 0 0 28px !important; max-width: 24em !important; }
.section.sub.wide .wrap { grid-template-columns: minmax(0, 1fr); }
.section.sub.wide .section-label { padding-top: 0; margin-bottom: 28px; }
@media (max-width: 720px) {
  .section .wrap { grid-template-columns: minmax(0, 1fr); }
  .section-label { padding-top: 0; margin-bottom: 16px; }
  .section.sub + .section.sub > .wrap::before { margin-bottom: var(--sub-gap); }
}
@media (min-width: 721px) {
  .section.sub + .section.sub > .wrap::before { margin-bottom: var(--sub-gap); }
}

/* Item headings share one style: employers, strengths, achievements */
.place, .strengths dt, .proud-card h4 { font-family: var(--display); font-weight: 500; font-size: var(--t-item); line-height: 1.3; color: var(--ink); }

/* Experience: a fine vertical taupe line with open markers */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline > li { position: relative; display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 4px 36px; padding-bottom: 40px; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before { content: ""; position: absolute; left: calc(9.5rem + 17px); top: 0.85em; bottom: -0.85em; width: 1px; background: var(--line); }
.timeline > li:last-child::before { display: none; }
.timeline > li::after { content: ""; position: absolute; left: calc(9.5rem + 13px); top: 0.6em; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--taupe); background: var(--ivory); }
.timeline > li:first-child::after { background: var(--taupe); }
.when { font-size: var(--t-small); color: var(--taupe-text); font-variant-numeric: tabular-nums; padding-top: 0.25em; }
.place { margin: 0; }
.place small { font-family: var(--body); font-weight: 400; color: var(--taupe-text); font-size: var(--t-small); }
.role { margin: 2px 0 10px; font-size: var(--t-small); line-height: 1.5; color: var(--taupe-text); }
.timeline p.desc { margin: 0; max-width: 38em; }
@media (max-width: 560px) {
  .timeline > li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-left: 26px; }
  .timeline > li::before { left: 4px; }
  .timeline > li::after { left: 0; top: 0.45em; }
  .when { padding-top: 0; }
}

/* Education */
.facts { margin: 0; display: grid; gap: 18px; }
.facts > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 2px 32px; }
.facts dt { font-size: var(--t-small); color: var(--taupe-text); padding-top: 0.15em; }
.facts dd { margin: 0; }
.facts dd strong { font-weight: 600; }
.facts .num { font-variant-numeric: tabular-nums; color: var(--taupe-text); white-space: nowrap; }
@media (max-width: 560px) { .facts > div { grid-template-columns: minmax(0, 1fr); } }

/* "Amire különösen büszke vagyok": three open columns, a fine rule on top, no card fill */
.proud-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 48px); }
.proud-card { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--taupe); min-width: 0; }
.proud-card h4 { margin: 0; }
.proud-card p:not(.ph-tag) { margin: 0; max-width: 34em; }

/* Strengths: the conclusion of Rólam, items separated by hairlines */
.strengths { margin: 0; display: grid; }
.strengths > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 32px; padding-block: 20px; border-top: 1px solid var(--line); }
.strengths > div:first-child { border-top: 0; padding-top: 0; }
.strengths > div:last-child { padding-bottom: 0; }
.strengths dt { padding-top: 0.05em; }
.strengths dd { margin: 0; max-width: 34em; }
@media (max-width: 640px) { .strengths > div { grid-template-columns: minmax(0, 1fr); } }

/* "Referenciáim": understated ivory cards on the blush section */
.quote-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.quote-card { margin: 0; display: flex; flex-direction: column; gap: 18px; padding: clamp(26px, 3vw, 36px); background: var(--ivory); border: 1px solid color-mix(in srgb, var(--taupe) 20%, var(--blush)); border-radius: 2px; min-width: 0; }
.qmark { width: 28px; height: 22px; fill: var(--taupe); opacity: .5; }
.quote-card blockquote { margin: 0; flex: 1 1 auto; }
.quote-card blockquote p { margin: 0; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.1875rem; line-height: 1.5; color: var(--ink); }
.quote-card figcaption { display: grid; gap: 2px; padding-top: 16px; border-top: 1px solid var(--line); }
.quote-card .who { font-weight: 600; font-size: var(--t-small); color: var(--ink); }
.quote-card .where { font-size: var(--t-small); color: var(--taupe-text); }
.quote-card .ph-tag { margin-top: 8px; }

@media (max-width: 980px) {
  .proud-cards, .quote-cards { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}

/* Contact on ivory */
.contact-grid { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); }
.contact-grid > .section-body { grid-column: 2; }
@media (max-width: 720px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } .contact-grid > .section-body { grid-column: 1; } }
.contact-line { margin: 0 0 32px; max-width: 22em; }
.contact-list { list-style: none; margin: 0 0 36px; padding: 0; display: grid; gap: 14px; }
.contact-list li { display: flex; align-items: center; gap: 16px; }
.contact-list .mark { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--taupe); flex-shrink: 0; }
.contact-list .label { display: block; }
.contact-list .value { display: block; text-decoration: none; font-size: var(--t-body); font-weight: 600; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }

/* Footer: one delicate curved line on ivory */
.site-footer { color: var(--taupe-text); font-size: var(--t-small); }
.footer-curve { display: block; width: 100%; height: clamp(12px, 1.6vw, 22px); color: var(--taupe); opacity: .6; }
.footer-curve path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 18px 36px; }
.site-footer a { color: inherit; }

/* Anchored sections clear the sticky header */
main [id] { scroll-margin-top: 96px; }