@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

.ArticelTitle {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 4rem;
  letter-spacing: 1px;
  text-align: center;
}

.articelText,
.ArticelText,
.articleText {
  display: block;
  margin: 0 auto 1.25rem auto;
  max-width: 720px;
  width: min(80%, 720px);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  padding-bottom: 1.25rem;
  font-size: calc(1.125rem * var(--dre-text-scaler-factor, 1));
  box-sizing: border-box;
}

:root{
  --accent: #304f51;
  --text: #151515;
  --muted: #6b757b;
  --card-bg: #fff;
  --max-width: 1920px;
}

*{box-sizing: border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  justify-content:center;
  padding:20px 16px;
}

.stage{
  width:100%;
  max-width:var(--max-width);
  position:relative;
}

.hero-wrap{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:8px;
}
.hero{
  width:100%;
  object-fit:cover;
  display:block;
  border-radius:8px;
  transform-origin:center;
}
.hero2{
  width:20%;
  object-fit:cover;
  display:block;
  transform-origin:center;
  align-self: center;
  margin: auto;
}

.photo-credit{
  position:absolute;
  right:18px;
  bottom:14px;
  color:white;
  font-weight:600;
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
  font-size:0.95rem;
  background: rgba(0,0,0,0.08);
  padding:6px 8px;
  border-radius:6px;
}

.card{
  position:relative;
  background:var(--card-bg);
  width: min(100%, 860px);
  margin: -10vh auto 24px;
  border-radius:10px;
  box-shadow: 0 10px 30px rgba(20,20,20,0.08);
  padding: clamp(20px, 4vw, 40px) 24px;
  text-align:center;
}

.category{
  display:inline-block;
  color:var(--accent);
  font-weight:700;
  font-size:0.9rem;
  margin-bottom:10px;
  letter-spacing:0.02em;
}

.category2{
  display:inline-block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:var(--accent);
  font-weight:700;
  font-size:0.9rem;
  margin-bottom:10px;
  letter-spacing:0.02em;
  text-align: left;
}

.headline{
  margin: 6px 0 14px 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(36px, 8.5vw, 92px);
  line-height: 0.98;
  font-weight:900;
  letter-spacing:-0.02em;
  color:var(--text);
  word-break:break-word;
}

.kicker{
  margin: 8px auto 0 auto;
  max-width:760px;
  color:var(--muted);
  font-size: clamp(14px, 2.2vw, 20px);
  line-height:1.8;
  font-weight:300;
  padding: 0 6px;
}

.actions{
  display:flex;
  gap:24px;
  justify-content:center;
  align-items:center;
  margin-top:18px;
}
.action{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--accent);
  font-weight:700;
  font-size:0.95rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  cursor:pointer;
  user-select:none;
}
.scaledown{
  width:50%;
  transform-origin:center;
  align-self: center;
  margin: auto;
}
.action svg{width:20px;height:20px;flex-shrink:0}

@media (min-width: 980px){
  .card{ margin-top: -20vh; padding:48px; }
  .headline{ letter-spacing:-0.03em; }
}

.action:focus{ outline:3px solid rgba(227,6,19,0.14); outline-offset:4px; border-radius:6px }
@media (max-width: 420px){
  body{padding:12px;}
  .card{ margin-top:-2vh; padding:18px; border-radius:8px; }
  .photo-credit{ font-size:0.8rem; right:12px; bottom:10px; }
  .actions{ gap:14px; }
  .ArticelTitle{ font-size:2rem; }
  .articelText,
  .ArticelText,
  .articleText {
    font-size: 10px;
    width: 100%;
    max-width: none;
    padding-left: 6px;
    padding-right: 6px;
  }
  .hero-wrap{border-radius:6px;}
}
.navbar-brand .logo {
  width: 150px;
  height: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 992px) {
  .navbar-brand .logo {
    width: 120px;
  }
}

@media (max-width: 576px) {
  .navbar-brand .logo {
    width: 90px;
  }
}

@media (min-width: 1200px) {
  .articelText,
  .ArticelText,
  .articleText {
    width: min(60%, 720px);
  }
}