/* =====================================================================
   War-Documentary.info: About page (page-about.php), added 2026-10-13
   Colours and type follow the rest of the site: the navy of the header, Transat,
   upper-case headings with the yellow underline, the blue of the comment form.
   ===================================================================== */
.wd-about{--navy:#1a2334;--night:#101722;--ink:#2c343d;--text:#424c55;--muted:#6c757d;--blue:#3b82ec;--steel:#3a6f86;--yellow:#ffc107;--gold:#d8a640;--line:#d9dee5;
	display:block;background:#fff;color:var(--text);font-family:Transat,sans-serif;font-weight:300;font-size:17px;line-height:1.7;letter-spacing:0}
/* the site sets letter-spacing:2px on body; reading text here is set without it, as in the articles */
.wd-about *,.wd-about *::before,.wd-about *::after{box-sizing:border-box}
.wd-about p{margin:0 0 1em;text-wrap:pretty}
.wd-about h1,.wd-about h2,.wd-about h3,.wd-about .wd-about-hero__role{text-wrap:balance}
.wd-about a{color:var(--blue);text-decoration:none;transition:color .2s ease}
.wd-about a:hover{color:#1f63c9;text-decoration:underline}
/* the "@" of the email: drawn here, so the address is not in the page's code as one piece (assets/js/wd-footer.js puts it together) */
.wd-about .wd-at::before{content:"@"}
.wd-about em{font-style:italic}
.wd-about .wd-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 24px}
.wd-about .wd-h2{margin:0 0 24px;color:var(--steel);font-family:Transat,sans-serif;font-weight:700;font-size:34px;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:10px}
.wd-about .wd-h2--light{color:#fff}
.wd-about h3{font-family:Transat,sans-serif;font-weight:700}
.wd-about :focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.wd-about section[id]{scroll-margin-top:70px}

/* buttons */
.wd-about .wd-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 32px;border-radius:999px;font-family:Transat,sans-serif;font-weight:700;font-size:16px;line-height:1.2;letter-spacing:.01em;text-decoration:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.wd-about .wd-btn--light{background:#fff;border:1px solid #fff;color:var(--navy)}
.wd-about .wd-btn--light:hover{background:var(--yellow);border-color:var(--yellow);color:var(--navy);text-decoration:none}
.wd-about .wd-btn--outline{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff}
.wd-about .wd-btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.wd-about .wd-ico{display:block;flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 1. About the author (updated 2026-10-14) ----------
   Two panels on the navy of the header. The site's blue (#3b82ec) and yellow (#ffc107) are the colours of the
   Ukrainian flag: the small flag in the line under the name, Ukraine on the map behind the photo.
   The pair stops at 1600-1760px and keeps a navy margin on both sides that grows with the screen, so a wide monitor
   gets two panels in the middle rather than two stretched halves; the type and the photo grow a little with it. */
.wd-about-hero{padding:77px clamp(12px,6vw - 40px,200px) 12px;background:var(--navy);color:#d5dce6}
.wd-about-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;max-width:clamp(1600px,30vw + 986px,1760px);min-height:min(calc(100vh - 89px),1000px);margin:0 auto}
.wd-about-hero__panel{position:relative;overflow:hidden;border-radius:20px}
.wd-about-hero__panel--text{display:flex;align-items:center;background:
	radial-gradient(90% 70% at 100% 100%,rgba(58,111,134,.45) 0%,rgba(58,111,134,0) 62%),
	radial-gradient(70% 55% at 0% 0%,rgba(143,184,255,.07) 0%,rgba(143,184,255,0) 60%),
	linear-gradient(160deg,#22314d 0%,#1b283f 52%,#16263b 100%)}
.wd-about-hero__text{width:100%;padding:clamp(40px,6vh,72px) clamp(32px,5.4vw - 4px,96px)}
.wd-about .wd-about-hero__name{margin:0 0 16px;color:#fff;font-family:Transat,sans-serif;font-weight:700;font-size:clamp(44px,2.2vw + 32px,72px);line-height:1.04;letter-spacing:-.005em;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:4px;text-underline-offset:.22em}
.wd-about .wd-about-hero__role{margin:0 0 24px;color:#9fb2c8;font-family:gotic,Transat,sans-serif;font-style:italic;font-size:clamp(17px,.4vw + 13.2px,21px);line-height:1.5;letter-spacing:.03em}
.wd-about-hero__country{color:#fff;white-space:nowrap}
.wd-flag{display:inline-block;width:20px;height:13px;margin:0 9px 0 4px;border-radius:2px;vertical-align:-1px;background:linear-gradient(#3b82ec 50%,#ffc107 50%);box-shadow:0 0 0 1px rgba(255,255,255,.12);opacity:.92}
.wd-about .wd-about-hero__lead{margin:0 0 14px;color:#fff;font-size:clamp(18px,.5vw + 14px,23px);line-height:1.5}
.wd-about .wd-about-hero__more{max-width:54ch;margin:0 0 28px;color:#9fb2c8;font-size:clamp(15px,.25vw + 11.4px,16.5px);line-height:1.7}
.wd-about .wd-about-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:600px;margin:0;padding:0;list-style:none}
.wd-about .wd-about-facts li{margin:0;padding:clamp(16px,1vw,20px) clamp(18px,1.1vw,22px);border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(9,14,22,.18)}
.wd-about .wd-about-facts li::before{content:none}
.wd-about-facts .wd-ico{width:20px;height:20px;margin-bottom:8px;color:#8fb8ff}
.wd-about-facts strong{display:block;color:#fff;font-weight:700;font-size:clamp(24px,.6vw + 19.4px,30px);line-height:1.1}
.wd-about-facts span{display:block;margin-top:4px;color:#9fb2c8;font-size:clamp(14px,.15vw + 11.8px,15px);line-height:1.4}
.wd-about-hero__buttons{display:flex;flex-wrap:wrap;gap:12px}
.wd-about-hero__buttons--phone{display:none}
/* the photo panel: Europe in faint lines, Ukraine above the photo's upper right corner.
   The map hangs on the photo column, not on the panel, so Ukraine keeps its place against the photo on any screen.
   Ukraine is set in photo widths: its left edge at --ua-a, its width --ua-u, its top --ua-t above the photo.
   The numbers below turn that into the box of hero-map-v2.svg (viewBox 150 -200 1300 1300, Ukraine at 748..1105 x 86..325);
   the file has a new name so browsers do not keep the old map (hero-map.svg, a different box) from their cache. */
.wd-about-hero__panel--photo{display:flex;flex-direction:column;justify-content:center;background:#111a28}
.wd-about-hero__stage{position:relative;padding:clamp(24px,4vh,48px) clamp(28px,4vw,72px)}
/* the photo grows with the panel and with the height of the window, never below 400px (two buttons in a row);
   the column is moved left by 12% of its width, so the photo with Ukraine over its corner sits in the middle */
.wd-about-hero__col{--ua-a:.324;--ua-u:.915;--ua-t:.413;--w:min(560px,88%,max(400px,79vh - 250px));position:relative;z-index:0;container-type:inline-size;width:var(--w);margin:calc(var(--w) * var(--ua-t)) auto 0;translate:-12% 0}
.wd-about-hero__col::before{content:"";position:absolute;z-index:-1;top:0;left:calc((var(--ua-a) - 1.6751 * var(--ua-u)) * 100%);width:calc(364.15% * var(--ua-u));aspect-ratio:1;margin-top:calc((var(--ua-t) + .8011 * var(--ua-u)) * -100%);background:url(hero-map-v2.svg) 0 0/100% 100% no-repeat;pointer-events:none}
.wd-about .wd-about-hero__photo{--card:min(286px,58%);position:relative;margin:0}
.wd-about-hero__frame{position:relative}
.wd-about-hero__frame picture{display:block}
.wd-about-hero__frame img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:60% 30%;border-radius:18px;box-shadow:0 26px 64px rgba(0,0,0,.5)}
/* the most read study hangs on the photo's lower right corner, a link of its own */
.wd-about .wd-about-hero__top{position:absolute;z-index:2;right:-28px;bottom:-72px;display:block;width:var(--card);padding:16px 20px 18px;border-radius:16px;background:#fff;color:var(--navy);box-shadow:0 22px 56px rgba(0,0,0,.38);transition:transform .2s ease,box-shadow .2s ease}
.wd-about .wd-about-hero__top:hover{transform:translateY(-3px);box-shadow:0 28px 64px rgba(0,0,0,.45);color:var(--navy);text-decoration:none}
.wd-about-hero__top-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #e3e8ee;color:var(--steel);font-weight:700;font-size:14px;letter-spacing:.02em}
.wd-about-hero__top-num{display:flex;align-items:baseline;gap:8px;color:var(--navy);font-weight:700;font-size:38px;line-height:1;letter-spacing:-.01em}
.wd-about-hero__top-num small{color:#5b6876;font-weight:300;font-size:15px;letter-spacing:0}
.wd-about-hero__top-title{display:block;margin-top:8px;color:var(--navy);font-weight:700;font-size:15px;line-height:1.35}
.wd-about-hero__top:hover .wd-about-hero__top-title{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:4px}
/* the caption keeps to the left of the card; where the photo is narrow it breaks after the comma */
.wd-about .wd-about-hero__caption{display:flex;align-items:flex-start;gap:8px;max-width:calc(100% - var(--card) + 14px);margin-top:16px;color:#9fb2c8;font-family:gotic,Transat,sans-serif;font-style:italic;font-size:14px;line-height:1.4;letter-spacing:.03em}
.wd-about-hero__caption span span{white-space:nowrap}
.wd-about-hero__caption .wd-ico{width:16px;height:16px;margin-top:2px}
.wd-about-hero__actions{margin-top:64px}
.wd-about-hero__actions .wd-btn{padding:0 clamp(22px,2.2vw,32px)}
.wd-about .wd-about-hero__contact{display:flex;flex-wrap:wrap;gap:8px 26px;margin:22px 0 0;font-size:15px}
.wd-about .wd-about-hero__contact a{display:inline-flex;align-items:center;gap:8px;color:#9fb2c8}
.wd-about .wd-about-hero__contact a:hover{color:#fff;text-decoration:none}
.wd-about-hero__contact .wd-ico{width:18px;height:18px}
/* a narrow photo column (small laptops): a smaller card and tighter buttons, so both buttons stay on one line */
@container (max-width: 439px){
	.wd-about .wd-about-hero__top{padding:14px 16px 16px}
	.wd-about-hero__top-num{font-size:32px}
	.wd-about-hero__actions .wd-about-hero__buttons{gap:10px}
	.wd-about-hero__actions .wd-btn{padding:0 18px}
}
@container (max-width: 339px){
	.wd-about-hero__actions .wd-btn{flex:1 1 100%}
}

/* ---------- 2. The project (dark design, 2026-10-14) ----------
   The navy and the width of the first screen. Panels and cards are lit from the upper left (lighter there,
   darker towards the lower right) and edged with a thin line of light; captions and labels lie on frosted glass.
   The heading and the text on a band, the then/now slider beside the four points, the photos from the trips below.
   The two glows stay clear of the top edge, so the section joins the first screen without a seam. */
.wd-about-project{position:relative;padding:clamp(40px,3vw,64px) clamp(12px,6vw - 40px,200px) clamp(44px,3.4vw,72px);overflow:hidden;color:#d5dce6;background:
	radial-gradient(44% 340px at 4% 380px,rgba(58,111,134,.28),rgba(58,111,134,0) 72%),
	radial-gradient(40% 300px at 96% calc(100% - 120px),rgba(216,166,64,.08),rgba(216,166,64,0) 72%),
	var(--navy)}
.wd-about-project__in{max-width:clamp(1600px,30vw + 986px,1760px);margin:0 auto}
/* a panel in the light of the first screen's text panel (for the next dark sections as well) */
.wd-about .wd-panel{position:relative;isolation:isolate;border-radius:20px;background:
	radial-gradient(90% 70% at 100% 100%,rgba(58,111,134,.34) 0%,rgba(58,111,134,0) 62%),
	radial-gradient(70% 55% at 0% 0%,rgba(143,184,255,.08) 0%,rgba(143,184,255,0) 60%),
	linear-gradient(160deg,#22314d 0%,#1b283f 52%,#16263b 100%);
	box-shadow:0 40px 80px -48px rgba(0,0,0,.8)}
/* the thin line of light on the upper left edge: panels, cards, the slider, photos, the map */
.wd-about .wd-panel::before,.wd-about .wd-point::before,.wd-about .wd-about-compare::before,.wd-about .wd-about-photo::before,.wd-about .wd-about-map__canvas::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1px;
	background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.07) 28%,rgba(255,255,255,0) 52%,rgba(143,184,255,.14));
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
	mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
/* headings of the dark sections: white, with the yellow underline of the name on the first screen */
.wd-about .wd-title{margin:0;color:#fff;font-family:Transat,sans-serif;font-weight:700;font-size:clamp(30px,1.5vw + 17px,46px);line-height:1.14;letter-spacing:-.005em;
	text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:.24em}
.wd-about-project__band{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,80px);align-items:end;padding:clamp(28px,2.8vw,52px) clamp(28px,3.2vw,60px)}
.wd-about .wd-about-project__lead{margin:0;color:#d5dce6;font-size:clamp(16.5px,.3vw + 12.6px,18.5px);line-height:1.66}
.wd-about-project__bento{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:12px}
/* the four points: the icon on a lit key, then the words; a soft light in the upper left corner follows the pointer (about.js) */
.wd-about .wd-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(clamp(210px,12.2vw,244px),auto);gap:12px;margin:0;padding:0;list-style:none}
.wd-about .wd-point{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:20px;margin:0;padding:clamp(20px,1.6vw,28px);border-radius:16px;overflow:hidden;
	background:linear-gradient(160deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.028) 42%,rgba(0,0,0,.06) 100%),linear-gradient(160deg,#1c2943,#141d31);
	box-shadow:0 30px 60px -40px rgba(0,0,0,.9);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.wd-about .wd-point::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(400px circle at var(--mx,0px) var(--my,0px),rgba(143,184,255,.2),rgba(143,184,255,0) 60%)}
.wd-about .wd-point:hover{transform:translateY(-2px)}
.wd-point__ico{position:relative;display:grid;place-items:center;flex:none;width:50px;height:50px;border-radius:14px;background:
	radial-gradient(120% 120% at 28% 0%,rgba(143,184,255,.32),rgba(143,184,255,.06) 62%),#1c2a44;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(143,184,255,.26),0 14px 30px -10px rgba(59,130,236,.62)}
.wd-point__ico .wd-ico{color:#e4edff}
.wd-point__body{display:flex;flex-direction:column;min-width:0}
.wd-about .wd-point h3{margin:0 0 8px;color:#fff;font-size:18px;line-height:1.3;letter-spacing:.005em}
.wd-about .wd-point p{margin:0;color:#a9b8ca;font-size:15px;line-height:1.58}
/* the reading list, inside "Primary sources" */
.wd-about .wd-point__link{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:16px;padding:9px 16px 9px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);color:#fff;font-weight:700;font-size:14px;line-height:1.2;transition:box-shadow .2s ease,background-color .2s ease}
.wd-point__link .wd-ico{width:18px;height:18px;color:var(--yellow)}
.wd-about .wd-point__link:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--yellow);color:#fff;text-decoration:none}
/* then and now (the site's own before/after script): a frame with the two years on its sides and a glass knob.
   Both photos are drawn at the width of the frame (100cqw), so they stay on top of each other when the window changes size. */
.wd-about .wd-about-compare{position:relative;isolation:isolate;container-type:inline-size;margin:0;min-height:300px;border-radius:18px;overflow:hidden;background:#0e1520;box-shadow:0 40px 80px -40px rgba(0,0,0,.85)}
.wd-about-compare .wd-compare{position:absolute;inset:0}
.wd-about-compare .wd-compare img{width:100%;height:100%;max-width:none;object-fit:cover}
.wd-about-compare .wd-compare .resize img{width:100cqw!important}
.wd-compare .resize{border-right:0}
.wd-compare .resize img{filter:grayscale(1)}
.wd-compare .handle{position:absolute;top:0;bottom:0;left:50%;z-index:2;width:2px;margin-left:-1px;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(0,0,0,.1),0 0 24px rgba(255,255,255,.4);cursor:ew-resize}
.wd-compare .handle::after{content:none!important}
.wd-compare__knob{position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85),0 14px 34px rgba(0,0,0,.45)}
.wd-compare__knob::before,.wd-compare__knob::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-6px;border:6px solid transparent}
.wd-compare__knob::before{left:13px;border-right:8px solid #fff;border-left:0}
.wd-compare__knob::after{right:13px;border-left:8px solid #fff;border-right:0}
.wd-about-compare__year{position:absolute;top:14px;z-index:2;padding:8px 13px;border-radius:999px;background:rgba(13,20,32,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#fff;font-weight:700;font-size:14px;line-height:1;letter-spacing:.06em;font-variant-numeric:tabular-nums;pointer-events:none}
.wd-about-compare__year--then{left:14px}
.wd-about-compare__year--now{right:14px}
/* the photos from the trips: a touch calmer than the originals, full colour under the pointer; captions on frosted glass */
.wd-about-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(200px,15vw,250px);gap:12px;margin-top:12px}
.wd-about .wd-about-photo{position:relative;isolation:isolate;margin:0;border-radius:16px;overflow:hidden;background:#0e1520}
.wd-about-photo--wide{grid-column:span 2}
.wd-about-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.88) brightness(.9);transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.wd-about-photo:hover img{transform:scale(1.045);filter:none}
.wd-about .wd-glass-chip{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;flex-direction:column;gap:3px;max-width:calc(100% - 24px);margin:0;padding:9px 14px 10px;border-radius:12px;background:rgba(13,20,32,.46);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 10px 26px -12px rgba(0,0,0,.6);color:#fff;font-weight:700;font-size:14px;line-height:1.25;letter-spacing:.01em;pointer-events:none}
.wd-glass-chip span{color:#cdd8e4;font-family:gotic,Transat,sans-serif;font-style:italic;font-weight:400;font-size:13px;letter-spacing:.03em}

/* ---------- 3. The map (dark design, 2026-10-14) ----------
   The navy and the width of the first two screens. The heading and the text on a band; the map lies in a panel
   (the sea is the panel's own light, the land a faint layer over it) beside a panel with the countries and the
   studies of the chosen one. A country turns gold once it is scratched off; the chosen one turns blue metal,
   its button too (the gradient #wd-blue-g is in page-about.php). */
.wd-about-map{position:relative;padding:clamp(40px,3vw,64px) clamp(12px,6vw - 40px,200px) clamp(44px,3.4vw,72px);overflow:hidden;color:#d5dce6;background:
	radial-gradient(40% 340px at 96% 360px,rgba(58,111,134,.24),rgba(58,111,134,0) 72%),
	radial-gradient(42% 320px at 6% calc(100% - 140px),rgba(216,166,64,.07),rgba(216,166,64,0) 72%),
	var(--navy)}
.wd-about-map__in{max-width:clamp(1600px,30vw + 986px,1760px);margin:0 auto}
.wd-about-map__band{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,80px);align-items:end;padding:clamp(28px,2.8vw,52px) clamp(28px,3.2vw,60px)}
.wd-about .wd-about-map__lead{margin:0;color:#d5dce6;font-size:clamp(16.5px,.3vw + 12.6px,18.5px);line-height:1.66}
.wd-about .wd-count{color:var(--yellow);font-variant-numeric:tabular-nums}
.wd-about-map__body{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:12px;margin-top:12px;align-items:start}
.wd-about .wd-about-map__canvas{position:relative;isolation:isolate;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -48px rgba(0,0,0,.8);background:
	radial-gradient(80% 70% at 100% 100%,rgba(58,111,134,.30) 0%,rgba(58,111,134,0) 62%),
	radial-gradient(70% 60% at 0% 0%,rgba(143,184,255,.09) 0%,rgba(143,184,255,0) 60%),
	linear-gradient(160deg,#1f2d47 0%,#18243a 52%,#132034 100%)}
.wd-map__svg{display:block;width:100%;height:auto;font-style:normal} /* style.css makes every svg italic */
.wd-map__sea{fill:transparent}
.wd-map__land{fill:rgba(214,226,242,.07)}
.wd-map__borders{fill:none;stroke:rgba(214,226,242,.12);stroke-width:.9;stroke-linejoin:round}
.wd-map__foil{fill:rgba(214,226,242,.16)}
.wd-map__gold,.wd-map__done{fill:url(#wd-gold-g)}
.wd-map__done{opacity:1}
.wd-map__edge{fill:none;stroke:#6f5017;stroke-width:1;stroke-linejoin:round}
.wd-map__country{--i:0;cursor:pointer}
/* under the pointer (or the country's button): a lighter gold and a thin bright edge */
.wd-map__country:hover .wd-map__edge,.wd-map__country.is-hover .wd-map__edge{stroke:#fff3c4;stroke-width:2}
.wd-map__country:hover .wd-map__done,.wd-map__country.is-hover .wd-map__done{filter:brightness(1.12)}
/* the chosen country: blue metal with a soft glow, a light edge and a white name */
.wd-map__country.is-selected .wd-map__gold,.wd-map__country.is-selected .wd-map__done{fill:url(#wd-blue-g);filter:none}
.wd-map__country.is-selected .wd-map__edge{stroke:#e2edff;stroke-width:1.6}
.wd-map__country.is-selected{filter:drop-shadow(0 0 14px rgba(59,130,236,.55))}
.wd-map__label{fill:#3b2a07;font-family:Transat,sans-serif;font-weight:700;font-size:16px;letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.wd-map__label--small{font-size:12px;letter-spacing:.05em}
.wd-map__label[data-country="israel"]{fill:#e9c46a}
.wd-map__label.is-selected{fill:#fff}
/* the scratch: before it starts the countries are foil; the strokes uncover the gold one country after another */
.wd-map__scratch{stroke-dasharray:1 2;stroke-dashoffset:0}
.wd-about-map.is-waiting .wd-map__scratch{stroke-dashoffset:1.02}
.wd-about-map.is-waiting .wd-map__done,.wd-about-map.is-waiting .wd-map__label{opacity:0}
.wd-about-map.is-scratching .wd-map__scratch{transition:stroke-dashoffset .75s cubic-bezier(.5,.1,.4,1);transition-delay:calc(var(--i) * .32s + .2s)}
.wd-about-map.is-scratching .wd-map__scratch--rough{transition-duration:.4s;transition-timing-function:ease-out;transition-delay:calc(var(--i) * .32s)}
.wd-about-map.is-scratching .wd-map__done,.wd-about-map.is-scratching .wd-map__label{transition:opacity .3s ease;transition-delay:calc(var(--i) * .32s + .9s)}
/* the side panel: the countries as glass buttons, then the chosen country and its studies */
.wd-about .wd-about-map__panel{min-width:0;padding:clamp(20px,1.8vw,32px)}
.wd-about .wd-about-map__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0 0 24px;border-bottom:1px solid rgba(255,255,255,.1);list-style:none}
.wd-about-map__chips li{margin:0;padding:0}
.wd-about-map__chips li::before{content:none}
.wd-about .wd-chip{display:inline-flex;align-items:center;min-height:40px;margin:0;padding:8px 16px;border:0;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#e6ebf2;font-family:Transat,sans-serif;font-weight:300;font-size:15px;line-height:1;cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease,color .2s ease}
.wd-about .wd-chip:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,214,120,.7);color:#fff}
.wd-about .wd-chip[aria-pressed="true"]{background:linear-gradient(160deg,#6aa6ff,#3b82ec 55%,#2a62c9);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px -10px rgba(59,130,236,.8);color:#fff;font-weight:700}
.wd-about .wd-country{padding:0;border-radius:0;background:none;box-shadow:none}
.wd-country[hidden]{display:none}
.wd-about .wd-country+.wd-country{margin-top:28px}
.wd-about .wd-country__name{margin:0 0 8px;color:#fff;font-size:26px;line-height:1.2}
.wd-about .wd-country__trips{margin:0 0 18px;color:#a9b8ca;font-size:15px;line-height:1.6}
.wd-about .wd-country__count{margin:0 0 6px;color:#8fb8ff;font-weight:700;font-size:14px;letter-spacing:.02em}
.wd-about .wd-country__list{margin:0;padding:0;list-style:none;font-size:15px;line-height:1.45}
.wd-about .wd-country__list li{margin:0;padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}
.wd-about .wd-country__list li::before{content:none}
.wd-about .wd-country__list a{color:#e9eef5}
.wd-about .wd-country__list a:hover{color:#8fb8ff;text-decoration:none}
/* with JavaScript: one country at a time and the first 6 studies; without it everything is listed */
.wd-about-map.wd-js .wd-country__list.is-long:not(.is-open) li:nth-child(n+7){display:none}
.wd-about-map:not(.wd-js) .wd-country__more{display:none}
.wd-about .wd-country__more{margin:10px 0 0;padding:0;border:0;background:none;color:#8fb8ff;font-family:Transat,sans-serif;font-weight:700;font-size:14px;letter-spacing:.02em;cursor:pointer}
.wd-about .wd-country__more:hover{text-decoration:underline}

/* ---------- 4. The story (dark design, 2026-10-15) ----------
   The six chapters play one after another like a short film: on the screen the chapter's photo fades in behind
   its text and slowly comes closer (the first chapter is a title card with its year); the bar below shows the chapters
   as segments that fill. The film starts when the screen comes into view, waits while the pointer is over the text
   or the screen is out of view, and can be paused or sent to any chapter (about.js).
   Without JavaScript all six chapters are listed and the bar is hidden. */
.wd-about-story{position:relative;padding:clamp(40px,3vw,64px) clamp(12px,6vw - 40px,200px) clamp(44px,3.4vw,72px);overflow:hidden;color:#d5dce6;background:
	radial-gradient(42% 340px at 5% 400px,rgba(58,111,134,.26),rgba(58,111,134,0) 72%),
	radial-gradient(40% 320px at 95% calc(100% - 150px),rgba(216,166,64,.07),rgba(216,166,64,0) 72%),
	var(--navy)}
.wd-defs{position:absolute;width:0;height:0;overflow:hidden}
.wd-about-story__in{max-width:clamp(1600px,30vw + 986px,1760px);margin:0 auto}
.wd-about-story__band{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,80px);align-items:end;padding:clamp(28px,2.8vw,52px) clamp(28px,3.2vw,60px)}
.wd-about .wd-about-story__lead{max-width:68ch;margin:0;color:#d5dce6;font-size:clamp(16.5px,.3vw + 12.6px,18.5px);line-height:1.66}
.wd-film{margin-top:12px}
/* the screen: the text on the dark left side, the photo on the right fading into it */
.wd-about .wd-film__screen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:clamp(440px,24vw + 100px,560px);overflow:hidden;background:#111a2b}
.wd-film__frames{position:absolute;inset:0 0 0 30%;z-index:0}
.wd-film__frame{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease;-webkit-mask:linear-gradient(90deg,transparent 0,#000 34%);mask:linear-gradient(90deg,transparent 0,#000 34%)}
.wd-film__frame.is-active{opacity:1}
.wd-film__frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);filter:saturate(.9) brightness(.86);transform-origin:var(--pos,60% 50%)}
.wd-film__frame.is-active img,.wd-film__frame.is-leaving img{animation:wd-film-closer var(--len,11s) linear both}
@keyframes wd-film-closer{from{transform:scale(1.02)}to{transform:scale(1.09) translateX(-1.2%)}}
.wd-about .wd-film__frame .wd-glass-chip{right:16px;bottom:16px;left:auto}
/* a chapter without a photo: a title card with its year */
.wd-film__frame--title{background:radial-gradient(60% 70% at 70% 40%,rgba(143,184,255,.12),rgba(143,184,255,0) 70%)}
.wd-film__year{position:absolute;top:50%;right:6%;color:transparent;-webkit-text-stroke:1.5px rgba(214,226,242,.3);font-weight:700;font-size:clamp(160px,13vw,280px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;transform:translateY(-50%)}
.wd-film__frame--title.is-active .wd-film__year,.wd-film__frame--title.is-leaving .wd-film__year{animation:wd-film-rise var(--len,11s) linear both}
@keyframes wd-film-rise{from{transform:translateY(-46%) scale(.98)}to{transform:translateY(-54%) scale(1.03)}}
/* the film stands still while it waits */
.wd-film:not([data-state="playing"]) .wd-film__frame img,.wd-film.is-hold .wd-film__frame img,.wd-film.is-away .wd-film__frame img,
.wd-film:not([data-state="playing"]) .wd-film__year,.wd-film.is-hold .wd-film__year,.wd-film.is-away .wd-film__year{animation-play-state:paused}
/* the subtitles: one chapter at a time */
.wd-about .wd-film__subs{position:relative;z-index:1;margin:0;padding:clamp(28px,3vw,56px) 0 clamp(28px,3vw,56px) clamp(28px,3.2vw,60px);list-style:none}
.wd-about .wd-chapter{margin:0;padding:0}
.wd-about .wd-chapter::before{content:none}
.wd-about .wd-chapter+.wd-chapter{margin-top:40px}
.wd-about-story.wd-js .wd-film__subs{display:grid;align-self:center}
.wd-about-story.wd-js .wd-chapter{grid-area:1 / 1;align-self:center;margin:0;visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s linear .5s}
.wd-about-story.wd-js .wd-chapter.is-active{visibility:visible;opacity:1;transform:none;transition:opacity .6s ease .25s,transform .7s cubic-bezier(.2,.7,.2,1) .25s,visibility 0s}
.wd-about .wd-chapter__no{margin:0 0 18px;color:#8d9cb0;font-weight:700;font-size:14px;letter-spacing:.04em}
.wd-about .wd-chapter__date{margin:0 0 6px;color:#a9b8ca;font-family:gotic,Transat,sans-serif;font-style:italic;font-weight:400;font-size:15px;letter-spacing:.04em}
.wd-about .wd-chapter__title{margin:0 0 16px;color:#fff;font-size:clamp(26px,.8vw + 15px,34px);line-height:1.22;text-shadow:0 4px 24px rgba(0,0,0,.4)}
.wd-about .wd-chapter__text{max-width:52ch;margin:0;color:#d5dce6;font-size:clamp(16px,.2vw + 13.5px,17.5px);line-height:1.68;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.wd-about .wd-chapter__text em{color:#fff}
/* the bar: play / pause, then the six chapters as segments that fill */
.wd-about .wd-film__bar{display:flex;align-items:center;gap:clamp(16px,1.6vw,28px);margin-top:12px;padding:16px clamp(18px,2vw,32px) 14px}
.wd-about .wd-film__play{display:grid;place-items:center;flex:none;width:46px;height:46px;margin:0;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#fff;cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease}
.wd-about .wd-film__play:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,214,120,.75)}
.wd-film__ico{display:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wd-film[data-state="playing"] .wd-film__ico--pause,.wd-film[data-state="paused"] .wd-film__ico--play,.wd-film[data-state="ended"] .wd-film__ico--again{display:block}
.wd-film__ico--play{margin-left:3px;fill:currentColor;stroke:none}
.wd-about .wd-film__segs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;flex:1;margin:0;padding:0;list-style:none}
.wd-about .wd-film__segs li{margin:0;padding:0}
.wd-about .wd-film__segs li::before{content:none}
.wd-about .wd-film__seg{display:flex;flex-direction:column;gap:10px;width:100%;margin:0;padding:10px 0 4px;border:0;background:none;color:#8d9cb0;font-family:Transat,sans-serif;font-weight:700;font-size:13px;line-height:1.2;letter-spacing:.03em;text-align:left;cursor:pointer;transition:color .25s ease}
.wd-about .wd-film__seg:hover,.wd-about .wd-film__seg.is-active{color:#fff}
.wd-film__track{position:relative;display:block;height:4px;border-radius:4px;background:rgba(214,226,242,.16);overflow:hidden;transition:height .2s ease,margin .2s ease}
.wd-film__seg:hover .wd-film__track{height:6px;margin-top:-2px}
.wd-film__fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#6aa6ff,#a9ccff);box-shadow:0 0 10px rgba(59,130,236,.8);transform:scaleX(var(--f,0));transform-origin:0 50%}
.wd-film__seg.is-done .wd-film__fill{--f:1;background:rgba(214,226,242,.62);box-shadow:none}
.wd-film__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* without JavaScript: no film, the chapters one under another */
.wd-about-story:not(.wd-js) .wd-film__frames,.wd-about-story:not(.wd-js) .wd-film__bar{display:none}
.wd-about .wd-about-story:not(.wd-js) .wd-film__screen{display:block;min-height:0}

/* ---------- 5. Contact (dark design, 2026-10-15) ----------
   A letter: on the left the author's card, the heading, the words and the direct contacts on glass; on the right
   quiet underlined fields (the line turns yellow while writing) and the white button of the first screen.
   A missing field is marked in a warm red and named under the button; after sending, a thank-you takes the place
   of the fields (about.js). The messages go to the admin through wp-content/mu-plugins/wd-contact.php. */
.wd-about-contact{position:relative;padding:clamp(40px,3vw,64px) clamp(12px,6vw - 40px,200px) clamp(56px,4.4vw,96px);overflow:hidden;color:#d5dce6;background:
	radial-gradient(40% 340px at 96% 300px,rgba(58,111,134,.24),rgba(58,111,134,0) 72%),
	radial-gradient(42% 320px at 6% calc(100% - 120px),rgba(216,166,64,.06),rgba(216,166,64,0) 72%),
	var(--navy)}
.wd-about-contact__in{max-width:clamp(1600px,30vw + 986px,1760px);margin:0 auto}
.wd-about .wd-contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,104px);padding:clamp(32px,3.4vw,64px) clamp(28px,3.6vw,68px)}
.wd-contact__words{display:flex;flex-direction:column}
.wd-contact__author{display:flex;align-items:center;gap:16px;margin-bottom:36px}
.wd-contact__author img{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.18),0 10px 24px -8px rgba(0,0,0,.7)}
.wd-about .wd-contact__author p{display:flex;flex-direction:column;gap:2px;margin:0;line-height:1.3}
.wd-contact__author strong{color:#fff;font-weight:700;font-size:16px}
.wd-contact__author span{color:#a9b8ca;font-size:14px}
.wd-contact .wd-title{margin-bottom:24px}
.wd-about .wd-contact__text{max-width:60ch;margin:0;color:#d5dce6;font-size:clamp(16.5px,.3vw + 12.6px,18.5px);line-height:1.66}
.wd-contact__direct{margin-top:auto;padding-top:40px}
.wd-about .wd-contact__direct-label{margin:0 0 12px;color:#8d9cb0;font-size:14px;line-height:1.4;letter-spacing:.02em}
.wd-about .wd-contact__links{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.wd-about .wd-contact__links li{margin:0;padding:0}
.wd-about .wd-contact__links li::before{content:none}
.wd-about .wd-contact__link{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 18px 10px 14px;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#e9eef5;font-weight:700;font-size:15px;line-height:1.2;transition:background-color .2s ease,box-shadow .2s ease,color .2s ease}
.wd-about .wd-contact__link .wd-ico{width:20px;height:20px;color:var(--yellow)}
.wd-about .wd-contact__link:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--yellow);color:#fff;text-decoration:none}
/* the form */
.wd-about .wd-form{position:relative;margin:0}
.wd-form__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 36px}
.wd-about .wd-form__field{display:block;margin:0}
.wd-form__field--message,.wd-form__actions,.wd-about .wd-form__status{grid-column:1 / -1}
.wd-about .wd-form input,.wd-about .wd-form textarea{display:block;width:100%;margin:0;border:0;color:#fff;font-family:Transat,sans-serif;font-weight:300;font-size:17px;line-height:1.4;letter-spacing:0;transition:box-shadow .2s ease,background-color .2s ease}
.wd-about .wd-form input{padding:22px 0 14px;border-radius:0;background:transparent;box-shadow:inset 0 -1px 0 rgba(255,255,255,.24)}
.wd-about .wd-form input:hover{box-shadow:inset 0 -1px 0 rgba(255,255,255,.45)}
.wd-about .wd-form input:focus{outline:none;background:transparent;box-shadow:inset 0 -2px 0 var(--yellow)}
.wd-about .wd-form textarea{min-height:190px;margin-top:22px;padding:18px 20px;border-radius:12px;background:rgba(8,13,23,.32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);resize:vertical}
.wd-about .wd-form textarea:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.wd-about .wd-form textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--yellow),0 0 0 4px rgba(255,193,7,.1)}
.wd-about .wd-form input::placeholder,.wd-about .wd-form textarea::placeholder{color:#8494a9;opacity:1}
/* a name and an email the browser fills in by itself keep the look of the page: no white or yellow box, white letters.
   Each kind of selector has its own rule, so a browser that does not know one of them still reads the other */
.wd-about .wd-form input,.wd-about .wd-form textarea{color-scheme:dark}
.wd-about .wd-form input:-webkit-autofill,.wd-about .wd-form textarea:-webkit-autofill{-webkit-text-fill-color:#fff;caret-color:#fff;-webkit-background-clip:text;background-clip:text;transition:box-shadow .2s ease,background-color 600000s 0s,color 600000s 0s}
.wd-about .wd-form input:autofill,.wd-about .wd-form textarea:autofill{-webkit-text-fill-color:#fff;caret-color:#fff;background-clip:text;filter:none;transition:box-shadow .2s ease,background-color 600000s 0s,color 600000s 0s}
.wd-about .wd-form input[aria-invalid="true"],.wd-about .wd-form input[aria-invalid="true"]:focus{box-shadow:inset 0 -2px 0 #ff9a8b}
.wd-about .wd-form textarea[aria-invalid="true"],.wd-about .wd-form textarea[aria-invalid="true"]:focus{box-shadow:inset 0 0 0 1.5px #ff9a8b,0 0 0 4px rgba(255,120,100,.12)}
.wd-form__trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.wd-form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:20px}
.wd-about .wd-form__send{display:inline-flex;align-items:center;justify-content:center;min-height:54px;margin:0;padding:0 34px;border:0;border-radius:999px;background:#fff;box-shadow:0 14px 30px -14px rgba(0,0,0,.8);color:var(--navy);font-family:Transat,sans-serif;font-weight:700;font-size:16px;line-height:1.2;letter-spacing:.01em;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.wd-about .wd-form__send:hover{background:var(--yellow);color:var(--navy)}
.wd-about .wd-form__send:disabled{opacity:.6;cursor:progress}
.wd-about .wd-form__note{max-width:46ch;margin:0;color:#8d9cb0;font-size:14px;line-height:1.5}
/* the line under the button: what is missing, in a warm red; while sending, in white; it keeps its place, so nothing jumps */
.wd-about .wd-form__status{display:flex;align-items:center;gap:10px;min-height:21px;margin:2px 0 0;color:#ffb0a4;font-size:15px;line-height:1.4}
.wd-about .wd-form__status::before{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.8v5.2M12 16.2v.1'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.8v5.2M12 16.2v.1'/%3E%3C/svg%3E") center/contain no-repeat}
.wd-about .wd-form__status:empty{visibility:hidden}
.wd-about .wd-form__status.is-busy{color:#cdd8e4}
.wd-about .wd-form__status.is-busy::before{content:none}
/* after sending: the form stays, cleared, and the line under the button says in green that the message has been sent */
.wd-contact__form{position:relative;min-width:0}
.wd-about .wd-form__status.is-ok{align-items:flex-start;color:#b8f0c8}
.wd-about .wd-form__status.is-ok::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;margin-top:1.5px;animation:wd-ok-pop .4s cubic-bezier(.3,1.5,.5,1) both}
@keyframes wd-ok-pop{from{transform:scale(.3)}to{transform:none}}
/* the same words after the form: only if something on the page keeps the line under the button out of sight (about.js) */
.wd-about .wd-form-sent{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;color:#b8f0c8;font-size:15px;line-height:1.4}
.wd-about .wd-form-sent[hidden]{display:none}
.wd-about .wd-form-sent .wd-ico{width:18px;height:18px;margin-top:1.5px;stroke-width:2}

/* ---------- responsive ---------- */
@media (min-width: 1200px){
	/* the map stays in view while a long list of studies is read */
	.wd-about .wd-about-map__canvas{position:sticky;top:77px}
}
@media (min-width: 992px) and (max-width: 1199.98px){
	/* the map takes the full width; under it the countries on the left, the studies on the right */
	.wd-about .wd-about-map__panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:32px;align-items:start}
	.wd-about .wd-about-map__chips{margin:0;padding:0;border:0}
}
@media (max-width: 1199.98px){
	/* the project: the slider above the four points */
	.wd-about-project__band{grid-template-columns:1fr;gap:16px}
	.wd-about-project__bento{grid-template-columns:1fr}
	.wd-about .wd-about-compare{aspect-ratio:16/10}
	.wd-about-map__band{grid-template-columns:1fr;gap:16px}
	.wd-about-map__body{grid-template-columns:1fr}
	/* the story: the band in one column, the text a little wider on the screen */
	.wd-about-story__band{grid-template-columns:1fr;gap:16px}
	.wd-about .wd-film__screen{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
	.wd-film__frames{left:36%}
	/* contact: the words above the form */
	.wd-about .wd-contact{grid-template-columns:1fr}
	.wd-contact__direct{padding-top:28px}
}
@media (max-width: 991.98px){
	/* first screen: the photo panel first, the buttons move under the text */
	.wd-about-hero{padding:73px 8px 8px}
	.wd-about-hero__grid{grid-template-columns:1fr;gap:8px;min-height:0}
	.wd-about-hero__panel{border-radius:16px}
	.wd-about-hero__panel--photo{order:-1;display:block}
	.wd-about-hero__stage{padding:8px 16px 20px}
	.wd-about-hero__col{--ua-a:.351;--ua-u:.667;--ua-t:.281;--w:min(520px,100%);translate:none}
	.wd-about-hero__actions{display:none}
	.wd-about .wd-about-hero__top{position:relative;right:auto;bottom:auto;width:min(286px,84%);margin:-58px 10px 0 auto;padding:14px 16px 16px}
	.wd-about-hero__top-num{font-size:32px}
	.wd-about .wd-about-hero__caption{max-width:none;margin-top:12px}
	.wd-about-hero__text{padding:40px 24px 36px}
	.wd-about .wd-about-hero__name{font-size:44px;text-underline-offset:10px}
	.wd-about .wd-about-hero__role{margin-bottom:20px;font-size:17px}
	.wd-about .wd-about-hero__lead{font-size:19px}
	.wd-about-hero__buttons--phone{display:flex;margin-top:24px}
	/* the project: the same 8px gaps as the first screen, the photos two in a row */
	.wd-about-project{padding:48px 8px}
	.wd-about .wd-panel{border-radius:16px}
	.wd-about-project__bento,.wd-about .wd-points{gap:8px}
	.wd-about-project__bento{margin-top:8px}
	.wd-about .wd-about-compare{aspect-ratio:4/3;min-height:0}
	.wd-about-photos{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:8px;margin-top:8px}
	.wd-about .wd-about-photo{aspect-ratio:4/3}
	.wd-about .wd-about-photo--wide{grid-column:span 2;aspect-ratio:8/3}
	/* the map: the same 8px gaps */
	.wd-about-map{padding:48px 8px}
	.wd-about-map__body{gap:8px;margin-top:8px}
	/* the story: the photo above the text */
	.wd-about-story{padding:48px 8px}
	.wd-film,.wd-about .wd-film__bar{margin-top:8px}
	.wd-about .wd-film__screen{grid-template-columns:1fr;min-height:0}
	.wd-film__frames{position:relative;inset:auto;aspect-ratio:4/3}
	.wd-film__frame{-webkit-mask:linear-gradient(#000 0 72%,transparent);mask:linear-gradient(#000 0 72%,transparent)}
	.wd-about .wd-film__frame .wd-glass-chip{top:12px;right:12px;bottom:auto}
	.wd-about .wd-film__subs{margin-top:-64px;padding:0 24px 28px}
	/* contact: the same edges */
	.wd-about-contact{padding:48px 8px 56px}
}
@media (max-width: 767.98px){
	.wd-about .wd-about-facts{gap:8px}
	.wd-about .wd-about-facts li{padding:14px}
	.wd-about-facts strong{font-size:22px}
	.wd-about-hero__buttons .wd-btn{flex:1 1 auto;padding:0 20px}
	.wd-about{font-size:16px}
	.wd-about .wd-wrap{padding:0 16px}
	.wd-about .wd-h2{font-size:25px;letter-spacing:.05em;text-underline-offset:8px}
	/* the project: one point under another, the icon beside the words; shorter captions */
	.wd-about .wd-title{font-size:30px}
	.wd-about .wd-about-project__lead{font-size:16.5px}
	.wd-about-project__band{padding:28px 22px}
	.wd-about .wd-points{grid-template-columns:1fr;grid-auto-rows:auto}
	.wd-about .wd-point{flex-direction:row;align-items:flex-start;gap:16px;padding:20px}
	.wd-about .wd-glass-chip{left:8px;bottom:8px;padding:7px 10px 8px;font-size:13px}
	.wd-glass-chip span{font-size:12px}
	.wd-about-photo .wd-glass-chip span{display:none}
	.wd-about-compare__year{top:10px;padding:6px 10px;font-size:13px}
	.wd-about-compare__year--then{left:10px}
	.wd-about-compare__year--now{right:10px}
	.wd-about-map__band{padding:28px 22px}
	.wd-about .wd-about-map__lead{font-size:16.5px}
	.wd-about .wd-about-map__canvas{border-radius:16px}
	.wd-map__labels{display:none}
	.wd-about .wd-about-map__panel{padding:22px}
	.wd-about .wd-country__name{font-size:22px}
	.wd-about-story__band{padding:28px 22px}
	.wd-about .wd-about-story__lead{font-size:16.5px}
	.wd-about .wd-film__frame .wd-glass-chip{top:8px;right:8px;left:auto;bottom:auto}
	.wd-about .wd-film__subs{padding:0 22px 26px}
	.wd-about .wd-chapter__title{font-size:24px}
	.wd-film__year{right:auto;left:50%;font-size:30vw;transform:translate(-50%,-50%)}
	.wd-film__frame--title.is-active .wd-film__year,.wd-film__frame--title.is-leaving .wd-film__year{animation:none}
	.wd-about .wd-film__bar{gap:12px;padding:14px 16px}
	.wd-about .wd-film__segs{gap:5px}
	.wd-film__label{display:none}
	.wd-about .wd-contact{padding:28px 22px}
	.wd-about .wd-contact__text{font-size:16.5px}
	.wd-about .wd-contact__link{font-size:14px}
	.wd-form__fields{grid-template-columns:1fr}
	.wd-form__actions{flex-direction:column;align-items:stretch}
	.wd-about .wd-form__send{width:100%}
}
@media (prefers-reduced-motion: reduce){
	.wd-about-photo img,.wd-about .wd-point{transition:none}
	.wd-about-map.is-scratching .wd-map__scratch,.wd-about-map.is-scratching .wd-map__done,.wd-about-map.is-scratching .wd-map__label{transition:none}
	.wd-film__frame,.wd-about-story.wd-js .wd-chapter,.wd-about-story.wd-js .wd-chapter.is-active{transition:none}
	.wd-film__frame.is-active img,.wd-film__frame.is-leaving img,.wd-film__frame--title.is-active .wd-film__year,.wd-film__frame--title.is-leaving .wd-film__year{animation:none}
	.wd-about .wd-form__status.is-ok::before{animation:none}
}