/* ============================================================
   post.scriptum.ru — modernization + responsive layer
   Loaded AFTER main.css / mobile.css. CSS-only, structure kept.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root{
  --ink:#191613;
  --ink-soft:#4a453f;
  --muted:#9a938a;
  --faint:#cfc9c0;
  --accent:#d21f12;
  --accent-ink:#a3160c;
  --paper:#faf8f4;
  --card:#ffffff;
  --line:#eae5dd;
  --time-hi:#fbe9f0;
  --time-ink:#b03a5b;
  --space-hi:#f0ecd8;
  --space-ink:#7a6f2f;
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --ui:'Spectral',system-ui,sans-serif;
}

/* ---------- base ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0 !important; padding:0 !important;
  min-width:0 !important;
  width:100% !important;
  background-color:var(--paper) !important;
  background-image:url(/img/white-tiles-low-ctrst.jpg) !important; /* keep old textured surround outside the text block */
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px; line-height:1.62;
  font-feature-settings:"liga","onum","kern";
  overflow-x:hidden;
}
a{ color:var(--ink); transition:color .18s ease; }
a:hover{ color:var(--accent); }
img{ max-width:100%; height:auto; }

/* ---------- header / logo / masthead ---------- */
.logo,.logoImg{ float:none !important; }
.currentTime,#currentTime{ color:var(--muted) !important; font-family:var(--ui); letter-spacing:.02em; }

