* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #ffffff;
  color: #000000;
  font-family: "Bodoni Moda", Didot, "Bodoni 72", serif;
  font-style: normal;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #ffffff;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #ffffff;
  padding: 22px 40px;
  text-align: center;
}

.site-brand {
  font-family: "Molle", cursive;
  font-size: clamp(56px, 8vw, 80px);
  font-style: normal;
  font-weight: 500;
  color: #000000;
  letter-spacing: 2px;
  margin-bottom: 18px;
  cursor: pointer;
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.nav-link {
  border: 0;
  background: #ffffff;
  color: #000000;
  padding: 0;
  font-family: "Bodoni Moda", Didot, "Bodoni 72", serif;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
  background: #ffffff;
  color: #1f4d3a;
  text-decoration: underline;
  text-underline-offset: 5px;
}

main {
  min-height: 75vh;
}

.page {
  display: none;
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 28px;
}

.active-page {
  display: block;
}

#articles {
  padding-top: 36px;
}

.article-view {
  display: none;
}

.article-view.active-view {
  display: block;
}

.article-choices {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 28px;
}

.article-choice {
  border: 0;
  background: #ffffff;
  color: #000000;
  font-family: "Bodoni Moda", Didot, "Bodoni 72", serif;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

.article-choice.active {
  color: #1f4d3a;
}

#home {
  background: #4c3d00;
}

.hero {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 60px;
  font-family: "Molle", cursive;
}

.small-top,
.section-label {
  font-family: "Bodoni Moda", Didot, "Bodoni 72", serif;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #8a7d6d;
  margin-bottom: 14px;
}

h1,
h2,
h3 {
  font-family: "Bodoni Moda", Didot, "Bodoni 72", serif;
  font-weight: 500;
  margin: 0;
}

h1 {
  font-family: "Molle", cursive;
  font-style: normal;
  font-size: clamp(22px, 3.5vw, 42px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(30px, 5vw, 56px);
  line-height: 0.95;
  margin-bottom: 24px;
}

h3 {
  font-size: 24px;
  margin-top: 20px;
}

.symbol {
  font-size: 34px;
  margin: 30px 0;
}

.intro-text,
.page-heading p,
.split-section p {
  font-size: 16px;
  line-height: 1.8;
  color: #4c463f;
}

.page-heading {
  max-width: 720px;
  margin-bottom: 50px;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.image-box {
  border: 1px dashed #ffffff;
  background: #ffffff;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a7d6d;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  min-height: 260px;
}

.image-box.large {
  min-height: 520px;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.article-two-header-image {
  display: block;
  margin-left: 50%;
  margin-right: 0;
  width: 33% !important;
  max-width: none;
  height: auto;
  margin-bottom: 24px;
  transform: translateX(-50%);
}
.article-two-header-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  width: min(70%, 760px);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 18px;
}

.mobile-felina-intro {
  display: none;
}

.second-article-content .article-date-line {
  margin-top: 32px;
}

.article-two-header-row .article-two-header-image,
.article-two-header-row .article-two-side-image {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto;
  width: calc(50% - 9px) !important;
  max-width: calc(50% - 9px);
  height: auto;
  object-fit: initial;
  background: transparent;
  margin: 0 !important;
  transform: none !important;
}

.image-box.square {
  aspect-ratio: 1 / 1;
  min-height: unset;
}

.image-box.portrait {
  min-height: 520px;
}

.article-content {
  min-height: 520px;
  padding: 28px 0;
  color: #000000;
  font-family: "EB Garamond", Garamond, Georgia, serif;
  font-style: italic;
  font-size: 18px !important;
  line-height: 1.8;
  text-align: center;
  white-space: pre-wrap;
  outline: none;
}

.article-content p {
  margin: 0 0 10px;
}

.article-content *:not(img) {
  font-family: "EB Garamond", Garamond, Georgia, serif !important;
  font-size: 18px !important;
  font-style: italic !important;
}

.article-date-line {
  display: block;
  font-size: 20px !important;
}

.article-content *:not(img) {
  font-size: 18px !important;
  line-height: inherit !important;
}

.article-content:empty::before {
  content: "Write your article here";
  color: #8a7d6d;
  font-size: 18px;
}

.article-workspace {
  max-width: 860px;
  margin: 0 auto;
}

.article-title {
  width: 100%;
  border: 0;
  background: #ffffff;
  color: #000000;
  font-family: "Bodoni Moda", Didot, "Bodoni 72", serif;
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 600;
  text-align: center;
  outline: none;
}

.article-toolbar {
  display: none;
  justify-content: flex-end;
  margin-top: 18px;
}

.about-toolbar {
  display: none;
}

.edit-article-button,
.edit-about-button {
  display: none;
}

.edit-mode .edit-article-button,
.edit-mode .edit-about-button {
  display: inline-block;
}

.editor-unlocked .article-toolbar,
.editor-unlocked .about-toolbar {
  display: flex;
}

[hidden] {
  display: none !important;
}

.edit-article-button,
.edit-about-button {
  border: 0;
  background: #ffffff;
  color: #000000;
  font-family: "Bodoni Moda", Didot, "Bodoni 72", serif;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

.insert-photo,
.insert-middle-photo,
.insert-beside-photo,
.insert-before-last-photo,
.insert-beside-final-photo,
.download-article {
  border: 0;
  background: #ffffff;
  color: #000000;
  font-family: "Bodoni Moda", Didot, "Bodoni 72", serif;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

.article-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px 0;
}

.article-content img:first-of-type {
  margin-left: 50%;
  margin-right: 0;
  margin-bottom: 36px;
  width: 110%;
  max-width: none;
  transform: translateX(-50%);
  transform-origin: center center;
}

.article-content img:nth-of-type(2) {
  margin-top: 18px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 18px;
  transform: scale(0.4);
  transform-origin: center center;
}

#article-three .jacob-interview-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 18px auto;
  transform: none;
}

#article-three .jacob-charity-update {
  color: #000000;
}

#article-three .jacob-charity-update .article-date-line {
  font-size: 22px !important;
  font-weight: 700;
}

