/* Naszymi Oczami — a photobook, not a blog template.
   Rules this stylesheet keeps:
   1. Photographs are never cropped by the layout. Every image keeps its own aspect ratio.
   2. Colour lives in the photographs. The chrome is a neutral gallery-wall grey.
   3. Type steps back: one family, sentence case, no capitals used as decoration.
   4. Galleries break out of the text column; text never competes with a photograph.
   5. No card shadows and no hover lift. Separation is whitespace and the image edge. */

:root {
  --paper:     #f2f3f5;
  --surface:   #ffffff;
  --ink:       #191c22;
  --ink-soft:  #5d646f;
  --rule:      #dde0e5;
  --accent:    #2c5f8a;

  --measure: 66ch;
  --gap: 1.75rem;
  --page: 76rem;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #14161a;
    --surface:  #1b1e24;
    --ink:      #e7e9ec;
    --ink-soft: #99a0ab;
    --rule:     #2a2e36;
    --accent:   #7fb2dc;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.muted { color: var(--ink-soft); }

/* ---------- frame ---------- */

header.site,
footer.site,
main {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

header.site {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 2.5rem 3rem;
}

/* The wordmark carries the one piece of colour in the chrome: the blue-over-green bar
   from the 2016 logo. Everything is sized off --wordmark-size, so the bar keeps its
   1:2 proportion and its cap-height alignment with the name at every viewport width.

   Rule 3 of this stylesheet — sentence case, no capitals used as decoration — does not
   apply to the name itself: the 2016 logo set it NASZYMI OCZAMI, so the capitals are the
   brand's own typography rather than emphasis. They are set as a wordmark, not merely
   uppercased: caps run wider and read heavier, so the size steps down, the weight comes
   off 620, and the tracking turns positive to open the letterfit back up. The tagline
   stays sentence case — it is a sentence, not part of the mark. */

.wordmark {
  --wordmark-size: clamp(1.2rem, 0.93rem + 1.05vw, 1.8rem);
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--wordmark-size) * 0.3);
}

.wordmark-mark {
  flex: none;
  width: calc(var(--wordmark-size) * 0.36);
  height: calc(var(--wordmark-size) * 0.72);
  margin-top: calc(var(--wordmark-size) * 0.17);
}

.wordmark-name {
  display: block;
  font-size: var(--wordmark-size);
  font-weight: 560;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  /* The tracking is added after every letter, including the last one, which pushes the
     mark off-centre against the tagline below it. Pull the trailing space back. */
  margin-right: -0.055em;
  /* Left at 1.1 on purpose: the bar's margin-top above is tuned against this line box to
     land on the cap height, and capitals put the cap height at the top of the type. */
  line-height: 1.1;
}

