/* marekgregor.sk — generated by design_handoff_marekgregor/site.py.
   Edit the generator, not this file. */
:root {
  --bg: oklch(0.977 0.005 92); --ground: oklch(0.945 0.007 92); --surface: oklch(0.99 0.004 92); --card: rgba(255,255,253,0.97);
  --border: oklch(0.892 0.008 92); --border-strong: oklch(0.788 0.010 92);
  --text: oklch(0.232 0.014 158); --muted: oklch(0.462 0.014 158); --faint: oklch(0.615 0.012 158); --accent: oklch(0.545 0.105 70);
  --display: 'Spectral', Georgia, 'Times New Roman', serif; --body: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --pad: clamp(22px, 6vw, 120px);
  --bar: 62px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--body); -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, p, figure, ul { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
.wrap { padding-left: var(--pad); padding-right: var(--pad); }
.rule { display: block; width: 34px; height: 2px; background: var(--accent); }
.lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── top bar ─────────────────────────────────────────────────────── */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 20; height: var(--bar);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad); background: color-mix(in oklab, var(--surface) 94%, transparent);
  border-bottom: 1px solid var(--border); backdrop-filter: blur(14px);
  transform: translateY(-101%); opacity: 0;
  transition: transform 420ms cubic-bezier(.22,.68,.22,1), opacity 320ms ease;
}
.topbar.is-on { transform: none; opacity: 1; }
.wordmark { font-family: var(--display); font-size: 20px; letter-spacing: -.014em; }
.topbar__nav ul { display: flex; gap: 30px; }
.topbar__nav a {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: var(--muted);
  transition: color 220ms ease;
}
.topbar__nav a .rule { width: 0; transition: width 300ms cubic-bezier(.22,.68,.22,1); }
.topbar__nav a:hover { color: var(--accent); }
.topbar__nav a:hover .rule { width: 100%; }
.topbar__nav a.is-active { color: var(--accent); font-weight: 600; }
.topbar__nav a.is-active .rule { width: 100%; }
.topbar__end { display: flex; align-items: center; gap: 16px; }
.lang { display: flex; align-items: center; gap: 9px; font-size: 11px;
        font-weight: 500; letter-spacing: .16em; color: var(--faint); }
.lang [aria-current] { color: var(--accent); font-weight: 600; }
.lang i { width: 1px; height: 11px; background: var(--border-strong); }
.burger { display: none; background: none; border: 0; padding: 4px; cursor: pointer; }
.burger svg { width: 22px; height: 22px; fill: none; stroke: var(--text);
              stroke-width: 1.6; stroke-linecap: round; }

/* ── expanded mobile menu ────────────────────────────────────────── */
.menu { position: fixed; inset: 0; z-index: 30; background: var(--bg); }
.menu__bar { display: flex; align-items: center; justify-content: space-between;
             height: 54px; padding: 0 var(--pad); border-bottom: 1px solid var(--border); }
.menu__list { padding: 34px var(--pad) 0; }
.menu__list li { border-top: 1px solid var(--border); }
.menu__list li:last-child { border-bottom: 1px solid var(--border); }
.menu__list a { display: block; padding: 15px 0; font-family: var(--display);
                font-size: 26px; letter-spacing: -.014em; }
.menu__list a.is-active { color: var(--accent); }
.menu__list .rule { display: none; }

/* ── hero ────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100svh; overflow: hidden;
        display: flex; flex-direction: column; }
.hero__top { position: absolute; top: 0; right: 0; z-index: 2;
             display: flex; align-items: center; gap: 16px;
             height: var(--bar); padding: 0 var(--pad); }
.hero__backdrop { position: absolute; inset: 0; }
.hero__backdrop img { width: 100%; height: 100%; object-fit: cover;
                      transform: scale(1.08);
                      filter: blur(22px) saturate(.7) brightness(1.04) contrast(.9); }
.hero__backdrop::after {
  content: ""; position: absolute; inset: 0; background: #fbfaf7; opacity: .52;
}
.hero__inner { position: relative; z-index: 1; flex: 1;
               display: flex; flex-direction: column; }
.hero__head { text-align: center; }
.hero h1 { font-family: var(--display); font-weight: 300; letter-spacing: -.014em;
           line-height: 1.02; font-size: clamp(44px, 7.6vw, 104px); }
.hero__head .lead { color: var(--muted); max-width: 520px; margin: 20px auto 0; }
.hero__domain { position: absolute; right: var(--pad); bottom: 30px; z-index: 1;
                font-size: 11px; font-weight: 600; letter-spacing: .24em;
                text-transform: uppercase; color: var(--muted); }

/* ── activity cards ──────────────────────────────────────────────── */
.card { display: block; background: var(--card); border: 1px solid var(--border);
        border-radius: 4px; overflow: hidden; box-shadow: 0 1px 2px rgba(60,50,35,0.05), 0 8px 24px rgba(60,50,35,0.07);
        transition: transform 320ms cubic-bezier(.22,.68,.22,1),
                    border-color 320ms ease; }
