/* The Declaration page (/declaration), version 2: an invitation to sign. Loaded after hub.css, on this page only.
   Theme "night to dawn": the hero, the closing call and the footer keep the hub's night theme; the sections people
   read sit on warm paper (.dv-paper). Own classes start with dv- so they never meet a class of hub.css or hub.js.
   The paper tokens below are read by scripts/checks/check-declaration-v2.py for the contrast check. */

/* Literata for the Declaration text (variants B and C below): the same local files as reader.css, no outside request */
@font-face{font-family:"Literata";font-style:normal;font-weight:200 900;font-display:swap;
  src:url("fonts/literata-latin-normal.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:"Literata";font-style:normal;font-weight:200 900;font-display:swap;
  src:url("fonts/literata-cyrillic-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --p-paper:#F6F2EA;     /* paper */
  --p-panel:#FFFFFF;     /* panels on paper */
  --p-line:#E3DCCF;      /* rules and panel edges */
  --p-text:#0B1020;      /* text, night navy */
  --p-muted:#4A5068;     /* secondary text, section labels */
  --p-link:#0A6E8F;      /* links, numbers, chips: deep cyan */
  --p-accent:#B0148E;    /* the call to sign on paper: deep magenta */
  --p-on-accent:#FFFFFF; /* text on the accent fill */
  --p-note:#6E3AB8;      /* our notes to the text: deep violet */
  --p-switch:#7D8296;    /* notes switch track, off */
  --p-ink:#0B1020;       /* ink button fill */
  --p-head:#0B1020;      /* headings on paper (variants A-C turn it into ink #1C2752) */
  --p-label:#4A5068;     /* small caps labels above headings (variants A-C: deep cyan) */
  --p-doc:#FFFFFF;       /* the document card (variant C: warm white) */
  --p-muted-fill:#4A5068; /* secondary text on the family fills (tile lines): the denser rose hover needs this darker grey */
  /* principle families (block C): soft paper fill, text accent, denser fill on hover. Accents are the spec's colours
     darkened where the pair with its fill (or with the hover fill) fell under 4.5:1 */
  --f-sky-bg:#DCEBF5;  --f-sky-ac:#0A6A89;  --f-sky-hv:#CFE3EF;     /* TOGETHER: 1, 2, 10 */
  --f-sage-bg:#DDEBDD; --f-sage-ac:#2A6D47; --f-sage-hv:#D2E3D4;    /* LIVING PLANET: 3, 6 */
  --f-sand-bg:#F3E6CC; --f-sand-ac:#8C5300; --f-sand-hv:#EDDDC0;    /* HUMAN CAPABILITY: 4, 5 */
  --f-rose-bg:#F2DCE8; --f-rose-ac:#9E1478; --f-rose-hv:#EDD0E1;    /* PEOPLE IN CHARGE: 7, 8, 9 */
}
[data-fam="together"]{--fam-bg:var(--f-sky-bg);--fam-ac:var(--f-sky-ac);--fam-hv:var(--f-sky-hv)}
[data-fam="planet"]{--fam-bg:var(--f-sage-bg);--fam-ac:var(--f-sage-ac);--fam-hv:var(--f-sage-hv)}
[data-fam="capability"]{--fam-bg:var(--f-sand-bg);--fam-ac:var(--f-sand-ac);--fam-hv:var(--f-sand-hv)}
[data-fam="charge"]{--fam-bg:var(--f-rose-bg);--fam-ac:var(--f-rose-ac);--fam-hv:var(--f-rose-hv)}

/* phones: clip sideways overflow on main, not on body (body passes overflow to the window) */
main{overflow-x:clip}

/* ---------- hero (night) ---------- */
/* panorama variant (dv-hero--pano, set by apply-images.py when img/hero-night.webp exists): the text stays top left over clean
   night, the panorama runs under it across the container (up to 1600 px); its constellation may rise on the right, beside the text */
.dv-hero--pano{padding-bottom:0}
.dv-hero--pano .hero-grid{min-height:0}
.dv-hero--pano .hero-copy{position:relative;z-index:2}
.dv-pano{position:relative;z-index:1;max-width:1600px;margin:24px auto 0;pointer-events:none}
.dv-pano img{display:block;width:100%;height:auto}
@media screen and (max-width:960px){.dv-pano{margin-top:16px}}
@media screen and (min-width:761px){
  .dv-hero .hero-art img{
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 46%,#000 80%,transparent 100%),linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 46%,#000 80%,transparent 100%),linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
    mask-composite:intersect}
}
.dv-hero-act{margin-top:clamp(26px,3vw,38px)}
.dv-hero-act .hero-actions{margin-top:0}
.dv-trust{margin-top:clamp(14px,1.6vw,22px);padding-top:16px;max-width:60ch;border-top:1px solid var(--line);font-size:14px;line-height:1.55;color:var(--faint)}

/* ---------- stub calls: a click only writes a short line into the status next to the button ---------- */
.dv-status{min-height:1.6em;margin-top:10px;font-size:14.5px;font-weight:600;line-height:1.6;color:var(--caption)}
.dv-status.is-on{animation:dv-in .35s var(--ease)}
@keyframes dv-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.cta .dv-status{margin-top:12px;max-width:none;font-size:14.5px;line-height:1.6;color:var(--caption)}

/* ---------- night to paper and back: layered paper horizons ----------
   One wrapper per join. dv-edge--svg (default): hills drawn in inline SVG, cut-paper look with soft shadows.
   dv-edge--strip: the raster strip /assets/declaration/strip-dawn.webp (1920x540); swap by changing one class. */
.dv-edge{position:relative;overflow:hidden;pointer-events:none;height:clamp(84px,15vw,240px)}
.dv-edge-svg,.dv-edge-glow,.dv-edge-strip{position:absolute;left:0;right:0;bottom:0;width:100%}
.dv-edge-svg{height:100%}
.dv-edge-strip{display:none;top:0;background:no-repeat center/cover}
.dv-edge--dawn{margin-bottom:-1px;--edge-h:clamp(160px,24vw,380px)}
.dv-edge--dusk{margin-top:-1px;background:var(--p-paper) url(declaration/paper-grain.webp) 0 0/192px 192px repeat}
/* dawn: paper with grain underneath, visible only in the lower part, so the join runs into the next section without a seam */
.dv-edge--dawn::before{content:"";position:absolute;inset:0;background:var(--p-paper) url(declaration/paper-grain.webp) 0 0/192px 192px repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 50%,#000 78%);mask-image:linear-gradient(180deg,transparent 50%,#000 78%)}
.dv-edge--dawn.dv-edge--svg .dv-edge-svg{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
/* dawn: a soft amber glow behind the hills, not a band */
.dv-edge-glow{top:0;background:radial-gradient(ellipse 46% 70% at 50% 100%,rgba(255,196,120,.34),rgba(255,196,120,.12) 45%,transparent 72%)}
.dv-edge--dusk .dv-edge-glow{display:none}
.dv-edge--svg .dv-edge-strip{display:none}
.dv-edge--strip{height:clamp(160px,24vw,380px)}
/* the strip is pulled up under the bottom of the panorama; its sky dissolves into the hero, its paper into the next section */
.dv-edge--dawn.dv-edge--strip{margin-top:calc(clamp(160px,24vw,380px) * -.14)}
.dv-edge--dawn.dv-edge--strip .dv-edge-strip{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 74%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 74%,transparent 100%)}
.dv-edge--dusk.dv-edge--strip .dv-edge-strip{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%);mask-image:linear-gradient(180deg,transparent 0,#000 26%)}
@media screen and (max-width:760px){.dv-edge--dawn.dv-edge--strip{margin-top:calc(clamp(160px,24vw,380px) * -.24)}}
.dv-edge--strip .dv-edge-svg,.dv-edge--strip .dv-edge-glow{display:none}
.dv-edge--strip .dv-edge-strip{display:block;background-position:center}
.dv-edge--dawn.dv-edge--strip .dv-edge-strip{background-image:url(declaration/img/strip-dawn.webp)}
.dv-edge--dusk.dv-edge--strip .dv-edge-strip{background-image:url(declaration/img/strip-dusk.webp)}
@media screen and (max-width:760px){.dv-edge--svg{height:clamp(64px,20vw,96px)}}

/* ---------- paper: base ---------- */
.dv-paper{position:relative;isolation:isolate;background:var(--p-paper) url(declaration/paper-grain.webp) 0 0/192px 192px repeat;color:var(--p-text)}
/* city-map contour motif in the corners of the long sections; behind the content, never under the text column */
.dv-map{position:relative}
.dv-map::before,.dv-map::after{content:"";position:absolute;z-index:-1;width:clamp(160px,18vw,280px);aspect-ratio:1;pointer-events:none;
  background:url(declaration/city-map.svg) no-repeat center/contain}
.dv-map::before{top:0;right:0}
.dv-map::after{bottom:0;left:0;transform:rotate(180deg)}
@media screen and (max-width:900px){.dv-map::before,.dv-map::after{display:none}}
@media screen{.dv-paper{color-scheme:light}}
.dv-paper .section{padding:clamp(56px,6.5vw,104px) 0}
.dv-paper .dv-tight{padding:clamp(36px,4vw,56px) 0}
.dv-paper h2,.dv-paper h3,.dv-paper h4{color:var(--p-head)}
.dv-paper strong{color:var(--p-text)}
.dv-paper .label{color:var(--p-label)}
.dv-paper .label::before{background:linear-gradient(90deg,var(--p-link),var(--p-accent))}
.dv-paper .intro,.dv-paper .city-close{color:var(--p-muted)}
.dv-paper .text-link{color:var(--p-link);text-decoration-color:rgba(10,110,143,.45)}
.dv-paper .text-link:hover{color:var(--p-text);text-decoration-color:var(--p-text)}
.dv-paper :focus-visible{outline-color:var(--p-link)}
.dv-paper ::selection{background:rgba(176,20,142,.18);color:var(--p-text)}
.dv-paper .dv-status{color:var(--p-text)}

/* buttons on paper: the call to sign in deep magenta with white text; partner contact in ink */
.dv-paper .btn-primary{background:var(--p-accent);color:var(--p-on-accent);box-shadow:0 12px 30px -14px rgba(176,20,142,.65)}
.dv-paper .btn-primary::after{background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 65%)}
.dv-paper .btn-primary:hover{box-shadow:0 0 0 4px rgba(176,20,142,.16),0 16px 36px -14px rgba(176,20,142,.8)}
.dv-paper .btn-ghost{background:transparent;color:var(--p-text);box-shadow:inset 0 0 0 1.5px var(--p-link)}
.dv-paper .btn-ghost:hover{background:rgba(10,110,143,.08);box-shadow:inset 0 0 0 1.5px var(--p-link)}
.dv-btn-ink{background:var(--p-ink);color:#fff;box-shadow:0 12px 30px -16px rgba(11,16,32,.6)}
.dv-btn-ink:hover{transform:translateY(-1px);background:#1A2546}

/* ---------- 1. ten principles at a glance: four families ---------- */
.dv-legend{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px;padding:0;list-style:none}
.dv-chip{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;border-radius:999px;background:var(--fam-bg);color:var(--fam-ac);
  font-size:12.5px;font-weight:750;letter-spacing:.1em;line-height:1}
.dv-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fam-ac)}
.dv-legend-note{margin:0 0 clamp(20px,2.4vw,28px);font-size:14px;line-height:1.55;color:var(--p-muted)}
.dv-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.dv-tile{position:relative;display:flex;flex-direction:column;padding:24px 20px 24px;overflow:hidden;border-radius:var(--r-md);background:var(--fam-bg);
  box-shadow:0 0 0 1px rgba(11,16,32,.06),0 18px 40px -32px rgba(11,16,32,.35);transition:transform .25s var(--ease),background-color .25s,box-shadow .3s}
.dv-tile::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--fam-ac)}
.dv-tile:hover{background:var(--fam-hv);box-shadow:0 0 0 1px rgba(11,16,32,.1),0 22px 44px -30px rgba(11,16,32,.45)}
/* hub .reveal.pre.is-in sets transform:none with higher specificity, so the lift is stated at the same weight */
.dv-tiles .dv-tile:hover,.dv-tiles .dv-tile.reveal.is-in:hover{transform:translateY(-2px);transition-delay:0s}
.dv-tile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.dv-num{display:block;font-size:clamp(44px,1.4vw + 26px,56px);font-weight:300;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--fam-ac)}
.dv-icon{flex:none;display:block;width:112px;height:112px;margin:-4px -6px 0 0;border-radius:50%;background:rgba(255,255,255,.72);overflow:hidden}
.dv-icon img{display:block;width:100%;height:100%;object-fit:contain}
.dv-icon:has(img){background:none;overflow:visible}
.dv-fam{margin-top:14px;font-size:11.5px;font-weight:750;letter-spacing:.12em;line-height:1.3;color:var(--fam-ac)}
.dv-tile-h{margin-top:6px;font-size:17px;font-weight:750;line-height:1.3;letter-spacing:-.012em}
.dv-tile-p{margin-top:10px;font-size:15px;line-height:1.55;color:var(--p-muted-fill)}
.dv-more{margin-top:clamp(24px,3vw,36px)}

