/* Make CloseRead steps appear instantly in .instant sections */
.instant .closeread-step {
  transition: none !important;  /* removes fade */
}


#size-gate {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.95);
  color: #fff;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  font-size: 1.2rem;
  line-height: 1.5;
}

#size-gate.active {
  display: flex;
}

/* Hide the actual content while gated, so nothing scrolls behind it */
body.size-gated {
  overflow: hidden;
}


body {
  background-color: #fffbe9 !important;
  background-image:
    linear-gradient(
      rgba(255, 251, 233, 0.88),
      rgba(255, 251, 233, 0.88)
    ),
    url("images/tile-outline-dark-cream.svg") !important;
  background-repeat: repeat !important;
  background-size: auto, 400px auto !important;
  color: #3a3a3a !important;
  background-attachment: fixed !important;
}

#quarto-content {
  position: relative;
  z-index: 1;
}

.cr-section {
  background-color: transparent !important;
}

.cr-narrative,
.cr-sidebar,
.cr-scene,
.cr-narrative-col,
.narrative-col {
  background-color: transparent !important;
}

.end {
    padding: 1.75rem;         
} 

.cr-section .narrative {
  transition: opacity 0.1s linear;
}

body {
  background-color: #fffbe9 !important;
  color: #3a3a3a !important; 
}

body,
.cr-section,
.cr-narrative,
.cr-sidebar {
  font-family: "Roboto", sans-serif;
}


.work-sans-<uniquifier> {
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.narrative-col .trigger {
  padding-block: 25svh !important;
}

body h1 {
  background-color: transparent !important;
  color: #3a3a3a !important; 
}
body h2 {
  background-color: transparent !important;
  color: #3a3a3a !important; 
}
body h3 {
  background-color: transparent !important;
  color: #3a3a3a !important; 
}

.section-wrapper { 
  position: relative;
}

.section-wrapper2 {
  margin-bottom: 18vh;
}

.section-heading {
  position: sticky !important; 
  top: 0 !important; 
  z-index: 999;
  background-color: transparent !important; 
  padding-block: 0.5rem;
  width: 100vw;
  max-width: 100vw; 
  margin-left: calc(-1 * (100vw - 100%) / 2);
  box-sizing: border-box;
  padding-left: 6rem;
  padding-right: 0;
  text-align: left;
}

.section-heading h2 {
  display: inline-block;
  border-bottom: 1px solid rgba(58, 58, 58, 0.3);
  margin: 0;
  padding-bottom: 0.5rem;
}

.callout-text {
  font-family: "Neuton", serif;
  font-weight: 700;
  font-size: 28px;
  text-align: center;
  max-width: 38rem;
  width: 90vw;
  color: #3a3a3a;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.lyrics-image img {
  display: block;
  max-width: 90vw;
  height: auto;
  margin: 0 auto;
}

.right-align img,
.right-align svg {
    display: block;         /* ensure block-level */
    margin-left: auto;      /* push to the right */
    margin-right: 4em;        /* keep it right-aligned */
}

.house img {
  width: 80% !important;
    display: block;      
  margin: 0 auto; 
}


.ggiraph-container {
  width: 80% !important;
  max-width: none !important;
}

.references {
  font-size: 0.8em;
  max-width: 60rem;
  width: 90vw;
}

/* ===== CLOSE READ HEADING FONT FIX ===== */

:root {
  --bs-body-font-family: "Roboto", sans-serif;
  font-size: 16px;
}

/* Page title */
.quarto-title-block .title {
  font-family: "Neuton", serif !important;
  font-weight: 800 !important;
}

/* Section narrative headings (the important ones) */
 h1 {
  font-family: "Neuton", serif !important;
  font-weight: 700 !important;
  font-size: 48px;
}
 
 
 h2,
 h3,
 h4,
 h5,
 h6 {
  font-family: "Neuton", serif !important;
  font-weight: 700 !important;
  font-size: 32px;
}

/* Margin/side annotations headings */
.cr-margin h1,
.cr-margin h2,
.cr-margin h3 {
  font-family: "Neuton", serif !important;
}

/* Align section headings with narrative text */
.cr-section > h2,
.cr-section > h3,
.cr-section > h4,
.cr-section > h5,
.cr-section > h6 {
  grid-column: narrative;
}

.cr-section {
  text-align: left;
  padding-left: 1.5rem !important;
  padding-right: 6rem !important;
}