.card__media { display: block; position: relative; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { display: block; padding: 22px 24px 26px; }
.card__label { display: block; margin-top: 16px; font-size: 28px; font-weight: 600;
               line-height: 1.1; letter-spacing: -.008em; }
.card__sub { display: block; margin-top: 9px; font-size: 14px; line-height: 1.45;
             color: var(--muted); }
.card:hover { transform: translateY(-5px); border-color: var(--accent); }
.card:hover .rule { width: 68px; }
.card .rule { transition: width 420ms cubic-bezier(.22,.68,.22,1); }
.card__media img { transition: transform 700ms cubic-bezier(.22,.68,.22,1); }
.card:hover .card__media img { transform: scale(1.055); }

/* ── sections ────────────────────────────────────────────────────── */
.section { padding-top: 88px; scroll-margin-top: var(--bar); }
.section__head h2 { margin-top: 26px; font-family: var(--display); font-weight: 300;
                    letter-spacing: -.014em; line-height: 1.05;
                    font-size: clamp(38px, 5.2vw, 76px); }
.section__head .lead { margin-top: 26px; max-width: 760px; }
.figure { margin-top: 64px; }
.figure__media { display: block; position: relative; overflow: hidden;
                 background: var(--ground); }
.figure--lead .figure__media { aspect-ratio: 8 / 3; }
.figure__media img { width: 100%; height: 100%; object-fit: cover; }
.zoom img { transition: transform 700ms cubic-bezier(.22,.68,.22,1); }
.zoom:hover img { transform: scale(1.055); }
figcaption { margin-top: 11px; padding: 0 var(--pad); font-size: 12px;
             letter-spacing: .04em; color: var(--faint); }
.figure:not(.figure--lead) figcaption { padding: 0; }
.cols { margin-top: 76px; display: grid; gap: 20px 72px; }
.cols p { margin-bottom: 20px; font-size: 16.5px; line-height: 1.72; text-wrap: pretty; }
.cols a { color: var(--accent); text-decoration: underline;
          text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent);
          text-underline-offset: 3px; transition: text-decoration-color 220ms ease; }
.cols a:hover { text-decoration-color: var(--accent); }
.pair { display: grid; gap: 28px; }
.pair .figure { margin-top: 0; }
.pair .figure__media { aspect-ratio: 3 / 2; }

/* ── link rows ───────────────────────────────────────────────────── */
.tail { padding-top: 80px; padding-bottom: 112px; }
.tail__intro { margin: 18px 0 26px; max-width: 560px; font-size: 15.5px;
               line-height: 1.6; color: var(--muted); }
.rows li { border-top: 1px solid var(--border); }
.rows li:last-child { border-bottom: 1px solid var(--border); }
.rows a, .rows > li > span { display: flex; align-items: baseline;
  justify-content: space-between; gap: 24px; padding: 17px 0;
  font-family: var(--display); font-size: 23px;
  transition: background-color 260ms ease; }
.rows a:hover { background: var(--surface); }
.tag { font-family: var(--body); font-size: 11px; font-weight: 600;
       letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
       white-space: nowrap; transition: transform 260ms cubic-bezier(.22,.68,.22,1); }
.rows a:hover .tag { transform: translateX(-4px); }
.rows--outlets { margin-top: 52px; margin-bottom: 112px; max-width: 900px; }
.rows--outlets a { font-size: 28px; padding: 20px 0; }

/* ── contact ─────────────────────────────────────────────────────── */
.contact { margin-top: 52px; display: grid; gap: 40px; padding-bottom: 96px; }
/* Email, LinkedIn and Instagram as one list: same size, same icon, same
   accent -- the three sit together rather than the address standing alone. */
.contacts { display: flex; flex-direction: column; align-items: flex-start;
            gap: 15px; }
.contacts a { display: flex; align-items: center; gap: 13px;
              font-family: var(--display); font-size: clamp(20px, 1.9vw, 26px);
              color: var(--accent); letter-spacing: -.008em; }
.contacts svg { flex: none; }
.clink { transition: transform 240ms cubic-bezier(.22,.68,.22,1); }
.clink:hover { transform: translateX(4px); }
.contact__left .figure { margin-top: 38px; }
/* Shorter than it was: the three link rows took ~95px off the top of this
   column, and the two columns are meant to end together. The frame is sized by
   ratio alone -- `max-height` on an aspect-ratio box narrows it in Chrome as
   well as shortening it, which is what used to make this photo 352px wide in a
   594px column while the artboard showed it full width. */
