@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/montserrat-light.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/montserrat-regular.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/montserrat-medium.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/montserrat-semibold.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/montserrat-lightitalic.woff2") format("woff2"); }
  :root {
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    --bg: #FFFFFF;
    --fg: #1D2123;
    --muted: #6B7275;
    --line: #D9DBD8;
    --overlay: rgba(22, 26, 28, .82);
    --on-overlay: #F4F5F2;

    /* Skala typografii: dwa rozmiary */
    --fs-md: 1.25rem;
    --fs-sm: .9375rem;
    --fs-xs: .75rem;
    --fs-base: 1rem;
    --section: clamp(56px, 8vw, 104px);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #151819; --fg: #ECEDEA; --muted: #9AA0A2; --line: #2E3335; --overlay: rgba(12, 14, 15, .84);
    }
  }
  :root[data-theme="dark"] {
    --bg: #151819; --fg: #ECEDEA; --muted: #9AA0A2; --line: #2E3335; --overlay: rgba(12, 14, 15, .84);
  }

  *, *::before, *::after { box-sizing: inherit; }
  html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-h, 80px)); scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--bg); color: var(--fg);
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    font-size: var(--fs-base); font-weight: 400; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, p, ul, blockquote { margin: 0; padding: 0; font-weight: 400; }
  a { color: inherit; text-decoration: none; }
  a:focus-visible, .tile:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }

  /* Nagłówek */
  header {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
    background: var(--bg);
    box-shadow: 0 calc(-1 * env(safe-area-inset-top, 0px)) 0 var(--bg);
  }
  header .wrap {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px 32px; padding-top: 20px; padding-bottom: 20px;
  }
  .logo { font-size: var(--fs-md); letter-spacing: .14em; text-transform: uppercase; }
  .logo { position: relative; display: inline-flex; align-items: center; }
  .logo span { font-weight: 300; }
  .logo-icon { height: .97em; width: auto; flex: none; margin-right: .56em; transition: margin-right .3s ease; }
  .logo-text { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 14em; transition: max-width .3s ease, opacity .2s ease; }
  header.scrolled .logo-icon { margin-right: 0; }
  header.scrolled .logo-text { max-width: 0; opacity: 0; }
  .logo b { font-weight: 600; }
  nav { display: flex; flex-wrap: wrap; gap: 4px clamp(18px, 3vw, 36px); }
  nav a { padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color .2s; letter-spacing: .1em; text-transform: uppercase; }
  nav a:hover { border-bottom-color: var(--fg); }

  /* Hero */

  /* Projekty */

  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  @media (max-width: 1099px) { .grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }

  .tile { container-type: inline-size; position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
  /* Podmień .ph na <img src="..." alt="..."> — zdjęcie zapełni cały kafelek */
  .tile .ph, .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .info {
    position: absolute; inset: 0; padding: 24px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background: var(--overlay); color: var(--on-overlay);
    opacity: 0; transition: opacity .22s ease;
  }
  .tile:hover .info, .tile:focus-within .info, .tile:focus-visible .info, .tile.open .info { opacity: 1; }
  .info h3 { font-size: var(--fs-md); line-height: 1.25; text-wrap: balance; }
  .info .meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 6px; font-size: var(--fs-sm); line-height: 1.5; }
  .info .status { display: inline-flex; align-items: center; gap: 8px; }
  .info .note { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 8px; font-size: var(--fs-xs); line-height: 1.4; opacity: .8; }
  @container (max-width: 380px) { .info { padding: 16px; } }
  .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--on-overlay); flex: none; }
  .dot.done { background: var(--on-overlay); }

  .plus {
    display: none; position: absolute; right: 12px; bottom: 12px;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255,255,255,.85); color: #1D2123;
    align-items: center; justify-content: center; line-height: 1;
  }
  @media (hover: none) { .plus { display: flex; } .tile.open .plus { display: none; } }

  /* Sekcje: jeden wspólny układ (tytuł po lewej, treść po prawej) */
  #projekty { scroll-margin-top: 8px; }
  section.block { padding-top: var(--section); }
  .split { display: grid; grid-template-columns: 1fr 3fr; gap: 24px clamp(24px, 4vw, 64px); border-top: 1px solid var(--line); padding-top: 28px; }
  @media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

  .cols { display: grid; grid-template-columns: 2fr 1fr; gap: 32px clamp(24px, 4vw, 64px); }
  @media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
  .cols li { padding: 3px 0; }
  @media (min-width: 901px) { .cols .main li { font-size: var(--fs-md); padding: 5px 0; } }
  .cols .side { display: flex; flex-direction: column; gap: 32px; }
  .split > h2, .cols h3 {
    font-size: var(--fs-base); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  }
  .cols h3 { margin-bottom: 12px; }
  .cols ul { list-style: none; }


  .about { display: grid; grid-template-columns: 220px 1fr; gap: 24px clamp(24px, 4vw, 56px); align-items: start; }
  @media (max-width: 1099px) { .about { grid-template-columns: 1fr; } }
  .about .photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; height: auto; }
  @media (max-width: 1099px) { .about .photo { width: 220px; max-width: 100%; } }
  .about .owner { margin-top: 20px; font-style: italic; font-weight: 300; }
  .about .lead { font-size: var(--fs-md); line-height: 1.5; max-width: 46ch; }
  .about .two, .about .two > div { display: flex; flex-direction: column; gap: 1em; }
  .about .two { margin-top: 1em; }
  .about .pull { font-size: var(--fs-md); line-height: 1.4; font-weight: 500; }
  .about strong { font-weight: 500; }
  .about .lead strong { font-weight: 600; }
  .endmark { display: inline-block; width: .8em; height: .8em; margin-left: .45em; vertical-align: -.02em; }
  .about p { max-width: 62ch; text-align: justify; -webkit-hyphens: auto; hyphens: auto; text-wrap: pretty; overflow-wrap: break-word; }
  .about .owner { text-align: left; hyphens: none; }

  .rows { list-style: none; display: grid; gap: 14px; }
  .rows li, .rows a { display: flex; align-items: flex-start; gap: 14px; }
  .where { max-width: 56ch; margin-bottom: clamp(32px, 5vw, 48px); }
  .ask { margin-bottom: 16px; font-weight: 500; }
  .rows a { width: fit-content; border-bottom: 1px solid transparent; }
  .rows a:hover { border-bottom-color: var(--fg); }
  .rows svg { width: 20px; height: 20px; flex: none; margin-top: 3px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

  footer.site { margin-top: var(--section); border-top: 1px solid var(--line); }
  footer.site .wrap { padding-top: 22px; padding-bottom: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: var(--muted); font-size: .8125rem; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .info, nav a, .logo-text, .logo-icon { transition: none; }
  }