/* ============================================
   Radius patterns
============================================ */
body {
  margin: 0;
  font-family: "Funnel Sans", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #222222;
  background-color: #faebd7;
  background-image: url("/static/img/tiled-paisley-250.webp");
  background-repeat: repeat;
  background-size: 250px;
}

/* --------------------------------------------
   Typography
--------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: "Michroma", cursive;
  line-height: 1.2;
  margin: 0 0 1rem;
}

p {
  margin: 0 0 1rem;
}

/* --------------------------------------------
   Links
--------------------------------------------- */
a {
  color: #316487;
  text-decoration: none;
  transition: color 150ms ease;
}
a:hover {
  color: #5a3d5c;
  text-decoration: underline;
}

/* --------------------------------------------
   Lists
--------------------------------------------- */
ul, ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

/* --------------------------------------------
   Images
--------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------
   Forms (light baseline only)
--------------------------------------------- */
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* --------------------------------------------
   Accessibility helpers
--------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   Containers
============================================ */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

.container--reading {
  max-width: 860px;
}

.container--standard {
  max-width: 1000px;
}

.container--wide {
  max-width: 1280px;
}

@media (min-width: 768px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (min-width: 1024px) {
  .container {
    padding-left: 32px;
    padding-right: 32px;
  }
}
/* ============================================
   Sections / bands
============================================ */
.section,
.band {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.band {
  width: 100%;
}

/* ============================================
   Stack
============================================ */
.stack > * + * {
  margin-top: 1rem;
}

.stack--tight > * + * {
  margin-top: 0.75rem;
}

.stack--loose > * + * {
  margin-top: 1.5rem;
}

/* ============================================
   Surface
============================================ */
.surface {
  background-color: #faebd7;
  color: #222222;
  border: 1px solid #222222;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
}

.surface--alt {
  background-color: #d9d2ad;
}

.surface--dark {
  background-color: #733036;
  color: #faebd7;
}

/* ============================================
   Header / footer
============================================ */
.site-header {
  background-color: #733036;
  color: #faebd7;
}

.site-footer {
  color: #faebd7;
}

.site-header__inner {
  display: grid;
  gap: 1rem;
  align-items: center;
}

.site-footer__inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
    gap: 1.5rem;
  }
}
/* ============================================
   Header shell
============================================ */
.site-header {
  margin-bottom: 0;
}

.site-header__inner {
  display: grid;
  gap: 1rem;
}

.site-header__top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-header__brand {
  min-width: 0;
}

.site-header__brand-link {
  display: inline-flex;
  align-items: center;
  color: #faebd7;
  text-decoration: none;
}

.site-header__brand-link:hover {
  color: #faebd7;
  text-decoration: none;
}