.contact__left .figure__media { width: 100%; aspect-ratio: 28 / 15; }
.field { display: flex; flex-direction: column; gap: 9px; margin: 0 0 20px; }
.field label { font-size: 10px; font-weight: 600; letter-spacing: .24em;
               text-transform: uppercase; color: var(--muted); }
.field input, .field textarea {
  font: inherit; font-size: 15px; color: var(--text); padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 3px;
  transition: border-color 240ms ease;
}
.field input { height: 46px; }
.field textarea { resize: vertical; min-height: 132px; }
.field input:hover, .field textarea:hover,
.field input:focus, .field textarea:focus { border-color: var(--border-strong); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px;
      overflow: hidden; }
.form-status { margin-top: 16px; font-size: 14px; line-height: 1.5;
               color: var(--muted); min-height: 1.5em; }
.form-status.is-bad { color: var(--accent); }
.btn[disabled] { opacity: .6; cursor: default; transform: none; }
.btn { font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .14em;
       text-transform: uppercase; color: var(--bg); background: var(--accent);
       border: 0; border-radius: 3px; height: 46px; padding: 0 30px; cursor: pointer;
       transition: transform 220ms cubic-bezier(.22,.68,.22,1), filter 220ms ease; }
.btn:hover { transform: translateY(-2px); filter: saturate(1.15); }

/* ── footer ──────────────────────────────────────────────────────── */
.footer { background: var(--ground); border-top: 1px solid var(--border);
          padding: 40px 0 44px; }
.footer__inner { display: flex; flex-wrap: wrap; gap: 16px;
                 align-items: flex-end; justify-content: space-between; }
.footer__meta { display: block; margin-top: 7px; font-size: 12px;
                letter-spacing: .04em; color: var(--faint); }
.footer__credit { font-size: 13px; letter-spacing: .02em; color: var(--faint);
                  transition: color 220ms ease; }
.footer__credit:hover { color: var(--accent); }

/* ── the card that flies into its section ────────────────────────── */
.flying { position: fixed; z-index: 40; overflow: hidden; pointer-events: none; }
.flying img { position: absolute; inset: 0; width: 100%; height: 100%;
              object-fit: cover; display: block; }

/* ── desktop ─────────────────────────────────────────────────────── */
@media (min-width: 801px) {
  .hero__inner { align-items: center; justify-content: center; gap: 46px; }
  /* The row is fluid, not a fixed 1000px: between the 801px breakpoint and a
     desktop-width window -- an iPad in portrait, a half-screen window -- three
     rigid 320px cards overflowed and were cropped on both sides. They sit at
     320px when there is room and shrink together when there is not. */
  .hero__cards { display: flex; justify-content: center; gap: 20px;
                 width: 100%; padding: 0 var(--pad); }
  .card { flex: 1 1 320px; max-width: 320px; min-width: 0; }
  .card__media { aspect-ratio: 320 / 190; }
  .cols { grid-template-columns: 1fr 1fr; }
  .pair { grid-template-columns: 1fr 1fr; margin-top: 64px; }
  .contact { grid-template-columns: 1fr 1fr; gap: 80px; }
}

/* ── phone ───────────────────────────────────────────────────────── */
@media (max-width: 800px) {
  .topbar__nav { display: none; }
  .burger { display: block; }
  .hero { min-height: 100svh; }
  .hero__backdrop { display: none; }
  .hero__inner { justify-content: flex-start; }
  .hero__head { text-align: left; padding: 96px var(--pad) 26px; }
  .hero__head .lead { margin-left: 0; color: var(--muted); }
  .hero__cards { flex: 1; display: flex; flex-direction: column; }
  .card { flex: 1; position: relative; border: 0; border-radius: 0;
          border-top: 1px solid var(--border-strong); box-shadow: none;
          background: none; display: flex; align-items: center; }
  .card__media { position: absolute; inset: 0; height: 100%; }
  .card__media::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(96deg, #fbfaf7 0%, #fbfaf7 44%,
                                rgba(255,255,255,0) 104%); opacity: .88; }
  .card__body { position: relative; z-index: 1; padding: 0 var(--pad); }
  .card__label { font-size: 31px; }
  .card__sub { max-width: 200px; font-size: 12.5px; }
  .card:hover { transform: none; }
  .hero__domain { display: none; }
  .figure--lead .figure__media { aspect-ratio: 3 / 2; }
  .cols { margin-top: 40px; }
  .pair { margin-top: 34px; }
  .contacts { gap: 14px; }
  .contact__left .figure__media { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}