/*
Theme Name: Candless
Theme URI: https://candless.art/
Author: Candless
Description: Site theme for candless.art — blanks with a before/after slider, Info, Registry, profiles by Player ID. No page builder, no shop.
Version: 0.2.30
Requires at least: 6.4
Requires PHP: 7.4
License: Proprietary
Text Domain: candless
*/

/* ---------- Fonts (self-hosted, no external requests) ---------- */
/* DM Sans, one variable file: weight 400-700 and optical size 9-40 (the letter shapes follow the size of the type by themselves).
   Cut down to Latin with accents; licence in assets/fonts/DM-Sans-OFL.txt. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/dm-sans.woff") format("woff"); }

/* ---------- Tokens ----------
   --u is one design pixel. Phone layout is drawn at 390 wide, desktop at 1920x1080.
   Every size is a multiple of --u, so the page scales with the screen like the mockup. */
:root {
  /* Letter spacing, set for DM Sans: ordinary text, and the large names (blank, work, player). */
  --ls: -.01em;
  --ls-name: -.03em;
  /* Phones, and tablets held upright: the phone layout, never drawn larger than one and a half times. */
  --u: min(calc(100vw / 390), 1.5px, calc(var(--vh) * 100 / 520));
  --red: #a2051e;
  --ink: #000;
  --grey: #6b7483; /* darker than the mockup's #919aaa: 4.7:1 on white instead of 2.8:1 */
  --slate: #39404c;
  --field: #e6e9ee;
  --search: #c6cdd9;
  --line: #ced0d3;
  --ground: #f1f1f1;
  --veil: rgba(255, 255, 255, .64);
  --veil-blur: calc(var(--u) * 3);
  /* Under the menu and the form the page is blurred until no letters can be read. */
  --card-veil: rgba(255, 255, 255, .8);
  --card-veil-blur: calc(var(--u) * 28);
  --radius: calc(var(--u) * 12);
  --shadow: 0 calc(var(--u) * 2) calc(var(--u) * 2) rgba(218, 218, 218, .7);
  --vh: 1vh;
  --blank-h: 74.88;
}
@supports (height: 1svh) { :root { --vh: 1svh; } }
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  :root {
    --u: min(calc(100vw / 1920), calc(100vh / 1080));
    --veil: rgba(255, 255, 255, .72);
    --veil-blur: calc(var(--u) * 8);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: var(--ls);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, ul { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button, input, textarea, select { letter-spacing: inherit; }
img, picture, svg { display: block; }
picture, picture img { width: 100%; height: 100%; }
picture img { object-fit: cover; }
.ic { width: 100%; height: 100%; overflow: visible; }
.lnk { color: var(--red); }
.vh, .screen-reader-text, .skip:not(:focus), .menu-key:not(:focus) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip:focus, .menu-key:focus {
  position: fixed; z-index: 100; top: 8px; left: 8px; padding: 8px 12px; background: #fff; color: #000;
  font-size: 14px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
html.is-locked, html.is-locked body { overflow: hidden; }
[hidden] { display: none !important; }

/* ---------- Blanks (start page) ---------- */
.blank { position: relative; background: #fff; overflow: hidden; }
.blank__media { position: relative; height: calc(var(--vh) * var(--blank-h)); }
.blank__strip { position: relative; min-height: calc(var(--u) * 135); padding: calc(var(--u) * 26) calc(var(--u) * 32) calc(var(--u) * 26) calc(var(--u) * 30); }
.blank__label, .pb__label { font-size: calc(var(--u) * 32); line-height: calc(var(--u) * 40); letter-spacing: var(--ls-name); }
.blank__value, .pb__value { font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 40); letter-spacing: var(--ls-name); margin-top: calc(var(--u) * 3); }
/* On phones the arrow stands at the right of the name strip, at mid-height: under the centre it ran into the menu sign on real screens.
   Open or closed it keeps this place, low on the screen: the site is worked with one thumb (Max, 10.10.2026). */
.blank__toggle {
  position: absolute; z-index: 3; right: calc(var(--u) * 19); bottom: calc(var(--u) * 46.5); width: calc(var(--u) * 64); height: calc(var(--u) * 42);
  display: grid; place-items: center; color: var(--red);
}
/* The same arrow size as in the Role / Roles rows and on the profile tiles: about one text height wide, as on computers. */
.blank__toggle .ic { width: calc(var(--u) * 32.9); height: calc(var(--u) * 16.4); stroke-width: calc(var(--u) * 2); transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.blank.is-open .blank__toggle .ic { transform: rotate(180deg); }

/* The panel slides up from the name strip: it starts exactly where the strip stands, so the name appears to rise. */
.blank__panel {
  position: absolute; z-index: 2; inset: 0; background: #fff; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #c9cbcf transparent;
  visibility: hidden; transform: translateY(calc(var(--vh) * var(--blank-h)));
  transition: transform .5s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .5s;
}
.blank.is-open .blank__panel { visibility: visible; transform: none; transition-delay: 0s; }
/* No scrollbar while the panel is moving (the class is set by the script for the half second of the move). */
.blank__panel.is-moving { overflow: hidden; }
/* The menu sign stands over the foot of the panel. A white veil is pinned there, so text never shows under
   the sign: on a short screen the lines fade out above it, and scroll up clear of it at the end. */
.blank__panel::after {
  content: ""; display: block; position: sticky; bottom: 0; pointer-events: none;
  height: max(calc(var(--u) * 26), calc(var(--u) * 235 - var(--vh) * (100 - var(--blank-h))));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff calc(var(--u) * 10));
}
.blank__panel.is-more::after {
  height: max(calc(var(--u) * 56), calc(var(--u) * 265 - var(--vh) * (100 - var(--blank-h))));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff calc(var(--u) * 40));
}
.blank__panel .pb:last-child { padding-bottom: 0; }
/* On a screen shorter than the design's (a phone browser with its bars showing) the spaces between the blocks
   and between the paragraphs close up by --pd each, up to 14 units, so that the last line still ends above
   the menu sign. 731 units is the height the longest panel (Friends) needs together with the sign. */
.blank__panel { --pd: clamp(0px, calc((var(--u) * 731 - var(--vh) * 100) / 6), calc(var(--u) * 14)); }
.pb { padding: var(--pb-top, calc(var(--u) * 26)) calc(var(--u) * 32) calc(var(--u) * 26 - var(--pd, 0px)) calc(var(--u) * 30); }
.pb + .pb { --pb-top: calc(var(--u) * 26 - var(--pd, 0px)); }
.pb--rule { padding-bottom: calc(var(--u) * 38); }
.pb__text { margin-top: calc(var(--u) * 7); font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 32); letter-spacing: var(--ls); }
.pb__text p + p { margin-top: calc(var(--u) * 32 - var(--pd, 0px)); }

@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  .blanks { display: grid; grid-template-columns: 1fr 1fr; }
  .blank { height: 100vh; overflow: hidden; }
  .blank__media { height: 72.13vh; }
  .blank__strip { height: 27.87vh; min-height: 0; padding: calc(var(--u) * 32) 0 0 calc(var(--u) * 63); }
  .blank__label { font-size: calc(var(--u) * 96); line-height: 1.4; }
  .blank__value { font-size: calc(var(--u) * 72); line-height: 1.4; margin-top: calc(var(--u) * -8.4); }
  .blank__toggle { left: auto; right: calc(var(--u) * 122.5); bottom: calc(var(--u) * 20); width: calc(var(--u) * 120); height: calc(var(--u) * 120); transform: none; }
  .blank__panel { overscroll-behavior: contain; }
  .blank__panel::after { display: none; }
  .blank__toggle .ic { width: calc(var(--u) * 87.7); height: calc(var(--u) * 43.7); stroke-width: calc(var(--u) * 5); }

  /* Closed, the panel's first block repeats the name strip exactly (place and size); while the panel rises
     the block eases to its own size, so the name never jumps at the start or at the end of the move. */
  .blank__panel {
    padding: calc(var(--u) * 32) calc(var(--u) * 67) calc(var(--u) * 40) calc(var(--u) * 63); transform: translateY(72.13vh);
    transition: transform .5s cubic-bezier(.4, 0, .2, 1), padding .5s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .5s;
  }
  .blank.is-open .blank__panel { transform: none; padding: calc(var(--u) * 42) calc(var(--u) * 67) calc(var(--u) * 40); }
  .blank__panel .pb:first-child .pb__label { font-size: calc(var(--u) * 96); transition: font-size .5s cubic-bezier(.4, 0, .2, 1); }
  .blank__panel .pb:first-child .pb__value { font-size: calc(var(--u) * 72); margin-top: calc(var(--u) * -8.4); transition: font-size .5s cubic-bezier(.4, 0, .2, 1), margin-top .5s cubic-bezier(.4, 0, .2, 1); }
  .blank.is-open .blank__panel .pb:first-child .pb__label { font-size: calc(var(--u) * 68); }
  .blank.is-open .blank__panel .pb:first-child .pb__value { font-size: calc(var(--u) * 44); margin-top: 0; }
  .pb, .pb--rule { padding: 0; margin-bottom: calc(var(--u) * 75); }
  .blank__panel .pb:last-child { margin-bottom: 0; }
  .pb__label { font-size: calc(var(--u) * 68); line-height: 1.4; }
  .pb__value { font-size: calc(var(--u) * 44); line-height: 1.4; margin-top: 0; }
  .pb__text { margin-top: calc(var(--u) * 8); max-width: calc(var(--u) * 650); font-size: calc(var(--u) * 44); line-height: calc(var(--u) * 52); }
  .pb__text p + p { margin-top: calc(var(--u) * 52); }

  /* When one blank is open, the neighbour steps back. */
  .blanks .blank::after {
    content: ""; position: absolute; z-index: 4; inset: 0; background: var(--veil);
    -webkit-backdrop-filter: blur(var(--veil-blur)); backdrop-filter: blur(var(--veil-blur));
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .blanks.has-open .blank:not(.is-open)::after { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
}

/* ---------- Before / after slider ---------- */
.ba { --pos: 50%; overflow: hidden; background: #eceae6; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ba__before, .ba__after { position: absolute; inset: 0; }
.ba__after { clip-path: inset(0 0 0 var(--pos)); }
.ba__handle {
  position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--pos); width: calc(var(--u) * 54); margin-left: calc(var(--u) * -27);
  cursor: ew-resize; color: #fff; touch-action: none;
}
.ba__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; }
.ba__arrow { position: absolute; top: 50%; width: calc(var(--u) * 11.8); height: calc(var(--u) * 20); margin-top: calc(var(--u) * -10); }
.ba__arrow--l { right: calc(50% + var(--u) * 8); }
.ba__arrow--r { left: calc(50% + var(--u) * 10); transform: scaleX(-1); }
.ba.is-static .ba__handle { display: none; }
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  .ba__arrow { width: calc(var(--u) * 23); height: calc(var(--u) * 39); margin-top: calc(var(--u) * -19.5); }
  .ba__arrow--l { right: calc(50% + var(--u) * 16); }
  .ba__arrow--r { left: calc(50% + var(--u) * 16); }
}