/* ---------- SPACE axis: cities across the top ---------- */
#topRuler{
  padding:1.1em 2vw 0 62px !important; /* start the cities at the left edge of the main section (after the narrowed date rail) */
  display:flex; flex-wrap:wrap; gap:.05em .15em; align-items:flex-end;
  border-bottom:0 !important;
  position:relative; z-index:200 !important; /* paint the selected-city tab above the main box (z-index:100) */
}
#geoLine{ display:none !important; }
.geoMark,.geoMarkSelected{
  float:none !important; position:static !important; width:auto !important;
  font-family:var(--ui);
}
.geoMark a,.geoMarkSelected a{
  padding:.35em .55em !important; margin:0 !important; border-radius:0 !important;
  font-size:.72rem !important; letter-spacing:.01em; text-transform:none !important;
  color:var(--faint) !important; transition:background .18s,color .18s; font-family:var(--ui);
}
.geoMark a:hover{ color:var(--accent) !important; background:var(--accent-soft,#fbe9e7); }
/* selected city: flat tab overlapping the top edge of the card by 5px */
.geoMarkSelected{ position:relative; z-index:210; }
.geoMarkSelected a{
  display:inline-block; background:var(--space-hi) !important; color:var(--space-ink) !important; font-weight:600;
  border-radius:0 !important;
  padding:.35em .55em calc(.35em + 5px) !important; margin-bottom:-5px !important;
  position:relative; z-index:210;
}

/* ---------- GENRE axis: the балет / драма / … bar under the featured article ---------- */
#bottomRuler{
  margin-bottom:2.2em !important;   /* legacy value was 20em, which became ~360px of empty space once the marks float */
  margin-top:-23px !important;      /* lift the band so the selected genre tab overlaps the card's bottom edge by 5px (landing) */
  padding:0 2vw 0 62px !important; /* line up with the cities and the left edge of the main box */
  display:flex; flex-wrap:wrap; gap:.05em .15em; align-items:flex-end;
  position:relative; z-index:210;
}
.genreMark,.genreMarkSelected{
  float:none !important; position:static !important; width:auto !important;
  text-align:left !important; font-family:var(--ui);
}
.genreMark a,.genreMarkSelected a{
  padding:.35em .55em !important; margin:0 !important; border-radius:0 !important;
  font-size:.72rem !important; letter-spacing:.01em; text-transform:none !important;
  color:var(--faint) !important; transition:background .18s,color .18s;
}
.genreMark a:hover,.genreMarkSelected a:hover{ color:var(--accent) !important; background:var(--accent-soft,#fbe9e7); }
.genreMarkSelected a{
  display:inline-block; background:#f0ece4 !important; color:var(--space-ink,#191613) !important; font-weight:600;
  position:relative; z-index:210;
}

/* ---------- TIME axis: dates down the left rail ---------- */
#verticalRuler{
  float:left; position:relative; left:0 !important; width:43px !important;   /* narrow rail: dates wrap to two lines, as in the old site */
  padding:2.2em 0 4em 24px !important;   /* left padding pushes the dates toward the content so the selected box hugs its text on the right */
  z-index:200 !important; /* paint the selected-date tab above the main box */
}
.dateMark{
  float:none !important; position:static !important; height:auto !important; width:auto !important;
  margin-bottom:.35em; font-family:var(--ui);
}
.date,.dateSelected{
  display:block; color:var(--faint) !important; padding:.4em 2px .4em 4px !important;
  margin:0 !important; border-radius:0 !important; font-size:.72rem !important; line-height:1.18; letter-spacing:0;
  font-family:var(--ui); white-space:normal; /* narrow rail wraps day/month/year onto separate lines */
}
.date a,.dateSelected a{ color:var(--faint) !important; }
.date a:hover{ color:var(--accent) !important; }
/* selected date: flat tab overlapping the left edge of the card by 5px */
.dateSelected{
  background:var(--time-hi) !important; color:var(--time-ink) !important;
  border-radius:0 !important;
  margin:0 !important; padding-right:2px !important; position:relative; z-index:210;
}
.dateSelected a{ color:var(--time-ink) !important; }
.vertSpacer{ display:none !important; }

/* ---------- LANDING: main feed layout ---------- */
#focus{ position:relative; }
.colleft{ right:0 !important; width:100% !important; }
.contentColumn{
  float:none !important; left:0 !important; width:auto !important;
  margin:0 clamp(1rem,3vw,3rem) 0 62px !important; padding:0 !important;
  overflow:visible !important; max-width:none;
  box-shadow:none !important; border:0 !important; /* flatten outer frame; only #mainContent card is elevated */
}
/* masthead (logo / motto / time) pinned top-right */
.rightColumn{
  position:absolute !important; top:0; right:clamp(1rem,3vw,3rem); left:auto !important;
  width:auto !important; max-width:230px; float:none !important; margin:0 !important; text-align:right;
}
.rightColumn .logoImg,.rightColumn .logo{ float:none !important; display:inline-block; }
#motto{ text-align:right; }
#currentTime{ text-align:right; margin:.4em 0 0 !important; }
/* Posterus / Mercatura: left sidebar with the feed to its right (as in the old design) */
#leftBodyInfoBlock{
  float:left !important; width:210px !important; left:auto !important;
  margin:.5em 2.4em 2em 0 !important; padding:0 !important;
}
/* featured article (top of feed) */
.articleHead{ overflow:hidden; margin-top:.5em; }
.articleHeadTeaser > div[style*="background"]{
  background:transparent !important; float:none !important; width:auto !important;
  padding:0 !important; margin:.2em 0 1em !important;
}
.articleHeadTeaser > div[style*="background"] a{
  font-family:var(--display) !important; color:var(--accent) !important;
  font-size:1.35rem; font-weight:600; box-shadow:none !important;
}
.articleHeadTeaser img{ border-radius:10px; box-shadow:0 8px 26px -14px rgba(0,0,0,.45); margin:0 1.4em 1em 0 !important; }
.articleHeadDescription{ clear:none !important; font-family:var(--serif); max-width:44rem; } /* clear:both would drop below the tall floated date rail */
.articleHead a,.streamArticleHead a{ text-transform:none !important; }
/* stream feed items — offset right of the Posterus/Mercatura left sidebar */
.articleBodyTeaserBlock{ margin:0 0 3.2em 246px !important; padding:0 !important; max-width:42rem; position:relative; }
/* neutralize legacy link underlines (keep only inline body-paragraph links) */
.articleBodyTitle a,.currentTitle a,.articleBodyTeaser a,.articleHead a,.articleHeadDescription a,
.infoTitle a,.geoMark a,.geoMarkSelected a,.date a,.dateSelected a,.articleAuthor a,.readMore a{ box-shadow:none !important; }
.articleMeta,.articleDateAndTimeBody{ font-family:var(--ui); color:var(--muted) !important; letter-spacing:.02em; }
.articleAuthorBody{ font-family:var(--ui); color:var(--muted) !important; font-size:.72rem !important; }

.articleBodyTitle a{
  font-family:var(--display) !important; color:var(--accent) !important;
  font-size:2.1rem !important; font-style:normal !important; font-weight:700 !important;
  line-height:1.08 !important; letter-spacing:-.01em; text-transform:none !important;
}
.articleBodyTitle a:hover{ color:var(--accent-ink) !important; text-decoration:none !important; }
.articleBodyTeaser{ }
.articleBodyTeaser a{
  font-family:var(--serif) !important; font-size:1.12rem !important; color:var(--ink-soft) !important;
  line-height:1.5;
}
.articleBodyTeaser img,.articleBodyTeaserImg img{
  margin:.2em 0 !important; border-radius:10px;
  box-shadow:0 6px 22px -12px rgba(0,0,0,.4);
}
.readMore a{ color:var(--accent) !important; font-family:var(--ui); }

/* ---------- Posterus / Mercatura styling (layout set above) ---------- */
.infoTitle{
  font-family:var(--display) !important; color:var(--muted) !important;
  font-style:italic; font-size:1.15rem; text-transform:none !important; letter-spacing:.01em;
}
.externals-underline{ border-top:1px solid var(--line) !important; margin:.3em 0 .8em !important; }
.posterus{ background:var(--card) !important; border:1px solid var(--line); border-radius:12px; padding:1.1em !important; }
.posterusItem{ font-size:.9rem !important; font-family:var(--serif); }
.posterusItem span[style*="red"]{ color:var(--accent) !important; }

/* ---------- search ---------- */
#searchBlock input,.visualSearchBlock input,input[type=text],input[type=search]{
  font-family:var(--ui); border:1px solid var(--line) !important; border-radius:10px;
  padding:.55em .8em; background:var(--card); font-size:.95rem;
}

