/* Self-hosted Oswald — kills the 750ms Google Fonts render-block.
   Single latin woff2 covers all 6 weights (variable). */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Base ─────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
.hidden { display: none !important; }

body {
  background-color: #f2bad0;
  color: #3B001B;
  font-family: 'Oswald', sans-serif;
  line-height: 1.6;
}

html { scroll-behavior: smooth; }
::selection { background: #FFB6D9; color: #3B001B; }
::-moz-selection { background: #FFB6D9; color: #3B001B; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #9C4F7F; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #7a3d63; }

/* ── Navbar ───────────────────────────────────────────── */
.custom-navbar {
  background-color: #f2bad0 !important;
  padding: 20px 40px;
  margin-top: 20px;
  border: none;
  position: relative;
  z-index: 1000;
}

.custom-logo {
  font-size: 26px !important;
  font-weight: bold !important;
  color: #3B001B !important;
  font-family: 'Oswald', sans-serif !important;
  text-decoration: none !important;
}

.custom-toggler {
  border: 2px dashed #3B001B !important;
  border-radius: 8px;
  padding: 8px 10px;
}
.custom-toggler:focus { box-shadow: 0 0 0 .2rem rgba(59,0,27,.25) !important; }
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2859, 0, 27, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.custom-nav { gap: 25px; }

.custom-link {
  font-size: 18px !important;
  color: #3B001B !important;
  font-family: 'Oswald', sans-serif !important;
  padding: 10px 22px !important;
  border: 2px dashed #3B001B !important;
  border-radius: 20px !important;
  transition: all .4s ease !important;
  background: rgba(59,0,27,.05) !important;
  margin: 0 4px;
  text-decoration: none;
}
.custom-link:hover {
  color: #69002f !important;
  transform: scale(1.12) !important;
  border-style: solid !important;
  background: rgba(105,0,47,.1) !important;
}

/* ── Breadcrumb ───────────────────────────────────────── */
.article-breadcrumb {
  font-size: .85rem;
  color: rgba(59,0,27,.7);
  margin-bottom: 20px;
  padding: 8px 0;
  text-align: left;
}
.article-breadcrumb a { color: #3B001B; text-decoration: none; font-weight: 600; }
.article-breadcrumb a:hover { text-decoration: underline; }
.article-breadcrumb span { margin: 0 6px; opacity: .6; }

/* ── Hero ─────────────────────────────────────────────── */
.hero-section {
  background-color: #f2bad0;
  padding: 60px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.floating-elements { position: absolute; top:0; left:0; right:0; bottom:0; pointer-events: none; }
.float-item { position: absolute; font-size: 2.5rem; opacity: .3; }
.float-1 { top: 20%; left: 8%; }
.float-2 { top: 60%; right: 10%; }
.float-3 { bottom: 30%; left: 12%; }
.float-4 { top: 40%; right: 5%; }

.decorative-elements { position: relative; margin-bottom: 30px; height: 50px; }
.tag {
  position: absolute;
  background: #ffeef5; color: #3B001B;
  padding: 10px 18px; border-radius: 25px;
  font-size: 14px; font-weight: bold;
  border: 2px solid #3B001B;
  box-shadow: 0 4px 12px rgba(59,0,27,.2);
  white-space: nowrap;
}
.tag-1 { top:0; left:15%; transform:rotate(-10deg); background:#e8d5e8; }
.tag-2 { top:-10px; right:20%; transform:rotate(12deg); background:#ffd1dc; }
.tag-3 { top:20px; right:8%; transform:rotate(-6deg); background:#f0e6f7; }

@keyframes floatUp1 { 0%,100%{transform:rotate(-10deg) translateY(0)} 50%{transform:rotate(-10deg) translateY(-8px)} }
@keyframes floatUp2 { 0%,100%{transform:rotate(12deg) translateY(0)} 50%{transform:rotate(12deg) translateY(-10px)} }
@keyframes floatUp3 { 0%,100%{transform:rotate(-6deg) translateY(0)} 50%{transform:rotate(-6deg) translateY(-6px)} }

.article-category-badge {
  display: inline-block;
  background: #3B001B; color: #f2bad0;
  padding: 6px 16px; border-radius: 20px;
  font-size: .85rem; font-weight: 700;
  margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px;
}

.hero-title {
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 900; color: #3B001B;
  margin: 0 0 24px;
  line-height: .95; letter-spacing: -.02em;
  text-shadow: 3px 3px 6px rgba(59,0,27,.25);
}

.article-desc {
  font-size: 1.1rem; color: rgba(59,0,27,.8);
  max-width: 680px; margin: 0 auto 28px;
  font-weight: 500; line-height: 1.55;
}

.pattern-actions {
  display: flex; gap: 16px; justify-content: center;
  flex-wrap: wrap; margin: 30px 0;
}

.pattern-btn {
  background: #69002f; color: #f2bad0;
  border: 3px solid #3B001B;
  padding: 14px 28px; border-radius: 40px;
  font-size: 15px; font-weight: bold; cursor: pointer;
  transition: all .3s ease;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase; letter-spacing: 1px;
  min-width: 150px; text-decoration: none;
  display: inline-flex; align-items: center;
  justify-content: center; gap: 8px;
  box-shadow: 0 4px 12px rgba(59,0,27,.2);
}
.pattern-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(59,0,27,.4); color: #f2bad0; }
.pattern-btn.secondary { background: #ffeef5; color: #3B001B; border: 3px solid #69002f; }
.pattern-btn.secondary:hover { background: #69002f; color: #f2bad0; transform: translateY(-3px); }
.pattern-btn.jump-btn { background: #9C4F7F; color: #f2bad0; border: 3px solid #3B001B; }
.pattern-btn.jump-btn:hover { background: #723344; transform: translateY(-3px); color: #f2bad0; }

.hero-stats {
  display: flex; justify-content: center;
  gap: 40px; margin-top: 30px; flex-wrap: wrap;
}
.stat {
  text-align: center; padding: 14px 18px;
  background: rgba(255,255,255,.4);
  border-radius: 18px; border: 2px solid #e8d5e8;
  min-width: 100px;
}
.stat-number { display:block; font-size:1.7rem; font-weight:900; color:#3B001B; line-height:1; }
.stat-label  { display:block; font-size:.85rem; color:#69002f; font-weight:600; margin-top:4px; }

/* ── Scalloped Borders ────────────────────────────────── */
.scalloped-border, .scalloped-border-content,
.scalloped-border-pattern, .scalloped-border-qa,
.scalloped-border-newsletter {
  height: 36px; display: flex; width: 100%;
  position: relative; overflow: hidden;
}
.scallop { flex: 1; min-width: 3%; height: 36px; flex-shrink: 0; border-radius: 36px 36px 0 0; }

.scalloped-border          { background-color: #f2bad0; }
.scalloped-border .scallop { background-color: #723344; }

.scalloped-border-content          { background-color: #723344; }
.scalloped-border-content .scallop { background-color: #faf5f0; }

.scalloped-border-pattern          { background-color: #faf5f0; }
.scalloped-border-pattern .scallop { background-color: #FFF5F9; }

.scalloped-border-qa          { background-color: #FFF5F9; }
.scalloped-border-qa .scallop { background-color: #f2bad0; }

.scalloped-border-newsletter          { background-color: #f2bad0; }
.scalloped-border-newsletter .scallop { background-color: #f3e5f5; }

/* ── Intro / Feature Cards ────────────────────────────── */
.intro-section {
  background-color: #723344;
  padding: 0 0 80px 0; position: relative;
}
.intro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px; max-width: 1200px;
  margin: 70px auto 0; padding: 0 20px;
}
.feature-card {
  background: #fff8dc; border-radius: 25px;
  padding: 36px 28px; text-align: center;
  border: 3px solid #3B001B;
  transition: all .3s ease; min-height: 260px;
  display: flex; flex-direction: column; justify-content: center;
}
.feature-card:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0,0,0,.3); }
.feature-card:nth-child(2) { background: #d4f4dd; }
.feature-card:nth-child(3) { background: #e8d5ff; }
.feature-card:nth-child(4) { background: #ffd1dc; }
.feature-icon { font-size: 2.8rem; margin-bottom: 16px; }
.feature-card h3 { font-size: 1.5rem; font-weight: 800; color: #3B001B; margin: 8px 0; font-family: 'Oswald', sans-serif; }
.feature-card p  { font-size: 1rem; color: #3B001B; line-height: 1.5; font-weight: 500; margin: 0; }
.feature-card.has-img { padding: 0 0 24px 0; overflow: hidden; justify-content: flex-start; }
.feature-card.has-img .feature-card-img {
  display: block; width: 100%; height: 180px; object-fit: cover;
  border-top-left-radius: 22px; border-top-right-radius: 22px;
  margin: 0 0 16px 0;
}
.feature-card.has-img h3 { padding: 0 24px; }
.feature-card.has-img p  { padding: 0 24px; }
.feature-card.has-img .feature-icon { margin: 0 0 8px 0; font-size: 2.2rem; }

/* ── Content Section ──────────────────────────────────── */
.content-section { background-color: #faf5f0; padding: 0 0 80px 0; position: relative; }
.content-grid {
  display: grid; grid-template-columns: 2fr 1fr;
  gap: 36px; max-width: 1200px;
  margin: 70px auto 0; padding: 0 20px;
}
.content-card {
  background: white; border-radius: 20px;
  padding: 28px; margin-bottom: 28px;
  border: 3px solid #3B001B;
  box-shadow: 0 4px 15px rgba(59,0,27,.08);
}
.content-title { color: #3B001B; font-size: 1.7rem; font-weight: 800; margin-bottom: 18px; font-family: 'Oswald', sans-serif; }
.content-card p { color: #3B001B; font-size: 1.05rem; line-height: 1.6; margin: 0 0 14px; font-weight: 500; }

/* Author */
.author-card {
  background: white; border-radius: 20px; padding: 28px;
  text-align: center; border: 3px solid #3B001B; margin-bottom: 24px;
  box-shadow: 0 4px 15px rgba(59,0,27,.08);
}
.author-name { font-size: 1.7rem; font-weight: 800; color: #3B001B; margin: 10px 0; font-family: 'Oswald', sans-serif; }
.author-bio  { color: #555; font-size: 1rem; line-height: 1.5; margin-bottom: 18px; font-weight: 500; }
.social-links { display: flex; justify-content: center; gap: 12px; }
.social-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: #f2bad0; display: flex; align-items: center;
  justify-content: center; color: #3B001B;
  text-decoration: none; transition: all .3s ease; font-size: 1.1rem;
}
.social-icon:hover { background: #3B001B; color: #f2bad0; transform: scale(1.1); }

/* Tips / mistakes in content */
.tips-content-list { list-style: none; padding: 0; margin: 0; }
.tips-content-list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid rgba(59,0,27,.08);
  font-size: 1rem; color: #3B001B; font-weight: 500;
}
.tips-content-list li:last-child { border-bottom: none; }

.mistakes-list { display: flex; flex-direction: column; gap: 10px; }
.mistake-item { color: #80348c; font-weight: 600; display: block; padding: 8px 0; border-bottom: 1px solid rgba(128,52,140,.12); }
.mistake-item:last-child { border-bottom: none; }

/* Related posts */
.recommendations { background: white; border-radius: 20px; padding: 28px; border: 3px solid #3B001B; box-shadow: 0 4px 15px rgba(59,0,27,.08); }
.recommendations-title { font-size: 1.4rem; font-weight: 800; color: #3B001B; margin-bottom: 18px; font-family: 'Oswald', sans-serif; text-align: center; }
.pattern-cards-container { display: flex; flex-direction: column; gap: 12px; }
.rec-card {
  display: flex; gap: 12px; padding: 12px 15px;
  border: 2px solid #e0e0e0; border-radius: 12px;
  text-decoration: none; transition: all .3s ease; background: #faf5f0;
  color: #3B001B; font-size: 1rem; font-weight: 600; align-items: center;
}
.rec-card:hover { border-color: #9C4F7F; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(156,79,127,.2); color: #3B001B; }

/* ── Pattern Section ──────────────────────────────────── */
.pattern-section { background-color: #FFF5F9; padding: 0 0 32px 0; position: relative; }
.pattern-content-wrapper {
  display: grid; grid-template-columns: 2fr 1fr;
  gap: 36px; max-width: 1400px;
  margin: 70px auto 0; padding: 0 20px;
}
.pattern-main { min-width: 0; }

.pattern-card {
  background-color: #FFF5F9; border-radius: 12px;
  padding: 40px; border: 2px dashed #FFB6D9;
  box-shadow: 0 4px 15px rgba(255,182,217,.2);
}

.pattern-title   { color: #9C4F7F; font-size: 2.2rem; margin-bottom: 12px; text-align: center; font-family: 'Oswald', sans-serif; font-weight: 800; }
.pattern-description { color: #666; margin-bottom: 22px; line-height: 1.6; font-weight: 500; text-align: center; }
.skill-level { display: flex; gap: 10px; margin: 12px 0 24px; flex-wrap: wrap; justify-content: center; }
.skill-item { background-color: #9C4F7F; color: white; padding: 7px 18px; border-radius: 20px; font-size: 13px; font-weight: 600; }

.materials-title, .assembly-title, .notes-title {
  color: #9C4F7F; font-size: 1.6rem;
  margin: 28px 0 14px; padding: 8px 14px;
  border-left: 4px solid #FFB6D9; border-radius: 0 10px 10px 0;
  background: #FFF5F9; font-family: 'Oswald', sans-serif; font-weight: 700;
}

.section-title {
  color: #9C4F7F; font-size: 1.25rem;
  margin-bottom: 12px; border-bottom: 2px solid #FFE6F3;
  padding-bottom: 5px; font-family: 'Oswald', sans-serif;
  font-weight: 700; cursor: pointer; transition: all .2s;
  user-select: none;
}
.section-title:hover { color: #723344; }
.section-title.completed {
  color: #9C4F7F !important; text-decoration: line-through !important;
  text-decoration-color: #9C4F7F !important; opacity: .6 !important;
}

.material-section { width: 100%; margin-bottom: 32px; display: block; }

/* ── Part Section (hookvibes-style) ───────────────────── */
.part-section {
  width: 100%; margin-bottom: 38px; display: block;
  background: white; border-radius: 16px;
  padding: 28px 24px; border: 2px solid #e8d0dc;
  box-shadow: 0 3px 12px rgba(156,79,127,.08);
}
.part-title {
  color: #9C4F7F; font-size: 1.5rem;
  font-family: 'Oswald', sans-serif; font-weight: 800;
  margin: 0 0 18px; padding-bottom: 10px;
  border-bottom: 3px solid #FFB6D9;
  letter-spacing: .02em;
}
.part-qty {
  font-size: .85rem; font-weight: 600; opacity: .7;
  background: #FFE6F3; padding: 2px 10px; border-radius: 12px;
  margin-left: 8px; vertical-align: middle;
}
.material-group-name {
  font-weight: 700; color: #9C4F7F; margin: 14px 0 6px;
  font-family: 'Oswald', sans-serif; font-size: 1.05rem;
}

/* Material list */
.material-list { list-style: none; padding: 0; margin: 0 0 16px; }
.material-item {
  display: flex; gap: 14px; margin-bottom: 10px;
  align-items: center; cursor: pointer;
  padding: 10px 14px; border-radius: 10px; background: white;
  box-shadow: 0 2px 5px rgba(156,79,127,.1);
  transition: all .3s ease;
}
.material-item:hover { background-color: #FFE6F3; transform: translateX(5px); }
.material-item.completed { background-color: rgba(156,79,127,.1) !important; transform: translateX(5px); }
.material-item.completed .material-text { text-decoration: line-through; text-decoration-color: #9C4F7F; color: #9C4F7F; opacity: .7; }
.material-item.completed .material-number { background: #9C4F7F !important; color: white !important; }
.material-number { background: #9C4F7F; color: white; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 13px; font-weight: bold; flex-shrink: 0; }
.material-text { font-size: 1rem; color: #3B001B; font-weight: 500; line-height: 1.4; }

/* ── Round Instructions ───────────────────────────────── */
.step-by-step { margin: 16px 0; }

/* Section progress bar */
.section-progress {
  padding: 14px 0; margin-bottom: 10px;
}
.section-progress-label {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.section-progress-text { color: #9C4F7F; font-size: .95rem; font-weight: 700; font-family: 'Oswald', sans-serif; }
.section-progress-count { font-size: .85rem; color: #723344; font-weight: 600; }
.progress-bar-track { width: 100%; height: 10px; background: #FFE6F3; border-radius: 5px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, #9C4F7F, #FFB6D9); border-radius: 5px; width: 0%; transition: width .4s ease; }

.row-instruction {
  display: flex; align-items: baseline; gap: 0;
  padding: 12px 16px; border-radius: 10px;
  margin-bottom: 6px; cursor: pointer;
  border: 2px solid transparent;
  transition: all .3s ease; position: relative; overflow: hidden;
  background: #FFF5F9;
}
.row-instruction::after {
  content: '\2713';
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%) scale(0);
  font-size: 1.3rem; color: #9C4F7F; font-weight: 900;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.row-instruction:hover { background-color: #FFE6F3 !important; }
.row-instruction.completed {
  background-color: #e8f5e9 !important;
  border: 2px solid #66bb6a !important;
  padding-right: 44px;
}
.row-instruction.completed::after { transform: translateY(-50%) scale(1); color: #66bb6a; }
.row-instruction.completed .row-label { color: #388e3c !important; }
.row-instruction.completed .row-text { color: #555 !important; text-decoration: line-through; text-decoration-color: #aaa; }

/* Info rows */
.row-instruction.kind-info {
  background: #fffde7; border-left: 4px solid #f59e0b;
  cursor: default; border-right: none; border-top: none; border-bottom: none;
}
.row-instruction.kind-info:hover { background: #fffde7 !important; }
.row-instruction.kind-info::after { display: none; }
.row-instruction.kind-info .row-label { color: #e65100 !important; }
.row-instruction.kind-info .row-text { color: #5d4037 !important; font-style: italic; }

/* Assembly step rows */
.row-instruction.kind-assembly {
  background: #f3e5f5; border-left: 4px solid #9C4F7F;
  cursor: default; border-right: none; border-top: none; border-bottom: none;
}
.row-instruction.kind-assembly:hover { background: #ede0f0 !important; }
.row-instruction.kind-assembly::after { display: none; }
.row-instruction.kind-assembly .row-label { color: #6a1b9a !important; }

/* Note rows */
.row-instruction.kind-note {
  background: #e3f2fd; border-left: 4px solid #42a5f5;
  cursor: default; border-right: none; border-top: none; border-bottom: none;
}
.row-instruction.kind-note:hover { background: #e3f2fd !important; }
.row-instruction.kind-note::after { display: none; }
.row-instruction.kind-note .row-label { color: #1565c0 !important; }

.row-label {
  color: #9C4F7F; font-size: 1rem; font-weight: 700;
  font-family: 'Oswald', sans-serif;
  white-space: nowrap; flex-shrink: 0;
  margin: 0 12px 0 0; display: inline;
}
.row-text {
  color: #3B001B; margin: 0; font-size: .98rem;
  line-height: 1.5; font-weight: 500; display: inline;
}

/* Section notes */
.section-notes {
  background: #fff8e1; border-left: 4px solid #f59e0b;
  padding: 10px 14px; border-radius: 0 10px 10px 0;
  font-size: .88rem; color: #92400e; margin: 0 0 12px;
}

/* Assembly */
.assembly-list { list-style: none; padding: 0; margin: 0; }
.assembly-list li {
  background: white; padding: 14px 18px 14px 48px;
  margin-bottom: 10px; border-radius: 10px;
  box-shadow: 0 2px 5px rgba(156,79,127,.1);
  position: relative; cursor: pointer; transition: all .3s ease;
  font-size: .98rem; color: #3B001B; font-weight: 500; line-height: 1.45;
}
.assembly-list li::before { content: '✂️'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 15px; }
.assembly-list li:hover { background: #FFE6F3; transform: translateX(3px); }

/* Notes */
.notes-list { list-style: none; padding: 0; margin: 0; }
.notes-list li {
  display: flex; align-items: flex-start; gap: 12px;
  background: white; padding: 14px; margin-bottom: 10px;
  border-radius: 10px; box-shadow: 0 2px 5px rgba(156,79,127,.1);
  font-size: .98rem; color: #3B001B; font-weight: 500; line-height: 1.45;
}
.note-icon { font-size: 17px; flex-shrink: 0; margin-top: 2px; }

/* Conclusion */
.conclusion {
  background: #FFE6F3; padding: 24px; border-radius: 15px;
  margin-top: 30px; text-align: center; font-size: 1.1rem;
  color: #3B001B; line-height: 1.6; border: 2px solid #FFB6D9;
}

/* Content featured image — show the image in FULL at its natural aspect
   ratio. Works for portrait / landscape / square heroes alike.
   Center-aligned + capped to a reasonable display size so it doesn't
   dominate the viewport. */
.content-featured-image {
  display: block;
  width: auto; height: auto;
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
  margin: 18px auto;
  border-radius: 14px;
  border: 3px solid #e0e0e0;
  background: #FFF5F9;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.content-featured-image:hover { border-color: #9C4F7F; box-shadow: 0 8px 25px rgba(156,79,127,.2); }
.content-featured-image.hidden { display: none; }

/* Mobile — let the hero take more vertical room so the full crochet
   piece is visible without the user scrolling or zooming. */
@media (max-width: 640px) {
  .content-featured-image { max-height: 80vh; max-width: 100%; }
}
/* Tablet — similar but slightly more constrained. */
@media (min-width: 641px) and (max-width: 1024px) {
  .content-featured-image { max-height: 70vh; }
}

/* ── CLS guard ────────────────────────────────────────
   Reserve the full content height BEFORE the JSON loads
   so the footer never shifts into view. The global .hidden
   class uses display:none !important which would drop the
   min-height — we override specifically for #articleContent
   to use visibility:hidden while keeping the space.

   #articleLoading is a fixed overlay, not in document flow,
   so it doesn't stack on top of the reserved space. */
#articleContent {
  min-height: calc(100vh - 80px);
  display: block;
}
#articleContent.hidden {
  display: block !important;
  visibility: hidden;
}
#articleLoading {
  position: fixed;
  inset: 0;
  top: 60px;
  z-index: 9000;
  min-height: calc(100vh - 60px);
}

.section-image {
  width: 100%; max-height: 500px; object-fit: contain;
  border-radius: 12px; margin: 12px 0 16px;
  border: 2px solid #e8d0dc; background: #fff;
}

/* ── Global Progress Tracker ──────────────────────────── */
.global-progress {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: #3B001B; color: #f2bad0;
  padding: 12px 28px; border-radius: 40px;
  font-family: 'Oswald', sans-serif; font-size: 1rem; font-weight: 700;
  box-shadow: 0 6px 24px rgba(59,0,27,.4);
  z-index: 9000; display: flex; align-items: center; gap: 14px;
  opacity: 0; transition: opacity .4s ease;
  pointer-events: none;
}
.global-progress.visible { opacity: 1; pointer-events: auto; }
.global-progress-bar-track { width: 120px; height: 8px; background: rgba(242,186,208,.3); border-radius: 4px; overflow: hidden; }
.global-progress-bar-fill  { height: 100%; background: #FFB6D9; border-radius: 4px; transition: width .4s ease; }
.global-progress-text { font-size: .9rem; white-space: nowrap; }

/* Completion celebration */
@keyframes popIn { 0%{transform:scale(0) rotate(-10deg);opacity:0} 60%{transform:scale(1.2) rotate(3deg);opacity:1} 100%{transform:scale(1) rotate(0);opacity:1} }
.complete-badge {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0);
  background: linear-gradient(135deg, #9C4F7F, #3B001B);
  color: white; padding: 30px 50px; border-radius: 25px;
  font-family: 'Oswald', sans-serif; font-size: 1.8rem; font-weight: 900;
  text-align: center; z-index: 9999;
  box-shadow: 0 20px 60px rgba(59,0,27,.5);
  pointer-events: none; opacity: 0;
}
.complete-badge.show { animation: popIn .5s cubic-bezier(.34,1.56,.64,1) forwards; opacity: 1; }

/* ── Abbreviations Sidebar ────────────────────────────── */
.abbreviations-card {
  background-color: #FFF5F9; border-radius: 12px;
  padding: 24px; border: 2px dashed #FFB6D9;
  box-shadow: 0 4px 15px rgba(255,182,217,.2);
}
.abbreviations-title {
  font-size: 1.4rem; font-weight: 800; color: #3B001B;
  margin-bottom: 18px; font-family: 'Oswald', sans-serif; text-align: center;
}
.abbrev-list { list-style: none; padding: 0; margin: 0; }
.abbrev-item {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px; padding: 10px 4px;
  transition: background .2s ease;
}
.abbrev-item:hover { background: rgba(156,79,127,.06); border-radius: 8px; }
.abbrev-number {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: #9C4F7F; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 800; font-size: .82rem;
  flex-shrink: 0;
}
.abbrev-text {
  font-size: .95rem; color: #3B001B; font-weight: 500;
  line-height: 1.4;
}
.abbrev-text strong {
  color: #9C4F7F; font-weight: 800;
  font-family: 'Oswald', sans-serif;
  margin-right: 4px;
}
.abbreviations-card::-webkit-scrollbar { width: 5px; }
.abbreviations-card::-webkit-scrollbar-track { background: rgba(255,230,243,.5); border-radius: 3px; }
.abbreviations-card::-webkit-scrollbar-thumb { background: #9C4F7F; border-radius: 3px; }

/* Mobile abbrev toggle */
.mobile-abbrev-toggle {
  position: fixed; top: 50%; right: 0;
  transform: translateY(-50%);
  background: #9C4F7F; color: white; border: none;
  border-radius: 15px 0 0 15px;
  padding: 10px 6px 10px 12px;
  font-size: .7rem; font-weight: 700; cursor: pointer;
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(156,79,127,.3);
  writing-mode: vertical-rl; text-orientation: mixed;
  display: none; flex-direction: column; align-items: center;
  width: 38px; font-family: 'Oswald', sans-serif;
  transition: background .2s;
}
.mobile-abbrev-toggle:hover { background: #723344; }

/* Hidden by default — only shown once the user has scrolled into
   the pattern card section (JS toggles .visible). */
.mobile-abbrev-toggle {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(20px);
  transition: opacity .25s ease, transform .25s ease, background .2s;
}
.mobile-abbrev-toggle.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.mobile-overlay {
  display: none; position: fixed; top:0; left:0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,.5); z-index: 1998;
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.mobile-overlay.active { opacity: 1; pointer-events: auto; }

/* ── Q&A Section ──────────────────────────────────────── */
.qa-section { background-color: #f2bad0; padding: 0 0 56px 0; position: relative; }
.qa-header { text-align: center; padding: 48px 0 28px; }
.qa-title {
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 900; color: #3B001B; margin: 0;
  line-height: .7; letter-spacing: -.04em; font-family: 'Oswald', sans-serif;
}
.qa-list { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.qa-item { margin-bottom: 20px; border-radius: 30px; overflow: hidden; transition: all .3s ease; }
.qa-question {
  background: #fafabf; padding: 22px 28px;
  display: flex; justify-content: space-between;
  align-items: center; cursor: pointer; border-radius: 30px;
  transition: all .3s ease; border: 3px solid #3B001B;
}
.qa-question:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(59,0,27,.2); }
.qa-question h3 { font-size: 1.25rem; font-weight: 700; color: #3B001B; margin: 0; line-height: 1.3; font-family: 'Oswald', sans-serif; flex-grow: 1; padding-right: 18px; }
.qa-icon { width: 38px; height: 38px; background: #c0ecbf; border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: all .3s ease; flex-shrink: 0; }
.qa-icon svg { width: 18px; height: 18px; fill: #3B001B; transition: transform .3s ease; }
.qa-answer {
  background: #c0ecbf; padding: 0 28px;
  max-height: 0; overflow: hidden;
  transition: all .5s ease; border-radius: 0 0 30px 30px;
  margin-top: -3px; border: 3px solid #3B001B;
  border-top: none; opacity: 0;
}
.qa-answer p { font-size: 1.05rem; color: #3B001B; line-height: 1.5; margin: 0; font-family: 'Oswald', sans-serif; font-weight: 500; padding: 22px 0; }
.qa-item.active .qa-answer { max-height: 300px; padding: 0 28px; opacity: 1; }
.qa-item.active .qa-icon svg { transform: rotate(180deg); }
.qa-item.active .qa-question { border-radius: 30px 30px 0 0; }

/* ── Newsletter ───────────────────────────────────────── */
.newsletter-section { background: #f3e5f5; padding: 0 0 80px 0; position: relative; overflow: hidden; }
.newsletter-card { background: #fff; border-radius: 25px; margin: 50px auto; max-width: 1000px; box-shadow: 0 10px 40px rgba(0,0,0,.1); overflow: hidden; }
.newsletter-content { display: grid; grid-template-columns: 1fr 1fr; min-height: 400px; }
.newsletter-left {
  padding: 50px 36px; display: flex; flex-direction: column;
  justify-content: center; background: linear-gradient(135deg, #fce4ec, #f3e5f5);
}
.newsletter-illustration { margin-bottom: 18px; text-align: center; }
.newsletter-title { font-size: 2.3rem; font-weight: 900; color: #4a148c; margin: 0 0 12px; font-family: 'Oswald', sans-serif; line-height: 1.1; }
.newsletter-subtitle { font-size: 1.05rem; color: #4a148c; font-family: 'Oswald', sans-serif; font-weight: 500; line-height: 1.4; margin: 0; }
.newsletter-right { padding: 50px 36px; background: #fff; }
.newsletter-form { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-family: 'Oswald', sans-serif; font-weight: 600; color: #4a148c; margin-bottom: 4px; font-size: 1rem; }
.form-group input {
  width: 100%; padding: 10px 0;
  border: none; border-bottom: 2px solid #d0d0d0;
  background: transparent; font-family: 'Oswald', sans-serif;
  font-size: 1rem; color: #4a148c; transition: all .3s ease; box-sizing: border-box;
}
.form-group input:focus { outline: none; border-bottom-color: #4a148c; }
.form-group input::placeholder { color: #888; opacity: .7; }
.submit-button {
  width: 100%; background: #7b1fa2; color: #fff;
  border: 3px solid #3B001B; padding: 14px 28px;
  border-radius: 25px; font-family: 'Oswald', sans-serif;
  font-size: 1.05rem; font-weight: bold; cursor: pointer;
  transition: all .3s ease; text-transform: uppercase; letter-spacing: 1px; margin-top: 8px;
}
.submit-button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(123,31,162,.3); }
.privacy-note { font-size: .85rem; color: #666; text-align: center; margin-top: 8px; font-family: 'Oswald', sans-serif; }
.privacy-note a { color: #4a148c; }

/* ── Footer ───────────────────────────────────────────── */
.footer-section { background: #bf98da; padding: 60px 20px 40px; font-family: 'Oswald', sans-serif; }
.footer-card { background: #5A2C3A; border-radius: 25px; max-width: 1200px; margin: 0 auto; padding: 50px 44px 36px; }
.footer-content { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; align-items: start; }
.footer-column { display: flex; flex-direction: column; }
.footer-heading { color: #ffd700; font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,215,0,.25); padding-bottom: 7px; }
.footer-tagline { color: #f2bad0; font-size: .9rem; line-height: 1.5; margin-bottom: 12px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-link { color: #f2bad0; text-decoration: none; font-size: .95rem; font-weight: 600; transition: all .3s ease; display: inline-block; }
.footer-link:hover { color: #ffd700; transform: translateX(3px); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(242,186,208,.2); padding-top: 18px; }
.footer-credit-left, .footer-credit-right { color: #f2bad0; font-size: .85rem; font-weight: 600; margin: 0; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 991.98px) {
  .custom-navbar { padding: 15px 20px; margin-top: 10px; }
  .navbar-collapse { background-color: #f2bad0; border-top: 2px solid #3B001B; margin-top: 12px; padding: 12px; border-radius: 0 0 14px 14px; }
  .custom-nav { flex-direction: column; gap: 8px; width: 100%; }
  .custom-link { display: block !important; text-align: center !important; width: 90% !important; margin: 4px auto !important; font-size: 17px !important; padding: 12px 18px !important; }
}

@media (min-width: 769px) {
  .tag-1 { animation: floatUp1 3s ease-in-out infinite; }
  .tag-2 { animation: floatUp2 3.5s ease-in-out infinite; }
  .tag-3 { animation: floatUp3 4s ease-in-out infinite; }
  /* mobile-abbrev-toggle is for small screens only — the sidebar is
     already visible on desktop, so the vertical ABBREV tab would be
     redundant and visually cluttered. */
  .mobile-abbrev-toggle { display: none !important; }
}

@media (max-width: 768px) {
  .hero-section { padding: 35px 0; min-height: auto; }
  .decorative-elements { height: 30px; margin-bottom: 12px; }
  .tag { position: relative; display: inline-block; margin: 4px; transform: none !important; top: auto !important; left: auto !important; right: auto !important; font-size: 12px; padding: 7px 12px; }
  .hero-title { font-size: clamp(2.2rem, 9vw, 3.5rem); }
  .hero-stats { gap: 12px; }
  .stat { min-width: 76px; padding: 10px 12px; }
  .stat-number { font-size: 1.35rem; }
  .pattern-actions { flex-direction: column; align-items: center; gap: 10px; }
  .pattern-btn { width: 100%; max-width: 280px; }
  .content-grid { grid-template-columns: 1fr; gap: 20px; margin: 40px auto 0; padding: 0 15px; }
  .pattern-content-wrapper { grid-template-columns: 1fr; gap: 0; margin: 40px auto 0; padding: 0 15px; }
  .pattern-card { padding: 22px 14px; }
  .pattern-title { font-size: 1.9rem; }
  .intro-grid { padding: 0 14px; margin-top: 44px; }
  .footer-content { grid-template-columns: 1fr 1fr; gap: 20px; }
  .newsletter-content { grid-template-columns: 1fr; }
  .newsletter-left, .newsletter-right { padding: 28px 22px; }
  .mobile-abbrev-toggle { display: flex; }
  .global-progress { width: 90%; justify-content: center; }
}

@media (max-width: 480px) {
  .hero-section { padding: 28px 0; }
  .footer-content { grid-template-columns: 1fr; gap: 18px; }
  .footer-card { padding: 28px 16px; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
  .qa-title { font-size: clamp(2.8rem, 10vw, 4.5rem); }
  .intro-grid { grid-template-columns: 1fr; }
}

/* ── Hero image grid wrap — sits at the TOP of the article right under
   the title/description/pills (in the hero-section). The grid inside is
   created by JS once the article JSON loads. */
.hero-image-grid-wrap {
  margin: 1.5rem auto 0;
  width: 100%;
  max-width: 920px;
}
.hero-image-grid-wrap:empty { display: none; }

/* ── Hero thumbnail grid (1 OR 4 unique product photos, no padding dupes) ── */
/* Binary rule per user: <4 product photos → 1 tile, >=4 → 4-tile grid.
   The 2- and 3-tile templates remain as fallback for any future tweaks
   (currently unused by the renderer). */
.hero-thumbnail-grid {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #3b001b;
  padding: 6px;
  box-shadow: 0 6px 20px rgba(59, 0, 27, 0.18);
}
/* Single-tile layout (1 product photo): full-width, natural-aspect feature
   tile so it doesn't get squished. Different from 4-tile aspect-ratio. */
.hero-thumbnail-grid[data-count="1"] .hero-tile {
  aspect-ratio: 4 / 3;
}
/* 1 photo  → single full-width tile (4:3 natural aspect) */
.hero-thumbnail-grid[data-count="1"] { grid-template-columns: 1fr; }
.hero-thumbnail-grid[data-count="1"] .hero-tile { aspect-ratio: 4 / 3; }
/* 4 photos → equal 2x2 grid, all tiles same square shape, same border */
.hero-thumbnail-grid[data-count="4"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows:    1fr 1fr;
}
/* Non-canonical counts (2, 3) render as a 2x2 grid too — empty slots
   simply collapse. Keeps the layout consistent if a future change ever
   loosens the binary 4-or-1 rule. */
.hero-thumbnail-grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
.hero-thumbnail-grid[data-count="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.hero-tile {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #fff8dc;
  aspect-ratio: 1 / 1;                         /* square for 2-3-4 grid */
  border: 3px solid #fff8dc;
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  transition: transform .3s ease, box-shadow .3s ease;
}
.hero-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,.24);
}
.hero-tile img {
  display: block;
  width: 100%;
  height: 100%;
  /* Show the WHOLE photo (no zoom-in / no edge crop). Pattern-niche
     readers need to see the finished product completely before they
     decide to make it. Cream background fills any letterbox that
     `contain` leaves on non-square source photos. */
  object-fit: contain;
  background: #fff8dc;
  transition: transform .35s ease;
}
@media (max-width: 640px) {
  .hero-thumbnail-grid { gap: 6px; padding: 4px; border-radius: 14px; }
  .hero-tile { border-radius: 14px; border-width: 2px; }
}

/* ── "View all images" gallery link button (centered at end of article) ── */
.gallery-link-wrap {
  text-align: center;
  margin: 32px auto 8px;
  max-width: 720px;
  padding: 0 12px;
}
.gallery-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 14px auto 6px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #ffe6f2, #ffd1e6);
  border: 2px solid #3b001b;
  border-radius: 999px;
  color: #3b001b;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: 0 4px 12px rgba(59, 0, 27, 0.15);
}
.gallery-link:hover {
  background: linear-gradient(135deg, #f2bad0, #ff6b9d);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 0, 27, 0.22);
}
.gallery-link-icon { font-size: 1.1rem; }
.gallery-link-arrow { font-size: 1.05rem; transition: transform .2s; }
.gallery-link:hover .gallery-link-arrow { transform: translateX(4px); }

/* ── Gallery modal (full-screen lightbox of all pattern images) ── */
.gallery-modal {
  position: fixed; inset: 0;
  background: rgba(20, 0, 10, 0.92);
  z-index: 9000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.gallery-modal.open { display: flex; }
.gallery-modal-content {
  background: #fff7eb;
  border: 3px solid #3b001b;
  border-radius: 20px;
  padding: 24px;
  max-width: 1100px;
  width: 100%;
  position: relative;
}
.gallery-close {
  position: absolute; top: 12px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid #3b001b;
  background: #fff;
  color: #3b001b;
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.gallery-close:hover { background: #3b001b; color: #fff; }
.gallery-title {
  margin: 0 0 16px 0;
  font-family: 'Oswald', sans-serif;
  font-size: 1.3rem;
  color: #3b001b;
  padding-right: 50px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.gallery-figure {
  margin: 0;
  background: #fff;
  border: 1.5px solid #3b001b;
  border-radius: 10px;
  overflow: hidden;
}
.gallery-figure img { display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; }
.gallery-figure figcaption { padding: 6px 10px; font-size: 0.78rem; color: #6b3a55; font-family: 'Oswald', sans-serif; }

/* ── PDF download block (end of article) ── */
.pdf-download-block { margin: 32px auto 12px; max-width: 720px; padding: 0 12px; }
.pdf-download-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 24px;
  background: linear-gradient(135deg, #fff6e0, #ffe9c2);
  border: 2px solid #3b001b;
  border-radius: 16px;
  color: #3b001b;
  text-decoration: none;
  transition: all .25s ease;
  box-shadow: 0 4px 14px rgba(59, 0, 27, 0.1);
}
.pdf-download-btn:hover {
  background: linear-gradient(135deg, #ffe9c2, #ffd17b);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(59, 0, 27, 0.18);
}
.pdf-download-icon {
  font-size: 1.6rem;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #3b001b;
  color: #ffd17b;
  display: flex; align-items: center; justify-content: center;
}
.pdf-download-text { display: flex; flex-direction: column; gap: 2px; }
.pdf-download-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.pdf-download-meta { font-size: 0.82rem; color: #6b3a55; }
@media (max-width: 480px) {
  .pdf-download-btn { padding: 14px 16px; gap: 12px; }
  .pdf-download-icon { width: 40px; height: 40px; font-size: 1.3rem; }
  .pdf-download-title { font-size: 0.9rem; }
}

/* ── Inline step photos — rendered INSIDE a part card, between rounds ─ */
/* Placed by the pipeline based on the source page of each round so the
   photo appears next to the instruction it illustrates (e.g. Round 13
   finishing photos after the Round 13 text). */
.inline-step-photo {
  margin: 12px 0 16px;
  padding: 0;
  background: #fff;
  border: 2px solid #3b001b;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(59, 0, 27, 0.1);
  max-width: 520px;
}
.inline-step-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  background: #fafafa;
}
.inline-step-photo figcaption {
  padding: 8px 14px;
  font-size: 0.78rem;
  color: #6b3a55;
  font-family: 'Oswald', sans-serif;
  background: rgba(255, 246, 230, 0.85);
  border-top: 1px dashed rgba(59, 0, 27, 0.25);
  text-align: left;
}
@media (max-width: 640px) {
  .inline-step-photo { margin: 8px 0 12px; }
}

/* ── Process photos (legacy grid; kept for back-compat, not used by new PDFs) ──── */
.process-photos-wrap { margin: 28px 0 32px; }
.process-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.process-photo {
  margin: 0;
  background: #fff;
  border: 2px solid #3b001b;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(59, 0, 27, 0.08);
}
.process-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.process-photo figcaption {
  padding: 10px 12px;
  font-size: 0.82rem;
  color: #3b001b;
  font-family: 'Oswald', sans-serif;
  background: rgba(255, 246, 230, 0.85);
  border-top: 1px dashed rgba(59, 0, 27, 0.25);
}
.process-photo .process-page {
  color: #6b3a55;
  font-size: 0.72rem;
  font-weight: 400;
}
@media (max-width: 640px) {
  .process-photos-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
}

/* ── Credits & Attribution block (footer) ─────────────── */
/* Rendered by renderSourceAttribution() in article.js. Shows when
   any of source_url / source_credits / source_designer is set.
   Same element is reused for: scrape sources, PDF uploads, manual
   credit entries — one place, one style. */
.source-attribution {
  max-width: 820px;
  margin: 32px auto 24px;
  padding: 20px 24px;
  text-align: left;
  font-size: 0.88rem;
  color: #3b001b;
  background: rgba(255, 246, 230, 0.95);
  border: 2px solid #3b001b;
  border-radius: 14px;
  font-family: 'Oswald', sans-serif;
  box-shadow: 0 4px 14px rgba(59, 0, 27, 0.08);
  line-height: 1.55;
}
.source-attribution::before {
  content: 'Credits & Attribution';
  display: block;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #69002f;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(59, 0, 27, 0.25);
}
.source-attribution a {
  color: #3B001B;
  text-decoration: underline;
  font-weight: 600;
}
.source-attribution a:hover { color: #69002f; }
.source-attribution .credit-designer {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: #3b001b;
}
.source-attribution .credit-license {
  font-size: 0.86rem;
  font-style: italic;
  color: #5a2a42;
  margin: 0 0 8px 0;
}
.source-attribution .credit-source {
  font-size: 0.82rem;
  margin: 0;
  color: #6b3a55;
}
@media (max-width: 640px) {
  .source-attribution { margin: 24px 12px; padding: 16px 18px; font-size: 0.82rem; }
  .source-attribution::before { font-size: 0.72rem; }
  .source-attribution .credit-designer { font-size: 0.92rem; }
}

/* ── Why-love 2x2 image grid ──────────────────────────── */
.why-love-images-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 560px;       /* keep tight 2x2 like the user's mock */
  margin: 28px auto 8px;
  padding: 0 20px;
}
.why-love-image-tile {
  display: block;
  text-decoration: none;
  border-radius: 18px;
  overflow: hidden;
  background: #fff8dc;
}
.why-love-images-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;     /* square tiles for the 2x2 grid */
  object-fit: cover;
  border-radius: 18px;
  border: 3px solid #fff8dc;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transition: transform .3s ease, box-shadow .3s ease;
}
.why-love-images-grid img:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.26);
}
@media (max-width: 600px) {
  .why-love-images-grid { gap: 12px; padding: 0 14px; max-width: 100%; }
  .why-love-images-grid img { border-radius: 14px; border-width: 2px; }
}

/* ── About card — single inline image embedded mid-text ──
   Renders after the first paragraph of the about card. Centered, capped at
   ~360px wide so the surrounding text still wraps around it nicely. */
.about-inline-image {
  display: block;
  margin: 18px auto;
  text-align: center;
}
.about-inline-image img {
  display: inline-block;
  max-width: 360px;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  border: 3px solid #fff8dc;
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}
@media (max-width: 600px) {
  .about-inline-image img { max-width: 80%; border-radius: 12px; }
}

/* ══════════════════════════════════════════════════════
   ABBREVIATIONS SIDEBAR — single-owner scroll model
   Desktop: the aside is position:sticky + overflow-y:auto.
     Long lists scroll INSIDE the sticky panel.
     No close button (there's nothing to close).
   Mobile : the aside is a fixed right-side drawer with its
     own overflow-y:auto. The .sidebar-close-wrap is
     position:sticky; top:0 — the × floats at top-right and
     never scrolls off. pointer-events:none on the wrapper so
     it doesn't block touch-scroll; only the button catches clicks.
══════════════════════════════════════════════════════ */

/* Desktop — top offset accounts for the sticky navbar (~75px tall)
   plus a small breathing gap, so the abbrev title is never clipped
   by the navbar when the user scrolls through the pattern. */
.pattern-sidebar {
  position: sticky; top: 88px;
  align-self: flex-start;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  scrollbar-gutter: stable;
}
.sidebar-close-wrap { display: none; }

/* The × button */
.sidebar-close-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: #3B001B;
  color: #fff;
  font-size: 1.8rem; font-weight: 400; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  transition: transform .15s ease, background .15s ease;
  pointer-events: auto;
}
.sidebar-close-btn:hover  { background: #9C4F7F; transform: scale(1.05); }
.sidebar-close-btn:active { transform: scale(0.96); }
.sidebar-close-btn:focus-visible { outline: 3px solid #FFB6D9; outline-offset: 2px; }

/* Mobile drawer — single scrolling container, × pinned top-right */
@media (max-width: 768px) {
  .pattern-sidebar {
    position: fixed !important;
    top: 0; right: -100%;
    width: 320px; max-width: 88vw;
    height: 100vh; max-height: 100vh;
    background: #FFF5F9;
    z-index: 1999;
    transition: right .3s ease;
    overflow-y: auto;
    padding: 0;
    box-shadow: -5px 0 15px rgba(0,0,0,.2);
    align-self: auto;
  }
  .pattern-sidebar.active { right: 0; }

  /* Sticky wrapper pins the × to the top-right of the scrolling drawer.
     pointer-events:none on the wrapper lets touch-scroll pass through. */
  .sidebar-close-wrap {
    display: flex;
    justify-content: flex-end;
    position: sticky;
    top: 0;
    padding: 12px;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(255,245,249,1) 60%,
      rgba(255,245,249,.85) 85%,
      rgba(255,245,249,0) 100%);
  }
  .abbreviations-card { margin: 0 16px 24px; }
}

/* ── Completion email capture modal ───────────────────── */
.completion-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(59,0,27,.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 10000;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.completion-modal-backdrop.show { opacity: 1; pointer-events: auto; }
.completion-modal {
  position: relative;
  max-width: 440px; width: 100%;
  background: #fff;
  border-radius: 24px;
  border: 3px solid #3B001B;
  padding: 40px 32px 28px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  transform: translateY(24px) scale(.96);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  font-family: 'Oswald', sans-serif;
}
.completion-modal-backdrop.show .completion-modal { transform: translateY(0) scale(1); }
.completion-modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: transparent; color: #3B001B;
  font-size: 1.9rem; line-height: 1; cursor: pointer;
  transition: background .2s;
}
.completion-modal-close:hover { background: rgba(59,0,27,.1); }
.completion-modal-emoji { font-size: 3rem; margin-bottom: 10px; }
.completion-modal-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.6rem; font-weight: 800;
  color: #3B001B; margin: 0 0 12px; line-height: 1.2;
}
.completion-modal-sub {
  color: #5A2C3A; font-size: 1rem; line-height: 1.5;
  margin: 0 0 22px; font-weight: 500;
}
.completion-modal-sub strong { color: #9C4F7F; }
.completion-modal-form {
  display: flex; flex-direction: column; gap: 12px;
}
.completion-modal-form input {
  width: 100%; padding: 13px 16px;
  border: 2px solid #e0d0d8; border-radius: 12px;
  font-family: 'Oswald', sans-serif; font-size: 1rem;
  color: #3B001B; background: #FFF5F9;
  transition: border-color .2s;
}
.completion-modal-form input:focus { outline: none; border-color: #9C4F7F; }
.completion-modal-form button {
  width: 100%;
  background: linear-gradient(135deg, #9C4F7F, #3B001B);
  color: #fff; border: none;
  padding: 14px 22px; border-radius: 14px;
  font-family: 'Oswald', sans-serif; font-size: 1rem;
  font-weight: 700; cursor: pointer;
  text-transform: uppercase; letter-spacing: .5px;
  transition: transform .2s, box-shadow .2s;
}
.completion-modal-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(156,79,127,.45);
}
.completion-modal-skip {
  margin: 14px 0 0; font-size: .85rem; color: #888;
}
.completion-modal-skip a { color: #888; text-decoration: underline; }
.completion-modal-skip a:hover { color: #3B001B; }
@media (max-width: 480px) {
  .completion-modal { padding: 32px 22px 22px; }
  .completion-modal-title { font-size: 1.35rem; }
}

/* ══════════════════════════════════════════════════════════
   PATTERN ACTION BAR — Print / Pin / Share / Jump
══════════════════════════════════════════════════════════ */
.pattern-action-bar {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px;
  max-width: 900px;
  margin: 28px auto 12px;
  padding: 0 12px;
}
.pab-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  min-height: 52px;
  border: 2.5px solid #3B001B;
  border-radius: 40px;
  font-family: 'Oswald', sans-serif;
  font-size: .95rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  text-decoration: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  background: #fff; color: #3B001B;
  flex: 1 1 auto;
  max-width: 220px;
  min-width: 0;
}
.pab-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(59,0,27,.18);
}
.pab-btn:focus-visible {
  outline: 3px solid #FFB6D9; outline-offset: 2px;
}
.pab-btn:active { transform: translateY(0); }

.pab-solid {
  background: #3B001B; color: #fff;
}
.pab-solid:hover { background: #55002a; color: #fff; }

.pab-outline {
  background: #fff; color: #3B001B;
}
.pab-outline:hover { background: #FFF5F9; }

.pab-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
}
.pab-outline .pin-color  { color: #e60023; }  /* Pinterest red */
.pab-outline .share-color { color: #9c4f7f; } /* brand accent */

.pab-label { white-space: nowrap; }

/* Toast for share-copy feedback */
.pab-toast {
  position: fixed; bottom: 90px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #3B001B; color: #fff;
  padding: 12px 22px; border-radius: 30px;
  font-family: 'Oswald', sans-serif; font-size: .92rem; font-weight: 600;
  box-shadow: 0 10px 30px rgba(59,0,27,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9500; max-width: 90%;
}
.pab-toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* Tablet */
@media (max-width: 900px) {
  .pattern-action-bar { gap: 10px; margin-top: 22px; }
  .pab-btn { padding: 12px 18px; font-size: .88rem; max-width: 200px; }
  .pab-btn .pab-icon svg { width: 17px; height: 17px; }
}

/* Mobile — 2x2 grid so buttons stay readable with full labels */
@media (max-width: 640px) {
  .pattern-action-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 22px auto 8px;
    padding: 0 14px;
  }
  .pab-btn {
    max-width: none; width: 100%;
    padding: 13px 12px;
    font-size: .82rem;
    letter-spacing: .4px;
    gap: 8px;
  }
  .pab-btn .pab-icon svg { width: 16px; height: 16px; }
}

/* Very small phones — keep 2 cols but tighten type */
@media (max-width: 380px) {
  .pab-btn { font-size: .74rem; padding: 12px 8px; gap: 6px; }
  .pab-btn .pab-icon svg { width: 14px; height: 14px; }
}

/* ══════════════════════════════════════════════════════════
   PRINT STYLESHEET — clean printable pattern
══════════════════════════════════════════════════════════ */
@media print {
  @page { margin: 14mm 12mm; }

  body { background: #fff !important; color: #000 !important; font-size: 11pt; }

  /* Hide all UI chrome */
  .navbar, .custom-navbar, nav.custom-navbar,
  .hero-section, .intro-section,
  .qa-section, .newsletter-section,
  .footer-section,
  .pattern-action-bar, .pab-toast,
  .global-progress, .complete-badge,
  .completion-modal-backdrop,
  .mobile-abbrev-toggle, .mobile-overlay,
  .sidebar-close-btn,
  .source-attribution,
  #articleLoading,
  .floating-elements,
  .scalloped-border, .scalloped-border-content,
  .scalloped-border-pattern, .scalloped-border-qa,
  .scalloped-border-newsletter,
  .pattern-actions, .article-breadcrumb,
  .recommendations, .author-card,
  .why-love-images-grid {
    display: none !important;
  }

  /* Show and simplify the pattern itself */
  #articleContent { display: block !important; }
  .pattern-section { background: #fff !important; padding: 0 !important; }
  .pattern-content-wrapper {
    display: block !important;
    max-width: 100% !important; margin: 0 !important; padding: 0 !important;
  }
  .pattern-main { width: 100% !important; }
  .pattern-card {
    background: #fff !important; border: none !important;
    padding: 0 !important; box-shadow: none !important;
  }
  .pattern-sidebar {
    position: static !important; width: 100% !important;
    margin-top: 20pt !important; page-break-before: always;
  }
  .abbreviations-card {
    border: 1pt solid #000 !important; background: #fff !important;
    box-shadow: none !important; position: static !important;
    max-height: none !important; overflow: visible !important;
  }

  /* Titles + rounds in black ink, crisp */
  .pattern-title, .materials-title, .assembly-title, .notes-title,
  .part-title, .section-title, .abbreviations-title {
    color: #000 !important;
    border-left: 3pt solid #000 !important;
    background: none !important;
    page-break-after: avoid;
  }
  .row-instruction, .material-item, .assembly-list li, .notes-list li {
    background: #fff !important; color: #000 !important;
    border: none !important; padding: 4pt 0 !important;
    margin: 0 0 3pt !important; box-shadow: none !important;
    page-break-inside: avoid;
  }
  .row-instruction.completed { color: #000 !important; text-decoration: none !important; }
  .row-label { color: #000 !important; font-weight: 700 !important; }
  .row-text  { color: #000 !important; }
  .row-instruction::after { display: none !important; }

  /* Print a small footer URL on every page */
  .content-featured-image {
    max-width: 55mm !important; max-height: 55mm !important;
    border: 1pt solid #ccc !important;
    float: right; margin: 0 0 8pt 8pt !important;
  }
  a { color: #000 !important; text-decoration: none !important; }
  a::after { content: ""; }
}

/* ── 2026-05-02 AEO/GEO answer-summary block ─────────────────────────
   Visually distinct lede that AI engines extract verbatim for citations. */
.answer-summary {
  margin: 0 0 18px;
  padding: 16px 20px;
  border-left: 6px solid var(--primary, #c45a7a);
  background: var(--surface, #fff7f0);
  border-radius: 0 12px 12px 0;
}
.answer-summary p {
  margin: 0 0 10px;
  font-size: 1.05rem;
  line-height: 1.7;
}
.answer-summary p:last-child { margin-bottom: 0; }