.site-header__site-name {
  font-family: "Michroma", cursive;
  font-size: clamp(1.4rem, 5vw, 2rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================
   Toggle
============================================ */
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.06);
  color: #faebd7;
  font-family: "League Gothic", sans-serif;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ============================================
   Nav panel
============================================ */
.site-nav__panel {
  display: none;
  width: 100%;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

.site-nav.is-open .site-nav__panel {
  display: grid;
  gap: 1rem;
}

.site-nav__list {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  display: block;
  color: #faebd7;
  text-decoration: none;
  font-family: "League Gothic", sans-serif;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.5rem 0;
  border-radius: 0.25rem;
}

.site-nav__link.is-active,
.site-nav__link[aria-current=page] {
  color: #faebd7;
}

/* ============================================
   Search
============================================ */
.site-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

.site-search__input {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  color: #faebd7;
  font-family: "Funnel Sans", sans-serif;
  font-size: 1rem;
  line-height: 1;
}

.site-search__input::placeholder {
  color: rgba(250, 235, 215, 0.75);
}

.site-search__input:focus {
  outline: 2px solid #d9d2ad;
  outline-offset: 2px;
  border-color: rgba(255, 255, 255, 0.45);
  background-color: rgba(255, 255, 255, 0.14);
}

.site-search__button {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.06);
  color: #faebd7;
  font-family: "League Gothic", sans-serif;
  font-size: 1.125rem;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.site-search__button:hover,
.site-search__button:focus-visible {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
  color: #faebd7;
}

/* ============================================
   Desktop
============================================ */
@media (min-width: 1024px) {
  .site-header__inner {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2rem;
  }
  .site-header__top-row {
    display: contents;
  }
  .site-header__brand {
    justify-self: start;
  }
  .site-nav__toggle {
    display: none;
  }
  .site-nav {
    width: 100%;
  }
  .site-nav__panel {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .site-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  .site-nav__link {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    font-size: 1.5rem;
  }
  .site-search {
    justify-self: end;
  }
  .site-search__input {
    width: 14rem;
  }
}
/* ============================================
   Content wells / surfaces
============================================ */
.surface {
  background-color: #faebd7;
  color: #222222;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
}

.surface--alt {
  background-color: #d9d2ad;
  color: #222222;
}

.surface--reading {
  background-color: rgba(250, 235, 215, 0.96);
  color: #222222;
  padding: 2rem;
}

@media (min-width: 768px) {
  .surface {
    padding: 2rem;
  }
  .surface--reading {
    padding: 3rem;
  }
}
.stack > * + * {
  margin-top: 1rem;
}

.stack--tight > * + * {
  margin-top: 0.75rem;
}

.stack--loose > * + * {
  margin-top: 1.5rem;
}

.surface h1,
.surface h2,
.surface h3,
.surface h4,
.surface h5,
.surface h6 {
  margin-top: 0;
}

/* ============================================
   Hero well
============================================ */
.surface--hero {
  background-color: rgba(250, 235, 215, 0.96);
  color: #222222;
  padding: 1.5rem;
  border-top-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

.home-hero__inner {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.home-hero__media {
  min-width: 0;
}

.home-hero__image {
  max-width: 95%;
  height: auto;
  display: block;
  border-top-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

.home-hero__body {
  min-width: 0;
}

.home-hero__heading-group > * + * {
  margin-top: 0.5rem;
}

#home-hero-title {
  margin-bottom: 0;
}

#home-hero-subtitle {
  margin-bottom: 0;
  font-family: "Funnel Sans", sans-serif;
  font-size: 1.125rem;
  line-height: 1.3;
}

.home-hero__text {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .surface--hero {
    padding: 2rem;
  }
}
@media (min-width: 1024px) {
  .home-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
  }
  .surface--hero {
    padding: 3rem;
  }
}
/* ============================================
   Hero typography (restore the kajunga)
============================================ */
#home-hero-title {
  font-family: "Michroma", cursive;
  color: #222222;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  margin: 0;
}

#home-hero-subtitle {
  font-family: "Michroma", cursive;
  color: rgba(34, 34, 34, 0.75);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: 0.03em;
  opacity: 0.85;
  margin: 0;
}

.home-hero__heading-group > * + * {
  margin-top: 0.5rem;
}

.home-hero__text {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 36rem;
}

.home-hero__text a {
  color: #733036;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 150ms ease;
}

.home-hero__text a:hover {
  color: rgb(79.018404908, 32.981595092, 37.1042944785);
}

.paragraph-separator {
  margin: 1.5rem 0;
  opacity: 0.85;
}

.paragraph-separator {
  margin: 2em 0;
  background-image: url("/static/img/paisley-separator-2.png");
  background-repeat: no-repeat;
  background-position: center 0px;
  height: 37px;
  width: 100%;
}
.paragraph-separator .black {
  background-position: center 0px;
}
.paragraph-separator .olive {
  background-position: center -45px;
}
.paragraph-separator .red {
  background-position: center -88px;
}

/* ============================================
   Collaborate callout band
============================================ */
#collaborate {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.band--callout {
  background-color: #5a3d5c;
  color: #faebd7;
  text-align: center;
}

