/* ========================================================================== 
   ML BREI AUTHOR WEBSITE

   This stylesheet is organized from broad rules to specific page sections:
   1. Design variables
   2. Base and accessibility rules
   3. Header and navigation
   4. Author introduction and banner
   5. Books
   6. About, articles, and contact
   7. Footer
   8. Responsive adjustments

   The reusable colors, widths, and fonts are defined below. Changing a value
   here updates every place where that variable is used.
   ========================================================================== */

/* 1. DESIGN VARIABLES ------------------------------------------------------ */
:root {
  --blush-background: #fff8f7;
  --paper-background: #fffdfc;
  --deep-red: #681622;
  --deep-red-hover: #491019;
  --body-text: #30272a;
  --muted-text: #75686d;
  --fine-line: #eadbdc;
  --soft-red: #f6e8e8;

  --serif-font: "Iowan Old Style", Baskerville, "Times New Roman", serif;
  --sans-font: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;

  --page-width: 1180px;
}

:root {
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Source Sans 3", Arial, sans-serif;
}

/* 2. BASE AND ACCESSIBILITY RULES ----------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--blush-background);
  color: var(--body-text);
  font-family: var(--sans-font);
  font-size: 16px;
  line-height: 1.65;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

::selection {
  background: #ead3d4;
}

body {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.75;
}

/* Literary elements */
h1,
h2,
h3,
.centered-brand,
.author-name,
blockquote {
  font-family: var(--font-serif);
}

/* Large, elegant author name */
.centered-brand,
.author-name {
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* Graceful page headings */
h1 {
  font-weight: 500;
  letter-spacing: -0.02em;
}

h2,
h3 {
  font-weight: 600;
}

/* Crisp supporting elements */
nav,
button,
.primary-button,
.section-label,
.article-byline {
  font-family: var(--font-sans);
}

/* This class keeps content centered with comfortable space at both edges. */
.page-width {
  width: min(var(--page-width), calc(100% - 48px));
  margin-inline: auto;
}

/* Reusable small heading shown above major section titles. */
.section-label,
.book-category,
.article-category {
  margin: 0 0 1.25rem;
  color: var(--deep-red);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.23em;
  text-transform: uppercase;
}

/* Hidden until focused; useful for visitors navigating with a keyboard. */
.skip-link {
  position: fixed;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.65rem 1rem;
  background: var(--deep-red);
  color: white;
}

.skip-link:focus {
  top: 1rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--deep-red);
  outline-offset: 3px;
}

/* 3. HEADER AND NAVIGATION ------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 248, 247, 0.94);
  border-bottom: 1px solid var(--fine-line);
  backdrop-filter: blur(14px);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 78px;
  position: relative;
}

.desktop-navigation {
  display: flex;
  gap: 2rem;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.desktop-navigation a {
  position: relative;
  padding-block: 0.5rem;
}

.desktop-navigation a::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: var(--deep-red);
  transition: right 180ms ease;
}

.desktop-navigation a:hover::after,
.desktop-navigation a:focus-visible::after {
  right: 0;
}

.navigation-left {
  justify-self: start;
}



.author-brand {
  color: var(--deep-red);
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
}



.navigation-right {
  justify-self: end;
}

.contact-link {
  display: inline-flex;
  padding: 0.62rem 1rem;
  border: 1px solid #d7b9bd;
  border-radius: 99px;
  color: var(--deep-red);
  font-size: 0.78rem;
}

.contact-link:hover {
  background: var(--deep-red);
  color: white;
}

.menu-button,
.mobile-navigation {
  display: none;
}

/* 4. AUTHOR INTRODUCTION AND BANNER --------------------------------------- */
.author-introduction {
  max-width: 900px;
  padding-block: 82px 65px;
  text-align: center;
}

.author-introduction h1 {
  margin: 0;
  color: var(--deep-red);
  font-family: var(--serif-font);
  font-size: clamp(4.5rem, 10vw, 8.5rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.short-rule {
  width: 56px;
  height: 1px;
  margin: 2.2rem auto;
  background: var(--deep-red);
}

.author-summary {
  max-width: 690px;
  margin: 0 auto;
  color: var(--muted-text);
  font-family: var(--serif-font);
  font-size: clamp(1.18rem, 2vw, 1.45rem);
  line-height: 1.75;
}

.banner {
  width: min(1500px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border-block: 1px solid var(--fine-line);
  background: #f1e2dc;
}

.banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==============================================================
   BOOK CATEGORIES
   Three large links introduce the principal areas of ML Brei's work.
   ============================================================== */

.book-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--fine-line);
  border-left: 1px solid var(--fine-line);
}

.category-box {
  position: relative;
  display: flex;
  min-height: 190px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--fine-line);
  border-bottom: 1px solid var(--fine-line);
  background: rgba(255, 255, 255, 0.3);
  color: var(--deep-red);
  text-decoration: none;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    transform 200ms ease;
}

