/*
 * DEPO front — default bundle (01 §6.2, §6.3, §6.8).
 *
 * Layer order is declared once: page styles (css/pages/<type>.css, all inside @layer page and
 * scoped by [data-page="<type>"]) always win over these defaults, whatever order the files load in.
 * Look: the live DEPO site and its site template (admin → Templates): ground #18171a under the
 * green light of the shared background, ink #f2f0ea, DEPO yellow #ffb500, green #469a58; Lato for
 * text, DEPO (the house font, formerly Lazurski) for the brand voice, Schibsted Grotesk for display headings, Poppins for buttons.
 * Header colours and sizes are variables of /theme.css (site template), with the same defaults here.
 */
@layer core, default, page;

@font-face { font-family: "Lato"; font-weight: 300; font-style: normal; font-display: swap; src: url("/demo51/fonts/lato-300.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url("/demo51/fonts/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url("/demo51/fonts/lato-700.woff2") format("woff2"); }
@font-face { font-family: "DEPO"; font-weight: 400; font-style: normal; font-display: swap; src: url("/demo51/fonts/depo-400.woff") format("woff"); } /* the woff2 copies fail OTS (cmap language id) in Chrome */
@font-face { font-family: "DEPO"; font-weight: 700; font-style: normal; font-display: swap; src: url("/demo51/fonts/depo-700.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("/demo51/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("/demo51/fonts/poppins-600.woff2") format("woff2"); }
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/demo51/fonts/schibsted-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/demo51/fonts/schibsted-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer default {
  :root {
    --dp-ground: #18171a;
    --dp-paper: #232227;
    --dp-raise: #2c2b31;
    --dp-ink: #f2f0ea;
    --dp-soft: #b9b6ae;
    --dp-faint: #7d7a73;
    --dp-deep: #0f2a1a;
    --dp-green: #469a58;
    --dp-green-dark: #1f5130;
    --dp-yellow: #ffb500;
    --dp-error: #ff6b5e;
    --dp-line: rgb(255 255 255 / 0.12);
    /* Font roles of the design library (/theme.css: --dp-font-body, -heading, -accent), never its font
       slugs, so renaming a font in the admin keeps the site; the local faces above are the fallback. */
    --dp-font: var(--dp-font-body, "Lato", "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif);
    --dp-font-display: "Schibsted Grotesk", "Lato", system-ui, sans-serif;
    --dp-font-brand: var(--dp-font-heading, "DEPO", Georgia, serif);
    --dp-font-ui: var(--dp-font-accent, "Poppins", "Lato", system-ui, sans-serif);
    --dp-edge: clamp(16px, 3vw, 48px);
    --dp-max: 1440px;
    --dp-ease: cubic-bezier(.76, 0, .18, 1);
    --dp-accent: var(--dp-green);
    --dp-radius: 14px;
    /* header (site template → /theme.css overrides these) */
    --hdr-bg: #18171a;
    --hdr-h: 70px;
    --hdr-menu-font: var(--dp-font);
    --hdr-menu-size: 16px;
    --hdr-menu-gap: 30px;
    --hdr-menu: rgb(255 255 255 / 0.5);
    --hdr-menu-hover: #fff;
    --hdr-menu-active: #fff;
    --hdr-menu-accent: #469a58;
    --hdr-spacer-font: var(--dp-font-brand);
    --hdr-spacer-size: 14px;
    --hdr-spacer: #ffb500;
    --hdr-icon-size: 28px;
    --hdr-icon-gap: 30px;
    --hdr-icon: rgb(255 255 255 / 0.2);
    --hdr-icon-hover: #fff;
    --hdr-badge-bg: #ffb500;
    --hdr-badge: #18171a;
    --dp-hdr: var(--hdr-h);
    color-scheme: dark;
  }
  @media (max-width: 1199px) { :root { --dp-hdr: 50px; } }

  /* ── base and the page frame (01 §6.8) ───────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--dp-ground); }
  /* keeps the scrollbar while both pages are frozen, so the width does not jump */
  html.is-moving.has-scroll { overflow-y: scroll; }
  body {
    min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip;
    background: transparent; color: var(--dp-ink);
    font: 400 17px/1.6 var(--dp-font); -webkit-font-smoothing: antialiased;
  }
  /* 100% of the width, not 100vw: 100vw includes the scrollbar and makes a horizontal scroll */
  /* no z-index on #page: frozen slots (fixed layers during a transition) must stack with the header */
  #page { flex: 1 0 auto; width: 100%; position: relative; outline: none; }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; }
  button, input, textarea, select { font: inherit; color: inherit; }
  h1, h2, h3 { text-wrap: balance; }
  p { text-wrap: pretty; }
  :focus-visible { outline: 3px solid var(--dp-yellow); outline-offset: 3px; }
  ::selection { background: var(--dp-yellow); color: #18171a; }

  .dp-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .dp-skip {
    position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; border-radius: 6px;
    background: var(--dp-yellow); color: #18171a; font-weight: 700; transform: translateY(-200%);
  }
  .dp-skip:focus { transform: none; }
  .dp-wrap { width: 100%; max-width: var(--dp-max); margin: 0 auto; padding: 0 var(--dp-edge); }
  .dp-wrap--text { max-width: calc(760px + 2 * var(--dp-edge)); }
  .dp-icon { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; }
  .dp-kicker { margin: 0 0 14px; font: 400 15px/1.2 var(--dp-font-brand); letter-spacing: 0.04em; color: var(--dp-yellow); }
  .dp-kicker a { text-decoration: none; }
  .dp-kicker a:hover { text-decoration: underline; }
  .dp-muted { color: var(--dp-soft); }
  .dp-empty { padding: 48px 0; color: var(--dp-soft); text-align: center; }

  /* ── buttons, links, chips, fields ───────────────────────────────────────────────────── */
  .dp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 26px;
    border: 0; border-radius: 999px; background: var(--dp-ink); color: #18171a;
    font: 600 15px/1 var(--dp-font-ui); text-decoration: none; cursor: pointer; touch-action: manipulation; white-space: nowrap;
    transition: background-color 200ms ease, color 200ms ease, transform 150ms ease, box-shadow 200ms ease;
  }
  .dp-btn:hover { background: #fff; }
  .dp-btn:active { transform: scale(0.97); }
  .dp-btn--accent { background: var(--dp-yellow); color: #18171a; }
  .dp-btn--accent:hover { background: #ffc94d; }
  .dp-btn--green { background: var(--dp-green); color: #fff; }
  .dp-btn--green:hover { background: #55b268; }
  .dp-btn--ghost, .dp-btn--line { background: transparent; color: var(--dp-ink); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); }
  .dp-btn--ghost:hover, .dp-btn--line:hover { background: rgb(255 255 255 / 0.08); }
  .dp-btn--line[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--dp-yellow); color: var(--dp-yellow); }
  /* site template buttons of the header (depo0 "Sign up" grey pill, "Log in" green glow) */
  .dp-btn--pill { min-height: 42px; padding: 0 26px; background: linear-gradient(180deg, #4a4950, #36353b); color: #f2f0ea; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12); }
  .dp-btn--pill:hover { background: linear-gradient(180deg, #55545b, #3e3d44); }
  .dp-btn--glow { min-height: 42px; padding: 0 26px; background: radial-gradient(120% 140% at 50% 0%, #2f6b3f, #163a22); color: #fff; box-shadow: 0 0 0 1px rgb(70 154 88 / 0.55), 0 0 22px rgb(70 154 88 / 0.25); }
  .dp-btn--glow:hover { box-shadow: 0 0 0 1px rgb(70 154 88 / 0.9), 0 0 30px rgb(70 154 88 / 0.45); }
  .dp-btn--sm { min-height: 38px; padding: 0 18px; font-size: 14px; }
  .dp-btn[disabled], .dp-btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
  .dp-link {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: none;
    background: linear-gradient(var(--dp-yellow), var(--dp-yellow)) 0 calc(100% - 8px) / 100% 2px no-repeat;
  }
  .dp-link:hover { color: var(--dp-yellow); }
  .dp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
  .dp-chip {
    display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px;
    background: rgb(255 255 255 / 0.06); color: var(--dp-ink); font: 500 14px/1 var(--dp-font-ui); text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease;
  }
  a.dp-chip:hover { background: rgb(255 255 255 / 0.14); }
  .dp-chip[aria-current], .dp-chip[aria-pressed="true"] { background: var(--dp-ink); color: #18171a; }
  button.dp-chip { border: 0; cursor: pointer; }
  [hidden] { display: none !important; }
  .dp-chip--static { min-height: 32px; font-size: 13px; color: var(--dp-soft); }
  .dp-field { display: grid; gap: 6px; font-size: 14px; color: var(--dp-soft); }
  .dp-field input, .dp-field textarea, .dp-field select {
    width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--dp-line); border-radius: 10px;
    background: rgb(255 255 255 / 0.04); color: var(--dp-ink); font-size: 16px;
  }
  .dp-field textarea { resize: vertical; }
  .dp-field input:focus-visible, .dp-field textarea:focus-visible { outline-offset: 0; border-color: var(--dp-yellow); }
  .dp-badge {
    position: absolute; top: -4px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--hdr-badge-bg); color: var(--hdr-badge); font: 700 11px/18px var(--dp-font); text-align: center;
  }
  .dp-badge[hidden] { display: none; }
  /* Placeholder of an image core sends without a URL yet (fileId only) */
  .dp-ph {
    display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; border-radius: inherit;
    background: radial-gradient(120% 90% at 30% 20%, #2f3a33, #1d1c20 70%); color: rgb(255 255 255 / 0.25);
  }
  .dp-ph[data-ratio="tall"] { aspect-ratio: 4 / 5; }
  .dp-ph[data-tone="1"] { background: radial-gradient(120% 90% at 70% 15%, #3a3326, #1d1c20 70%); }
  .dp-ph[data-tone="2"] { background: radial-gradient(120% 90% at 20% 80%, #263a36, #1d1c20 70%); }
  .dp-ph[data-tone="3"] { background: radial-gradient(120% 90% at 80% 70%, #35263a, #1d1c20 70%); }
  .dp-ph[data-tone="4"] { background: radial-gradient(120% 90% at 50% 0%, #2a3a26, #1d1c20 70%); }
  .dp-ph__icon { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.5; }

  /* ── header (02 §0.1), as on dev0 (old css/header.css): sticky, hides on the way down ───── */
  .dp-header {
    position: sticky; top: 0; z-index: 40; height: var(--dp-hdr); flex: none;
    background: var(--hdr-bg); color: #fff;
    transition: transform 320ms var(--dp-ease);
  }
  .dp-header.is-hidden { transform: translateY(-100%); }
  .dp-header__inner { display: flex; align-items: center; gap: var(--hdr-icon-gap); height: 100%; padding: 0 15px; }
  .dp-header__brand { display: flex; align-items: center; flex: none; margin-right: max(0px, calc(58px - var(--hdr-icon-gap))); }
  /* /logo.svg has a square 1000×1000 viewBox with the eye in its middle band (y 170–851): the box is
     cut to the eye's proportions and the picture is cropped to it, the file stays as it is. */
  .dp-header__brand img { width: auto; height: calc(var(--dp-hdr) - 18px); max-height: 54px; aspect-ratio: 1000 / 690; object-fit: cover; object-position: 50% 51%; }
  /* desktop: one row — the nav's parts are items of the header row (display: contents) */
  .dp-header__nav { display: contents; }
  .dp-header__links { display: flex; align-items: center; gap: var(--hdr-menu-gap); min-width: 0; }
  .dp-header__link {
    display: inline-flex; align-items: center; gap: 8px; padding: 0;
    font: var(--hdr-menu-font-weight, 400) var(--hdr-menu-size)/1.2 var(--hdr-menu-font); color: var(--hdr-menu); text-decoration: none; white-space: nowrap;
    transition: color 200ms ease;
  }
  .dp-header__link .dp-icon { display: none; }
  .dp-header__link:hover, .dp-header__link:focus-visible { color: var(--hdr-menu-hover); }
  .dp-header__link[aria-current] { color: var(--hdr-menu-active); }
  .dp-header__link.is-accent { color: var(--hdr-menu-accent); }
  .dp-header__link.is-accent:hover, .dp-header__link.is-accent[aria-current] { color: var(--hdr-menu-accent); filter: brightness(1.25); }
  /* the free space: all the room that is left (the search opens over it) */
  .dp-header__space { flex: 1 1 0; min-width: 0; }
  .dp-header__tools { display: flex; align-items: center; gap: var(--hdr-icon-gap); flex: none; }
  .dp-header__guest { display: flex; align-items: center; gap: var(--hdr-icon-gap); }
  .dp-header__text-btn {
    display: inline-flex; align-items: center; gap: 8px; color: var(--hdr-menu); text-decoration: none;
    font: 400 var(--hdr-menu-size)/1.2 var(--hdr-menu-font); white-space: nowrap; transition: color 200ms ease;
  }
  .dp-header__text-btn:hover, .dp-header__text-btn:focus-visible { color: var(--hdr-menu-hover); }
  .dp-header__text-btn .dp-icon { width: 18px; height: 18px; }
  .dp-header__pill {
    display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 18px;
    border: 1px solid var(--hdr-pill, #469a58); border-radius: 50px; background: var(--hdr-pill, #469a58); color: #fff; text-decoration: none;
    font: var(--hdr-pill-font-weight, 400) 14px/1 var(--hdr-pill-font, var(--dp-font)); text-transform: uppercase; white-space: nowrap;
    transition: filter 200ms ease;
  }
  .dp-header__pill:hover, .dp-header__pill:focus-visible { filter: brightness(0.88); }
  .dp-header__member { display: flex; align-items: center; gap: var(--hdr-icon-gap); }
  .dp-header__member[hidden] { display: none; }
  .dp-header__icon { position: relative; display: inline-grid; place-items: center; width: var(--hdr-icon-size); height: var(--hdr-icon-size); color: var(--hdr-icon); transition: color 200ms ease; }
  .dp-header__icon:hover, .dp-header__icon:focus-visible { color: var(--hdr-icon-hover); }
  .dp-header__icon .dp-icon { width: 86%; height: 86%; stroke-width: 1.6; }
  .dp-header__me { display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
  .dp-header__me:focus-visible { outline: 2px solid #469a58; outline-offset: 2px; }
  .dp-header__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #36353b; }

  /* profile menu (old site, legacy-ui.md §3): a panel under the avatar on desktop, opened by click */
  .dp-umenu-wrap { position: relative; }
  .dp-umenu {
    position: absolute; right: 0; top: calc(100% + 16px); z-index: 60; width: min(330px, 100vw - 32px); padding: 35px;
    max-height: calc(100dvh - var(--dp-hdr) - 24px); overflow-y: auto; border-radius: 20px;
    background: rgb(54 56 63 / 0.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: #fff; font: 16px/1.3 var(--dp-font);
  }
  .dp-umenu[hidden] { display: none; }
  .dp-umenu a, .dp-umenu button { color: #fff; text-decoration: none; }
  .dp-umenu a:hover span, .dp-umenu a:hover .dp-umenu__name, .dp-umenu button:hover { text-decoration: underline; }
  .dp-umenu :is(a, button):focus-visible { outline: 2px solid #469a58; outline-offset: 2px; border-radius: 4px; }
  .dp-umenu__head { position: relative; display: grid; gap: 4px; min-height: 46px; margin-bottom: 18px; padding-left: 62px; }
  .dp-umenu__ava { position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #36353b; }
  .dp-umenu__plan { height: 19px; width: auto; }
  .dp-umenu__name { font-weight: 600; overflow-wrap: anywhere; }
  .dp-umenu__mail { font-size: 10px; color: #71717a; overflow-wrap: anywhere; }
  .dp-umenu__mail:empty { display: none; }
  .dp-umenu__box { display: flex; flex-direction: column; gap: 18px; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #d9d9d9; }
  .dp-umenu__list, .dp-umenu__links { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
  .dp-umenu__list a { display: flex; align-items: center; gap: 16px; padding: 4px 0; }
  .dp-umenu__list .dp-icon { width: 20px; height: 20px; stroke-width: 1.5; flex: none; }
  .dp-umenu__links form { margin: 0; }
  .dp-umenu__links button { padding: 4px 0; border: 0; background: none; font: inherit; cursor: pointer; }
  .dp-header__burger { display: none; }
  html:not([data-auth="member"]) .dp-only-member { display: none !important; }
  html[data-auth="member"] .dp-only-guest { display: none !important; }

  /* search (dev0): the magnifier opens into a field over the free space before it, slowly */
  .dp-search { position: relative; flex: none; width: var(--hdr-icon-size); height: var(--hdr-icon-size); margin: 0; }
  .dp-search__pill {
    position: absolute; top: 50%; right: -6px; z-index: 5; display: flex; align-items: center; justify-content: flex-end;
    width: calc(var(--hdr-icon-size) + 12px); height: 40px; overflow: hidden; translate: 0 -50%;
    border: 1px solid transparent; border-radius: 20px; background: transparent;
    transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1), border-color 450ms ease, box-shadow 450ms ease, background-color 450ms ease;
  }
  .dp-search.is-active .dp-search__pill {
    width: var(--search-width, 280px); border-color: color-mix(in srgb, var(--hdr-pill, #469a58) 70%, transparent); background: var(--hdr-bg);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hdr-pill, #469a58) 15%, transparent), 0 8px 24px rgb(0 0 0 / 0.35);
  }
  .dp-search__input {
    flex: 1 1 auto; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
    color: #fff; font: 15px/1 var(--dp-font); opacity: 0; transition: padding 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 250ms ease;
  }
  .dp-search.is-active .dp-search__input { padding: 0 4px 0 16px; opacity: 1; transition-delay: 0s, 180ms; }
  .dp-search__input::placeholder { color: rgb(255 255 255 / 0.45); }
  .dp-search__input::-webkit-search-cancel-button { display: none; }
  .dp-search__btn { display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 0; background: none; color: var(--hdr-icon); cursor: pointer; transition: color 200ms ease; }
  .dp-search__btn:hover, .dp-search__btn:focus-visible, .dp-search.is-active .dp-search__btn { color: var(--hdr-pill, #469a58); }
  .dp-search__btn .dp-icon { width: calc(var(--hdr-icon-size) * 0.78); height: calc(var(--hdr-icon-size) * 0.78); stroke-width: 1.8; }
  /* live results under the field */
  .dp-search__results {
    position: absolute; top: calc(50% + 26px); right: -6px; z-index: 6; width: var(--search-width, 280px); max-height: min(70vh, 520px); overflow-y: auto;
    display: grid; gap: 2px; padding: 8px; border-radius: 14px; background: var(--hdr-bg); box-shadow: 0 20px 50px rgb(0 0 0 / 0.5), 0 0 0 1px var(--dp-line);
  }
  .dp-search__results[hidden] { display: none; }
  .dp-search__item, .dp-search__all {
    display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: #fff; text-decoration: none; outline: none;
  }
  .dp-search__item:hover, .dp-search__item:focus-visible, .dp-search__all:hover, .dp-search__all:focus-visible { background: rgb(255 255 255 / 0.07); }
  .dp-search__img, .dp-search__ico { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
  .dp-search__ico { display: grid; place-items: center; background: rgb(255 255 255 / 0.06); color: var(--hdr-menu); }
  .dp-search__ico .dp-icon { width: 18px; height: 18px; }
  .dp-search__text { display: grid; min-width: 0; }
  .dp-search__text b { overflow: hidden; font: 600 15px/1.3 var(--dp-font); text-overflow: ellipsis; white-space: nowrap; }
  .dp-search__text small { overflow: hidden; color: var(--hdr-menu); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .dp-search__note { margin: 0; padding: 10px; color: var(--hdr-menu); font-size: 14px; }
  .dp-search__all { margin-top: 4px; border-top: 1px solid var(--dp-line); border-radius: 0 0 10px 10px; color: var(--hdr-pill, #469a58); font-size: 14px; }
  .dp-search__all .dp-icon { width: 16px; height: 16px; }

  @media (max-width: 1500px) {
    .dp-header__links { gap: min(var(--hdr-menu-gap), 20px); }
    .dp-header__inner, .dp-header__tools, .dp-header__guest { gap: min(var(--hdr-icon-gap), 20px); }
  }
  @media (max-width: 1366px) {
    .dp-header__brand { margin-right: 0; }
    .dp-header__links { gap: min(var(--hdr-menu-gap), 14px); }
    .dp-header__inner, .dp-header__tools, .dp-header__guest { gap: min(var(--hdr-icon-gap), 14px); }
    .dp-header__link { font-size: min(var(--hdr-menu-size), 15px); }
    .dp-header__pill { padding: 0 12px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dp-search__pill, .dp-search__input { transition: none; }
  }

  /* language menu (header) */
  .dp-lang { position: relative; }
  .dp-lang__btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border-radius: 999px;
    color: var(--hdr-menu); font: 600 13px/1 var(--dp-font-ui); cursor: pointer; list-style: none;
  }
  .dp-lang__btn::-webkit-details-marker { display: none; }
  .dp-lang__btn:hover, .dp-lang[open] .dp-lang__btn { color: #fff; background: rgb(255 255 255 / 0.06); }
  .dp-lang__list {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; display: grid; min-width: 170px; margin: 0; padding: 8px; list-style: none;
    border-radius: 12px; background: #232227; box-shadow: 0 20px 50px rgb(0 0 0 / 0.5), 0 0 0 1px var(--dp-line);
  }
  .dp-lang__list a { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; font-size: 15px; color: var(--dp-soft); }
  .dp-lang__list a:hover { background: rgb(255 255 255 / 0.07); color: #fff; }
  .dp-lang__list a[aria-current] { color: var(--dp-yellow); }

  /* phones (dev0): burger on the left, logo in the middle, the menu opens as a panel under the header */
  @media (max-width: 1199px) {
    .dp-header__inner { justify-content: space-between; }
    .dp-header__brand { position: absolute; left: 50%; translate: -50% 0; margin: 0; }
    .dp-header__brand img { height: min(38px, calc(var(--dp-hdr) - 10px)); max-height: none; }
    .dp-header__burger {
      display: grid; align-content: center; gap: 5px; width: 44px; height: 44px; margin-left: -10px; padding: 0 10px;
      border: 0; background: none; cursor: pointer;
    }
    .dp-header__burger span[aria-hidden] { height: 2px; background: #f1f3ee; transition: transform 300ms var(--dp-ease), opacity 200ms ease; }
    .dp-header__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(7px) rotate(45deg); }
    .dp-header__burger[aria-expanded="true"] span:nth-child(3) { opacity: 0; }
    .dp-header__burger[aria-expanded="true"] span:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }
    .dp-header__nav {
      position: fixed; top: var(--dp-hdr); left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; overflow-y: auto;
      padding: 12px var(--dp-edge) calc(32px + env(safe-area-inset-bottom)); background: var(--hdr-bg); border-top: 1px solid var(--dp-line);
      visibility: hidden; opacity: 0; transform: translateY(-8px);
      transition: opacity 250ms ease, transform 250ms ease, visibility 0s 250ms;
    }
    .dp-header__nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 250ms ease, transform 250ms ease; }
    .dp-header__links { flex-direction: column; align-items: stretch; gap: 0; }
    .dp-header__link { padding: 14px 0; font-size: 22px; color: rgb(255 255 255 / 0.75); border-bottom: 1px solid var(--dp-line); }
    .dp-header__link .dp-icon { display: inline; width: 20px; height: 20px; }
    .dp-header__space { display: none; }
    .dp-header__tools { flex-wrap: wrap; gap: 16px; margin: 12px 0 0; }
    /* the search is a full field in the panel */
    .dp-search { order: -1; flex: 1 0 100%; width: auto; height: 44px; }
    .dp-search__pill { position: static; width: 100%; height: 44px; translate: none; border-color: rgb(255 255 255 / 0.15); }
    .dp-search__input { padding: 0 4px 0 16px; opacity: 1; }
    .dp-search { position: relative; }
    .dp-search__results { top: 50px; left: 0; right: 0; width: auto; }
    .dp-header__guest { width: 100%; gap: 22px; }
    /* the profile menu opens in the flow of the panel, full width (old site) */
    .dp-header__member { flex-wrap: wrap; }
    .dp-umenu-wrap { position: static; }
    .dp-header__member:has(.dp-umenu:not([hidden])) .dp-umenu-wrap { flex-basis: 100%; }
    .dp-umenu { position: static; width: 100%; max-height: none; margin-top: 8px; padding: 20px 15px; background: rgb(54 56 63 / 0.7); }
    .dp-lang__list { position: static; margin-top: 6px; }
  }

  /* ── open pages: slots inside <main id="page"> (01 §6.4.1) ───────────────────────────── */
  /* transparent: the shared background (the base of every page, 02 §7) shows through all pages;
     pages put a translucent surface only where a block needs separation */
  .dp-slot { position: relative; min-height: calc(100dvh - var(--dp-hdr)); background: transparent; }
  .dp-slot[hidden] { display: none !important; }
  /* Pre-rendered and not shown yet: laid out off-screen, skipped by rendering (01 §6.4.3) */
  .dp-slot.is-prepared { position: absolute; inset: 0 0 auto; visibility: hidden; content-visibility: hidden; pointer-events: none; }
  /* During a transition both pages are frozen as viewport-sized layers; .dp-slot__in is shifted
     so the content stays exactly where it was on screen. */
  /* transparent: the shared background stays visible under both pages and keeps moving */
  .dp-slot.is-frozen {
    position: fixed; inset: 0; z-index: 31; overflow: clip; pointer-events: none; min-height: 0;
    transform-origin: 50% 50%; background: transparent;
  }
  .dp-slot.is-frozen.is-entering { z-index: 32; }
  /* deck: the pages are cards while they glide — a light translucent tint shows their edges */
  html[data-fx="deck"] .dp-slot.is-frozen { background: rgb(24 23 26 / 0.35); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
  .dp-slot.is-frozen > .dp-slot__in { will-change: transform; }
  .dp-stage {
    position: fixed; inset: 0; z-index: 30; display: grid; place-items: start center; padding-top: calc(var(--dp-hdr) + 1.2vh);
    background: transparent; pointer-events: none;
  }
  .dp-stage[hidden] { display: none; }
  .dp-stage__label { margin: 0; font: 400 clamp(13px, 1.1vw, 16px)/1 var(--dp-font-brand); letter-spacing: 0.14em; text-transform: uppercase; color: #f1f3ee; }
  .dp-stage__label b { color: var(--dp-yellow); font-variant-numeric: tabular-nums; margin-right: 0.6em; }
  html.is-moving { overflow-anchor: none; }
  /* both pages are fixed layers while they move: the footer would rise into the empty flow and show
     through the transparent pages — it waits hidden until the arriving page is back in the flow */
  html.is-moving .dp-footer { visibility: hidden; }
  html.is-moving #page { min-height: 100dvh; }

  /* A new page's heading rises in (demo19); off for reduced motion below. */
  .dp-slot.is-arriving .dp-rise { animation: dp-rise 900ms cubic-bezier(.2, .8, .2, 1) 120ms both; }
  .dp-slot.is-arriving .dp-rise--late { animation-delay: 280ms; }
  @keyframes dp-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }

  /* ── shared background layer (01 §6.4.1): outside the slots, created once ────────────── */
  /* z-index -1: above the canvas colour, below everything in the flow (slots, footer) */
  .dp-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1600ms ease; }
  .dp-bg.is-on { opacity: 1; }
  /* the drifting photos have their own visibility: the light stays, the photos come and go */
  .dp-bg__photos { position: absolute; inset: 0; opacity: 0; transition: opacity 1600ms ease; }
  .dp-bg__photos.is-on { opacity: 1; }
  .dp-bg__tile {
    position: absolute; top: 0; left: 0; width: var(--w, 160px); border-radius: 4px; opacity: var(--o, 0.3);
    filter: saturate(0.75); box-shadow: 0 20px 50px rgb(0 0 0 / 0.3); will-change: transform;
  }

  /* ── footer (site template) ──────────────────────────────────────────────────────────── */
  .dp-footer {
    position: relative; flex: none; isolation: isolate; overflow: clip; padding: 72px 0 calc(28px + env(safe-area-inset-bottom));
    background: rgb(24 23 26 / 0.94); color: var(--dp-soft); font-size: 15px;
  }
  .dp-footer__floor, .dp-footer__word { display: none; }
  .dp-footer__inner {
    position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px;
    max-width: var(--dp-max); margin: 0 auto; padding: 0 var(--dp-edge);
  }
  .dp-footer__logo { width: 210px; height: auto; margin-bottom: 18px; }
  .dp-footer__note { max-width: 34ch; margin: 0; line-height: 1.7; }
  .dp-footer__title { margin: 0 0 14px; font: 700 13px/1 var(--dp-font); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
  .dp-footer address { font-style: normal; line-height: 1.85; }
  .dp-footer ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .dp-footer a { text-decoration: none; }
  .dp-footer a:hover { color: var(--dp-yellow); }
  .dp-footer a.is-accent { color: var(--dp-green); }
  .dp-footer__cta { display: grid; align-content: start; gap: 22px; justify-items: start; }
  .dp-footer__contact {
    display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 34px; border-radius: 999px;
    background: linear-gradient(180deg, #3d8a4e, #23593a); color: var(--dp-yellow); font: 700 18px/1 var(--dp-font-brand); letter-spacing: 0.06em; text-transform: uppercase;
  }
  .dp-footer__contact:hover { color: #fff !important; }
  .dp-footer__socials { display: flex !important; gap: 14px !important; }
  .dp-footer__socials img { width: 25px; height: 25px; opacity: 0.8; transition: opacity 200ms ease; }
  .dp-footer__socials a:hover img { opacity: 1; }
  .dp-footer__langs { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 600 13px/1 var(--dp-font-ui); }
  .dp-footer__langs a { padding: 6px 0; }
  .dp-footer__langs a[aria-current] { color: var(--dp-yellow); }
  .dp-footer__base {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; max-width: var(--dp-max); margin: 48px auto 0; padding: 20px var(--dp-edge) 0;
    border-top: 1px solid var(--dp-line); font-size: 13px; color: var(--dp-faint);
  }
  .dp-footer__base p { margin: 0; }
  .dp-footer__beta { padding: 6px 16px; border: 1px solid var(--dp-yellow); border-radius: 999px; color: var(--dp-yellow); font: 400 12px/1 var(--dp-font-brand); letter-spacing: 0.1em; text-transform: uppercase; }
  .dp-footer__demo { color: var(--dp-yellow); }
  .dp-footer__status { margin-left: auto !important; }
  .dp-footer__status[data-state="online"] { color: #9fdcae; }
  @media (max-width: 1100px) { .dp-footer__inner { grid-template-columns: 1fr 1fr 1fr; } .dp-footer__lead { grid-column: 1 / -1; } }
  @media (max-width: 640px) { .dp-footer__inner { grid-template-columns: 1fr 1fr; } .dp-footer__contacts, .dp-footer__cta { grid-column: 1 / -1; } .dp-footer__status { margin-left: 0 !important; } }

  /* ── page heads (crumbs/toc/notes: css/pages/page.css), prose ─────────────────────────────────────────────────────── */
  .page-head { padding-top: clamp(48px, 7vw, 104px); }
  .page-head__title {
    margin: 0; font: 900 clamp(40px, 6vw, 88px)/0.95 var(--dp-font-display); letter-spacing: -0.04em; color: var(--dp-ink);
  }
  .page-head__lead { margin: 22px 0 0; max-width: 52ch; font-size: clamp(18px, 1.4vw, 21px); color: var(--dp-soft); }
  .dp-prose { font-size: 18px; line-height: 1.7; }
  .dp-prose > :first-child { margin-top: 0; }
  .dp-prose p, .dp-prose ul, .dp-prose ol { margin: 0 0 1.05em; }
  .dp-prose ul, .dp-prose ol { padding-left: 1.3em; }
  .dp-prose li { margin: 0.25em 0; }
  .dp-prose li::marker { color: var(--dp-yellow); }
  .dp-prose h2, .dp-prose h3, .dp-prose h4 { margin: 1.6em 0 0.6em; font-family: var(--dp-font-display); line-height: 1.1; letter-spacing: -0.02em; }
  .dp-prose h2 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; }
  .dp-prose h3 { font-size: 22px; font-weight: 800; }
  .dp-prose a { color: var(--dp-yellow); text-underline-offset: 3px; }
  .dp-prose b, .dp-prose strong { color: #fff; }
  .blk-section__anchor { text-decoration: none; }
  .blk-section__anchor:hover { color: var(--dp-yellow); }
  .blk--section { scroll-margin-top: calc(var(--dp-hdr) + 16px); }
  .blk--section .blk--prose { padding-top: 0; }
  .blk-divider { margin: 32px 0; border: 0; border-top: 1px solid var(--dp-line); }
  .blk-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 45%), 1fr)); gap: 10px; }
  .blk-gallery__item { margin: 0; border-radius: 10px; overflow: hidden; }
  .blk-gallery__img { width: 100%; height: 100%; object-fit: cover; }
  .blk-columns-rich__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }

  /* ── block presets of the page constructor (02 §8) ───────────────────────────────────── */
  .blk { padding: clamp(36px, 5vw, 80px) 0; }
  .blk + .blk { padding-top: 0; }
  .blk__title { margin: 0 0 20px; font: 800 clamp(26px, 2.6vw, 40px)/1.05 var(--dp-font-display); letter-spacing: -0.025em; }
  .blk--hero { padding-top: clamp(56px, 8vw, 120px); }
  .blk-hero__title { margin: 0; max-width: 18ch; font: 900 clamp(44px, 7vw, 112px)/0.92 var(--dp-font-display); letter-spacing: -0.05em; }
  .blk-hero__lead { margin: 24px 0 0; max-width: 44ch; font-size: clamp(18px, 1.5vw, 22px); color: var(--dp-soft); }
  .blk--text p { margin: 0 0 1.1em; max-width: 66ch; font-size: 18px; line-height: 1.7; }
  .blk--image figure, .blk--quote figure { margin-top: 0; margin-bottom: 0; }
  .blk-image__img { width: 100%; border-radius: 12px; background: var(--dp-paper); }
  .blk--image figcaption, .blk--quote figcaption { margin-top: 12px; font-size: 14px; color: var(--dp-soft); }
  .blk--quote blockquote { margin: 0; padding-left: 24px; border-left: 4px solid var(--dp-yellow); }
  .blk--quote blockquote p { margin: 0; font: 400 clamp(26px, 2.6vw, 38px)/1.2 var(--dp-font-brand); }
  .blk-columns__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px 24px; margin: 0; padding: 0; list-style: none; }
  .blk-columns__list li { padding-top: 18px; border-top: 2px solid var(--dp-yellow); }
  .blk-columns__list h3 { margin: 0 0 8px; font: 800 22px/1.15 var(--dp-font-display); letter-spacing: -0.01em; }
  .blk-columns__list p { margin: 0; color: var(--dp-soft); }
  .blk-faq__item { border-bottom: 1px solid var(--dp-line); }
  .blk-faq__item summary {
    display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none;
    font-weight: 700; font-size: 19px;
  }
  .blk-faq__item summary::-webkit-details-marker { display: none; }
  .blk-faq__item summary::after { content: "+"; flex: none; font-weight: 400; color: var(--dp-yellow); transition: transform 250ms var(--dp-ease); }
  .blk-faq__item[open] summary::after { transform: rotate(45deg); }
  .blk-faq__item p { margin: 0 0 18px; max-width: 62ch; color: var(--dp-soft); }
  .blk-faq__answer { padding-bottom: 8px; font-size: 17px; color: var(--dp-soft); }
  .blk--section .blk--faq { padding-top: 0; }
  .blk--cta { background: var(--dp-green-dark); color: #f1f3ee; padding: clamp(56px, 8vw, 112px) 0; }
  .blk + .blk--cta { padding-top: clamp(56px, 8vw, 112px); }
  .blk-cta__title { margin: 0 0 12px; max-width: 18ch; font: 900 clamp(36px, 5vw, 72px)/0.95 var(--dp-font-display); letter-spacing: -0.04em; }
  .blk-cta__text { margin: 0 0 28px; max-width: 44ch; color: #d5dcd5; }

  /* ── error and offline pages ─────────────────────────────────────────────────────────── */
  .dp-error { padding: clamp(64px, 12vw, 160px) 0; }
  .dp-error__code { margin: 0; font: 900 clamp(96px, 18vw, 240px)/0.8 var(--dp-font-display); letter-spacing: -0.06em; color: var(--dp-green); }
  .dp-error__title { margin: 24px 0 12px; font: 900 clamp(32px, 4vw, 56px)/1 var(--dp-font-display); letter-spacing: -0.03em; }
  .dp-error__text { max-width: 52ch; margin: 0 0 28px; color: var(--dp-soft); overflow-wrap: anywhere; }

  /* Persistent notice (new version, …) — js/core/notice.js */
  .dp-notice {
    position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; translate: -50% 0;
    display: flex; align-items: center; gap: 16px; width: max-content; max-width: calc(100vw - 32px);
    padding: 12px 12px 12px 20px; border-radius: 12px; background: #2c2b31; color: #f1f3ee;
    box-shadow: 0 16px 40px rgb(0 0 0 / 0.5); font-size: 15px;
  }
  .dp-notice p { margin: 0; }

  /* Re-consent modal (В40) — js/core/consents.js; blocking: no close button, Esc does nothing */
  .dp-consent {
    width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 32px); margin: auto; padding: 0;
    border: 0; border-radius: 16px; background: var(--dp-paper); color: var(--dp-ink); overflow: auto;
    box-shadow: 0 30px 80px rgb(0 0 0 / 0.55);
  }
  .dp-consent::backdrop { background: rgb(12 11 13 / 0.78); backdrop-filter: blur(3px); }
  .dp-consent__form { display: grid; gap: 18px; padding: clamp(24px, 4vw, 36px); }
  .dp-consent__title { margin: 0; font: 900 clamp(28px, 4vw, 40px)/0.95 var(--dp-font-display); letter-spacing: -0.035em; }
  .dp-consent__lead { margin: 0; color: var(--dp-soft); }
  .dp-consent__list { display: grid; gap: 14px; margin: 0; padding: 0; border: 0; }
  .dp-consent__item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.4; cursor: pointer; }
  .dp-consent__item input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--dp-green); }
  .dp-consent__meta { display: block; margin-top: 4px; font-size: 13px; color: var(--dp-soft); }
  .dp-consent__meta a { text-decoration: underline 1px; text-underline-offset: 3px; }
  .dp-consent__error { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--dp-error); }
  .dp-consent .dp-btn { width: 100%; }
  @media (prefers-reduced-motion: no-preference) {
    .dp-consent[open] { animation: dp-consent-in 320ms var(--dp-ease); }
    @keyframes dp-consent-in { from { opacity: 0; translate: 0 24px; } }
  }

  /* Dev badge styles live in css/devbadge.css (non-prod only, not part of the production core bundle). */

  /* Offline mark set by the client when data comes from the device (01 §6.4.2) */
  html[data-net="offline"] .dp-footer__status { color: var(--dp-yellow); }

  /* ── reduced motion: no movement anywhere (01 §6.4.1) ────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
    .dp-slot.is-arriving .dp-rise { animation: none; }
    .dp-header { transition: none; }
  }
}