/* ---------- ARTICLE PAGE ---------- */
#mainContent{
  background:var(--card) !important; width:auto !important; float:none !important;
  max-width:none !important; margin:0 94px 0 0 !important; padding:2.4em clamp(1.1rem,4vw,3rem) 4em !important;
  font-size:1.12rem; line-height:1.72;
  box-shadow:0 0 30px -12px rgba(0,0,0,.3) !important; /* landing featured preview keeps the shadow on all four sides, incl. bottom */
}
/* article page (its full body #textBody is present): clip the shadow off the bottom edge only */
body:has(#textBody) #mainContent{ clip-path:inset(-40px -40px 0 -40px) !important; }
#mainContentContainer{ float:none !important; padding:0 0 1em !important; border:0 !important; box-shadow:none !important; background:transparent !important; width:auto !important; } /* flatten the outer frame; no top padding so the white card meets the city band (selected tab overlaps it) */
.currentTitle,.currentTitle a{
  font-family:var(--display) !important; color:var(--accent) !important;
  font-style:normal !important; font-weight:700 !important; font-size:clamp(2.2rem,6vw,3.4rem) !important;
  line-height:1.03 !important; letter-spacing:-.015em; text-transform:none !important;
}
#mainContent h3{
  font-family:var(--display) !important; font-weight:600; font-size:1.5rem;
  margin:2.2em 0 .4em; color:var(--ink); letter-spacing:-.01em;
}
#mainContent p{ margin:0 0 1.15em; text-align:justify; hyphens:auto; }
#mainContent p em:only-child,.articleHeadDescription{ color:var(--ink-soft); }
.articleHeadDescription{ font-family:var(--serif); font-size:1.18rem; font-style:italic; }
/* body images: keep author's 400px height, round + frame */
.bodyImgBlock{
  width:auto !important; height:auto !important; max-width:100%; margin:2.6em 0 !important;
  text-align:center !important;
}
.bodyImgBlock img{ border-radius:10px; box-shadow:0 10px 30px -16px rgba(0,0,0,.45); max-width:100%; display:inline-block; }
.bodyImgCopyright{ font-family:var(--ui) !important; color:var(--muted) !important; margin:0 0 .5em !important; font-size:.78rem !important; text-align:center !important; }
#mainContent p a,.textBody p a{ color:var(--accent-ink); box-shadow:inset 0 -2px 0 var(--time-hi); }
.currentTitle a,#mainContent h3 a{ box-shadow:none !important; }