.category-number {
  color: var(--body-text);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
}

.category-box strong {
  max-width: 240px;
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  font-weight: 500;
  line-height: 1.05;
}

.category-arrow {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  font-size: 1.2rem;
  transition: transform 200ms ease;
}

.category-box:hover,
.category-box:focus-visible {
  background: var(--deep-red);
  color: white;
  transform: translateY(-4px);
}

.category-box:hover .category-number,
.category-box:focus-visible .category-number {
  color: #f1dfe1;
}

.category-box:hover .category-arrow,
.category-box:focus-visible .category-arrow {
  transform: translateX(5px);
}


/* ==============================================================
   BOOK-COVER GRID
   Covers serve as visual links to the detailed book entries.
   ============================================================== */

.book-cover-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  margin-bottom: clamp(5rem, 10vw, 9rem);
}

.grid-cover {
  color: var(--body-text);
  text-decoration: none;
}


.grid-cover img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 0.66;

  /* Show the complete cover without cropping its edges. */
  object-fit: contain;

  /* Provides a neutral background around wider covers. */
  padding: 0.35rem;
  background: white;

  box-shadow: 0 16px 32px rgba(78, 31, 40, 0.12);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

.grid-cover span {
  display: block;
  margin-top: 1rem;
  color: var(--deep-red);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.25;
}

.grid-cover:hover img,
.grid-cover:focus-visible img {
  transform: translateY(-7px);
  box-shadow: 0 24px 45px rgba(78, 31, 40, 0.2);
}

.grid-cover:hover span,
.grid-cover:focus-visible span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}


/* Leave room for the sticky header when jumping to a book. */
.book {
  scroll-margin-top: 110px;
}


/* ==============================================================
   RESPONSIVE BOOK NAVIGATION
   ============================================================== */

@media (max-width: 900px) {
  .book-cover-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .book-categories {
    grid-template-columns: 1fr;
  }

  .category-box {
    min-height: 145px;
  }

  .book-cover-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .book-cover-grid {
    gap: 1.5rem 1rem;
  }

  .grid-cover span {
    font-size: 0.95rem;
  }
}

/* 5. BOOK COLLECTION ------------------------------------------------------ */
.book-collection {
  padding-block: 120px 145px;
}

.collection-introduction {
  max-width: 850px;
  margin: 0 auto 95px;
  text-align: center;
}

