/* SYMMETRON 25 — cookie consent panel.
   Accept and Reject are deliberately identical in weight and colour: under
   ePrivacy, refusing has to be as easy as agreeing. */

.s25-consent[hidden] { display: none; }

.s25-consent {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 22px;
  z-index: 450;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}

.s25-consent__panel {
  pointer-events: auto;
  width: min(520px, 100%);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: clamp(22px, 3vw, 30px);
  box-shadow: 0 26px 60px -28px rgba(32, 27, 18, .55);
  transform: translateY(18px);
  opacity: 0;
  transition: transform .38s var(--ease), opacity .38s var(--ease);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}
.s25-consent.is-open .s25-consent__panel { transform: none; opacity: 1; }

.s25-consent__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(21px, 2.4vw, 27px);
  letter-spacing: -.01em;
  line-height: 1.2;
  margin-bottom: 12px;
}

.s25-consent__body {
  color: var(--mid);
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 22px;
}
.s25-consent__body a {
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.s25-consent__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Equal prominence, by design. */
.s25-consent__btn {
  flex: 1 1 auto;
  min-width: 140px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--brass);
  border-radius: 2px;
  padding: 14px 20px;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.s25-consent__btn:hover {
  background: var(--grad);
  border-color: transparent;
  color: #FAF8F3;
}

.s25-consent__link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mid);
  background: none;
  border: none;
  padding: 8px 4px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .3s;
}
.s25-consent__link:hover { color: var(--brass); }

/* Preferences ------------------------------------------------------------- */

.s25-consent__list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.s25-consent__item {
  padding: 16px 0;
  border-top: 1px solid var(--hair);
}
.s25-consent__item:first-child { border-top: none; padding-top: 0; }

.s25-consent__switch {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.s25-consent__switch input[disabled] { cursor: default; }

.s25-consent__switch input {
  appearance: none;
  width: 40px;
  height: 22px;
  border-radius: 22px;
  border: 1px solid var(--hair);
  background: var(--paper-2);
  position: relative;
  flex: none;
  cursor: pointer;
  transition: background .28s, border-color .28s;
}
.s25-consent__switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--mid);
  transition: transform .28s var(--ease), background .28s;
}
.s25-consent__switch input:checked { background: var(--grad); border-color: transparent; }
.s25-consent__switch input:checked::after { transform: translateX(18px); background: #FAF8F3; }
.s25-consent__switch input[disabled] { opacity: .8; }

.s25-consent__name {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 15px;
}

.s25-consent__always {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-left: auto;
}

.s25-consent__text {
  color: var(--mid);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 10px 0 0 52px;
}

@media (max-width: 600px) {
  .s25-consent { left: 12px; right: 12px; bottom: 12px; }
  .s25-consent__panel { width: 100%; }
  .s25-consent__btn { min-width: 100%; }
  .s25-consent__text { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .s25-consent__panel { transition: none; transform: none; }
}

/* The corner notice would sit on top of the panel. */
.s25-consent.is-open ~ .demo-flag { display: none; }