/* On the article page the body wrapper (.subContent) is float:left in the legacy markup.
   Beside the tall floated date rail it drops below the float, opening a huge white gap.
   Make it a normal block (its own BFC) so it flows straight after the header. */
body:has(#textBody) .subContent{ float:none !important; display:flow-root; margin-left:0 !important; }
/* drop the legacy dotted divider on that container (now that it has full height it draws a line down the page) */
.subContentContainer{ border-right:0 !important; }

/* ---------- footer ---------- */
#footer,.siteInfo{ color:var(--muted) !important; font-family:var(--ui); }
#motto{ color:var(--faint) !important; }

/* reserve masthead/sidebar space on desktop so the feed never underlaps it */
@media (min-width:1025px){
  .contentColumn{ margin-right:300px !important; }
}

/* topic axis (театр/мир-театр/театр-мир): pin to top-right of the content, as in the old design
   (the tall floated date rail + float:none content column push it to the bottom otherwise) */
.topicDimension{
  position:absolute !important; top:.4em !important; left:auto !important; right:343px !important;
  float:none !important; padding-top:0 !important; margin:0 !important; z-index:210; /* overlap the landing preview's right edge by ~5px, on top */
}
/* topic marks: flat, same font as the other three bands */
.topicMark a,.topicMarkSelected a{
  font-family:var(--ui) !important; font-size:.72rem !important; text-transform:none !important; letter-spacing:.01em;
  color:var(--faint) !important; padding:.35em .55em !important; margin-left:0 !important;
  border-radius:0 !important; box-shadow:none !important;
}
.topicMark a:hover{ color:var(--accent) !important; }
.topicMarkSelected a{ display:inline-block; background:#f5f5dc !important; color:var(--space-ink) !important; font-weight:600; position:relative; z-index:210; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* tablet: dates become a horizontal scroll rail; feed full width */
@media (max-width:1024px){
  .topicDimension{ position:static !important; left:auto !important; top:auto !important; }
  .contentColumn,.articleBodyTeaserBlock{ margin-left:0 !important; }
  #verticalRuler{
    float:none !important; width:auto !important;
    display:flex; gap:.15em; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding:.6em 2vw !important; border-bottom:1px solid var(--line);
    scrollbar-width:thin;
  }
  .dateMark{ flex:0 0 auto; margin:0 !important; }
  .date,.dateSelected{ white-space:nowrap; }
  .contentColumn{ margin:0 3vw !important; }
  #leftBodyInfoBlock{ float:none !important; width:auto !important; max-width:none; margin:2.5em 0 !important; }
  .articleBodyTeaserBlock{ max-width:none !important; }
  /* masthead: unpin, show inline at top of content */
  .rightColumn,.rightmenu .rightColumn{ position:static !important; float:none !important; width:auto !important; max-width:none !important; left:0 !important; right:auto !important; text-align:left; margin:1.2em 0 !important; }
  #motto,#currentTime{ text-align:left; }
}
/* phone */
@media (max-width:640px){
  body{ font-size:17px; }
  #topRuler{ overflow-x:auto; flex-wrap:nowrap; padding:.9em 3vw .5em !important; }
  .geoMark,.geoMarkSelected{ flex:0 0 auto; }
  .articleBodyTitle a{ font-size:1.7rem !important; }
  .articleBodyTeaser a{ font-size:1.05rem !important; }
  .articleBodyTeaserBlock{ margin-bottom:2.6em !important; padding:0 3vw; }
  /* teaser thumbnails: stack above text instead of float */
  .articleBodyTeaser img,.articleBodyTeaserImg img,.articleHead img,.streamArticleHead img{
    float:none !important; display:block; margin:.4em 0 .8em !important; width:100%;
  }
  #mainContent{ padding:1.6em 5vw 3em !important; box-shadow:none !important; }
  #mainContent p{ text-align:left; }
  .bodyImgBlock img{ width:100% !important; height:auto !important; }
}