/* ---------- Overlay: veil, wordmark, pause/play, menu card ---------- */
.ovl { position: fixed; z-index: 50; inset: 0; visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s; }
body[data-ovl="idle"] .ovl, body[data-ovl="menu"] .ovl, body.is-info .ovl { visibility: visible; opacity: 1; transition-delay: 0s; }
/* The menu sign stays on top of every page, whether the veil is shown or not. */
.ovl__blur { position: absolute; inset: 0; background: var(--card-veil); -webkit-backdrop-filter: blur(var(--card-veil-blur)); backdrop-filter: blur(var(--card-veil-blur)); }
.ovl__mark { position: absolute; top: calc(var(--u) * 40); left: 50%; width: calc(var(--u) * 146); transform: translateX(-50%); color: #000; }
.ovl__mark svg { width: 100%; height: auto; fill: currentColor; }
body.is-info:not([data-ovl="menu"]) .ovl__mark { display: none; }
.ovl__toggle {
  position: fixed; z-index: 55; left: 50%; bottom: calc(var(--u) * 38); width: calc(var(--u) * 48); height: calc(var(--u) * 48);
  transform: translateX(-50%); display: grid; place-items: center; color: var(--red);
}
body[data-form] .ovl__toggle { display: none; }
.ovl__toggle .ic-pause { width: calc(var(--u) * 28); height: calc(var(--u) * 40); }
.ovl__toggle .ic-play { width: calc(var(--u) * 40); height: calc(var(--u) * 40); transform: translateY(calc(var(--u) * -4)); }
.ovl__toggle .i-play, body[data-ovl="menu"] .ovl__toggle .i-pause { display: none; }
body[data-ovl="menu"] .ovl__toggle .i-play { display: block; }

.ovl__card {
  position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); bottom: calc(var(--u) * 124);
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); display: none;
}
body[data-ovl="menu"] .ovl__card { display: block; }
.cats { height: calc(var(--u) * 80); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 38); }
.cats a { display: block; width: calc(var(--u) * 69); text-align: center; font-weight: 500; font-size: calc(var(--u) * 18); letter-spacing: var(--ls); padding: calc(var(--u) * 12) 0; }
.cats a.is-current, .tabs a.is-current { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: from-font; }

