/* michalkoszycki.com — portfolio styles.
   Fonts: Lato (headings, captions — as on Squarespace) + Figtree (stand-in for Adobe's
   Europa: nav, titles, body). Swap --font-body to change the body face everywhere. */
:root {
  --font-head: "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --ink: #1a1a1a;
  --muted: #777;
  --line: #e4e4e4;
  --paper: #fff;
  --accent: #1a1a1a;
  --gutter: clamp(16px, 4vw, 56px);
  --measure: 720px;
  --wide: 1100px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; line-height: 1.25; }
h1 { font-size: clamp(26px, 3vw, 34px); letter-spacing: .01em; }
h2 { font-size: 22px; }
h3 { font-family: var(--font-body); font-size: 18px; line-height: 1.6; }

/* ---------- header / nav */
.site-header {
  display: grid; grid-template-columns: 48px 1fr 48px; align-items: center;
  padding: 28px var(--gutter) 36px;
}
.logo { justify-self: center; text-decoration: none; }
.logo img { height: 38px; width: auto; }
.logo-text {
  font: 400 26px/1 var(--font-body); letter-spacing: .06em; display: inline-block;
  padding-bottom: 8px; border-bottom: 1px solid currentColor;
}
.nav-image { margin-top: 40px; max-width: 200px; }
.nav-toggle, .nav-close, .search-link {
  background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink);
}
.nav-toggle { display: grid; gap: 5px; width: 40px; }
.nav-toggle span { display: block; height: 1.5px; background: currentColor; }
.search-link { justify-self: end; }
.site-nav {
  position: fixed; inset: 0 auto 0 0; width: min(340px, 86vw); z-index: 30;
  background: var(--paper); padding: 72px 40px; transform: translateX(-100%);
  transition: transform .3s ease; overflow-y: auto; box-shadow: 0 0 40px rgba(0,0,0,.08);
}
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav li { margin: 0 0 14px; }
.site-nav a { text-decoration: none; font-size: 17px; letter-spacing: .02em; }
.site-nav a:hover, .site-nav a[aria-current] { text-decoration: underline; }
.nav-close { position: absolute; top: 20px; right: 20px; font-size: 28px; line-height: 1; }
.nav-scrim { position: fixed; inset: 0; background: rgba(255,255,255,.6); z-index: 20;
  opacity: 0; pointer-events: none; transition: opacity .3s; }
body.nav-open .site-nav { transform: none; }
body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

.site-main { padding: 0 var(--gutter) 64px; }
.site-footer { border-top: 1px solid var(--line); margin: 0 var(--gutter); padding: 28px 0 48px; }
.site-footer ul { list-style: none; display: flex; gap: 24px; justify-content: center; margin: 0; padding: 0; }
.site-footer a { text-decoration: none; font-size: 14px; color: var(--muted); }
.site-footer a:hover { color: var(--ink); }

/* ---------- project grid (home, category, tag) */
.project-grid {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1600px;
  display: grid; gap: 48px 28px; grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .project-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .project-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 14px; } }