.collaborate-band__inner {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.collaborate-band__title {
  margin: 0;
  font-family: "Rock Salt", cursive;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
}

.collaborate-band__text {
  margin: 0;
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.collaborate-band__text a {
  color: #d9d2ad;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: opacity 150ms ease;
}

.collaborate-band__text a:hover {
  opacity: 0.75;
}

/* ============================================
   Home posts section
============================================ */
.home-posts .surface--section {
  border-top-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

.home-posts__inner {
  display: grid;
  gap: 1.5rem;
}

.home-posts__header {
  display: block;
}

.home-posts__title {
  margin: 0;
  margin-bottom: 1rem;
  font-family: "Michroma", cursive;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.2;
}

.home-posts__grid {
  display: grid;
  gap: 1.5rem;
}

@media (max-width: 767px) {
  .home-posts__grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .home-posts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .home-posts__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.home-posts__item {
  min-width: 0;
}

/* ============================================
   Post / content card
============================================ */
.post-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  overflow: hidden;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  background: #faebd7;
  border: 1px solid rgba(34, 34, 34, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.post-card__media {
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.post-card__image-link {
  display: block;
}

.post-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.post-card__body {
  padding: 1.5rem;
}

.post-card__content {
  height: 100%;
}

.post-card__title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: 1.25rem;
  line-height: 1.2;
}
.post-card__title a {
  color: #222222;
  text-decoration: none;
}
.post-card__title a:hover {
  color: #733036;
}

.post-card__title-link {
  color: #222222;
  text-decoration: none;
}

.post-card__title-link:hover,
.post-card__title-link:focus-visible {
  color: #733036;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.post-card__excerpt {
  font-size: 0.875rem;
  color: rgba(34, 34, 34, 0.85);
}

.post-card__excerpt p:last-child {
  margin-bottom: 0;
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(34, 34, 34, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.post-card__meta-item {
  display: inline-flex;
  align-items: center;
}

.post-card__taxonomy {
  color: rgba(34, 34, 34, 0.9);
}

.post-card__tags {
  margin-top: 0.5rem;
}

.post-card__footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(34, 34, 34, 0.08);
}

.post-card__read-more {
  font-size: 0.875rem;
  font-weight: 600;
  color: #733036;
  text-decoration: none;
}

.post-card__read-more:hover {
  text-decoration: underline;
}

.post-card__cta {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid #733036;
  border-radius: 0.5rem;
  color: #733036;
  text-decoration: none;
  font-family: "League Gothic", sans-serif;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.post-card__cta:hover,
.post-card__cta:focus-visible {
  background-color: #733036;
  color: #faebd7;
  text-decoration: none;
}

@media (min-width: 768px) {
  .post-card__body {
    padding: 1.5rem;
  }
}
/* ============================================
   Footer well tuning
============================================ */
.site-footer__heading {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

.site-footer__well .surface {
  background-color: rgba(115, 48, 54, 0.96);
  color: #faebd7;
}

.site-footer__well .surface--alt {
  background-color: rgba(90, 61, 92, 0.92);
  color: #faebd7;
}

.site-footer__well .surface {
  padding: 1rem;
}

@media (min-width: 768px) {
  .site-footer__well .surface {
    padding: 1.5rem;
  }
}
/* ============================================
   Post detail
============================================ */
.post-detail {
  padding: 2rem;
}

.post-detail__header {
  margin-bottom: 2rem;
}

.post-detail__eyebrow {
  margin-bottom: 0.75rem;
}

.post-detail__title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 28ch;
  text-wrap: balance;
}

.post-detail__meta {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background-color: rgba(217, 210, 173, 0.9);
  border-radius: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.post-detail__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
}

.post-detail__meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}

.post-detail__meta-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(34, 34, 34, 0.5);
}

.post-detail__meta-value {
  font-size: 0.875rem;
  color: rgba(34, 34, 34, 0.75);
}

.post-detail__meta-item--categories a {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 0.25rem;
  background-color: rgba(34, 34, 34, 0.08);
  color: #733036;
  font-weight: 600;
  text-decoration: none;
}

.post-detail__meta-item--categories a:hover,
.post-detail__meta-item--categories a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.post-detail__subsection-title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: rgba(34, 34, 34, 0.82);
}

.post-tags--meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.post-tag-link {
  font-size: 0.875rem;
  color: rgba(34, 34, 34, 0.65);
  text-decoration: none;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  background-color: rgba(34, 34, 34, 0.05);
}

.post-tag-link:hover,
.post-tag-link:focus-visible {
  color: #733036;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.post-detail__feature {
  margin: 0 0 2rem;
  width: 100%;
  overflow: hidden;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

.post-detail__feature-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.post-detail__caption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: rgba(34, 34, 34, 0.6);
}

.post-detail__supporting-section {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(34, 34, 34, 0.12);
}

.post-detail__section-title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
}

.post-detail__project-grid {
  display: grid;
  gap: 1.5rem;
}

.post-detail__comment {
  padding: 1rem;
}

.post-detail__comment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.875rem;
  color: rgba(34, 34, 34, 0.72);
}

.post-detail__comment-author {
  font-weight: 600;
}

@media (min-width: 768px) {
  .post-detail {
    padding: 3rem;
  }
  .post-detail__project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ============================================
   Footer social / nav
============================================ */
.site-social {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 1rem;
}
.site-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  transition: all 0.2s ease;
}
.site-social a:hover {
  background: #733036;
  color: #fff;
  transform: translateY(-2px);
}
.site-social i {
  font-size: 1.1rem;
}

.site-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.site-footer__nav-list a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
}

.site-footer__nav-list a:hover,
.site-footer__nav-list a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* ============================================
   Post detail footer / pagination
============================================ */
.post-detail__footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(34, 34, 34, 0.12);
}