.idsearch { display: none; }
.section-registry .idsearch {
  display: flex; align-items: center; height: calc(var(--u) * 56); margin: calc(var(--u) * 16) calc(var(--u) * 16) 0;
  padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 24); border-radius: calc(var(--u) * 28); background: var(--search); color: var(--slate);
}
.section-registry .cats { height: calc(var(--u) * 80); }
.idsearch input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit;
  font-size: max(16px, calc(var(--u) * 20)); line-height: calc(var(--u) * 24); letter-spacing: var(--ls); padding: 0;
}
.idsearch input::placeholder { color: inherit; opacity: 1; }
.idsearch button { width: calc(var(--u) * 32); height: calc(var(--u) * 32); display: grid; place-items: center; }
.idsearch button .ic { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.idsearch.is-nf { background: rgba(0, 0, 0, .5); color: var(--search); }
.idsearch.is-nf button { visibility: hidden; }

@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  .ovl__mark { top: calc(var(--u) * 80); width: calc(var(--u) * 300); }
  .ovl__toggle { bottom: calc(var(--u) * 96); width: calc(var(--u) * 84); height: calc(var(--u) * 84); }
  .ovl__toggle .ic-pause { width: calc(var(--u) * 46.2); height: calc(var(--u) * 66); }
  .ovl__toggle .ic-play { width: calc(var(--u) * 76); height: calc(var(--u) * 76); transform: translateX(calc(var(--u) * 7)); }
  /* The card is as wide as its items need: the same step and side fields as the five Info tabs, which fill the row. */
  .ovl__card { left: 50%; right: auto; bottom: calc(var(--u) * 276); width: max-content; max-width: calc(100% - var(--u) * 144); transform: translateX(-50%); }
  .cats, .section-registry .cats { height: calc(var(--u) * 176); gap: calc(var(--u) * 180); padding: 0 calc(var(--u) * 145.5); }
  .cats a { width: calc(var(--u) * 153); font-size: calc(var(--u) * 40); }
  .section-registry .idsearch { width: auto; max-width: calc(var(--u) * 816); height: calc(var(--u) * 104); margin: calc(var(--u) * 64) auto calc(var(--u) * 64); padding: 0 calc(var(--u) * 48); border-radius: calc(var(--u) * 56); }
  .idsearch input { font-size: max(16px, calc(var(--u) * 40)); line-height: calc(var(--u) * 48); }
  .idsearch button { width: calc(var(--u) * 64); height: calc(var(--u) * 64); }
  .idsearch button .ic { width: calc(var(--u) * 46.5); height: calc(var(--u) * 46.5); }
}