.card a { text-decoration: none; display: block; }
.card-media { aspect-ratio: 3 / 4; overflow: hidden; background: #f3f3f3; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, opacity .3s; }
.card a:hover .card-media img { transform: scale(1.025); }
.card-title {
  font: 500 13px/1.4 var(--font-body); letter-spacing: .03em; text-align: center;
  margin: 14px 0 0;
}
.archive-header { text-align: center; margin: 0 0 48px; }
.archive-header h1 { margin: 4px 0 8px; text-transform: capitalize; }
.archive-kind, .archive-count { font-size: 13px; color: var(--muted); margin: 0; letter-spacing: .04em; }
.archive-kind { text-transform: uppercase; }

/* ---------- item (project) page */
.item, .page { max-width: var(--wide); margin: 0 auto; }
/* Project/blog page: one 675px column (Squarespace's post width; text and images share it).
   Squarespace's sidebar (logo, all categories/tags) is left out on purpose (Michal). */
.item { max-width: 675px; }
.item-layout { display: block; }
.item-main .block-text .text, .item-main .video, .item-main .code, .item-main .embed,
.item-main hr { max-width: none; }
.item-header { text-align: center; margin-bottom: 40px; }
/* cover image above the title, as on Squarespace: centred, uncropped, ~half page width */
.item-banner { margin: 0 0 50px; display: flex; justify-content: center; }
.item-banner img { width: min(608px, 100%); height: auto; cursor: zoom-in; }
@media (max-width: 640px) { .item-banner img { width: 80%; } }
.page-item .site-main { padding-top: 40px; }
.item-back { display: inline-block; margin: 0 0 28px; font-size: 14px; letter-spacing: .03em; text-decoration: none; color: var(--muted); }
.item-back:hover { color: var(--ink); }
.item-header h1 { margin: 0; }
.item-header h1::after { content: ""; display: block; width: 25px; height: 1px; background: #888; margin: 20px auto 0; }
.draft-flag { text-align: center; color: #b05; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.row { margin: 0 0 32px; }
/* blocks stacked in one column (Squarespace puts them in the same row): same gap as rows */
.row:not(.row-cols) > .block + .block { margin-top: 32px; }
.row-cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; }
.row-cols > .block { grid-column: span var(--span, 12); }
@media (max-width: 760px) { .row-cols { display: block; } .row-cols > .block + .block { margin-top: 32px; } }
.block-text .text { max-width: var(--measure); margin: 0 auto; }
.block-text p { margin: 0 0 1.1em; }
.block-image figure, .gallery-grid figure, .slide { margin: 0; }
.block-image img { margin: 0 auto; }
figcaption { font: 400 13px/1.5 var(--font-head); color: var(--muted); margin-top: 10px; text-align: center; }
.spacer { height: 48px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 48px auto; max-width: var(--measure); }
.embed iframe, .embed video { max-width: 100%; }
.video { position: relative; height: 0; max-width: var(--wide); margin: 0 auto; }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video video { background: #000; }
.code { max-width: var(--measure); margin: 0 auto; overflow-x: auto; }
.code pre { font-size: 13px; white-space: pre-wrap; }
.float-right { float: right; width: 58%; margin: 0 0 24px 32px; }
.float-left { float: left; width: 58%; margin: 0 32px 24px 0; }
.row::after { content: ""; display: table; clear: both; }
@media (max-width: 700px) { .float-right, .float-left { float: none; width: auto; margin: 0 0 24px; } }
.embed { max-width: var(--measure); margin: 0 auto; }

/* Grid galleries, as measured on Squarespace:
   - several per row: each cell has the gallery's shape (square, 3:2...); auto-crop fills
     it (cropped), otherwise the image is shrunk to fit inside it;
   - one per row: never cropped. Squarespace fits each image into a square box, which
     leaves big gaps around wide images; here the image keeps its own shape and is only
     shrunk to at most square height (same size, no gaps). */
.gallery-grid { display: grid; gap: 20px; grid-template-columns: repeat(var(--per-row, 3), 1fr); }
@media (max-width: 700px) { .gallery-grid:not(.is-single) { grid-template-columns: repeat(2, 1fr); } }
.gallery-grid img { width: 100%; cursor: zoom-in; object-fit: cover; }
.gallery-grid.crop-square img { aspect-ratio: 1; }
.gallery-grid.crop-standard img { aspect-ratio: 3 / 2; }
.gallery-grid.crop-standard-vertical img { aspect-ratio: 2 / 3; }
.gallery-grid.crop-four-three img { aspect-ratio: 4 / 3; }
.gallery-grid.crop-three-four-vertical img { aspect-ratio: 3 / 4; }
.gallery-grid.crop-widescreen img { aspect-ratio: 16 / 9; }
.gallery-grid.crop-anamorphic-widescreen img { aspect-ratio: 2.4; }
.gallery-grid.is-fit img { object-fit: contain; }
/* slider (Squarespace "strip"): one row at a fixed height, images keep their shape,
   centred when they fit, scroll sideways when they don't */
.block-gallery { container-type: inline-size; }
.gallery-grid.is-slider { display: flex; gap: 0; overflow-x: auto; scrollbar-width: thin; }
.gallery-grid.is-slider figure { flex: 0 0 auto; height: var(--strip, 50cqw); }
.gallery-grid.is-slider figure:first-child { margin-left: auto; }
.gallery-grid.is-slider figure:last-child { margin-right: auto; }
.gallery-grid.is-slider img { width: auto; height: 100%; aspect-ratio: auto; object-fit: contain; }
/* stacked (Squarespace "stacked"): full-width images, natural shape, one under another */
.gallery-grid.is-stacked { grid-template-columns: 1fr !important; gap: 2px; }
.gallery-grid.is-stacked img { aspect-ratio: auto; height: auto; object-fit: contain; }
.gallery-grid.is-single { container-type: inline-size; grid-template-columns: 1fr; }
.gallery-grid.is-single img { width: auto; max-width: 100%; height: auto; max-height: 100cqw;
  aspect-ratio: auto; object-fit: contain; margin: 0 auto; }
.gallery-grid.is-single img { max-height: var(--cap, 100cqw); }

.slideshow { position: relative; }
.slides { position: relative; }
.slide { display: none; }
.slide.is-active { display: block; }
/* Fixed-height box like Squarespace: height from the widest image, every slide the same.
   Auto-crop galleries fill the box (cropped); the others fit inside it. */
.slide-frame { position: relative; height: 0; padding-bottom: var(--stage, 66.67%); }
.slide-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.slideshow.is-fill .slide-frame img { object-fit: cover; }
.ss-prev, .ss-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; background: rgba(255,255,255,.75); border: 0; cursor: pointer;
  font-size: 34px; line-height: 1; padding: 6px 14px; color: var(--ink);
}
.ss-prev { left: 0; } .ss-next { right: 0; }
.ss-thumbs { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.ss-thumb { border: 0; padding: 0; background: none; cursor: pointer; opacity: .45; width: 80px; }
.ss-thumb img { width: 80px; height: 80px; object-fit: cover; }
.ss-thumb.is-active, .ss-thumb:hover { opacity: 1; }

.item-terms { max-width: none; margin: 56px auto 0; border-top: 1px solid var(--line); padding-top: 20px; font-size: 14px; }
.item-terms p { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.terms-label { color: var(--muted); width: 90px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.term { text-decoration: none; border-bottom: 1px solid var(--line); }
.term:hover { border-color: var(--ink); }
.item-pagination { max-width: none; margin: 40px auto 0; display: flex; justify-content: space-between; gap: 24px; font-size: 14px; }
.item-pagination a { text-decoration: none; }
.item-pagination a:hover { text-decoration: underline; }
.item-pagination .older { text-align: right; }

/* ---------- pages */
.page > h1 { text-align: center; }
.blog-list ul { list-style: none; padding: 0; max-width: var(--measure); margin: 0 auto; }
.blog-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.blog-list a { text-decoration: none; }
.blog-list time { color: var(--muted); font-size: 13px; margin-right: 12px; }

/* ---------- contact form */
.contact-form { max-width: 560px; margin: 0 auto; display: grid; gap: 18px; }
.contact-form label { display: grid; gap: 6px; font-size: 13px; letter-spacing: .03em; }
.contact-form input, .contact-form textarea {
  font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid #ccc; background: #fafafa;
}
.contact-form button {
  justify-self: start; font: 500 14px var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  background: var(--ink); color: #fff; border: 0; padding: 12px 28px; cursor: pointer;
}
.form-status { font-size: 14px; color: var(--muted); }

/* ---------- search */
.search { max-width: var(--measure); margin: 0 auto; }
.search-form input { width: 100%; font: inherit; font-size: 22px; border: 0; border-bottom: 1px solid var(--ink); padding: 8px 0; outline: none; }
.search-status { color: var(--muted); font-size: 13px; }
.search-results { list-style: none; padding: 0; }
.search-results li { display: flex; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.search-results img { width: 64px; height: 64px; object-fit: cover; }
.search-results a { text-decoration: none; }
.search-results small { color: var(--muted); display: block; }

/* ---------- lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(255,255,255,.97); z-index: 50; display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 90vh; width: auto; }
.lightbox button { position: absolute; background: none; border: 0; font-size: 40px; cursor: pointer; color: var(--ink); padding: 12px 18px; }
.lb-close { top: 8px; right: 12px; } .lb-prev { left: 8px; } .lb-next { right: 8px; }

.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }