@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Noto+Serif+SC:wght@200..900&display=swap");

/* ============================================================
   Yilun Liu – Academic CV
   Adaptive Theme: Light (rfmoe.shop style) + Dark mode toggle
   ============================================================ */

/* ---- Theme Variables ---- */
:root, [data-theme="light"] {
  --color-bg:               #e4eef2;
  --color-card:             #ffffff;
  --color-card-border:      rgba(48, 136, 152, 0.2);
  --color-text:             #333333;
  --color-text-muted:       rgb(118, 136, 145);
  --color-accent:           rgb(48, 136, 152);
  --color-accent-hover:     #f0b8a8;
  --color-accent-light:     rgb(95, 178, 195);
  --color-nav-bg:           rgb(58, 88, 102);
  --color-nav-text:         #ffffff;
  --color-footer-bg:        rgb(58, 88, 102);
  --color-footer-text:      rgba(255, 255, 255, 0.75);
  --color-divider:          rgba(48, 136, 152, 0.22);
  --color-heading:          rgb(38, 108, 120);
  --color-sub-heading:      rgb(30, 92, 105);
  --shadow-card:            0 2px 14px rgba(48, 136, 152, 0.09);
  --shadow-card-hover:      0 12px 40px rgba(48, 136, 152, 0.16);
  --color-page-hero-bg:     rgba(255, 255, 255, 0.45);
  --color-page-hero-border: rgba(48, 136, 152, 0.22);
  --color-toggler:          rgba(255, 255, 255, 0.45);
  --color-code-bg:          rgba(48, 136, 152, 0.08);
  /* Liquid glass */
  --glass-blur:             blur(18px);
  --glass-surface:          rgba(255, 255, 255, 0.10);
  --glass-surface-hover:    rgba(255, 255, 255, 0.20);
  --glass-border:           rgba(48, 136, 152, 0.05);
  --glass-reflection:       linear-gradient(
    -170deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0) 52%
  );
  --shadow-glass:           0 8px 32px rgba(48, 136, 152, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --ease-liquid:            cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] {
  --color-bg:               #0c0f14;
  --color-card:             #1c1f26;
  --color-card-border:      rgba(255, 255, 255, 0.12);
  --color-text:             #e8e9ec;
  --color-text-muted:       #a8adb8;
  --color-accent:           #7dd3e8;
  --color-accent-hover:     #f0b8a8;
  --color-accent-light:     #5fb8c8;
  --color-nav-bg:           #12151c;
  --color-nav-text:         #f0f0f1;
  --color-footer-bg:        #12151c;
  --color-footer-text:      #8b8f98;
  --color-divider:          rgba(255, 255, 255, 0.1);
  --color-heading:          #f0f4f8;
  --color-sub-heading:      #9ca3af;
  --shadow-card:            0 8px 28px rgba(0, 0, 0, 0.35);
  --shadow-card-hover:      0 16px 48px rgba(0, 0, 0, 0.45);
  --color-page-hero-bg:     rgba(255, 255, 255, 0.04);
  --color-page-hero-border: rgba(255, 255, 255, 0.1);
  --color-toggler:          rgba(255, 255, 255, 0.4);
  --color-code-bg:          rgba(160, 165, 175, 0.07);
  --glass-surface:          rgba(255, 255, 255, 0.06);
  --glass-surface-hover:    rgba(255, 255, 255, 0.1);
  --glass-border:           rgba(255, 255, 255, 0.05);
  --glass-reflection:       linear-gradient(
    -170deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0) 50%
  );
  --shadow-glass:           0 8px 36px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ---- Liquid glass: animated backdrop ---- */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.scene__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.3;
  animation: blob-drift 20s ease-in-out infinite alternate;
}

[data-theme="dark"] .scene__blob {
  opacity: 0.48;
}

.scene__blob--1 {
  width: calc((620px + 90vw) / 2);
  height: calc((620px + 90vw) / 2);
  background: radial-gradient(circle, rgba(95, 184, 200, 0.25), rgba(48, 136, 152, 0));
  top: -18%;
  right: -12%;
  animation-duration: 22s;
}

.scene__blob--2 {
  width: calc((520px + 75vw) / 2);
  height: calc((520px + 75vw) / 2);
  background: radial-gradient(circle, rgba(180, 140, 220, 0.2), rgba(226, 105, 83, 0));
  bottom: -15%;
  left: 8%;
  animation-duration: 17s;
  animation-delay: -7s;
}

.scene__blob--3 {
  width: calc((380px + 60vw) / 2);
  height: calc((380px + 60vw) / 2);
  background: radial-gradient(circle, rgba(255, 210, 160, 0.2), rgba(95, 178, 195, 0));
  bottom: -20%;
  right: -45%;
  animation-duration: 25s;
  animation-delay: -11s;
}


@keyframes blob-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(48px, -32px) scale(1.06);
  }
  66% {
    transform: translate(-36px, 44px) scale(0.96);
  }
  100% {
    transform: translate(24px, 20px) scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene__blob {
    animation: none !important;
  }
}

@supports not (backdrop-filter: blur(1px)) {
  .section-card,
  .navbar,
  .page-hero,
  footer,
  .theme-toggle-btn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  [data-theme="light"] .section-card:not(.sidebar-photo),
  [data-theme="light"] .page-hero {
    background: var(--color-card) !important;
  }

  [data-theme="dark"] .section-card:not(.sidebar-photo),
  [data-theme="dark"] .page-hero {
    background: var(--color-card) !important;
  }

  .navbar {
    background: var(--color-nav-bg) !important;
  }

  footer {
    background: var(--color-footer-bg) !important;
    box-shadow: none !important;
  }
}

/* Square corners — override Bootstrap border-radius variables */
:root {
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-2xl: 0;
  --bs-border-radius-pill: 0;
  --bs-body-font-family: "Crimson Pro", "Noto Serif SC", Georgia, "Times New Roman", serif;
  --bs-font-sans-serif: "Crimson Pro", "Noto Serif SC", Georgia, "Times New Roman", serif;
}

/* ---- Smooth theme transitions ---- */
body, .navbar, .section-card, .page-hero, footer,
a, h1, h2, h3, h4, h5, h6, p, li, span, div, strong, em {
  transition: background-color 0.25s ease, color 0.2s ease,
              border-color 0.25s ease, box-shadow 0.25s ease;
}

/* ---- Typography (Crimson Pro variable) ---- */
/* Weight scale uses Crimson Pro wght axis (200-900) for hierarchy. */
:root {
  --fw-bold: 900;
  --fw-extra-bold: 800;
  --fw-bold: 700;
  --fw-semi: 650;
  --fw-medium: 600;
  --fw-book: 500;
  --fw-regular: 400;
  --fw-light: 300;
  --fw-extra-light: 250;
  --fw-thin: 200;
  --fw-hairline: 100;
}

html {
  font-optical-sizing: auto;
  /* Prevent mobile browsers from inflating text differently per page */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---- Base ---- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Crimson Pro", "Noto Serif SC", Georgia, "Times New Roman", serif;
  font-weight: var(--fw-regular);
  font-size: 1rem;
  line-height: 1.72;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.navbar,
.navbar-brand,
.nav-link,
.table,
.btn {
  font-family: "Crimson Pro", "Noto Serif SC", Georgia, "Times New Roman", serif;
}

strong,
b {
  font-weight: var(--fw-bold);
}

em {
  font-style: italic;
  font-weight: var(--fw-book);
}

.navbar,
main,
footer {
  position: relative;
  z-index: 1;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* ---- Navbar ---- */
.navbar {
  background: rgba(58, 88, 102, 0.82) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: none;
}

[data-theme="dark"] .navbar {
  background: rgba(18, 21, 28, 0.86) !important;
}

.navbar-brand {
  color: var(--color-nav-text) !important;
  font-weight: var(--fw-bold) !important;
}

.nav-link {
  color: var(--color-nav-text) !important;
  font-weight: var(--fw-light);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-accent-hover) !important;
}

.navbar-toggler {
  padding: 0;
  border: none;
  box-shadow: none;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

.navbar-toggler-icon {
  filter: invert(1);
  width: 1.35rem;
  height: 1.35rem;
}

/* ---- Theme toggle: icon only (no panel); works on <i> or <button>+icon ---- */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  background: transparent;
  border: none;
  color: var(--color-nav-text);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  -webkit-appearance: none;
  appearance: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.theme-toggle-btn:hover {
  color: #fff;
  opacity: 0.95;
  background: transparent;
  box-shadow: none;
}

.theme-toggle-btn:focus {
  outline: none;
}

.theme-toggle-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

/* Toggler before #mainNav in DOM so the hamburger stays on the top row when the menu opens */
.navbar-toolbar {
  gap: 0.35rem;
}

@media (max-width: 991.98px) {
  .navbar > .container > .navbar-collapse {
    flex-basis: 100%;
  }
}

/* ---- Section Cards ---- */
.section-card {
  position: relative;
  overflow: hidden;
  background: var(--glass-surface);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--glass-border);
  border-radius: 0;
  box-shadow: var(--shadow-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.section-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glass-reflection);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

.section-card > * {
  position: relative;
  z-index: 1;
}

/* Sidebar profile: no panel — sits directly on page / blob background */
.section-card.sidebar-photo {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-top: 0;
  transition: none;
}

.section-card.sidebar-photo::before {
  display: none;
}

/* ---- Section Headings ---- */
h2.section-title {
  color: var(--color-heading);
  font-size: 1.2rem;
  font-weight: var(--fw-extra-bold);
  line-height: 1.3;
  border-bottom: 2px solid var(--color-divider);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

h3.sub-title {
  color: var(--color-sub-heading);
  font-size: 1.02rem;
  font-weight: var(--fw-semi);
  line-height: 1.35;
  margin-bottom: 0.5rem;
}

/* ---- Accent ---- */
.accent {
  color: var(--color-accent);
}

hr.accent-hr {
  border-color: var(--color-accent);
  opacity: 0.35;
}

/* ---- Sidebar ---- */
.sidebar-photo img {
  width: 60%;
  display: block;
  margin: 0 auto 1rem auto;
}

@media (min-width: 992px) {
  .sidebar-photo img {
    margin-left: auto;
    margin-right: 0;
  }
}

.sidebar-info {
  text-align: inherit;
}

.sidebar-photo .sidebar-line {
  display: flex;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.35rem;
}

@media (min-width: 992px) {
  .sidebar-photo .sidebar-line {
    justify-content: flex-end;
  }
}

@media (max-width: 991.98px) {
  .sidebar-photo .sidebar-info,
  .sidebar-photo .sidebar-info h4 {
    text-align: center;
  }

  .sidebar-photo .sidebar-line {
    justify-content: center;
    text-align: center;
  }

  .sidebar-photo .sidebar-line > span:not(.sidebar-fa),
  .sidebar-photo .sidebar-line > a,
  .sidebar-photo a.sidebar-line {
    text-align: center;
  }
}

.sidebar-photo .sidebar-fa {
  flex: 0 0 1.35em;
  display: flex;
  justify-content: center;
  text-align: center;
}

.sidebar-info h4 {
  color: var(--color-heading);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 0.3rem;
}

.sidebar-info p {
  font-size: 0.88rem;
  font-weight: var(--fw-light);
  margin-bottom: 0.25rem;
  color: var(--color-text-muted);
}

.sidebar-info p a {
  color: var(--color-accent);
}

.sidebar-links a {
  font-size: 0.9rem;
  font-weight: var(--fw-book);
  color: var(--color-accent);
}

.sidebar-links a.sidebar-line {
  display: flex;
  width: 100%;
  margin: 0.25rem 0;
  text-decoration: none;
}

.sidebar-links a:hover {
  color: var(--color-accent-hover);
  text-decoration: none;
}

/* ---- Publications ---- */
.pub-entry {
  --pub-entry-content-bottom: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-divider);
}

.pub-entry:last-child {
  --pub-entry-content-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.pub-title {
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--color-text);
}

.pub-authors {
  font-size: 0.88rem;
  font-weight: var(--fw-thin);
  color: var(--color-text-muted);
}

.pub-authors strong {
  font-weight: var(--fw-extra-bold);
}

.pub-venue {
  font-size: 0.85rem;
  font-weight: var(--fw-medium);
}

.pub-abstract {
  font-size: 0.85rem;
}

.pub-links {
  font-size: 0.85rem;
  font-weight: var(--fw-medium);
}

.pub-links a + a {
  margin-left: 0.25rem;
}

.pub-entry--with-image {
  position: relative;
  overflow: hidden;
  min-height: 100px;
}

.pub-image-slot {
  position: absolute;
  top: 0;
  right: 0;
  bottom: var(--pub-entry-content-bottom);
  width: clamp(5%, 20vw, 250px);
  z-index: 0;
  pointer-events: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Opaque on the right, fading toward the left under text */
  -webkit-mask-image: linear-gradient(
    to left,
    #fff 0%,
    #fff 20%,
    rgba(255, 255, 255, 0) 100%
  );
  mask-image: linear-gradient(
    to left,
    #fff 0%,
    #fff 20%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.pub-content {
  position: relative;
  z-index: 1;
  width: 78%;
  max-width: none;
}

.pub-image-slot img,
.pub-image {
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
  height: 100%;
  display: block;
  max-width: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ---- Education ---- */
.edu-entry {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-divider);
}

.edu-entry:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.edu-period {
  min-width: 150px;
  color: var(--color-heading);
  font-size: 0.85rem;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.edu-content strong {
  color: var(--color-text);
  font-size: 0.97rem;
  font-weight: var(--fw-extra-bold);
}

.edu-content .institution {
  font-size: 0.88rem;
  font-weight: var(--fw-light);
}

/* ---- Projects ---- */
.project-date {
  color: var(--color-heading);
  font-size: 0.82rem;
  font-weight: var(--fw-hairline);
  text-transform: uppercase;
}

.project-title {
  font-weight: var(--fw-bold);
  font-size: 0.97rem;
  line-height: 1.4;
}

.project-institution {
  font-size: 0.85rem;
  font-weight: var(--fw-extra-light);
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}

.project-institution em {
  font-style: italic;
}

.project-subtitle {
  font-size: 0.9rem;
  font-weight: var(--fw-light);
  line-height: 1.35;
  margin-bottom: 0.35rem;
}

.project-subtitle a {
  color: inherit;
  text-decoration: none;
}

.project-subtitle a:hover {
  text-decoration: underline;
  color: var(--color-accent);
}

.project-tutor {
  font-size: 0.85rem;
  margin-bottom: 0.45rem;
}

.project-img-link {
  display: block;
  margin-bottom: 0.5rem;
}

.project-img-link .project-img {
  margin-bottom: 0;
}

.project-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: top;
  margin-bottom: 0.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Opaque from top through vertical center; bottom half fades to fully transparent */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #fff 0%,
    #fff 50%,
    rgba(255, 255, 255, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #fff 0%,
    #fff 50%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.project-img:hover {
  transform: scale(1.01);
  box-shadow: 0 6px 20px rgba(48, 136, 152, 0.2);
}

[data-theme="dark"] .project-img:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.project-row {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-divider);
}

.project-row:last-child {
  border-bottom: none;
}

/* ---- Skills ---- */
.skill-category {
  margin-bottom: 0.75rem;
  font-weight: var(--fw-light);
}

.skill-category strong {
  color: var(--color-heading);
  font-weight: var(--fw-bold);
  display: inline-block;
  min-width: 120px;
}

/* ---- Blockquote ---- */
blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: 1rem;
  margin-left: 0;
  color: var(--color-text-muted);
  font-weight: var(--fw-hairline);
  font-style: italic;
  font-variation-settings: "opsz" 18;
}

/* ---- Footer ---- */
footer {
  background: rgba(58, 88, 102, 0.88);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  color: var(--color-footer-text);
  padding: 1rem 1rem;
  text-align: center;
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: var(--fw-hairline);
  box-shadow: 0 -4px 24px rgba(48, 136, 152, 0.08);
}

[data-theme="dark"] footer {
  background: rgba(18, 21, 28, 0.9);
  box-shadow: 0 -4px 28px rgba(0, 0, 0, 0.35);
}

footer a {
  color: rgba(255, 255, 255, 0.85);
  font-weight: var(--fw-medium);
}

footer a:hover {
  color: #fff;
  text-decoration: underline;
}

[data-theme="dark"] footer a {
  color: var(--color-accent);
}

[data-theme="dark"] footer a:hover {
  color: var(--color-accent-hover);
}

/* ---- Back link ---- */
.back-link {
  margin: 1rem 0 1.5rem 0;
}

/* ---- Sub-page Page Hero ---- */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--glass-surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 0;
  box-shadow: var(--shadow-glass);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glass-reflection);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

.page-hero > * {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  color: var(--color-heading);
  font-size: 1.55rem;
  font-weight: var(--fw-bold);
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.page-hero .meta {
  font-size: 0.87rem;
  font-weight: var(--fw-thin);
  color: var(--color-text-muted);
}

.page-hero .meta span {
  margin-right: 1rem;
}

/* ---- Sub-page images ---- */
.content-img {
  width: 100%;
  margin-bottom: 0.5rem;
}

.img-caption,
figcaption {
  font-family: "Crimson Pro", "Noto Serif SC", Georgia, serif;
  font-size: 0.8rem;
  font-weight: var(--fw-hairline);
  font-style: italic;
  font-variation-settings: "opsz" 14;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

/* ---- Tables ---- */
.table {
  color: var(--color-text);
}

.table th {
  color: var(--color-heading);
  font-weight: var(--fw-extra-bold);
  text-transform: uppercase;
  font-size: 0.78rem;
  border-color: var(--color-divider);
}

.table td {
  font-weight: var(--fw-regular);
  border-color: var(--color-divider);
  color: var(--color-text);
}

[data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(48, 136, 152, 0.04);
  color: var(--color-text);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
}

/* ---- Responsive tweaks ---- */
@media (max-width: 767px) {
  .pub-entry--with-image {
    min-height: 160px;
  }

  .pub-image-slot {
    width: clamp(70px, 22vw, 130px);
    min-width: 0;
    max-width: none;
  }

  .pub-image-slot img,
  .pub-image {
    height: 100%;
    width: auto;
    max-height: none;
  }

  .edu-entry {
    flex-direction: column;
    gap: 0.25rem;
  }

  .edu-period {
    min-width: unset;
  }

  .sidebar-photo img {
    width: 50%;
  }
}