/* ---------- Info ---------- */
/* Info stands on a plain ground: the blanks are not shown behind it. */
body.is-info { background: var(--ground); }
body.is-info .ovl__blur { background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
.info {
  position: fixed; z-index: 51; top: calc(var(--u) * 16); left: calc(var(--u) * 16); right: calc(var(--u) * 16); bottom: calc(var(--u) * 220);
  background: #fff; border-radius: var(--radius); overflow: hidden;
}
.info__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--u) * 48) calc(var(--u) * 16); scrollbar-width: thin; scrollbar-color: #c9cbcf transparent; }
.info__body { font-weight: 500; font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 24); text-align: left; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: anywhere; }
.info__body p { margin: 0 0 calc(var(--u) * 24); }
.info .info__body > :last-child { margin-bottom: 0; }
.info__body h2, .info__body h3 { font-weight: 600; font-size: calc(var(--u) * 16); line-height: 1.2; letter-spacing: var(--ls); text-align: center; margin: calc(var(--u) * 40) 0 calc(var(--u) * 24); }
.info__body h2 { text-transform: uppercase; }
.info__body > h2:first-child, .info__body > h3:first-child { margin-top: 0; }
.info__body h2 + h3 { margin-top: 0; }
.info__body a { color: var(--red); }
.info__body ul, .info__body ol { margin: 0 0 calc(var(--u) * 24); padding-left: 1.3em; list-style: revert; }
.info__body table { width: 100%; border-collapse: collapse; margin: 0 0 calc(var(--u) * 24); }
.info__body th, .info__body td { padding: .4em .5em .4em 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.info__body img { max-width: 100%; height: auto; }
.info--page .info__body { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
/* EU legal guarantee notice: one sentence, the full notice on the first click. Legible size first; narrow screens pan sideways. */
.lg { margin: 0 0 calc(var(--u) * 24); text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.lg summary { display: inline-block; list-style: none; cursor: pointer; color: var(--red); }
.lg summary::-webkit-details-marker { display: none; }
.lg__sheet { margin-top: calc(var(--u) * 24); overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.lg__sheet img { display: block; width: max(560px, calc(var(--u) * 600)); max-width: none; height: auto; }
.lg__more { margin: calc(var(--u) * 16) 0 0 !important; }
.info__body .lead { margin-bottom: calc(var(--u) * 48); letter-spacing: var(--ls-name); }
.info--about .info__body, .info--contact .info__body { text-align: center; }
.info--about .info__scroll { padding-top: calc(var(--u) * 36); padding-bottom: calc(var(--u) * 36); }
.info__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none; opacity: 0; transition: opacity .2s ease;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(218, 218, 218, .7));
}
.info.has-more .info__fade { opacity: 1; }
.tabs {
  position: fixed; z-index: 51; left: calc(var(--u) * 16); right: calc(var(--u) * 16); bottom: calc(var(--u) * 124); height: calc(var(--u) * 80);
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10);
}
.tabs a { display: block; min-width: calc(var(--u) * 57); text-align: center; font-weight: 500; font-size: calc(var(--u) * 14); letter-spacing: var(--ls); padding: calc(var(--u) * 14) 0; }
body[data-ovl="menu"] .info, body[data-ovl="menu"] .tabs { display: none; }
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  /* The card is 44u taller than in the mockup and the tabs sit 44u lower, so that About shows whole, without scrolling. */
  .info { top: calc(var(--u) * 72); left: calc(var(--u) * 72); right: calc(var(--u) * 72); bottom: calc(var(--u) * 432); }
  .info__scroll { padding: calc(var(--u) * 72); }
  .info__body { font-size: calc(var(--u) * 40); line-height: calc(var(--u) * 56); }
  .info__body p { margin-bottom: calc(var(--u) * 56); }
  .info__body h2, .info__body h3 { font-size: calc(var(--u) * 32); margin: calc(var(--u) * 80) 0 calc(var(--u) * 48); }
  .info__body .lead { margin-bottom: calc(var(--u) * 80); }
  .lg { margin-bottom: calc(var(--u) * 56); }
  .lg__sheet { margin-top: calc(var(--u) * 40); }
  .lg__sheet img { width: max(600px, calc(var(--u) * 900)); margin: 0 auto; }
  .lg__more { margin-top: calc(var(--u) * 24) !important; text-align: center; }
  .info--about .info__scroll { padding: calc(var(--u) * 48) calc(var(--u) * 56); }
  .info--about .info__body { line-height: calc(var(--u) * 48); }
  .info--about .info__body p { margin-bottom: calc(var(--u) * 36); }
  .info--about .info__body .lead { margin-bottom: calc(var(--u) * 56); }
  .info--about .info__body h2 { margin: calc(var(--u) * 56) 0 calc(var(--u) * 36); }
  .tabs { left: calc(var(--u) * 72); right: calc(var(--u) * 72); bottom: calc(var(--u) * 232); height: calc(var(--u) * 176); gap: calc(var(--u) * 180); }
  .tabs a { min-width: calc(var(--u) * 153); font-size: calc(var(--u) * 40); }
}

/* ---------- Enquiry form ---------- */
.fm { position: fixed; z-index: 60; inset: 0; display: none; }
body[data-form] .fm { display: block; }
/* The veil of the form is denser than that of the menu: with no window, the fields stand on the veil itself, and what is
   left of the page between them must stay a faint trace, not smudges of the photo. */
.fm__blur { position: absolute; inset: 0; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(var(--card-veil-blur)); backdrop-filter: blur(var(--card-veil-blur)); }
/* No window around the form (Max, 10.10.2026: "better without the window, just the fields and the button"):
   the fields and the button stand on the veil itself. A tap beside them still closes the form. */
.fm__card {
  position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); top: 50%; transform: translateY(-50%); max-height: calc(100% - var(--u) * 32); overflow-y: auto;
  padding: calc(var(--u) * 16);
}
.fm__fields { display: grid; gap: calc(var(--u) * 16); }
.fm__field {
  display: block; width: 100%; height: calc(var(--u) * 56); border: 0; border-radius: calc(var(--u) * 28); background: var(--field); color: var(--slate);
  font: inherit; font-size: max(16px, calc(var(--u) * 20)); line-height: calc(var(--u) * 24); letter-spacing: var(--ls); padding: 0 calc(var(--u) * 24); outline-offset: 0; appearance: none;
}
.fm__field::placeholder { color: rgba(0, 0, 0, .5); opacity: 1; }
/* Browser autofill would repaint the field light blue with black text. */
.fm__field:-webkit-autofill, .fm__field:-webkit-autofill:hover, .fm__field:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--slate); caret-color: var(--slate); box-shadow: 0 0 0 1000px var(--field) inset; -webkit-box-shadow: 0 0 0 1000px var(--field) inset;
}
.fm__field:autofill { box-shadow: 0 0 0 1000px var(--field) inset; }
.fm__field:focus-visible { outline: calc(var(--u) * 2) solid #9ea6b7; }
.fm__field.is-bad, .fm__field.is-bad:focus-visible { outline: calc(var(--u) * 2) solid var(--red); }
textarea.fm__field { height: calc(var(--u) * 152); border-radius: calc(var(--u) * 24); padding: calc(var(--u) * 16) calc(var(--u) * 24); resize: none; }
.fm__send {
  display: block; width: 100%; height: calc(var(--u) * 56); margin-top: calc(var(--u) * 48); border: calc(var(--u) * 2) solid #9ea6b7; border-radius: calc(var(--u) * 28);
  background: #fff; color: var(--grey); font-weight: 500; font-size: calc(var(--u) * 20); letter-spacing: var(--ls); transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fm__send.is-ready { background: var(--slate); border-color: var(--slate); color: #fff; }
.fm__send[aria-busy="true"] { opacity: .6; }
.fm__error { margin-top: calc(var(--u) * 16); text-align: center; color: var(--red); font-size: calc(var(--u) * 14); line-height: 1.4; }
.fm__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fm__done { display: none; text-align: center; color: var(--slate); font-weight: 500; font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 32); letter-spacing: var(--ls); }
body[data-form="done"] .fm__form { display: none; }
body[data-form="done"] .fm__done { display: block; }
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  .fm__card { left: 50%; right: auto; width: calc(var(--u) * 848); transform: translate(-50%, -50%); padding: calc(var(--u) * 16); }
  .fm__fields { gap: calc(var(--u) * 24); }
  .fm__field { height: calc(var(--u) * 104); border-radius: calc(var(--u) * 56); font-size: max(16px, calc(var(--u) * 40)); line-height: calc(var(--u) * 56); padding: 0 calc(var(--u) * 48); }
  textarea.fm__field { height: calc(var(--u) * 328); border-radius: calc(var(--u) * 56); padding: calc(var(--u) * 24) calc(var(--u) * 48); }
  .fm__send { height: calc(var(--u) * 104); margin-top: calc(var(--u) * 72); border-radius: calc(var(--u) * 56); font-size: calc(var(--u) * 40); border-width: calc(var(--u) * 3); }
  .fm__error { font-size: calc(var(--u) * 28); margin-top: calc(var(--u) * 24); }
  .fm__done { font-size: calc(var(--u) * 44); line-height: calc(var(--u) * 52); }
}