#article-three .jacob-interview-date {
  font-size: 22px !important;
  font-weight: 700;
}

.article-content img.article-middle-image {
  width: 45%;
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
  margin-block: 18px;
  transform: none;
  transform-origin: center center;
}

.article-photo-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 18px;
  width: 100%;
  margin: 18px 0;
}

.article-photo-row img {
  width: calc(50% - 9px);
  max-width: calc(50% - 9px);
  margin: 0;
  transform: none;
}

.article-content .article-photo-row img {
  width: calc(50% - 9px);
  max-width: calc(50% - 9px);
  margin: 0;
  transform: none;
}

.felina-photo-row {
  width: min(70%, 760px);
  margin-left: auto;
  margin-right: auto;
}

.article-final-photo-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  overflow: visible;
  margin: 18px 0;
}

.article-content .article-final-image {
  position: static;
  margin: 0;
  width: 100%;
  max-width: 100%;
  transform: none;
}

.article-credits p {
  margin: 0;
  line-height: 1.2;
}

.about-workspace {
  max-width: 860px;
  margin: 0 auto;
}

.about-title {
  width: 100%;
  border: 0;
  background: #ffffff;
  color: #000000;
  font-family: "Bodoni Moda", Didot, "Bodoni 72", serif;
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 600;
  outline: none;
}

.about-toolbar {
  display: none;
  justify-content: flex-end;
  margin-top: 18px;
}

.insert-about-photo {
  border: 0;
  background: #ffffff;
  color: #000000;
  font-family: "Bodoni Moda", Didot, "Bodoni 72", serif;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

.about-content {
  min-height: 520px;
  padding: 28px 0;
  color: #000000;
  font-size: 18px;
  line-height: 1.8;
  outline: none;
}

.about-content:empty::before {
  content: "Write your about content here";
  color: #8a7d6d;
  font-size: 16px;
}

.about-content:focus {
  outline: 1px solid #000000;
  outline-offset: 12px;
}

.about-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.split-section {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.contact-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 50px;
}

.contact-details div {
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 26px;
  padding: 30px;
  text-align: center;
}

.contact-details strong {
  font-family: "Bodoni Moda", Didot, "Bodoni 72", serif;
  font-size: 26px;
  font-weight: 500;
}

.site-footer {
  border-top: 1px solid #ffffff;
  padding: 28px;
  text-align: center;
  color: #8a7d6d;
}

@media (max-width: 800px) {
  html,
  body {
    overflow-x: hidden;
  }

  .site-header {
    padding: 18px;
  }

  .site-brand {
    width: 100%;
    font-size: clamp(28px, 10vw, 48px);
    line-height: 1.05;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .main-nav {
    gap: 8px;
  }

  .nav-link {
    font-size: 11px;
  }

  .page {
    padding: 55px 20px;
  }

  .gallery-grid,
  .contact-details,
  .split-section {
    grid-template-columns: 1fr;
  }

  .image-box.large,
  .image-box.portrait {
    min-height: 360px;
  }

  #article-three .article-content p {
    margin-bottom: 4px;
  }

  #article-three .article-content {
    white-space: normal;
    line-height: 1.45;
  }

  .article-content img:first-of-type {
    margin-left: 50%;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    transform: translateX(-50%);
  }

  .article-photo-row,
  .article-two-header-row {
    display: block;
    flex-direction: column;
    width: 100%;
    gap: 18px;
    margin: 18px 0;
  }

  .article-content .article-photo-row img,
  .article-content .article-two-header-row img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    margin: 0 0 18px;
    transform: none !important;
  }

  .felina-photo-row {
    width: 100%;
  }

  .article-content img:nth-of-type(2) {
    margin-top: 18px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 18px;
    transform: scale(0.42);
  }

  .article-content img.article-middle-image {
    width: 100%;
    max-width: 100%;
    margin: 0;
    transform: none;
  }

  .article-content .article-final-photo-wrap {
    width: 100%;
    margin: 18px 0;
  }

  .article-content .article-final-image {
    width: 100%;
    max-width: 100%;
    margin: 0;
    transform: none;
  }

  .article-two-header-image {
    width: 100% !important;
    max-width: 100%;
    margin: 0;
    transform: none;
  }

  .mobile-felina-intro {
    display: block;
    order: 2;
    width: 100%;
    margin: 0 !important;
    padding: 0;
  }

  .mobile-felina-intro p {
    margin: 0 0 6px !important;
    padding: 0;
  }

  .article-two-header-row .article-two-header-image {
    order: 1;
    margin: 0 0 6px !important;
  }

  .article-two-header-row .article-two-side-image {
    order: 3;
    margin: 0 0 6px !important;
  }

  .second-article-content .article-two-header-row {
    margin: 0 !important;
    padding: 0;
  }

  .article-two-after-photos {
    margin: 0 !important;
    padding: 0;
  }

  .second-article-content > .article-two-intro-date,
  .second-article-content > .article-two-intro-paragraph {
    display: none;
  }
}