.post-detail__footer-inner {
  display: grid;
  gap: 1.5rem;
}

.post-detail__footer-block--actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.post-detail__footer-link {
  color: #733036;
  text-decoration: none;
  font-weight: 600;
}

.post-detail__footer-link:hover,
.post-detail__footer-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.post-detail__footer-link--accent {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid #733036;
  border-radius: 0.5rem;
}

.post-detail__footer-link--accent:hover,
.post-detail__footer-link--accent:focus-visible {
  background-color: #733036;
  color: #faebd7;
  text-decoration: none;
}

.post-detail__pagination {
  display: grid;
  gap: 0.75rem;
}

.post-detail__pagination-link {
  display: block;
  padding: 1rem;
  border: 1px solid rgba(34, 34, 34, 0.12);
  border-radius: 0.5rem;
  background-color: rgba(217, 210, 173, 0.5);
  text-decoration: none;
  color: #222222;
}

.post-detail__pagination-link:hover,
.post-detail__pagination-link:focus-visible {
  border-color: rgba(34, 34, 34, 0.24);
  background-color: rgba(217, 210, 173, 0.75);
}

.post-detail__pagination-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(34, 34, 34, 0.55);
}

.post-detail__pagination-title {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .post-detail__pagination {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.post-detail__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: #733036;
  color: #faebd7;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.post-detail__cta:hover,
.post-detail__cta:focus-visible {
  background-color: rgb(108.1, 45.12, 50.76);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.post-detail__cta:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Post list page
============================================ */
.post-list-page__title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(34, 34, 34, 0.12);
}

.post-list-page__subtitle {
  margin: 0;
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(34, 34, 34, 0.78);
}

.post-list-page__grid {
  display: grid;
  gap: 1.5rem;
}

.post-list-page__item {
  min-width: 0;
}

.post-list-page__empty {
  padding: 1.5rem;
}

.post-list-page__empty-title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.15;
}

.post-list-page__empty-text {
  margin: 0;
  color: rgba(34, 34, 34, 0.78);
}

@media (max-width: 767px) {
  .post-list-page__grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .post-list-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .post-list-page__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.post-list-page__kicker {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(34, 34, 34, 0.56);
}

.post-list-page__pagination {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(34, 34, 34, 0.12);
}

.post-list-page__pagination-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.post-list-page__pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(34, 34, 34, 0.14);
  border-radius: 0.5rem;
  background-color: rgba(217, 210, 173, 0.45);
  color: #222222;
  text-decoration: none;
  font-weight: 600;
}

.post-list-page__pagination-link:hover,
.post-list-page__pagination-link:focus-visible {
  background-color: rgba(217, 210, 173, 0.75);
  text-decoration: none;
}

.post-list-page__pagination-status {
  font-size: 0.875rem;
  color: rgba(34, 34, 34, 0.68);
}

/* ============================================
   Blog home
============================================ */
.blog-home__kicker {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(34, 34, 34, 0.56);
}

.blog-home__title {
  margin: 0 0 0.5rem;
  font-family: "Michroma", cursive;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
}

.blog-home__subtitle {
  margin: 0;
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(34, 34, 34, 0.78);
}

.blog-home__featured-inner {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.blog-home__featured-media {
  min-width: 0;
}

.blog-home__featured-image-link {
  display: block;
}

.blog-home__featured-image {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

.blog-home__featured-body {
  min-width: 0;
}

.blog-home__featured-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(34, 34, 34, 0.58);
}

.blog-home__featured-title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.08;
  text-wrap: balance;
}

.blog-home__featured-title a {
  color: #222222;
  text-decoration: none;
}

.blog-home__featured-title a:hover,
.blog-home__featured-title a:focus-visible {
  color: #733036;
}

.blog-home__featured-excerpt {
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(34, 34, 34, 0.84);
}

.blog-home__featured-excerpt p {
  margin: 0;
}

.blog-home__featured-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid #733036;
  border-radius: 0.5rem;
  color: #733036;
  text-decoration: none;
  font-family: "League Gothic", sans-serif;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.blog-home__featured-link:hover,
.blog-home__featured-link:focus-visible {
  background-color: #733036;
  color: #faebd7;
  text-decoration: none;
}

@media (min-width: 1024px) {
  .blog-home__featured-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 2rem;
  }
}
/* ============================================
   Project detail
============================================ */
.project-detail {
  padding: 2rem;
}

