/* ============================= */
/* HARD RESET */
* { box-sizing: border-box; }
ul, li { list-style: none; margin: 0; padding: 0; }
a, a:visited, a:hover, a:active { text-decoration: none; }

/* ============================= */
/* FONT FACE */
@font-face { font-family: "Univers"; src: url("fonts/UniversRegular.woff2") format("woff2"); font-weight: normal; }
@font-face { font-family: "Univers"; src: url("fonts/UniversBold.woff2") format("woff2"); font-weight: bold; }
@font-face { font-family: "Univers"; src: url("fonts/UniversOblique.woff2") format("woff2"); font-weight: normal; font-style: oblique; }

/* ============================= */
/* BASE STYLES */
:root { --vertical-gap: 12px; --column-gap: 40px; }
body { margin: 40px; font-family: "Univers", sans-serif; font-size: 1em; }

/* ============================= */
/* HEADER */
.site-header { margin-bottom: 60px; }

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--vertical-gap);
}

.header-top h1 {
  margin: 0;
  font-weight: bold;
  font-size: 2.3em;
  letter-spacing: 0.05em;
}

.header-links a {
  display: inline-block;
  margin-left: 20px;
  color: blue;
  text-decoration: underline;
}

.section-menu {
  margin-top: 20px;
}

.section-menu a {
  font-family: "Univers", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1em;
  margin-right: 20px;
  color: black;
  cursor: pointer;
  text-decoration: none;
}

.section-menu a.active { color: blue; }

/* ============================= */
/* MAIN LAYOUT: 3 COLUMNS */
.container {
  display: flex;
  gap: var(--column-gap);
  align-items: flex-start;
}

/* LEFT COLUMN */
.left-column {
  flex: 0 0 auto;
  height: calc(100vh - 160px); /* viewport minus header/footer */
  overflow-y: auto; 
  overflow-x: hidden;
  padding-right: 10px;
  scrollbar-width: none;
}

.left-column::-webkit-scrollbar { display: none; }

.left-column li { margin-bottom: var(--vertical-gap); }

/* Project list links (uppercase, black, clickable turns blue) */
.left-column li a {
  width: 100%;
  font-family: "Univers", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.9em;
  display: block;
  cursor: pointer;
  color: black;
}

.left-column li a.active { color: blue; }

/* News text inside left column */
.left-column .news-text {
  font-family: "Univers", sans-serif;
  font-size: clamp(0.8em, 0.8vw + 0.7em, 0.9em);
  font-weight: normal;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: pre-line;      /* respects line breaks in JS text */
  max-width: 1100px;
  word-wrap: break-word;
  display: block;
  margin-bottom: 0;
}

/* Make links inside news text normal case, blue, underlined */
.left-column .news-text a {
  text-transform: none;
  color: blue;
  text-decoration: underline;
  font-size: inherit;     /* ← THIS fixes it */
  font-family: inherit;   /* (optional but safe) */
  line-height: inherit;   /* keeps spacing consistent */
	  display: inline;
  line-height: inherit;
  vertical-align: baseline;
}

/* Cursive class inside news text */
.left-column .news-text .cursive {
  font-style: oblique;
  letter-spacing: 0.03em;
  opacity: 0.9;
}

/* CENTER COLUMN (images) */
.work-image {
  flex: 1 1 700px;    /* default 700px, can shrink/grow */
  max-width: 700px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: var(--vertical-gap);
}

.work-image img {
  width: 100%;
  height: auto;
  display: block;
}

.work-image > *:last-child { margin-bottom: 0; }

/* RIGHT COLUMN (text) */
.work-text {
  flex: 0 1 350px;        /* default max 350px, can shrink */
  max-width: 350px;       /* never grows beyond 350px */
  min-width: 200px;
  font-size: clamp(0.8em, 0.8vw + 0.7em, 0.9em); /* smooth resizing */
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.work-text p {
  margin: 0 0 1.4em 0;
  white-space: pre-line;  /* respect line breaks */
}

/* Links in right column */
.work-text a {
  text-transform: none;
  color: blue;
  text-decoration: underline;
}

/* Cursive in right column */
.work-text .cursive {
  font-style: oblique;
  letter-spacing: 0.03em;
  opacity: 0.9;
}

/* ============================= */
/* FOOTER */
footer {
  margin-top: 60px;
  font-family: "Univers", sans-serif;
  font-size: 0.8em;
  letter-spacing: 0.02em;
  text-align: center;
  color: #B1B1B1;
}

footer a { color: #B1B1B1 !important; text-decoration: none; margin: 0 8px; }

/* ============================= */
/* RESPONSIVE */
@media (max-width: 1400px) {
  .work-image { flex: 1 1 500px; max-width: 500px; }
  .work-text { flex: 0 1 300px; }
}

@media (max-width: 1024px) {
  .container { flex-direction: column; gap: 20px; }
  .header-top { flex-direction: column; align-items: flex-start; }
  .header-links a { margin-left: 0; margin-top: 10px; }
  .left-column { height: auto; overflow: visible; max-width: 100%; }
  .work-image, .work-text { width: 100%; flex: 1 1 auto; }
}

@media (max-width: 768px) {
  body { margin: 20px; }
  .left-column .news-text { max-width: 100%; }
}