/* Culture Blender — visual direction 1.1, the mix.
   This file loads after site.css. The silent page stays the frame.
   Glass comes back as a signature, in three places only:
   1. the header, a sheet of clear frost
   2. the mark, the form as a small ring next to the name
   3. one plate, the voice line on a frost pane
   The glass has no colour of its own. It takes its colour from the work behind it.
   The panes are square cut: no rounded corner and no drop shadow. */

:root {
  --frost-fill: rgba(255, 255, 255, 0.72);
  --frost-edge: rgba(200, 207, 216, 0.6);
  --frost-blur: blur(22px) saturate(1.25);
  --slot: #eaf2f2;
}

/* ---------- 1. The header is a sheet of frost ---------- */

.site-header {
  background: var(--frost-fill);
  -webkit-backdrop-filter: var(--frost-blur);
  backdrop-filter: var(--frost-blur);
  border-bottom: 1px solid var(--frost-edge);
}

/* Grey text is not readable when a dark picture is behind the frost. */
.site-header .site-where {
  color: var(--ink);
}

/* ---------- 2. The mark: the form as a ring ---------- */

.site-name {
  display: flex;
  align-items: center;
  gap: 0.45em;
}

.form-mark {
  flex: none;
  width: 1.5em;
  height: 1.5em;
  margin-block: -0.2em;
}

.mark .form-mark {
  width: 1.05em;
  height: 1.05em;
  margin: 0;
}

.site-footer .form-mark {
  display: inline-block;
  vertical-align: -0.4em;
  margin-right: 0.35em;
}

/* ---------- 3. One plate: the voice line on a frost pane ---------- */

.slot--frost {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.slot--frost img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 50%;
  /* The picture is enlarged, so that the form is behind the pane and gives it colour. */
  transform: scale(1.55);
  transform-origin: 50% 12%;
}

.frost-pane {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 14px 14px 16px;
  padding-top: 34%;
  background: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.75);
  color: var(--ink);
}

/* ---------- Guide: the two glass examples, side by side ---------- */

.glass-demo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
  column-gap: var(--gutter);
  row-gap: 28px;
  align-items: start;
  max-width: 60em;
}

@media (max-width: 820px) {
  .glass-demo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A browser without backdrop blur gets a solid pane, so the text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: var(--paper);
  }

  .frost-pane {
    background: rgba(255, 255, 255, 0.9);
  }
}