.project-detail__header {
  margin-bottom: 2rem;
}

.project-detail__title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  text-wrap: balance;
}

/* ============================================
   Project metadata
============================================ */
.project-detail__meta {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background-color: rgba(217, 210, 173, 0.9);
  border-radius: 0.5rem;
}

.project-detail__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
}

.project-detail__meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}

.project-detail__meta-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(34, 34, 34, 0.5);
}

.project-detail__meta-value {
  font-size: 0.875rem;
  color: rgba(34, 34, 34, 0.75);
}

.project-detail__taxonomy-item {
  font-weight: 600;
  color: #733036;
}

/* ============================================
   Project media
============================================ */
.project-media {
  margin-bottom: 2rem;
}

.project-media__frame {
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.project-media__frame--video {
  aspect-ratio: 16/9;
}

.project-media__frame--video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.project-media__frame--audio {
  padding: 0.5rem;
  background-color: rgba(34, 34, 34, 0.04);
}

.project-media__frame--audio iframe {
  display: block;
  width: 100%;
  height: 232px;
  border: 0;
}

.project-media__fallback-image img {
  display: block;
  width: 100%;
  height: auto;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* ============================================
   Project content
============================================ */
.project-detail__content-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.project-detail__content {
  width: 100%;
  max-width: 68ch;
  padding: 0 0.5rem;
}

/* ============================================
   Supporting sections
============================================ */
.project-detail__supporting-section {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(34, 34, 34, 0.12);
}

.project-detail__section-title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
}

/* ============================================
   Related posts grid
============================================ */
.project-detail__related-post-grid {
  display: grid;
  gap: 1.5rem;
}

.project-detail__related-post-item {
  min-width: 0;
}

@media (min-width: 768px) {
  .project-detail__related-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .project-detail__related-post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ============================================
   Footer / CTA
============================================ */
.project-detail__footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(34, 34, 34, 0.12);
}

.project-detail__footer-inner {
  display: flex;
  justify-content: flex-start;
}

.project-detail__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: #733036;
  color: #faebd7;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.project-detail__cta:hover,
.project-detail__cta:focus-visible {
  background-color: rgb(108.1, 45.12, 50.76);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.project-media__links {
  margin-top: 1rem;
}

.project-media__links-label {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(34, 34, 34, 0.55);
}

.project-media__links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-media__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  background-color: rgba(34, 34, 34, 0.04);
  color: #222222;
  border: 1px solid rgba(34, 34, 34, 0.08);
  transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease;
}

.project-media__link:hover,
.project-media__link:focus-visible {
  transform: translateY(-1px);
  text-decoration: none;
}

/* Icon sizing */
.project-media__link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

/* ============================================
   Platform color accents (subtle, not loud)
============================================ */
/* YouTube */
.project-media__link--youtube:hover {
  background-color: rgba(255, 0, 0, 0.08);
  border-color: rgba(255, 0, 0, 0.25);
  color: #cc0000;
}

/* Spotify */
.project-media__link--spotify:hover {
  background-color: rgba(29, 185, 84, 0.08);
  border-color: rgba(29, 185, 84, 0.25);
  color: #1db954;
}

/* SoundCloud */
.project-media__link--soundcloud:hover {
  background-color: rgba(255, 85, 0, 0.08);
  border-color: rgba(255, 85, 0, 0.25);
  color: #ff5500;
}

/* External */
.project-media__link--external:hover {
  background-color: rgba(115, 48, 54, 0.08);
  border-color: rgba(115, 48, 54, 0.25);
  color: #733036;
}

/* ============================================
   Portfolio home
============================================ */
.portfolio-home__kicker {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(34, 34, 34, 0.56);
}

.portfolio-home__title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
}

