/* UCRDC — shared stylesheet for every page.
   Keeps the original iWeb look, scaled up and responsive.
   1rem = 11px of the original 918px design. The root font size below decides
   how big everything is:  desktop up to 1140px wide, tablet, phone (one column). */

@font-face {
  font-family: 'UCRDC Title';
  src: url(../fonts/roboto-condensed-latin-700-normal.woff2) format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'UCRDC Heading';
  src: url(../fonts/oswald-latin-700-normal.woff2) format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'UCRDC Heading';
  src: url(../fonts/oswald-cyrillic-700-normal.woff2) format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --f-lucida: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
  --f-verdana: Verdana, Geneva, sans-serif;
  --f-arial: Arial, Helvetica, sans-serif;
  --f-helvetica: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-impact: Impact, 'Arial Narrow Bold', sans-serif;
  --f-dingbat: 'Zapf Dingbats', 'ZapfDingbatsITC', sans-serif;
  --f-serif: Georgia, 'Times New Roman', serif;
  --f-futura: Futura, 'Century Gothic', sans-serif;
  --f-title: 'UCRDC Title', 'Helvetica Neue', Arial, sans-serif;

  --page-bg: rgb(244, 247, 240);
  --link: rgb(24, 89, 154);
  --nav-current: rgb(214, 214, 214);
  --menu-box: rgb(247, 247, 247);
  --arrow-top: rgb(200, 0, 0);
  --arrow-sub: rgb(0, 84, 147);
  --panel: rgb(226, 243, 255);
}

