/* ==========================================================================
   Rack - a sale banner in a shop window ("À VENDRE / RACK POUR VÊTEMENTS"):
   cream Impact on red, every line centred. Under each post's text, its
   pictures stand side by side touching, one strip exactly two lines of the
   big text tall - the --line variable ties the two together.

   Impact is on computers but rarely on phones: Anton (self-hosted, OFL) is
   its near twin and stands in where it's missing.
   Links are the text's colour, underlined. The accent colour isn't used.
   The Style setting picks the poster: Red (cream on red, pictures under
   the text), Black (pink on black, pictures above it) or Custom (Red's
   layout, --bg and --fg from the theme's options, in index.html).
   Above it all, in both styles, the shop's sign: the yellow band with
   dark letters over Bruck's window (COMPAGNIE DES MACHINES À COUDRE
   BRUCK INC.), flat, colours taken from a photo of it, with its panel
   seams. Saira Semi Condensed Bold (self-hosted, OFL) for its painted
   lettering: heavy, narrow, rounded-rectangle O, C and D, widely spaced.
   ========================================================================== */

@font-face {
  font-family: "Saira Semi Condensed";
  src: url("../fonts/SairaSemiCondensed-Bold.905ff0e77bd9.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Anton";
  src: url("../fonts/Anton-Regular.e57915c86b86.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #e94949; /* Red: the poster's red */
  --fg: #e5e4bc; /* and its cream letters */
  --size: clamp(2rem, 6vw, 4rem); /* big, not shouting */
  --line: calc(var(--size) * 1.1); /* one line of that text */
}

/* Black: the other poster - pink on black, pictures above the text.
   Same two variables, so every rule below follows either way. */
:root.style-black { --bg: #161a1c; --fg: #f05187; }
.style-black .post { display: flex; flex-direction: column; }
.style-black .strip { order: -1; margin: 0 0 calc(var(--line) * 0.35); }

html { background: var(--bg); overflow-x: clip; } /* the sign is 100vw wide: no sideways scroll for the scrollbar's width */
html.window { background: #2a2c2e; }

/* Behind everything, the shop window, a fixed layer (background-attachment:
   fixed is ignored by phones). It's a third taller than the screen and drifts
   up that third over the whole page, slower than the page: parallax. --p is
   how far down the page is scrolled, 0 to 1, set by the script in index.html. */
html.window::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 130vh;
  z-index: -1;
  background: url("../img/rack-window.c6b97811623e.jpg") center / cover;
  transform: translateY(calc(var(--p, 0) * -30vh));
}
@media (prefers-reduced-motion: reduce) { html.window::before { transform: none; height: 100vh; } }

body {
  margin: 0 auto;
  padding: 2rem 16px 0.1px; /* the wall, or the last post's margin, ends the page */
  max-width: 1100px;
  color: var(--fg);
  font-family: Impact, "Anton", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  font-weight: normal;
  text-align: center;
}

.sign {
  --sign: #f1d5a3;      
  --sign-ink: #595d63; 
  margin: -2rem calc(50% - 50vw) 4rem;
  padding: 1rem ;
  background-color:var(--sign);
  color: var(--sign-ink);
  font-family: "Saira Semi Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.sign h1 { font-size: clamp(1.8rem, 6vw, 4rem); line-height: 1.05; margin: 0; font-weight: bold; overflow-wrap: anywhere; }
.sign-text { font-size: clamp(0.9rem, 2vw, 1.15rem); line-height: 1.35; margin: 0.5em auto 0; max-width: 90ch; }
.sign a { color: var(--sign-ink); }
.sign .social-links { font-size: clamp(0.8rem, 1.8vw, 1rem); }
.cover { margin: -2rem 0 4rem; }
header.post .site-cover { margin-bottom: 1rem; } /* no sign: the cover sits over the title */
/* No sign, no window: the title halfway between the top of the page and
   the first post - as much under it as the body's 2rem over it. */
html:not(.window) header.post { margin-bottom: 2rem; }

/* Links: the text's own colour, underlined. */
a { color: var(--fg); text-decoration: underline; }

p { margin: 0; }

.post { margin: 0 0 4rem; }
.window .post, .window .empty { padding: 6px 8px; background: var(--bg); } /* the posters hung in the window, letters close to the edges */
.window .title { line-height: 1; }

.title {
  font-size: var(--size);
  line-height: 1.1;
  margin: 0;
  overflow-wrap: anywhere;
}

/* Text under a title: the same letters, smaller, still centred. */
.text { font-size: calc(var(--size) * 0.5); line-height: 1.2; margin: 0.4em 0 0; overflow-wrap: anywhere; }
.text p + p { margin-top: 0.6em; }
.date { font-size: calc(var(--size) * 0.4); margin: 0 0 0.2em; }

/* The strip: pictures touching, each as tall as two lines of the title,
   as wide as its own shape. More than fits on a line carries on below,
   still touching. */
.strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: calc(var(--line) * 0.35);
}
.strip:empty { display: none; }
.strip:first-child { margin-top: 0; } /* a post of pictures only: no gap above them */
.strip img, .strip video {
  display: block;
  height: calc(var(--line) * 2);
  width: auto;
  max-width: 100%;
  object-fit: cover;
  margin: 0;
}

.post-audio { max-width: 545px; margin: 1em auto 0; }
.post-embed { margin: 1em auto; }

.site-cover {
  /* Cover size setting: a real width, so small/medium/large always
     differ (max-* alone did nothing to a cover already under them); the
     300x222 box stays the limit, contain keeps a tall cover unsquished,
     and it's never wider than the screen. */
  width: calc(300px * var(--cover-scale, 1));
  max-width: 100%;
  height: auto;
  max-height: calc(222px * var(--cover-scale, 1));
  object-fit: contain;
}

/* At the bottom, the white brick wall under the window, full width. */
.wall {
  height: 220px;
  margin: 0 calc(50% - 50vw);
  background: url("../img/rack-wall.ee540bf6fa81.jpg") center / cover;
}

.social-links { display: block; margin: 0.8em 0 0; font-size: calc(var(--size) * 0.4); }
.social-links a { margin: 0 0.4em; }

/* A picture clicked: shown whole over the page (the script in index.html). */
.strip a { display: block; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: calc(100% - 40px);
  max-height: calc(100% - 40px);
  object-fit: contain;
}