.portfolio-home__subtitle {
  margin: 0;
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(34, 34, 34, 0.78);
}

.portfolio-home__featured-inner {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.portfolio-home__featured-taxonomy {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(34, 34, 34, 0.58);
}

.portfolio-home__featured-title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.08;
  text-wrap: balance;
}

.portfolio-home__featured-title a {
  color: #222222;
  text-decoration: none;
}

.portfolio-home__featured-title a:hover,
.portfolio-home__featured-title a:focus-visible {
  color: #733036;
}

.portfolio-home__featured-excerpt {
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(34, 34, 34, 0.84);
}

.portfolio-home__featured-excerpt p {
  margin: 0;
}

.portfolio-home__featured-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid #733036;
  border-radius: 0.5rem;
  color: #733036;
  text-decoration: none;
  font-family: "League Gothic", sans-serif;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.portfolio-home__featured-link:hover,
.portfolio-home__featured-link:focus-visible {
  background-color: #733036;
  color: #faebd7;
  text-decoration: none;
}

.portfolio-home__section-title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .portfolio-home__featured-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 2rem;
  }
}
/* ============================================
   Project card
============================================ */
.portfolio-home__grid {
  display: grid;
  gap: 1.5rem;
}

@media (max-width: 767px) {
  .portfolio-home__grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .portfolio-home__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .portfolio-home__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.project-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  overflow: hidden;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  background: #faebd7;
  border: 1px solid rgba(34, 34, 34, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.project-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.project-card__media {
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.project-card__media-link {
  display: block;
}

.project-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.project-card__media-fallback {
  display: grid;
  place-items: center;
  min-height: 14rem;
  padding: 1rem;
  background-color: rgba(34, 34, 34, 0.05);
  color: rgba(34, 34, 34, 0.72);
  text-align: center;
}

.project-card__body {
  padding: 1.5rem;
}

.project-card__taxonomy {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(34, 34, 34, 0.58);
}

.project-card__title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: 1.25rem;
  line-height: 1.2;
}

.project-card__title a {
  color: #222222;
  text-decoration: none;
}

.project-card__title a:hover,
.project-card__title a:focus-visible {
  color: #733036;
}

.project-card__excerpt {
  font-size: 0.875rem;
  color: rgba(34, 34, 34, 0.84);
}

.project-card__excerpt p {
  margin: 0;
}

.project-card__platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-card__platform {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: rgba(34, 34, 34, 0.05);
  color: rgba(34, 34, 34, 0.72);
}

.project-card__platform--youtube {
  color: #cc0000;
}

.project-card__platform--spotify {
  color: #1db954;
}

.project-card__platform--soundcloud {
  color: #ff5500;
}

.project-card__footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(34, 34, 34, 0.08);
}

.project-card__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: #733036;
  text-decoration: none;
}

.project-card__link:hover,
.project-card__link:focus-visible {
  text-decoration: underline;
}

/* ============================================
   Search page
============================================ */
.search-page__kicker {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(34, 34, 34, 0.56);
}

.search-page__title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
}

.search-page__subtitle {
  margin: 0;
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(34, 34, 34, 0.78);
}

.search-page__query {
  color: #733036;
  font-weight: 600;
}

.search-page__section-title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
}

.search-page__grid {
  display: grid;
  gap: 1.5rem;
}

.search-page__item {
  min-width: 0;
}

@media (max-width: 767px) {
  .search-page__grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .search-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .search-page__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.search-page__empty-title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.15;
}

.search-page__empty-text {
  margin: 0;
  color: rgba(34, 34, 34, 0.78);
}

.search-page__pagination-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.search-page__pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(34, 34, 34, 0.14);
  border-radius: 0.5rem;
  background-color: rgba(217, 210, 173, 0.45);
  color: #222222;
  text-decoration: none;
  font-weight: 600;
}

.search-page__pagination-link:hover,
.search-page__pagination-link:focus-visible {
  background-color: rgba(217, 210, 173, 0.75);
  text-decoration: none;
}

.search-page__pagination-status {
  font-size: 0.875rem;
  color: rgba(34, 34, 34, 0.68);
}

/* ============================================
   Contact page
============================================ */
.contact-page__kicker {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(34, 34, 34, 0.56);
}