.collection-introduction h2,
.about-section h2,
.articles-heading h2,
.contact-section h2 {
  margin: 0;
  color: var(--deep-red);
  font-family: var(--serif-font);
  font-size: clamp(3rem, 5.8vw, 5.9rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.collection-introduction > p:last-child {
  max-width: 700px;
  margin: 2rem auto 0;
  color: var(--muted-text);
  font-size: 1.03rem;
  line-height: 1.85;
}

.book-list {
  border-top: 1px solid var(--fine-line);
}

.book {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) 1.28fr;
  gap: clamp(3.5rem, 8vw, 9rem);
  align-items: center;
  padding-block: 100px;
  border-bottom: 1px solid var(--fine-line);
  scroll-margin-top: 95px;
}

/* Alternating the image side creates a calm editorial rhythm. */
.book:nth-child(even) .cover-column {
  order: 2;
}

.cover-column {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 1.2rem;
  align-items: start;
}

.book-number {
  color: #ad7c83;
  font-family: var(--serif-font);
  font-size: 1rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.cover-frame {
  width: min(100%, 370px);
  margin-inline: auto;
  padding: 12px;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid var(--fine-line);
  box-shadow: 0 28px 55px rgba(84, 33, 41, 0.13);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.cover-frame:hover {
  transform: translateY(-5px);
  box-shadow: 0 36px 65px rgba(84, 33, 41, 0.17);
}

.cover-frame img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
}

.book-information {
  max-width: 690px;
}

.book-information h3 {
  margin: 0;
  color: var(--body-text);
  font-family: var(--serif-font);
  font-size: clamp(2.6rem, 5vw, 5.25rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.book-subtitle {
  margin: 0.85rem 0 0;
  color: var(--deep-red);
  font-family: var(--serif-font);
  font-size: 1.35rem;
}

.book-description {
  margin: 2rem 0 0;
  color: #5f5356;
  font-family: var(--serif-font);
  font-size: 1.18rem;
  line-height: 1.82;
}

.reader-note {
  margin: 1.3rem 0 2.2rem;
  padding-left: 1.2rem;
  border-left: 2px solid #d6b1b6;
  color: var(--muted-text);
  font-size: 0.9rem;
  line-height: 1.75;
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 50px;
  padding: 0.8rem 1.35rem;
  border: 0;
  border-radius: 99px;
  background: var(--deep-red);
  box-shadow: 0 10px 28px rgba(104, 22, 34, 0.13);
  color: white;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.primary-button:hover {
  background: var(--deep-red-hover);
}

/* 6. ABOUT, ARTICLES, AND CONTACT ----------------------------------------- */
.about-section {
  background: var(--paper-background);
  border-bottom: 1px solid var(--fine-line);
}

.about-inner {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: 5rem;
  align-items: center;
  padding-block: 110px;
}

.large-monogram {
  margin: 0;
  color: #f0dfe0;
  font-family: var(--serif-font);
  font-size: clamp(8rem, 18vw, 17rem);
  line-height: 0.7;
}

.about-section h2 {
  max-width: 820px;
  font-size: clamp(2.6rem, 5vw, 5rem);
}

.about-section p:not(.section-label):not(.large-monogram) {
  max-width: 720px;
  color: var(--muted-text);
  line-height: 1.85;
}

.articles-section {
  padding-block: 120px;
}

.articles-heading {
  max-width: 820px;
  margin-bottom: 4rem;
}

.articles-heading > p:last-child {
  color: var(--muted-text);
}

.article-list {
  border-top: 1px solid var(--fine-line);
}

.article-list article {
  display: grid;
  grid-template-columns: 65px 1fr;
  gap: 2rem;
  padding-block: 2.4rem;
  border-bottom: 1px solid var(--fine-line);
}

.article-list article > span {
  color: #ad7c83;
  font-family: var(--serif-font);
}

.article-list h3 {
  margin: 0;
  font-family: var(--serif-font);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.article-list article p:last-child {
  max-width: 700px;
  color: var(--muted-text);
}

/* ==============================================================
   ARTICLE HEADING LINKS
   Makes article titles clickable without changing their typography.
   ============================================================== */

.article-list h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}

.article-list h3 a:hover,
.article-list h3 a:focus-visible {
  color: var(--deep-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.contact-section {
  padding-block: 110px;
  background: var(--paper-background);
  border-top: 1px solid var(--fine-line);
}

.contact-inner {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.contact-section h2 {
  font-size: clamp(2.8rem, 5vw, 5rem);
}

.contact-section p {
  color: var(--muted-text);
}

.contact-section .primary-button {
  width: fit-content;
  justify-self: start;
}

.contact-form {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--blush-background);
  border: 1px solid var(--fine-line);
}

.two-column-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.contact-form label {
  display: grid;
  gap: 0.55rem;
  color: var(--deep-red);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--fine-line);
  border-radius: 0;
  background: white;
  color: var(--body-text);
}

.contact-form textarea {
  resize: vertical;
}

.contact-form .primary-button {
  justify-self: start;
}

.form-note,
.form-status {
  margin: 0;
  font-size: 0.77rem;
}

.form-status {
  padding: 1rem;
  border-left: 3px solid var(--deep-red);
  background: var(--soft-red);
}

/* 7. FOOTER --------------------------------------------------------------- */
.site-footer {
  padding-top: 75px;
  background: var(--deep-red);
  color: #faedef;
}

.footer-main {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  padding-bottom: 55px;
}

.footer-name {
  font-family: var(--serif-font);
  font-size: 1.7rem;
}

.footer-main p {
  color: #e3cdd1;
  font-family: var(--serif-font);
}

.footer-main nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(90px, 1fr));
  gap: 1rem 3rem;
  color: #e9d7da;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-block: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.17);
  color: #d6b9be;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ==============================================================
   ARTICLE PAGES
   These styles are shared by every article in /articles.
   ============================================================== */

.article-page {
  padding: 5rem 1.5rem;
}

.article-page article {
  max-width: 760px;
  margin: 0 auto;
}

.article-header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}

.article-header h1 {
  margin: 0.75rem 0 1.25rem;
  color: var(--deep-red);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
}

.article-summary {
  max-width: 650px;
  margin: 0 auto 1.25rem;
  font-size: 1.2rem;
  line-height: 1.7;
}

.article-byline {
  color: var(--muted-text);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-content {
  font-size: 1.08rem;
  line-height: 1.85;
}

.article-content p {
  margin: 0 0 1.5rem;
}

.article-content h2 {
  margin: 3rem 0 1rem;
  color: var(--deep-red);
  font-size: 2rem;
}

.article-content h3 {
  margin: 2.25rem 0 0.75rem;
  color: var(--deep-red);
  font-size: 1.4rem;
}

.article-content blockquote {
  margin: 2.5rem 0;
  padding: 1.5rem 2rem;
  border-left: 4px solid var(--deep-red);
  background: rgba(255, 255, 255, 0.45);
  font-family: Georgia, serif;
  font-size: 1.25rem;
  font-style: italic;
}

/* ==============================================================
   UPCOMING EVENTS
   Three-column event rows inspired by a traditional literary
   calendar: date, description, and location.
   ============================================================== */

.events-section {
  padding-block: clamp(5rem, 9vw, 8rem);
  background: var(--deep-red);
  color: var(--blush-background);
}

.events-heading {
  max-width: 720px;
  margin-bottom: 3rem;
}

.events-heading .section-label {
  color: #e9c9cd;
}

.events-heading h2 {
  margin: 0 0 1rem;
  color: white;
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
}

.events-heading > p:last-child {
  max-width: 640px;
  color: #f1dfe1;
}

.event-list {
  border-top: 1px solid rgba(255, 255, 255, 0.45);
}

.event {
  display: grid;
  grid-template-columns: minmax(135px, 0.55fr) minmax(300px, 1.7fr) minmax(190px, 0.75fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.event-date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-serif);
  line-height: 1;
}

.event-date span {
  font-size: 1.15rem;
}

.event-date strong {
  margin-block: 0.2rem;
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  font-weight: 500;
}

.event-date small {
  color: #e9c9cd;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
}

.event-category {
  margin: 0 0 0.6rem;
  color: #e9c9cd;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.event-information h3 {
  margin: 0 0 0.8rem;
  color: white;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
}

.event-information > p {
  max-width: 620px;
  margin-bottom: 1rem;
  color: #f5e8e9;
}

.event-link {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  color: white;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}

.event-link span {
  transition: transform 180ms ease;
}

.event-link:hover,
.event-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.event-link:hover span,
.event-link:focus-visible span {
  transform: translateX(4px);
}

.event-location {
  text-align: right;
}

.event-location p {
  margin: 0 0 0.75rem;
  color: white;
  font-weight: 600;
}

.event-location address {
  color: #f1dfe1;
  font-style: normal;
  line-height: 1.6;
}

/* Stack event details vertically on smaller screens. */
@media (max-width: 760px) {
  .event {
    grid-template-columns: 90px 1fr;
    gap: 1.5rem;
  }

  .event-location {
    grid-column: 2;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .event {
    grid-template-columns: 1fr;
  }

  .event-date {
    flex-direction: row;
    gap: 0.45rem;
    align-items: baseline;
  }

  .event-date strong {
    order: -1;
    font-size: 2rem;
  }

  .event-location {
    grid-column: auto;
  }
}



/* 8. RESPONSIVE ADJUSTMENTS ---------------------------------------------- */
@media (max-width: 820px) {
  .page-width {
    width: min(100% - 30px, var(--page-width));
  }

  .header-inner {
    display: flex;
    justify-content: center;
  }

  .desktop-navigation,
  .navigation-right {
    display: none;
  }

  .author-brand {
    font-size: 1.55rem;
  }

  .menu-button {
    position: absolute;
    right: 0;
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .menu-button span {
    width: 24px;
    height: 1px;
    background: var(--body-text);
  }

  .mobile-navigation {
    position: absolute;
    top: 58px;
    right: 0;
    min-width: 190px;
    padding: 0.8rem;
    background: var(--paper-background);
    border: 1px solid var(--fine-line);
    box-shadow: 0 18px 40px rgba(62, 41, 48, 0.12);
  }

  .mobile-navigation:not([hidden]) {
    display: flex;
    flex-direction: column;
  }

  .mobile-navigation a {
    padding: 0.75rem;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .author-introduction {
    padding-block: 65px 50px;
  }

  .book-collection {
    padding-block: 85px 100px;
  }

  .collection-introduction {
    margin-bottom: 55px;
  }

  .book {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-block: 72px;
  }

  .book:nth-child(even) .cover-column {
    order: initial;
  }

  .cover-column {
    grid-template-columns: 30px 1fr;
  }

  .cover-frame {
    max-width: 330px;
  }

  .about-inner,
  .contact-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .large-monogram {
    display: none;
  }
}

@media (max-width: 560px) {
  .two-column-fields {
    grid-template-columns: 1fr;
  }

  .footer-main,
  .footer-bottom {
    flex-direction: column;
  }

  .footer-bottom {
    gap: 0.6rem;
  }
}

/* Visitors who prefer less motion receive a still interface. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}