/* page scale: 918px design -> up to 1140px */
html { font-size: clamp(11px, calc((100vw - 24px) / 83.4545), 13.66px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page-bg);
  color: #000;
  font-family: var(--f-lucida);
  font-size: 1rem;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { border: 0; display: block; max-width: 100%; height: auto; }
p { margin: 0; }

/* ---------- sheet ---------- */
.sheet {
  max-width: 83.4545rem;
  margin: 10px auto 0;
  min-height: calc(100vh - 10px);
  display: flex; flex-direction: column;
  background: #fff;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, .22);
  overflow: hidden;
}

/* ---------- header ---------- */
.site-header {
  position: relative;
  min-height: 9.818rem;
  display: flex; align-items: flex-start;
  background:
    linear-gradient(rgba(255, 255, 255, .0), rgba(255, 255, 255, .0)),
    linear-gradient(to bottom, rgb(1, 177, 226) 0%, rgb(2, 166, 222) 22%, rgb(0, 149, 212) 40%,
                    rgb(2, 136, 210) 60%, rgb(0, 123, 207) 82%, rgb(1, 128, 214) 100%);
  border-radius: 0 6px 0 0;
}
.site-header::before {   /* light swooshes of the original header */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 918 108' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff'%3E%3Cpath d='M0 40 C 250 0 560 10 918 60' stroke-opacity='.18' stroke-width='1.2'/%3E%3Cpath d='M0 92 C 300 50 620 40 918 18' stroke-opacity='.14' stroke-width='1'/%3E%3Cpath d='M300 108 C 520 70 760 70 918 95' stroke-opacity='.12' stroke-width='1'/%3E%3C/g%3E%3Cpath d='M0 108 L0 70 C 260 40 600 45 918 92 L918 108 Z' fill='%23003b8f' fill-opacity='.10'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.logo { position: relative; flex: none; margin: 1.636rem 0 0 2.09rem; }
.logo img {
  width: 6.27rem; height: auto; max-width: none;
  -webkit-box-reflect: below 1px linear-gradient(transparent 58%, rgba(255, 255, 255, .38));
}
.hdr-text { position: relative; flex: 1 1 auto; margin: 3.2rem 1rem 0 4.4rem; min-width: 0; }
.site-title {
  display: block;
  font: 700 2.15rem/1.05 var(--f-title);
  letter-spacing: .035em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 1px 2px 2px rgba(0, 20, 60, .75);
  white-space: nowrap;
}
.site-title:hover { text-decoration: none; }
.topnav {
  margin: .9rem 0 .8rem .9rem;
  font: bold 1.09rem/1.3 var(--f-arial);
  color: rgb(205, 214, 222);
}
.topnav a { color: rgb(205, 214, 222); text-transform: uppercase; white-space: nowrap; }
.topnav a:hover { color: #fff; text-decoration: none; }
.topnav .sep { margin: 0 .27rem; }
.menu-btn { display: none; }

.searchbar {
  min-height: 2.727rem; margin: 0;
  background: linear-gradient(rgb(250, 250, 250), rgb(243, 243, 243));
  display: flex; justify-content: flex-end; align-items: center;
  padding: 0 1.5rem 0 0;
}
.searchbar form { margin: 0; white-space: nowrap; font: 1.18rem var(--f-arial); display: flex; gap: .4rem; }
.searchbar input { font: inherit; }
.searchbar input[type=search] { width: 19rem; padding: .15rem .4rem; }

/* ---------- three columns ---------- */
.layout {
  display: grid;
  grid-template-columns: 18.09rem 57.725rem;      /* gap menu→content = page margin (Val) */
  grid-template-rows: auto 1fr;
  grid-template-areas: "menu content" "extra content";
  column-gap: 2.545rem;
  padding: 0 2.545rem 1.8rem;
}
.menu { grid-area: menu; }
.col-content { grid-area: content; min-width: 0; }
.left-extra { grid-area: extra; align-self: start; min-width: 0; }
.cols { display: flex; align-items: flex-start; }
.col-main { flex: none; width: 62.883%; }
.col-right { flex: none; width: 37.117%; }
.col-right.panel { background: var(--panel); }

.blk { position: relative; box-sizing: border-box; }
.blk-text { display: flow-root; }
.mbox { box-sizing: border-box; border-radius: 8px; box-shadow: 0 0 2px rgba(34, 102, 170, .25); display: flow-root; }
.deco { flex: none; }
.row { display: flex; align-items: flex-start; }
.blk-text p, .blk-text li { overflow-wrap: break-word; }
.blk-text ul { margin: 0; }
.blk-text ul li { margin: 0; }
.blk-img img { width: 100%; }
.framed { background: #fff; border: 8px solid #fff; box-sizing: border-box; box-shadow: 0 5px 9px rgba(0, 0, 0, .35); }
.blk-text.boxed { padding-bottom: 1.5rem; }
.hbar {                 /* header bar of a framed box (iWeb picture → real text) */
  display: flex; align-items: center; justify-content: center; text-align: center;
  font: bold 1.27rem/1.2 var(--f-lucida); letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .6rem;
}   /* framed text: an empty line under the last line */
.imgmap { position: relative; display: block; }
.imgmap .hot { position: absolute; display: block; }
.video iframe { border: 0; display: block; width: 100%; height: auto; }
/* links that iWeb stored as pictures of text, now real text */
.pic-links ul { list-style: none; margin: 0; padding: 0; }
.pic-links li { font: 1.09rem/var(--step, 1.8rem) var(--f-verdana); letter-spacing: .02em; }
.pic-links a { color: #000; }
.pic-links a::before {
  content: ''; display: inline-block; width: .5em; height: .5em; border-radius: 50%;
  background: rgb(200, 0, 0); margin: 0 .6em 0 .3em; vertical-align: .05em;
}
/* small cover + link floating at the top right of a long text (annotated scripts) */
.taside { float: right; margin: 0 0 1rem 2rem; text-align: center; }
.taside .blk-img { margin: 0 auto .3rem; }
/* a single link that iWeb stored as a picture of text */
.pic-link p { margin: 0; font: 1.18rem/1.5 var(--f-lucida); }
.pic-link a { text-decoration: underline; }
.pic-link-r p { text-align: right; }
/* click-to-play YouTube: "VIDEO" label bottom left, hover reaction */
.yt { position: relative; display: block; background: #000; overflow: hidden; cursor: pointer; }
.yt img { width: 100%; height: 100%; object-fit: cover; max-width: none; transition: transform .25s ease, filter .25s ease; }
.yt::before {          /* dark band at the bottom for the label */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(transparent, rgba(0, 0, 0, .62));
  pointer-events: none; z-index: 1;
}
.yt::after {           /* "VIDEO" label, bottom left */
  content: '\25B6\00a0 VIDEO';
  position: absolute; left: .7rem; bottom: .6rem; z-index: 2;
  font: bold .95rem/1 var(--f-arial); letter-spacing: .08em; color: #fff;
  background: rgba(0, 0, 0, .55); border-radius: 3px; padding: .3rem .5rem .28rem;
  pointer-events: none;
}
.yt-play { display: none; }   /* no centre button: the "VIDEO" label marks videos */
.yt:hover img, .yt:focus-visible img { transform: scale(1.04); filter: brightness(.85); }
.yt:hover::after, .yt:focus-visible::after { background: rgba(0, 0, 0, .8); }
.yt:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
/* grid of pictures with captions (e.g. film versions) */
.has-ov { position: relative; }
.hbar.hbar-long span { letter-spacing: .02em; font-size: 1rem; }   /* long bar labels stay on one line */
.badge { position: absolute; display: block; }
.tclear { display: block; clear: both; }
.badge img { width: 100%; display: block; }
/* page title (was a picture): Oswald Bold, sizes measured from the original picture */
.ptitle { display: flow-root; margin: 0; font: 700 1rem/1 'UCRDC Heading', Impact, 'Arial Narrow', sans-serif; text-transform: uppercase; overflow: visible; }
.ptitle > span:not(.deco) { display: block; font-size: var(--fs); line-height: 1; white-space: nowrap; }
.ptitle .pt-end { white-space: nowrap; }
.ptitle .pt-fade { display: inline-block; width: 9rem; height: .7em; margin-left: 1.2rem; vertical-align: .06em; }   /* the orange fade after the title, in the middle of the capitals */
.deco-ov { position: absolute; display: block; }
.fig-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.fig { margin: 0; min-width: 0; }
.fig .blk-img { width: 100%; margin: 0; }
.fig figcaption p { text-align: center; }

/* iWeb photo page (Exhibits-Internment): grid of the photos + slideshow (js/site.js) */
.album-play { margin: 0 0 1rem; text-align: center; font: 1.18rem/1.5 var(--f-lucida); }
.album-play a { text-decoration: underline; }
.album-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; }
.album-item { display: flex; align-items: flex-end; justify-content: center; height: 11rem; min-width: 0; }   /* photos stand on one line, as in iWeb */
.album-item img { display: block; width: auto; height: auto; max-width: 100%; max-height: 11rem; border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.35); box-sizing: border-box; }
.lb { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; }
.lb img { max-width: calc(100vw - 7rem); max-height: calc(100vh - 6rem); box-shadow: 0 2px 18px rgba(0,0,0,.6); }
.lb button { position: absolute; background: none; border: 0; color: #fff; font: 2.6rem/1 sans-serif; cursor: pointer; padding: .6rem 1rem; opacity: .8; }
.lb button:hover, .lb button:focus-visible { opacity: 1; }
.lb .lb-prev { left: .3rem; top: 50%; transform: translateY(-50%); }
.lb .lb-next { right: .3rem; top: 50%; transform: translateY(-50%); }
.lb .lb-close { right: .3rem; top: .3rem; }
.lb .lb-play { left: 50%; bottom: .6rem; transform: translateX(-50%); font-size: 1.4rem; }
.lb .lb-count { position: absolute; left: 1rem; bottom: 1rem; color: #ccc; font: 1.1rem/1 var(--f-lucida); }

@media (prefers-reduced-motion: reduce) { .yt img { transition: none; } }

/* ---------- left menu ---------- */
.menu {
  box-sizing: border-box;
  background: var(--menu-box);
  box-shadow: 2px 2px 7px rgba(0, 0, 0, .45);
  min-height: 65.64rem;
  padding: .6rem 0 1.818rem;
  margin-top: 1rem;
}
.menu ul { list-style: none; margin: 0 .909rem; padding: 0; }
.menu li { position: relative; font: 1rem/1.3636 var(--f-verdana); }
.menu a { color: #000; }
.menu .top { font-weight: bold; padding: .636rem .364rem .182rem 1.09rem; }
.menu .top.gap { margin-top: .364rem; }
.menu .sub.tight { margin-top: -.364rem; }
.menu .sub { padding: .273rem .364rem .182rem 3.455rem; }
.menu li::before {
  content: '\2023';
  position: absolute; top: 0;
  font: 1.818rem/1.818rem var(--f-lucida); font-weight: normal;
}
.menu .top::before { left: .09rem; top: .364rem; color: var(--arrow-top); }
.menu .sub::before { left: 2.455rem; color: var(--arrow-sub); }
.menu .sub.sub2 { padding-left: 4.909rem; }   /* third level ("Texts and Photos" under "Ukrainians Assisting Jews") */
.menu .sub.sub2::before { left: 3.909rem; }
.menu li.current { background: var(--nav-current); }
.menu a.alt { color: rgb(50, 28, 13); }

/* ---------- footer ---------- */
.site-footer { margin-top: auto; padding-top: 5.545rem; text-align: center; font: .909rem/1.4 var(--f-lucida); }
.site-footer a { color: #000; white-space: nowrap; }
.site-footer .sep { margin: 0 .27rem; }
.site-footer .band { height: 2.545rem; margin-top: 2.273rem; background: url(../images/site/footer.jpg) center / 100% 100% no-repeat; }

/* =================== tablet: menu behind a button =================== */
@media (max-width: 959px) {
  html { font-size: 12px; }
  .sheet { margin: 0; box-shadow: none; min-height: 100vh; }
  .site-header { border-radius: 0; }
  .site-title { white-space: normal; font-size: 2.1rem; }
  .hdr-text { margin-left: 2rem; margin-right: 6.5rem; }
  .menu-btn {
    display: block; position: absolute; right: 1rem; top: 1.2rem;
    font: bold 1.1rem var(--f-arial); color: #fff; letter-spacing: .05em;
    background: rgba(0, 40, 100, .35); border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 4px; padding: .5rem .9rem; cursor: pointer;
  }
  .menu-btn::before { content: '\2630  '; }
  .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "menu" "content" "extra";
    padding: 0 1.6rem 1.6rem;
  }
  .menu { display: none; min-height: 0; margin-top: 1rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
  .menu-open .menu { display: block; }
  .menu ul { columns: 2; column-gap: 2rem; }
  .menu li { break-inside: avoid; }
  .left-extra { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; border-top: 1px solid #ddd; margin-top: 2rem; }
  .left-extra > * { margin-left: 0 !important; }
  .site-footer { padding-top: 2.5rem; }
}

/* =================== phone: one column =================== */
@media (max-width: 699px) {
  .album-grid { grid-template-columns: repeat(3, 1fr); }
  .album-item { height: 8rem; }
  .album-item img { max-height: 8rem; }
  html { font-size: 14.5px; }
  .site-header { min-height: 0; padding-bottom: .4rem; }
  .logo { margin: 1rem 0 0 1rem; }
  .logo img { width: 3.6rem; }
  .hdr-text { margin: .9rem 1rem 0 1rem; }
  .site-title { font-size: 1.32rem; line-height: 1.15; letter-spacing: .02em; }
  .topnav { margin: .7rem 0 .5rem; font-size: .9rem; line-height: 1.7; }
  .topnav .sep { margin: 0 .15rem; }
  .menu-btn { position: static; align-self: flex-start; margin: 1rem 1rem 0 auto; flex: none; padding: .45rem .7rem; }
  .site-header { flex-wrap: wrap; }
  .hdr-text { order: 3; flex-basis: 100%; }
  .searchbar { margin: 0; padding: .5rem .8rem; justify-content: stretch; }
  .searchbar form { width: 100%; font-size: 1rem; }
  .searchbar input[type=search] { flex: 1; width: auto; min-width: 0; }
  .layout { padding: 0 .9rem 1.2rem; }
  .menu ul { columns: 1; }

  /* every block in one clean stack */
  .cols { display: block; }
  .col-main, .col-right { width: auto; }
  .col-right.panel { margin: 1.2rem 0 0 !important; width: auto !important; min-height: 0 !important; padding: .2rem .9rem 1rem; }
  .blk, .row { margin-left: 0 !important; margin-top: 1rem !important; min-height: 0 !important; }
  .blk.joined { margin-top: 0 !important; }
  .mbox { margin-top: 1rem !important; padding: .2rem .8rem 1rem !important; }
  .deco { display: none; }   /* outlined text glued to the picture above */
  .blk-text { width: auto !important; }
  .blk-text p, .blk-text li { white-space: normal !important; }
  .center-m, .center-m p { text-align: center; }
  .row { flex-wrap: wrap; gap: 1rem; }
  .row > .blk { margin-top: 0 !important; }
  .ptitle { width: auto !important; height: auto !important; }
  .row > .ptitle { flex: 1 1 auto !important; min-width: 0; }
  .ptitle > span:not(.deco) { white-space: normal; margin-left: 0 !important; font-size: calc(var(--fs) * .85); line-height: 1.15; }      /* the row gap is the only space between its parts */
  .fig-grid { margin-top: 1rem !important; column-gap: 1rem !important; row-gap: 1rem !important; }
  .fig .blk { margin-top: 0 !important; }
  .fig figcaption { margin-top: .4rem !important; }
  .row > .blk-text { flex: 1 1 12rem !important; }
  .blk-img { margin-left: auto !important; margin-right: auto !important; }
  .video { width: 100% !important; }
  .left-extra { display: block; }
  .site-footer { font-size: .95rem; line-height: 2; padding: 2rem .8rem 0; }
  .site-footer .band { margin: 1.2rem -.8rem 0; height: 2rem; }
}
/* perforated "stamp" frame of the Maniak letter envelopes (iWeb frame picture, 9-slice) */
.stamp { box-sizing: border-box; border-style: solid; border-width: 0.818rem 0.909rem 1.273rem 1rem;
  border-image: url(../images/site/stamp-frame.png) 9 10 14 11 stretch; background: #fff; }
/* Tumult Hype animation box (fixed-size slideshow): never wider than the column */
.hype { overflow: hidden; width: 100%; box-sizing: border-box; }   /* js/site.js zooms the slideshow to the column width (frame = same 8px on all sides) */