.contact-page__title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
}

.contact-page__subtitle {
  margin: 0;
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(34, 34, 34, 0.78);
}

.contact-page__form-wrap {
  display: flex;
  justify-content: center;
}

.contact-form {
  width: 100%;
  max-width: 52rem;
}

.contact-page__section-title {
  margin: 0;
  font-family: "Rock Salt", cursive;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
}

.contact-form__fields {
  display: grid;
  gap: 1rem;
}

.contact-form__field {
  display: grid;
  gap: 0.5rem;
}

.contact-form__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #222222;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid rgba(34, 34, 34, 0.16);
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.55);
  color: #222222;
  font-family: "Funnel Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  box-sizing: border-box;
}

.contact-form textarea {
  min-height: 10rem;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: 2px solid rgba(115, 48, 54, 0.35);
  outline-offset: 2px;
  border-color: rgba(115, 48, 54, 0.45);
  background-color: rgba(255, 255, 255, 0.75);
}

.contact-form__help {
  font-size: 0.875rem;
  color: rgba(34, 34, 34, 0.62);
}

.contact-form__errors {
  display: grid;
  gap: 0.25rem;
}

.contact-form__error {
  font-size: 0.875rem;
  color: #a12626;
}

.contact-form__actions {
  padding-top: 0.5rem;
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: #733036;
  color: #faebd7;
  border: 0;
  border-radius: 0.5rem;
  text-decoration: none;
  font-family: "League Gothic", sans-serif;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
  background-color: rgb(108.1, 45.12, 50.76);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.contact-page__messages-wrap {
  display: flex;
  justify-content: center;
}

.contact-page__messages {
  width: 100%;
  max-width: 56ch;
  margin-top: 0.5rem;
}

.contact-page__message {
  position: relative;
  padding: 1.25rem 1.5rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #222222;
  box-shadow: 0 18px 40px rgba(25, 16, 12, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(3px);
}
.contact-page__message::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.contact-page__message-inner {
  position: relative;
  z-index: 1;
}

.contact-page__message-eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.9;
}

.contact-page__message-body {
  font-size: 1rem;
  line-height: 1.6;
}

.contact-page__message--success {
  background: linear-gradient(135deg, rgba(245, 239, 226, 0.95), rgba(236, 226, 205, 0.9));
  color: #2f271f;
  border-color: rgba(113, 143, 98, 0.35);
}
.contact-page__message--success .contact-page__message-eyebrow {
  color: #5f7b51;
}

.contact-page__message--error {
  background: linear-gradient(135deg, rgba(255, 236, 231, 0.96), rgba(244, 216, 207, 0.92));
  color: #3d1f1d;
  border-color: rgba(140, 56, 45, 0.35);
}
.contact-page__message--error .contact-page__message-eyebrow {
  color: #8d3b31;
}

.contact-page__message--warning {
  background: linear-gradient(135deg, rgba(255, 246, 221, 0.96), rgba(244, 229, 183, 0.92));
  color: #40311b;
  border-color: rgba(156, 119, 40, 0.35);
}
.contact-page__message--warning .contact-page__message-eyebrow {
  color: #9c7728;
}

.contact-page__message--info {
  background: linear-gradient(135deg, rgba(240, 235, 226, 0.96), rgba(227, 219, 205, 0.92));
  color: #322a23;
  border-color: rgba(88, 72, 60, 0.22);
}
.contact-page__message--info .contact-page__message-eyebrow {
  color: #6d5d50;
}

/* ============================================
   Profile page
============================================ */
.profile-page__hero {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.profile-page__media {
  min-width: 0;
}

.profile-page__image {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
  border-top-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

.profile-page__body {
  min-width: 0;
  max-width: 38rem;
}

.profile-page__heading-group > * + * {
  margin-top: 0.5rem;
}

.profile-page__kicker {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(34, 34, 34, 0.56);
}

.profile-page__title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.profile-page__subtitle {
  margin: 0;
  max-width: 34rem;
  font-size: 1.5rem;
  line-height: 1.45;
  color: rgba(34, 34, 34, 0.8);
}

.profile-page__intro {
  margin: 0;
  max-width: 34rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: rgba(34, 34, 34, 0.86);
}

.profile-page__content-wrap {
  display: flex;
  justify-content: center;
}

.profile-page__content {
  width: 100%;
  max-width: 68ch;
  padding: 0 0.5rem;
}

.profile-page__section-title {
  margin: 0;
  font-family: "Michroma", cursive;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
}

.profile-page__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.profile-page__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background-color: #733036;
  color: #faebd7;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.profile-page__cta:hover,
.profile-page__cta:focus-visible {
  background-color: rgb(108.1, 45.12, 50.76);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.profile-page__cta--secondary {
  background-color: rgba(217, 210, 173, 0.55);
  color: #222222;
}

.profile-page__cta--secondary:hover,
.profile-page__cta--secondary:focus-visible {
  background-color: rgba(217, 210, 173, 0.8);
}

@media (min-width: 1024px) {
  .profile-page__hero {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
  }
}
/* ============================================
   Profile hero social
============================================ */
.profile-page__social {
  margin-top: 0.75rem;
}

.profile-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.profile-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(34, 34, 34, 0.05);
  color: rgba(34, 34, 34, 0.75);
  transition: all 0.2s ease;
}
.profile-social a:hover {
  background: #733036;
  color: #faebd7;
  transform: translateY(-2px);
}
.profile-social i {
  font-size: 1.1rem;
}

/* ============================================
   Intro text refinement
============================================ */
.profile-page__intro {
  font-size: 1.125rem;
  line-height: 1.65;
  max-width: 34rem;
  color: rgba(34, 34, 34, 0.9);
}

.profile-page__intro--secondary {
  font-size: 1rem;
  color: rgba(34, 34, 34, 0.75);
}

.editorial-content {
  font-size: 1rem;
  line-height: 1.65;
  color: #222222;
}

.editorial-content > *:last-child {
  margin-bottom: 0;
}

.editorial-content p {
  margin: 0 0 0.75rem;
}

.editorial-content h2 {
  margin: 2rem 0 0.5rem;
  font-family: "Michroma", cursive;
  font-size: 1.6rem;
  line-height: 1.15;
}

.editorial-content h3 {
  margin: 1.5rem 0 0.5rem;
  font-family: "Michroma", cursive;
  font-size: 1.4rem;
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: rgba(34, 34, 34, 0.92);
}

.editorial-content h4 {
  margin: 1rem 0 0.5rem;
  font-family: "Michroma", cursive;
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(34, 34, 34, 0.7);
}

.editorial-content ul,
.editorial-content ol {
  margin: 0.75rem 0 1rem 1rem;
  padding: 0;
}

.editorial-content li {
  margin: 0 0 0.25rem;
  line-height: 1.5;
}

.editorial-content ul {
  list-style: none;
  margin: 0.75rem 0 1rem 1rem;
  padding: 0;
}

.editorial-content li {
  position: relative;
  padding-left: 1.2em;
  margin: 0 0 0.25rem;
  line-height: 1.5;
}

.editorial-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background-color: #733036;
  box-shadow: 0 0 0 2px rgba(115, 48, 54, 0.15);
}

.editorial-content li > ul,
.editorial-content li > ol {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.editorial-content blockquote {
  margin: 1.5rem 0;
  padding: 0.75rem 1rem;
  background-color: rgba(217, 210, 173, 0.45);
  border-left: 4px solid #733036;
  border-radius: 0 0.5rem 0.5rem 0;
  color: rgba(34, 34, 34, 0.9);
}

.editorial-content blockquote p {
  margin: 0;
  font-size: 1.05em;
  line-height: 1.6;
  font-style: italic;
}

.editorial-content a {
  color: #733036;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.editorial-content a:hover,
.editorial-content a:focus-visible {
  text-decoration-thickness: 2px;
}

.editorial-content hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid rgba(34, 34, 34, 0.15);
}

.editorial-content code {
  font-family: monospace;
  font-size: 0.95em;
  padding: 0.08em 0.22em;
  background-color: rgba(34, 34, 34, 0.06);
  border-radius: 3px;
}

.editorial-content pre {
  margin: 1rem 0 1.5rem;
  padding: 1rem;
  background-color: rgba(34, 34, 34, 0.05);
  border-radius: 0.5rem;
  overflow-x: auto;
}

.editorial-content pre code {
  padding: 0;
  background: none;
  border-radius: 0;
}

.editorial-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
  border-radius: 0.5rem;
}

/*# sourceMappingURL=base.css.map */