/* ---------- Carousel ---------- */
.car { position: relative; height: 100%; background: #eceae6; }
.car__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.car__track::-webkit-scrollbar { display: none; }
.car__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.car__btn { position: absolute; z-index: 1; top: 50%; width: calc(var(--u) * 48); height: calc(var(--u) * 48); margin-top: calc(var(--u) * -24); display: grid; place-items: center; color: var(--red); }
.car__btn .ic { width: calc(var(--u) * 9); height: calc(var(--u) * 18); stroke-width: calc(var(--u) * 2); }
.car__btn--prev { left: calc(var(--u) * 15); }
.car__btn--next { right: calc(var(--u) * 15); }
.car__btn--prev .ic { transform: rotate(-90deg); width: calc(var(--u) * 18); height: calc(var(--u) * 9); }
.car__btn--next .ic { transform: rotate(90deg); width: calc(var(--u) * 18); height: calc(var(--u) * 9); }
.car__btn .ic-ios { display: none; }
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  .car__btn--prev { left: calc(var(--u) * 60); }
  .car__btn--next { right: calc(var(--u) * 60); }
  .car__btn .ic-chevron { display: none; }
  .car__btn .ic-ios { display: block; width: calc(var(--u) * 23); height: calc(var(--u) * 39); transform: none; stroke-width: 2.5; }
  .car__btn--next .ic-ios { transform: scaleX(-1); }
}