.wordmark-tag {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

header.site nav { display: flex; gap: 1.5rem; }
header.site nav a { color: var(--ink-soft); text-decoration: none; }
header.site nav a:hover { color: var(--ink); text-decoration: underline; }

footer.site {
  margin-top: 6rem;
  padding-block: 2rem 3.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.9rem;
}
footer.site p { margin: 0.2rem 0; }

/* ---------- the wall: uncropped photographs in true masonry, no JavaScript ---------- */

.cards {
  columns: 3;
  column-gap: var(--gap);
}

@media (max-width: 60rem) { .cards { columns: 2; } }
@media (max-width: 34rem) { .cards { columns: 1; } }

.card {
  display: block;
  break-inside: avoid;
  margin-bottom: 2.75rem;
  color: inherit;
  text-decoration: none;
}

.card-img img { background: var(--rule); }

.card-body { padding-top: 0.7rem; }

.card-body h3 {
  margin: 0.1rem 0 0;
  font-size: 1.06rem;
  font-weight: 560;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.card:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- reading ---------- */

.page-head, .post-head { max-width: var(--measure); margin-bottom: 2.5rem; }

.post-head time {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.post-head h1, .page-head h1 {
  margin: 0.35rem 0 0;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  font-weight: 640;
  letter-spacing: -0.028em;
  line-height: 1.12;
  text-wrap: balance;
}

.terms { margin: 0.9rem 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.terms a { color: var(--ink-soft); font-size: 0.9rem; }

/* The text keeps its measure; galleries are free to use the whole page frame.
   Constraining the children rather than .prose itself is what lets a gallery break out. */
.prose { max-width: none; }
.prose > *:not(.gallery) { max-width: var(--measure); }

.prose p, .prose ul, .prose ol, .prose blockquote { margin: 0 0 1.35em; }

.prose h2 {
  margin: 2.6rem 0 0.8rem;
  font-size: 1.45rem;
  font-weight: 620;
  letter-spacing: -0.018em;
}

.prose h3 { margin: 2rem 0 0.6rem; font-size: 1.15rem; font-weight: 600; }

.prose blockquote {
  margin-inline: 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-soft);
}

.prose img { margin-block: 1.6rem; }

.prose iframe { max-width: 100%; border: 0; margin-block: 1.6rem; }

/* ---------- galleries break the text column ---------- */

.gallery {
  margin: 3rem 0;
  display: grid;
  gap: 0.75rem;
  width: 100%;
}

.gallery.cols-2 { grid-template-columns: repeat(2, 1fr); }
.gallery.cols-3 { grid-template-columns: repeat(3, 1fr); }
.gallery.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 44rem) {
  .gallery.cols-3, .gallery.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

.gallery figure { margin: 0; }

.gallery figcaption {
  margin-top: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* A one-column gallery is the photobook spread: as wide as the page allows. */
.gallery.cols-1 img { width: 100%; }

/* ---------- footers of a post ---------- */

.more {
  max-width: var(--page);
  margin-top: 5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
}

.more h2 {
  margin: 0 0 1.75rem;
  font-size: 1.1rem;
  font-weight: 560;
  color: var(--ink-soft);
}

.pager {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- category index ---------- */

.terms-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: var(--gap);
}

@media (max-width: 50rem) { .terms-list { columns: 2; } }
@media (max-width: 32rem) { .terms-list { columns: 1; } }

.terms-list li {
  break-inside: avoid;
  padding: 0.35rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
}

.terms-list span { font-variant-numeric: tabular-nums; font-size: 0.85rem; }

/* ---------- awards: quiet credentials at the foot of the wall ----------
   Small, grey, and set as a three-across row so the eye reads them as a strip of
   credits rather than a list of claims. The mark is a line drawing in currentColor:
   it carries no colour of its own, so the photographs above stay the only colour. */

.awards {
  margin-top: 5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}

.awards h2 {
  margin: 0 0 1.1rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.awards ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem var(--gap);
}

@media (max-width: 52rem) { .awards ul { grid-template-columns: 1fr; gap: 1.1rem; } }

.awards li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.6rem;
  align-items: center;
  max-width: 24rem;
}

.award-mark { grid-row: 1; color: var(--ink-soft); opacity: 0.8; }

.award-year {
  grid-row: 1;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  color: var(--ink);
}

.award-text {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.82rem;
  line-height: 1.45;
  margin-top: 0.15rem;
}

/* ---------- cards gain an excerpt ---------- */

.card-excerpt {
  margin: 0.4rem 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ---------- countries, grouped by continent ---------- */

/* Issue #8: the column minimum is 16.75rem, not the 15rem it was. Leading, the flag takes
   1.25em off the front of the line, and "Zjednoczone Emiraty Arabskie" — the longest of the
   35 — then needs 262 px of the column to itself. auto-fill will squeeze a 15rem column down
   to 240 px before it gives up a column, which is 22 px short. At 16.75rem it drops to fewer,
   wider columns instead, and the name never wraps at any width from 320 px up. The full-width
   page still lays out four columns, exactly as before. */
.continents {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.75rem, 1fr));
  gap: 2.5rem var(--gap);
}

.continent h2 {
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1rem;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.continent ul { list-style: none; margin: 0; padding: 0; }

.continent li {
  display: flex;
  justify-content: space-between;
  /* space-between already holds the name and the count apart; this gap only bites on the
     one row long enough to fill its column, and 0.5rem is what that row can spare. */
  gap: 0.5rem;
  padding: 0.3rem 0;
}

.continent span { font-size: 0.85rem; font-variant-numeric: tabular-nums; }

/* ---------- the archive index ---------- */

.archive-year { margin-bottom: 2.75rem; }

.archive-year h2 {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

.archive-year ul { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }

.archive-year li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule);
}

.archive-year time {
  color: var(--ink-soft);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ---------- social marks ----------
   One rule set for the footer and for /kontakt/. The glyphs are inline SVG filled with
   currentColor, so they inherit whatever the surrounding text is: grey in the footer,
   link blue in the page body, and correct in both colour schemes with no second palette.

   Issue #6: the names are gone, so the mark is the whole link. Two things follow. The
   target can no longer be the glyph — 22 px is below any thumb — so the link is padded
   out to a 44 px square; and the row is pulled left by that padding so the marks still
   line up with the text edge above them rather than sitting in an accidental indent. */

/* ul.social, not .social: `.prose ul` above sets a margin on the list, and on /kontakt/
   that outranked the bare class and put the marks back in an 11 px indent. */
ul.social {
  list-style: none;
  margin: 0.35rem 0 0 -11px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  text-decoration: none;
}

.social-link svg { flex: none; }

/* In the footer the mark is part of the grey chrome, not a coloured accent. */
footer.site .social { margin-top: 0.45rem; }
footer.site .social-link { color: var(--ink-soft); }
footer.site .social-link:hover { color: var(--ink); }

/* A single photograph inside a page body, e.g. the portrait on /kontakt/. */
.page-photo { margin: 0 0 2rem; }

.page-photo figcaption {
  margin-top: 0.55rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

/* ---------- card meta: the full date, and where it was ---------- */

/* The card gains no new line. The grey line that used to carry a bare year now carries the
   whole date and the place, so the wall reads no denser than before. Date and place are held
   apart by space, not by a middle dot — this theme does not join meta with dots.

   Issue #6: it is set smaller than the excerpt below it. This line is a label, and on the
   wall the title should be the first thing read, not the date. One rule covers all three
   places a card appears — the homepage, /category/<slug>/, and "Zobacz też" on a post.

   Issue #8: a point smaller again — 0.76rem was 9.1pt, this is 8.1pt — and set in
   capitals. The house style keeps capitals out of running text, but the owner asked for
   them here, as he did for the wordmark. Three things make that legible rather than
   merely loud: the tracking, because capitals set at their default fit are a wall at
   10.9px; the raised line-height, so the acute on Ś and Ż and the ogonek on Ą have room
   above and below rather than crowding the title; and leaving the colour alone, since
   capitals already read heavier than lowercase at the same size. */
.card-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.05rem 1rem;
  color: var(--ink-soft);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  line-height: 1.55;
}

.card-meta time { font-variant-numeric: tabular-nums; }

/* ---------- country flags on /kraje/ ----------
   Self-hosted SVGs (flag-icons, MIT — static/flags/README.txt). Not emoji: the regional
   indicator pairs render as bare letters on Windows, which is most of this audience.
   Issue #8: the flag leads the name at roughly the cap height of the type, so the list
   still reads as a list of names rather than a row of stickers. The room it needs at the
   front of the line is bought back in .continents above, not here. */

/* The wrapper holding flag + name is a <span>, and .continent span above sets the small
   count size — put the name back to the body size it had when the <a> sat in the <li>
   directly. inherit, not 1rem: the body runs at 17px while the root is 16px.

   A flex row, not inline flow: the name is then its own item, so if a column ever does get
   narrow enough to wrap one, it wraps under itself with the flag hanging in the margin
   rather than starting its second line underneath the flag. min-width: 0 is what lets that
   item shrink and wrap at all instead of overflowing the row. */
.continent li .country {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  font-size: inherit;
  min-width: 0;
}

.continent li .country a { min-width: 0; }

.flag {
  /* 0.95em wide is 0.71em tall, which is the cap height of this face almost exactly: the
     flag sits level with the capital letter beside it. flex: none so it never squeezes
     when the name beside it is long. */
  flex: none;
  width: 0.95em;
  height: auto;
  /* A replaced element's baseline is its bottom edge, so baseline alignment would stand
     the flag exactly on the baseline. Nudge it down the same 0.1em the old inline
     vertical-align did — position, not margin, so the row's metrics do not move. */
  position: relative;
  top: 0.1em;
  /* border-radius clips a replaced element's own painting, so an <img> pointing at an SVG
     does come out with rounded corners — no wrapper with overflow: hidden needed. */
  border-radius: 2px;
  /* A hairline ring, drawn outside the image. An inset shadow would be painted behind the
     bitmap and never seen. Without it Japan and Malta dissolve into the light background. */
  box-shadow: 0 0 0 1px rgba(25, 28, 34, 0.18);
}

@media (prefers-color-scheme: dark) {
  .flag { box-shadow: 0 0 0 1px rgba(231, 233, 236, 0.22); }
}