/* ---------- 2. why now: two cities, then the flip cards ---------- */
.dv-sub{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.015em}
.dv-city-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.dv-city{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);background:var(--p-panel);box-shadow:0 0 0 1px var(--p-line),0 18px 40px -32px rgba(11,16,32,.3)}
/* picture slot: the fallback gradient shows until the pictures arrive; for 4:3 art set --city-ar:4/3 */
.dv-city-art{--city-ar:2/1;aspect-ratio:var(--city-ar);background-color:#D9D6D2}
.dv-city-art img{display:block;width:100%;height:100%;object-fit:cover}
.dv-city-art:has(img){--city-ar:4/3}
.dv-default .dv-city-art{background:radial-gradient(ellipse 60% 70% at 78% 18%,rgba(232,120,80,.38),transparent 70%),linear-gradient(180deg,#D9D6D2 0%,#B4B3BC 55%,#8A8D9D 100%)}
.dv-choice .dv-city-art{background:radial-gradient(ellipse 60% 70% at 22% 16%,rgba(255,200,130,.6),transparent 70%),linear-gradient(180deg,#F4E4C8 0%,#D9E6C9 55%,#9CC7A6 100%)}
.dv-city-body{padding:22px clamp(20px,2.4vw,30px) 26px}
.dv-city-label{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--p-muted)}
.dv-city-label::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.dv-choice .dv-city-label{color:var(--p-link)}
.dv-city-text{margin-top:12px;font-size:clamp(16px,.2vw + 15.3px,17px);line-height:1.66;color:var(--p-text)}
.dv-caption{margin-top:14px;font-size:14px;line-height:1.55;font-style:italic;color:var(--p-muted)}
.dv-sub-flips{margin:clamp(48px,5vw,72px) 0 20px}
/* flip cards on paper: the worry stays in the night, the rule turns to the light */
.dv-paper .front{background:radial-gradient(120% 80% at 100% 100%,rgba(255,43,214,.2),transparent 60%),var(--navy);box-shadow:0 18px 40px -28px rgba(11,16,32,.6)}
.dv-paper .back{background:var(--p-panel);box-shadow:inset 0 0 0 1px var(--p-line),0 18px 40px -30px rgba(11,16,32,.35)}
.dv-paper .back .chip{background:var(--p-link);color:#fff}
.dv-paper .back .rule-title{color:var(--p-head)}
.dv-paper .back .rule-text{color:var(--p-muted)}
.dv-paper .flip:has(.front:focus-visible){outline-color:var(--p-link)}

/* ---------- 3. three ways to join ---------- */
.dv-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dv-way{position:relative;display:flex;flex-direction:column;padding:clamp(24px,2.4vw,32px);border-radius:var(--r-lg);background:var(--p-panel);
  box-shadow:0 0 0 1px var(--p-line),0 18px 40px -32px rgba(11,16,32,.3)}
.dv-way:not(:last-child)::after{content:"";position:absolute;top:calc(clamp(24px,2.4vw,32px) + 17px);right:-20px;width:20px;height:1.5px;background:var(--p-link);opacity:.5}
.dv-way-lead{box-shadow:0 0 0 1.5px var(--p-link),0 22px 46px -30px rgba(10,110,143,.4)}
.dv-way-n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:15px;font-weight:800;color:var(--p-link);box-shadow:inset 0 0 0 1.5px var(--p-link)}
.dv-way-lead .dv-way-n{background:var(--p-link);color:#fff}
.dv-way-h{margin-top:18px;font-size:var(--fs-h3);line-height:1.25}
.dv-way-p{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--p-muted)}
.dv-way-act{margin-top:auto;padding-top:24px}
.dv-way-act .btn{min-height:48px;padding:0 22px;font-size:15px}
.dv-way-act .text-link{display:inline-block;padding:7px 0;font-size:15px}
.dv-way-act .dv-status{margin-top:8px}

/* ---------- 4. four first moves: hub .city-steps on paper ---------- */
.dv-paper .city-steps{border-top-color:var(--p-line)}
.dv-paper .city-step{border-bottom-color:var(--p-line)}
.dv-paper .city-step::before{background:radial-gradient(360px circle at var(--mx,30%) var(--my,50%),rgba(10,110,143,.08),transparent 70%)}
.dv-paper .cs-num{color:var(--p-link)}
.dv-paper .cs-text{color:var(--p-text)}
.dv-paper .cs-principle{color:var(--p-link);box-shadow:inset 0 0 0 1px rgba(10,110,143,.45)}
.dv-paper .cs-principle::before{background:var(--p-link)}
@media (hover:hover) and (pointer:fine){
  .dv-paper .city-step .cs-principle{opacity:1}
  .dv-paper .city-step:hover{background:rgba(255,255,255,.55)}
  .dv-paper .city-step:hover .cs-principle{color:#fff;background:var(--p-link);box-shadow:inset 0 0 0 1px var(--p-link),0 0 22px -8px rgba(10,110,143,.7)}
}

/* ---------- 5. what signing means ---------- */
.dv-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin:0}
.dv-qa{padding:22px 0 26px;border-top:1px solid var(--p-line)}
.dv-qa dt{font-size:var(--fs-h3);font-weight:750;line-height:1.3;letter-spacing:-.012em;color:var(--p-head)}
.dv-qa dd{margin:10px 0 0;max-width:60ch;font-size:16.5px;line-height:1.65;color:var(--p-muted)}

/* ---------- 6. who it is for ---------- */
.dv-for{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.dv-card{display:flex;flex-direction:column;padding:clamp(24px,2.4vw,32px);border-radius:var(--r-lg);background:var(--p-panel);
  box-shadow:0 0 0 1px var(--p-line),0 18px 40px -32px rgba(11,16,32,.3)}
.dv-card-lead{box-shadow:0 0 0 1.5px var(--p-link),0 22px 46px -30px rgba(10,110,143,.4)}
.dv-card-h{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.01em}
.dv-card-p{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--p-muted)}
.dv-card-act{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:auto;padding-top:22px}
.dv-card-act .text-link{display:inline-block;padding:7px 0;font-size:15px;line-height:1.35}
.dv-foot-line{margin-top:clamp(24px,3vw,36px);max-width:72ch;font-size:var(--fs-small);line-height:1.65;color:var(--p-muted)}
.dv-foot-line .text-link{font-size:inherit;white-space:nowrap}

/* ---------- 7. the text: hub .doc as a white page on paper ---------- */
.dv-paper .doc{background:var(--p-doc);box-shadow:0 0 0 1px var(--p-line),0 40px 90px -60px rgba(11,16,32,.45);-webkit-backdrop-filter:none;backdrop-filter:none}
.dv-paper .doc::before{background:linear-gradient(90deg,transparent,rgba(10,110,143,.55),rgba(176,20,142,.45),transparent)}
.dv-paper .doc-title::before{background:linear-gradient(180deg,var(--p-link),var(--p-accent))}
.dv-paper .doc-meta{color:var(--p-muted)}
.dv-paper .doc-body > p,.dv-paper .p-text,.dv-paper .join-list li{color:var(--p-text)}
.dv-paper .p-text strong{color:var(--p-head)}
.dv-paper .doc-h{border-top-color:var(--p-line)}
.dv-paper .principle{border-top-color:var(--p-line)}
.dv-paper .principle:first-child{border-top:0}
.dv-paper .p-num{color:var(--p-link)}
.dv-paper .principle:nth-child(1) .p-num,.dv-paper .principle:nth-child(2) .p-num,.dv-paper .principle:nth-child(10) .p-num{color:var(--f-sky-ac)}
.dv-paper .principle:nth-child(3) .p-num,.dv-paper .principle:nth-child(6) .p-num{color:var(--f-sage-ac)}
.dv-paper .principle:nth-child(4) .p-num,.dv-paper .principle:nth-child(5) .p-num{color:var(--f-sand-ac)}
.dv-paper .principle:nth-child(7) .p-num,.dv-paper .principle:nth-child(8) .p-num,.dv-paper .principle:nth-child(9) .p-num{color:var(--f-rose-ac)}
.dv-paper .notes-switch{color:var(--p-muted)}
.dv-paper .notes-switch::after{background-color:var(--p-switch)}
.dv-paper .notes-switch[aria-checked="true"]::after{background-color:var(--p-note)}
.dv-paper .note{background:linear-gradient(90deg,rgba(110,58,184,.07),rgba(110,58,184,.015));box-shadow:inset 2px 0 0 var(--p-note)}
.dv-paper .note-label{color:var(--p-note)}
.dv-paper .note-body p{color:var(--p-muted)}
.dv-paper .join-list li{border-top-color:var(--p-line)}
.dv-paper .join-list li:first-child{border-top:0}
.dv-paper .join-list li::before{background:linear-gradient(135deg,var(--p-link),var(--p-accent))}

/* ---------- 8. shaped in the open ---------- */
.dv-shaped{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:20px 56px;align-items:start;padding:clamp(26px,3.4vw,44px);
  border-radius:var(--r-lg);background:var(--p-panel);box-shadow:0 0 0 1px var(--p-line)}
.dv-shaped .h2{margin-top:16px}
.dv-shaped-p{font-size:var(--fs-lead);line-height:1.62;color:var(--p-muted)}

/* ---------- 9. partners ---------- */
.dv-partners{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px}
.dv-partners li{padding-top:20px;border-top:1px solid var(--p-line)}
.dv-partners h3{font-size:17px;font-weight:750;line-height:1.3;letter-spacing:-.01em}
.dv-partners p{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--p-muted)}
.dv-partners-act{margin-top:clamp(32px,4vw,48px)}

/* ---------- 10. who is behind it ---------- */
.dv-why2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 48px}
.dv-why2 > div{padding-top:22px;border-top:1px solid var(--p-line)}
.dv-why2 h3{font-size:17px;font-weight:750;letter-spacing:-.01em}
.dv-why2 p{margin-top:10px;max-width:62ch;font-size:16px;line-height:1.65;color:var(--p-muted)}

/* ---------- 12. closing call: text and buttons left, the picture of hands right, fading into the card (decorative) ---------- */
.cta{--cta-pv:clamp(32px,6vw,84px);--cta-ph:clamp(24px,6vw,84px)}
.cta:has(.dv-final-art){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(16px,3vw,48px);align-items:center}
.cta:has(.dv-final-art) > :not(.dv-final-art):not(.cta-wave){grid-column:1}
.cta:has(.dv-final-art) .h2{max-width:none;font-size:clamp(28px,1.9vw + 12px,44px);line-height:1.1}
/* the whole picture (16:9), centred on the card's height, bleeding to the right edge; its edges dissolve into the card */
.cta .dv-final-art{grid-column:2;grid-row:1 / span 4;align-self:center;justify-self:stretch;display:block;width:calc(100% + var(--cta-ph));max-width:none;height:auto;aspect-ratio:16/9;
  margin:0 calc(var(--cta-ph) * -1) 0 0;object-fit:contain;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-composite:intersect}
@media screen and (max-width:900px){
  .cta:has(.dv-final-art){display:block}
  .cta:has(.dv-final-art) .h2{max-width:16em;font-size:clamp(30px,2.6vw + 18px,54px);line-height:1.06}
  .cta .dv-final-art{display:block;order:-1;object-fit:cover;aspect-ratio:auto;width:calc(100% + 2 * var(--cta-ph));height:220px;margin:calc(var(--cta-pv) * -1) calc(var(--cta-ph) * -1) 8px;
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
}

/* ---------- 11. four layers (night): a verb above each layer name ---------- */
.layer-item .dv-verb{margin-top:16px;font-size:12.5px;font-weight:700;letter-spacing:.14em;line-height:1.4;color:rgb(var(--acc))}
.layer-item .dv-verb + h3{margin-top:6px}

/* ---------- responsive (screen only, so print never takes the phone branch) ---------- */
@media screen and (max-width:1100px){
  .dv-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-partners{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media screen and (max-width:900px){
  .dv-ways{grid-template-columns:minmax(0,1fr)}
  .dv-way:not(:last-child)::after{top:auto;bottom:-20px;right:auto;left:calc(clamp(24px,2.4vw,32px) + 17px);width:1.5px;height:20px}
  .dv-shaped{grid-template-columns:minmax(0,1fr)}
}
@media screen and (max-width:760px){
  .dv-tiles,.dv-city-grid,.dv-faq,.dv-for,.dv-partners,.dv-why2{grid-template-columns:minmax(0,1fr)}
  .dv-tile{padding:22px 18px 20px}
  .dv-icon{width:80px;height:80px}
  .dv-num{font-size:40px}
  .dv-way-act .btn,.dv-partners-act .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .dv-btn-ink:hover{transform:none}
  .dv-tiles .dv-tile,.dv-tiles .dv-tile:hover,.dv-tiles .dv-tile.reveal.is-in:hover{transform:none;transition:background-color .25s}
}

/* ---------- typography variants (spec 05): <html data-type="a|b|c"> ----------
   A: colour only. Ink instead of near-black, warm muted text, deep cyan labels, a lighter heading weight.
   B: A plus Literata for the document title and the Declaration text.
   C: B plus warmer paper, a faint dawn blush at the top of the paper zone and a softer document card (default).
   Screen only: print and the PDF keep their own CSS. Night sections are not touched.
   After Alex picks one, delete the other two blocks and the data-type attribute. */
@media screen{
  html[data-type]{--p-head:#1C2752;--p-text:#262C42;--p-muted:#5A6077;--p-label:#0A6A89;--p-link:#0A6A89} /* link: one step deeper, so it keeps 4.5:1 under the blush and the grain together */
  html[data-type="c"]{--p-paper:#F8F3E9;--p-doc:#FFFDF8}
  html[data-type] .dv-paper h2{font-weight:700;letter-spacing:-.015em}
  html[data-type] .dv-paper .label{letter-spacing:.14em}

  html:is([data-type="b"],[data-type="c"]) .dv-paper .doc-title{font-family:"Literata",Georgia,"Times New Roman",serif;font-weight:600;
    font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.1;letter-spacing:-.01em;overflow-wrap:break-word}
  html:is([data-type="b"],[data-type="c"]) .dv-paper .doc-body > p,
  html:is([data-type="b"],[data-type="c"]) .dv-paper .p-text,
  html:is([data-type="b"],[data-type="c"]) .dv-paper .join-list li{font-family:"Literata",Georgia,"Times New Roman",serif;font-weight:400;
    font-size:clamp(18px,.3vw + 17.2px,19.5px);line-height:1.6}
  html:is([data-type="b"],[data-type="c"]) .dv-paper .p-text strong{font-weight:600}

  html[data-type="c"] .dv-paper{background:radial-gradient(ellipse 55% 240px at 50% 240px,rgba(255,184,130,.09),transparent) 0 0/100% 480px no-repeat,
    var(--p-paper) url(declaration/paper-grain.webp) 0 0/192px 192px repeat}
  html[data-type="c"] .dv-paper .doc{box-shadow:0 0 0 1px rgba(28,39,82,.08),0 1px 2px rgba(60,40,20,.04),0 12px 32px rgba(60,40,20,.06)}

  /* the long Russian title word must fit a 390 px card */
  @media (max-width:480px){
    html:is([data-type="b"],[data-type="c"]) .dv-paper .doc-title{font-size:clamp(1.7rem,7.4vw,2.2rem)}
  }
}

/* ---------- print ---------- */
@page{margin:16mm 14mm}
@media print{
  .dv-paper{background:#fff!important;color:#111}
  .dv-tile{background:#fff!important}
  .dv-tile::before{display:none}
  .dv-chip{background:#fff!important;box-shadow:inset 0 0 0 1px #999;color:#000!important}
  .dv-final-art,.dv-edge,.dv-map::before,.dv-map::after,.dv-status,.dv-icon,.dv-city-art,[data-sign],[data-stub]{display:none!important}
  .dv-tile,.dv-way,.dv-card,.dv-city,.dv-shaped,.dv-paper .doc{background:#fff!important;box-shadow:0 0 0 1px #ccc!important}
  .dv-num,.dv-fam{color:#000!important}
  .dv-paper .front .hint{color:#333}
  .dv-way:not(:last-child)::after{display:none}
  .dv-tile,.dv-way,.dv-card,.dv-qa,.dv-partners li,.principle{break-inside:avoid}
}