/* ---------- Registry: common page ---------- */
.reg { display: flex; height: calc(var(--vh) * 100); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: #eceae6; }
.reg::-webkit-scrollbar { display: none; }
.reg__item { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.reg--empty { background: #fff; }

/* ---------- Work page ---------- */
/* On phones the caption ends above the menu sign: a free strip is left under the text for it. */
.work__media { position: relative; height: calc(var(--vh) * 100 - var(--u) * 255); }
.work__toggle { display: none; }
.cap { min-height: calc(var(--u) * 255); padding: calc(var(--u) * 26) calc(var(--u) * 32) calc(var(--u) * 26) calc(var(--u) * 30); }
.cap__title, .cap__id { font-size: calc(var(--u) * 32); line-height: calc(var(--u) * 40); letter-spacing: var(--ls-name); }
.cap__id { margin-top: calc(var(--u) * 3); }
.cap__form { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 40); letter-spacing: var(--ls-name); color: var(--grey); }

/* Role / Roles. A role opens downwards and takes half a screen (Max, 10.10.2026).
   Phone: the names stand on the first screen, in the strip of the menu sign, left and right of it ("the roles begin on the screen,
   so that there is no need to scroll down"). The opened role shows its photos under the strip, half a screen high ("the photos of
   the roles are smaller"); the page moves down by itself until the caption stands at the top, so caption, names, photos and
   the free strip of the menu sign make one screen. The script sets the exact height of the photos; 50% is the fallback. */
.work--secs .work__first { display: flex; flex-direction: column; height: calc(var(--vh) * 100 - var(--u) * 98); }
.work--secs .work__media { flex: 1 1 0; height: auto; min-height: 0; }
.work--secs .cap { flex: none; min-height: 0; padding-bottom: 0; }
.secs { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 56); }
.sec { display: contents; }
.sec__title { grid-row: 1; grid-column: 1; min-width: 0; height: calc(var(--u) * 98); padding-bottom: calc(var(--u) * 26); }
.sec:nth-child(2) .sec__title { grid-column: 2; }
.sec__head {
  display: flex; align-items: center; gap: calc(var(--u) * 12); width: 100%; height: 100%; padding: 0 0 0 calc(var(--u) * 30); text-align: left;
  font-size: calc(var(--u) * 32); line-height: calc(var(--u) * 40); letter-spacing: var(--ls-name);
}
.sec:nth-child(2) .sec__head { justify-content: flex-end; padding: 0 calc(var(--u) * 30) 0 0; }
.sec__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The arrow points down while the role is closed: that is where it opens. */
.sec__head .ic { flex: none; width: calc(var(--u) * 26); height: calc(var(--u) * 13); color: var(--red); stroke-width: calc(var(--u) * 2); transform: rotate(180deg); transition: transform .25s ease, opacity .15s ease; }
.sec__head[aria-expanded="true"] .ic { transform: none; }
.sec__body { grid-column: 1 / -1; grid-row: 2; height: calc(var(--vh) * 50); margin-bottom: calc(var(--u) * 110); scroll-margin-bottom: calc(var(--u) * 110); }
.sec:nth-child(2) .sec__body { grid-row: 3; }
/* Without scripts nothing can be opened, so the photos of the roles are simply shown. */
html:not(.js) .sec__body[hidden] { display: block; }
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  .work__media, .work--secs .work__media { flex: none; height: 100vh; }
  .work--secs .work__first { display: block; height: auto; }
  .cap, .work--secs .cap { min-height: calc(var(--u) * 458); padding: calc(var(--u) * 41) calc(var(--u) * 260) calc(var(--u) * 41) calc(var(--u) * 64); background: #fff; }
  /* With scripts on, the photo fills the screen and the arrow raises the caption over it, as on the blanks. */
  .js .work__first, .js .work--secs .work__first { position: relative; height: 100vh; overflow: hidden; }
  .js .cap {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; visibility: hidden; transform: translateY(100%);
    transition: transform .5s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .5s;
  }
  .js .work__first.is-open .cap { visibility: visible; transform: none; transition-delay: 0s; }
  .js .work__toggle {
    display: grid; place-items: center; position: absolute; z-index: 3; right: calc(var(--u) * 58.5); bottom: calc(var(--u) * 20);
    width: calc(var(--u) * 120); height: calc(var(--u) * 120); color: var(--red); transition: opacity .15s ease;
  }
  .work__toggle .ic { width: calc(var(--u) * 87.7); height: calc(var(--u) * 43.7); stroke-width: calc(var(--u) * 5); transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
  .work__first.is-open .work__toggle .ic { transform: rotate(180deg); }
  .cap__title, .cap__id { font-size: calc(var(--u) * 96); line-height: calc(var(--u) * 116); }
  .cap__id { margin-top: calc(var(--u) * 9); }
  .cap__form { margin-top: calc(var(--u) * 19); font-size: calc(var(--u) * 72); line-height: calc(var(--u) * 87); }
  /* Computer. The roles stand in one line, two to a row; each opens its photos beneath itself, on its half of the screen
     (Max, 10.10.2026: a whole screen for a role is too much, half is enough). A row and its photos fill one screen.
     There is no line between the caption and the roles (Max, 10.10.2026: "what is that line"). */
  .secs { column-gap: 0; align-items: start; }
  .sec { display: block; min-width: 0; }
  .sec__title, .sec:nth-child(2) .sec__title { height: auto; padding: 0; }
  /* The arrow stands next to the word (Max, 10.10.2026), not in the middle of the row where the menu sign passes.
     Short names share one column, so the arrows of Role and Roles line up; a longer name pushes its arrow on. */
  .sec__head, .sec:nth-child(2) .sec__head {
    display: grid; grid-template-columns: minmax(calc(var(--u) * 250), max-content) max-content; column-gap: calc(var(--u) * 56); align-items: center; justify-content: start;
    height: calc(var(--u) * 151); padding: 0 0 0 calc(var(--u) * 65); font-size: calc(var(--u) * 96); line-height: calc(var(--u) * 151);
  }
  .sec__head .ic { width: calc(var(--u) * 87.7); height: calc(var(--u) * 43.7); stroke-width: calc(var(--u) * 5); }
  .sec__body, .sec:nth-child(2) .sec__body { height: calc(100vh - var(--u) * 151); margin-bottom: 0; scroll-margin-bottom: 0; }
  /* When the caption is raised, the first screen gives up one row of height, so the line of roles shows under it. */
  .js .work--secs .work__first { transition: height .5s cubic-bezier(.4, 0, .2, 1); }
  .js .work--secs .work__first.is-open { height: calc(100vh - var(--u) * 151); }
  /* Until the caption is raised the roles are hidden: nothing shows under the photo and the page does not scroll down to them
     (Max, 10.10.2026: "they must be hidden"). On closing they stay for the half second the photo takes to grow back. */
  .js .work--secs .secs { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 0s linear .5s, visibility 0s linear .5s; }
  .js .work--secs .work__first.is-open ~ .secs { max-height: 200vh; visibility: visible; transition-delay: 0s; }
}

/* ---------- Profile ---------- */
.pf__head { padding: calc(var(--u) * 26) calc(var(--u) * 32) calc(var(--u) * 26) calc(var(--u) * 30); }
.pf__id { font-size: calc(var(--u) * 32); line-height: calc(var(--u) * 40); letter-spacing: var(--ls-name); }
.tile { position: relative; display: block; aspect-ratio: 390 / 632; max-height: calc(var(--vh) * 100); overflow: hidden; background: #eceae6; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .92) 100%); pointer-events: none; }
.tile picture { position: absolute; inset: 0; }
.tile__name { position: absolute; z-index: 1; left: calc(var(--u) * 30); bottom: calc(var(--u) * 26); font-size: calc(var(--u) * 32); line-height: calc(var(--u) * 40); letter-spacing: var(--ls-name); }
.tile__arrow { position: absolute; z-index: 1; right: calc(var(--u) * 33.6); bottom: calc(var(--u) * 27.8); width: calc(var(--u) * 16.4); height: calc(var(--u) * 32.9); color: var(--red); }
.tile__arrow .ic { width: calc(var(--u) * 32.9); height: calc(var(--u) * 16.4); stroke-width: calc(var(--u) * 2); transform: translate(-25%, 50%) rotate(90deg); }
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  .pf__head { padding: calc(var(--u) * 32) 0 calc(var(--u) * 40) calc(var(--u) * 64); }
  .pf__id { font-size: calc(var(--u) * 96); line-height: 1.4; }
  .pf__grid { display: grid; grid-template-columns: 1fr 1fr; }
  .tile { aspect-ratio: 960 / 779; }
  .tile__name { left: calc(var(--u) * 64); bottom: calc(var(--u) * 40); font-size: calc(var(--u) * 96); line-height: 1.4; }
  .tile__arrow { right: calc(var(--u) * 88); bottom: calc(var(--u) * 63); width: calc(var(--u) * 44); height: calc(var(--u) * 88); }
  .tile__arrow .ic { width: calc(var(--u) * 88); height: calc(var(--u) * 44); stroke-width: calc(var(--u) * 5); }
}

/* ---------- Not found ---------- */
.nf { min-height: calc(var(--vh) * 100); display: grid; place-items: center; text-align: center; padding: calc(var(--u) * 30); font-size: calc(var(--u) * 24); line-height: 1.4; }
.nf a { color: var(--red); }
@media (min-width: 768px) and (min-aspect-ratio: 1/1) { .nf { font-size: calc(var(--u) * 44); } }

/* ---------- Cookie banner (Complianz) ----------
   Complianz keeps the consent logic; the theme only draws its banner as one more card of the site.
   The card takes the place of the menu card, above the menu sign, and lies under the menu veil. */
#cmplz-manage-consent { display: none !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner {
  --cb-pad-y: calc(var(--u) * 24); --cb-pad-x: calc(var(--u) * 16);
  top: auto; left: calc(var(--u) * 16); right: calc(var(--u) * 16); bottom: calc(var(--u) * 124);
  width: auto; min-width: 0; max-width: none; height: auto; max-height: calc(var(--vh) * 100 - var(--u) * 140); overflow-y: auto;
  transform: none; z-index: 49; zoom: 1 !important;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; grid-gap: 0;
  padding: var(--cb-pad-y) var(--cb-pad-x) !important; border: 0; border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow); transition: none;
  font-family: inherit; color: var(--ink); scrollbar-width: thin; scrollbar-color: #c9cbcf transparent;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner:hover { box-shadow: var(--shadow); }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-dismissed { display: none; }
body.is-info #cmplz-cookiebanner-container .cmplz-cookiebanner { z-index: 52; }
body.is-info[data-ovl="menu"] #cmplz-cookiebanner-container .cmplz-cookiebanner { visibility: hidden; }
#cmplz-cookiebanner-container .cmplz-cookiebanner > * { grid-column: 1; min-width: 0; }
#cmplz-cookiebanner-container .cmplz-header {
  position: absolute; display: block; width: 1px; height: 1px; max-height: none; margin: -1px !important; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
}
#cmplz-cookiebanner-container .cmplz-close, #cmplz-cookiebanner-container .cmplz-logo, #cmplz-cookiebanner-container .cmplz-divider { display: none; }
#cmplz-cookiebanner-container .cmplz-body { width: auto; min-width: 0; max-height: none; margin: 0 !important; overflow: visible; }
#cmplz-cookiebanner-container .cmplz-message {
  width: auto; margin: 0; font-weight: 500; font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 24); letter-spacing: var(--ls); color: var(--ink);
}
#cmplz-cookiebanner-container .cmplz-message p { margin: 0; }
#cmplz-cookiebanner-container .cmplz-message a, #cmplz-cookiebanner-container .cmplz-links .cmplz-link { color: var(--red); text-decoration: none; }
#cmplz-cookiebanner-container .cmplz-buttons { flex-direction: row; flex-wrap: wrap; gap: calc(var(--u) * 12) !important; margin-top: calc(var(--u) * 24); }
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn {
  flex: 1 1 0; width: auto; min-width: 0; height: calc(var(--u) * 56) !important; min-height: 0 !important; padding: 0 calc(var(--u) * 12) !important; zoom: 1 !important;
  border: calc(var(--u) * 2) solid var(--slate); border-radius: calc(var(--u) * 28); background: #fff; color: var(--slate);
  font-family: inherit; font-weight: 500; font-size: calc(var(--u) * 20) !important; line-height: 1 !important; letter-spacing: var(--ls); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept { background: var(--slate); color: #fff; }
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences { flex: 1 0 100%; }
#cmplz-cookiebanner-container .cmplz-links { margin-top: calc(var(--u) * 16); zoom: 1 !important; }
#cmplz-cookiebanner-container .cmplz-links ul { gap: calc(var(--u) * 16); flex-wrap: wrap; }
/* An unused link (privacy statement, imprint) leaves an empty item; without this it still takes a gap and pushes the one real link off centre. */
#cmplz-cookiebanner-container .cmplz-links li:has(> .cmplz-hidden) { display: none; }
#cmplz-cookiebanner-container .cmplz-links .cmplz-link { font-weight: 500; font-size: calc(var(--u) * 12); line-height: calc(var(--u) * 16); letter-spacing: var(--ls); }
#cmplz-cookiebanner-container .cmplz-categories { width: auto; margin-top: calc(var(--u) * 16); }
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category { margin: 0; background: none; border-top: 1px solid var(--line); }
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category:last-child { border-bottom: 1px solid var(--line); }
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-category-header {
  grid-template-columns: 1fr auto calc(var(--u) * 20) !important; gap: calc(var(--u) * 12); padding: calc(var(--u) * 14) 0;
}
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title { font-weight: 500; font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 24); letter-spacing: var(--ls); color: var(--ink); }
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active { font-weight: 500; font-size: calc(var(--u) * 12); color: var(--grey); }
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle { color: var(--red); }
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle :is(.cmplz-icon, svg) { display: block; width: calc(var(--u) * 16); height: calc(var(--u) * 16); fill: currentColor; }
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-description { padding: 0 0 calc(var(--u) * 14); font-size: calc(var(--u) * 12); line-height: calc(var(--u) * 18); color: var(--slate); }
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox { --sw: calc(var(--u) * 24); position: relative; display: flex; align-items: center; margin: 0; padding: 0; }
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label { position: relative; display: block; width: calc(var(--sw) * 1.8); height: var(--sw); margin: 0; padding: 0; }
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::before, body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::after { content: ""; position: absolute; display: block; box-sizing: border-box; transition: background-color .3s, left .3s; }
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active :is(.cmplz-label, input) { display: none; }
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::before { left: 0; top: 0; width: 100%; height: 100%; padding: 0; border-radius: var(--sw); background-color: var(--search); }
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::after { left: calc(var(--sw) * .125); top: calc(var(--sw) * .125); width: calc(var(--sw) * .75); height: calc(var(--sw) * .75); border-radius: 50%; background: #fff; }
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::after { left: calc(var(--sw) * .925); }
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before { background-color: var(--slate); }
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus-visible + .cmplz-label::before { box-shadow: 0 0 0 2px var(--red); }
/* The Cookie Policy written by Complianz reads like the other Info texts. */
.info__body #cmplz-document { max-width: none; font-size: inherit; }
.info__body #cmplz-document :is(p, li, td) { font-size: inherit; }
.info__body #cmplz-document :is(h2, h3, h4, h5) { padding: 0; font-weight: 600; font-size: calc(var(--u) * 16); line-height: 1.2; letter-spacing: var(--ls); text-align: center; margin: calc(var(--u) * 40) 0 calc(var(--u) * 24); }
.info__body #cmplz-document h2 { text-transform: uppercase; }
.info__body #cmplz-document a { color: var(--red); text-decoration: none; }
.info__body #cmplz-document a[target="_blank"]::after { content: none; }
.info__body #cmplz-document ul { margin: 0 0 calc(var(--u) * 24) calc(var(--u) * 20); list-style: disc; }
.info__body #cmplz-manage-consent-container .cmplz-categories { margin: 0 0 calc(var(--u) * 24); text-align: left; }
.info__body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header { background: none; }
.info__body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category { background: none; margin: 0; }
/* While the banner is up, the Info text can still be scrolled clear of it. */
body.is-info:has(.cmplz-cookiebanner.cmplz-show) .info__scroll { padding-bottom: calc(var(--u) * 232); }
.cmplz-manage-consent.lnk { display: inline; font: inherit; color: var(--red); }
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner {
    --cb-pad-y: calc(var(--u) * 40); --cb-pad-x: calc(var(--u) * 56);
    left: calc(var(--u) * 72); right: calc(var(--u) * 72); bottom: calc(var(--u) * 276); max-height: calc(100vh - var(--u) * 348);
    grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(var(--u) * 72); align-items: center;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner > .cmplz-buttons { grid-column: 2; grid-row: 1 / span 4; align-self: center; width: calc(var(--u) * 552); margin-top: 0; gap: calc(var(--u) * 24) !important; }
  #cmplz-cookiebanner-container .cmplz-message { font-size: calc(var(--u) * 36); line-height: calc(var(--u) * 48); letter-spacing: var(--ls); }
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn {
    flex: 1 1 calc(var(--u) * 264); height: calc(var(--u) * 96) !important; padding: 0 calc(var(--u) * 40) !important; border-width: calc(var(--u) * 3); border-radius: calc(var(--u) * 48); font-size: calc(var(--u) * 36) !important;
  }
  #cmplz-cookiebanner-container .cmplz-links { margin-top: calc(var(--u) * 16); }
  #cmplz-cookiebanner-container .cmplz-links, #cmplz-cookiebanner-container .cmplz-links ul { justify-content: flex-start; }
  #cmplz-cookiebanner-container .cmplz-links ul { gap: calc(var(--u) * 32); }
  body.is-info #cmplz-cookiebanner-container .cmplz-cookiebanner { bottom: calc(var(--u) * 232); }
  #cmplz-cookiebanner-container .cmplz-links .cmplz-link { font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 32); }
  #cmplz-cookiebanner-container .cmplz-categories { margin-top: calc(var(--u) * 32); }
  body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-category-header { grid-template-columns: 1fr auto calc(var(--u) * 40) !important; gap: calc(var(--u) * 24); padding: calc(var(--u) * 24) 0; }
  body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title { font-size: calc(var(--u) * 32); line-height: calc(var(--u) * 40); }
  body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active { font-size: calc(var(--u) * 24); }
  body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox { --sw: calc(var(--u) * 40); }
  body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle :is(.cmplz-icon, svg) { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
  body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-description { padding-bottom: calc(var(--u) * 24); font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 34); }
  .info__body #cmplz-document :is(h2, h3, h4, h5) { font-size: calc(var(--u) * 32); margin: calc(var(--u) * 80) 0 calc(var(--u) * 48); }
  .info__body #cmplz-document ul { margin: 0 0 calc(var(--u) * 56) calc(var(--u) * 48); }
  .info__body #cmplz-manage-consent-container .cmplz-categories { margin-bottom: calc(var(--u) * 56); }
  body.is-info:has(.cmplz-cookiebanner.cmplz-show) .info__scroll { padding-bottom: calc(var(--u) * 200); }
}

/* ---------- Hit areas, smallest type, long names ---------- */
/* A control answers to a touch on at least 44 px, even where its drawing is smaller. */
.cats a, .tabs a, .idsearch button { position: relative; }
.ovl__toggle::after, .blank__toggle::after, .work__toggle::after, .car__btn::after, .idsearch button::after, .ovl__mark::after, .cats a::after, .tabs a::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
}
.lnk { padding: calc(var(--u) * 10) calc(var(--u) * 6); margin: calc(var(--u) * -10) calc(var(--u) * -6); }
.idsearch input { align-self: stretch; }
/* Nothing is set smaller than 12 px, however small the screen. */
.fm__error { font-size: max(12px, calc(var(--u) * 14)); }
#cmplz-cookiebanner-container .cmplz-links .cmplz-link { font-size: max(12px, calc(var(--u) * 12)); }
body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active, body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-description { font-size: max(12px, calc(var(--u) * 12)); }
/* A long ID or name wraps instead of running off the screen. */
.pf__id, .cap__title, .cap__id, .tile__name, .blank__value, .pb__value { overflow-wrap: anywhere; }
.tile__name { max-width: calc(100% - var(--u) * 100); }
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  .fm__error { font-size: max(12px, calc(var(--u) * 28)); }
  .info__body h2, .info__body h3, .info__body #cmplz-document :is(h2, h3, h4, h5) { font-size: max(12px, calc(var(--u) * 32)); }
  #cmplz-cookiebanner-container .cmplz-links .cmplz-link { font-size: max(12px, calc(var(--u) * 24)); }
  body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title { font-size: max(12px, calc(var(--u) * 32)); }
  body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active, body :is(#cmplz-cookiebanner-container, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-description { font-size: max(12px, calc(var(--u) * 24)); }
  .tile__name { max-width: calc(100% - var(--u) * 260); }
}

/* ---------- Response to the mouse (computers only; a touch screen has no hover) ---------- */
@media (hover: hover) and (pointer: fine) {
  .cats a, .tabs a, .cap__id a, .tile__name { transition: color .15s ease; }
  .cats a:hover, .tabs a:hover, .cap__id a:hover, .tile:hover .tile__name { color: var(--red); }
  .lnk:hover, .info__body a:hover, .lg summary:hover, #cmplz-cookiebanner-container .cmplz-links .cmplz-link:hover {
    text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: from-font;
  }
  .ovl__toggle, .blank__toggle, .car__btn, .idsearch button, .ovl__mark, .tile__arrow,
  #cmplz-cookiebanner-container .cmplz-category-toggle { transition: opacity .15s ease; }
  .ovl__toggle:hover, .blank__toggle:hover, .work__toggle:hover, .car__btn:hover, .sec__head:hover .ic, .idsearch button:hover, .ovl__mark:hover,
  #cmplz-cookiebanner-container .cmplz-category-toggle:hover { opacity: .6; }
  .tile__arrow { transition: transform .2s ease; }
  .tile:hover .tile__arrow { transform: translateX(calc(var(--u) * 6)); }
  .fm__send.is-ready:hover, #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept:hover { background: #2c323c; border-color: #2c323c; }
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn { transition: background .15s ease, border-color .15s ease; }
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn:not(.cmplz-accept):hover { background: var(--field); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}