/* archives-head-v1.18.css
 * Archives page — Concept C revised
 * v1.16 — May 2, 2026
 *
 * v1.14 changes:
 *   - Corner items: horizontal row at ALL breakpoints (label left, title right)
 *   - No more stacked/column layout on mobile
 *   - Proportionally scaled: desk 13px/120px → tablet 10px/100px → mobile 8px/95px → sm-mobile 7px/80px
 *   - line-height: 1 on all corner text elements at all responsive breakpoints
 *
 * v1.10 changes:
 *   - Mobile corner item padding: 8px → 5px (40% less vertical space)
 *   - Mobile corner gap: 2px → 1px
 *   - Small mobile corner item padding: 5px → 3px
 *   - Small mobile FA title font-size: 30px → 28px
 *
 * v1.9 changes (proportion harmony to match design comp):
 *   - Story circles: 18px → 22px, number font 10px → 11px
 *   - Story text: 13px → 15px
 *   - Story item padding: 8px → 12px
 *   - Story item gap: 8px → 10px
 *   - Corner label: 9px → 11px, column 105px → 120px
 *   - Corner title: 12px/600 → 14px/700
 *   - Corner item padding: 10px → 13px
 *   - Headline gold underline padding-bottom: 10px → 8px
 *   - More-features bottom margin: 14px → 18px (balance against larger corners)
 *   - Responsive breakpoints scaled proportionally
 */


/* ============================================
   1. TILE GRID
   ============================================ */

.collection-list-120 {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

a.tile-link-block.w-inline-block,
.tile-link-block.w-inline-block,
.tile-link-block {
  display: grid !important;
  grid-template-columns: 42% minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
  border-radius: 0 12px 12px 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 4px 20px rgba(26, 58, 58, 0.10) !important;
  border: 1px solid rgba(26, 58, 58, 0.06) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  min-height: auto !important;
}

a.tile-link-block.w-inline-block:hover,
.tile-link-block:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 32px rgba(26, 58, 58, 0.16) !important;
}


/* ============================================
   2. LEFT COLUMN — gold bar + image
   ============================================ */

.tile-link-block .hero-image-div {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: static !important;
  height: 100% !important;
  min-width: 0 !important;
}

.tile-link-block .gold-bar {
  background: #f4a127 !important;
  padding: 10px 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  min-height: 38px !important;
  max-height: 38px !important;
  height: 38px !important;
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  max-width: 100% !important;
  z-index: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.tile-link-block .arch-issue-date {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

.tile-link-block .div-block-20048138 {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  font-family: 'Lato', Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: #1a1a1a !important;
  opacity: 0.75 !important;
}

.tile-link-block .text-block-111497-copy {
  font-family: 'Lato', Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}

.tile-link-block .image-177850 {
  width: 100% !important;
  flex: 1 1 0% !important;
  object-fit: cover !important;
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}


/* ============================================
   3. RIGHT COLUMN — teal bar + content
   ============================================ */

.tile-link-block .content-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  background: #ffffff !important;
  position: static !important;
}

/* TEAL BAR — key fix: width auto, max-width 100% to prevent 795px overflow */
.tile-link-block .content-card > .section {
  background: #1a3a3a !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  box-sizing: border-box !important;
  font-family: 'Lato', Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2.5px !important;
  color: #c4a35a !important;
  line-height: 18px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  text-align: left !important;
  overflow: hidden !important;
}

/* Card content */
.tile-link-block .content-card > .card-content {
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  overflow: hidden !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* FA headline — Instrument Serif with gold underline */
.tile-link-block .fa-title-arch {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  color: #1a3a3a !important;
  line-height: 1.3 !important;
  margin-top: 12px !important;
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid #f4a127 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  overflow: visible !important;
  visibility: visible !important;
  display: block !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  white-space: normal !important;
}


/* ============================================
   4. NUMBERED STORIES
   ============================================ */

.tile-link-block .more-features-section {
  margin-bottom: 18px !important;
  counter-reset: story-counter 1 !important;
  overflow: hidden !important;
  max-width: 100% !important;
}

.tile-link-block .feature-item-2,
.tile-link-block .feature-item-3,
.tile-link-block .feature-item-4 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 0 !important;
  counter-increment: story-counter !important;
  overflow: hidden !important;
  max-width: 100% !important;
}

.tile-link-block .feature-dash {
  font-size: 0 !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  background: #1a3a3a !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #ffffff !important;
  overflow: hidden !important;
}

.tile-link-block .feature-item-2 .feature-dash::after,
.tile-link-block .feature-item-3 .feature-dash::after,
.tile-link-block .feature-item-4 .feature-dash::after {
  content: counter(story-counter) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}

.tile-link-block .text-block-111498 {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 15px !important;
  color: #555 !important;
  line-height: 1.4 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  max-width: 100% !important;
}


/* ============================================
   5. CORNER ITEMS — horizontal: label left, title right
   ============================================ */

.tile-link-block .also-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  border-top: 1px solid #e8e4d8 !important;
  overflow: hidden !important;
  max-width: 100% !important;
  /* Kill any Webflow grid on this */
  grid-template-columns: unset !important;
}

.tile-link-block .card-content > .also-section:first-of-type {
  margin-top: auto !important;
}

/* Each corner item: ROW direction, label left, title right */
.tile-link-block .also-section > .also-item-1 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 13px 0 !important;
  border-bottom: 1px solid #e8e4d8 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  width: auto !important;
}

.tile-link-block .also-section > .also-item-1:last-child {
  border-bottom: none !important;
}

/* Corner label — fixed width, no wrap, no shrink */
.tile-link-block .also-item-1 > .arch-ts-no {
  font-family: 'Lato', Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: #c4a35a !important;
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  flex: 0 0 120px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Corner title — fills remaining space, ellipsis */
.tile-link-block .also-item-1 > .arch-ts-title {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1a3a3a !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex: 1 1 0% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ============================================
   6. TABLET (768–999px)
   ============================================ */

@media (max-width: 1080px) {
  .collection-list-120 {
    gap: 18px !important;
  }

  a.tile-link-block.w-inline-block,
  .tile-link-block {
    grid-template-columns: 38% minmax(0, 1fr) !important;
    min-height: auto !important;
    border-radius: 0 10px 10px 10px !important;
  }

  a.tile-link-block.w-inline-block:hover,
  .tile-link-block:hover {
    transform: none !important;
  }

  .tile-link-block .gold-bar {
    padding: 8px 14px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  .tile-link-block .arch-issue-date {
    font-size: 13px !important;
  }

  .tile-link-block .div-block-20048138,
  .tile-link-block .text-block-111497-copy {
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }

  .tile-link-block .content-card > .section {
    padding: 8px 14px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    font-size: 9px !important;
    letter-spacing: 2px !important;
  }

  .tile-link-block .content-card > .card-content {
    padding: 12px 14px !important;
  }

  .tile-link-block .fa-title-arch {
    font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif !important;
    font-size: 36px !important;
    margin-top: 10px !important;
    margin-bottom: 8px !important;
    padding-bottom: 7px !important;
  }

  .tile-link-block .feature-dash {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
  }

  .tile-link-block .feature-item-2 .feature-dash::after,
  .tile-link-block .feature-item-3 .feature-dash::after,
  .tile-link-block .feature-item-4 .feature-dash::after {
    font-size: 10px !important;
  }

  .tile-link-block .text-block-111498 {
    font-size: 13px !important;
  }

  .tile-link-block .feature-item-2,
  .tile-link-block .feature-item-3,
  .tile-link-block .feature-item-4 {
    padding: 10px 0 !important;
    gap: 9px !important;
  }

  .tile-link-block .also-item-1 > .arch-ts-no {
    font-size: 9px !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    flex: 0 0 100px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tile-link-block .also-item-1 > .arch-ts-title {
    font-size: 12px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tile-link-block .also-section > .also-item-1 {
    flex-direction: row !important;
    align-items: center !important;
    padding: 10px 0 !important;
    gap: 12px !important;
  }
}


/* ============================================
   7. MOBILE (<768px) — stacks vertically
   ============================================ */

@media (max-width: 767px) {
  .collection-list-120 {
    gap: 14px !important;
  }

  a.tile-link-block.w-inline-block,
  .tile-link-block {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    border-radius: 0 8px 8px 8px !important;
  }

  .tile-link-block .hero-image-div {
    max-height: 360px !important;
  }

  .tile-link-block .image-177850 {
    height: 320px !important;
    flex: none !important;
  }

  .tile-link-block .gold-bar {
    padding: 8px 14px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  .tile-link-block .arch-issue-date {
    font-size: 13px !important;
  }

  .tile-link-block .div-block-20048138,
  .tile-link-block .text-block-111497-copy {
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }

  .tile-link-block .content-card > .section {
    padding: 8px 14px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    font-size: 9px !important;
  }

  .tile-link-block .content-card > .card-content {
    padding: 12px 14px !important;
  }

  .tile-link-block .fa-title-arch {
    font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif !important;
    font-size: 34px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    padding-bottom: 7px !important;
  }

  .tile-link-block .feature-dash {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
  }

  .tile-link-block .feature-item-2 .feature-dash::after,
  .tile-link-block .feature-item-3 .feature-dash::after,
  .tile-link-block .feature-item-4 .feature-dash::after {
    font-size: 10px !important;
  }

  .tile-link-block .feature-item-2,
  .tile-link-block .feature-item-3,
  .tile-link-block .feature-item-4 {
    padding: 9px 0 !important;
    gap: 9px !important;
  }

  .tile-link-block .text-block-111498 {
    font-size: 13px !important;
  }

  .tile-link-block .also-item-1 > .arch-ts-no {
    font-size: 9px !important;
    width: 95px !important;
    min-width: 95px !important;
    max-width: 95px !important;
    flex: 0 0 95px !important;
    letter-spacing: 1px !important;
    text-align: left !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tile-link-block .also-item-1 > .arch-ts-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    flex: 1 1 0% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tile-link-block .also-section > .also-item-1 {
    flex-direction: row !important;
    align-items: center !important;
    padding: 8px 0 !important;
    gap: 10px !important;
  }
}


/* ============================================
   8. SMALL MOBILE (<480px)
   ============================================ */

@media (max-width: 479px) {
  .collection-list-120 {
    gap: 11px !important;
  }

  .tile-link-block .image-177850 {
    height: 130px !important;
  }

  .tile-link-block .gold-bar {
    padding: 7px 12px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }

  .tile-link-block .arch-issue-date {
    font-size: 12px !important;
  }

  .tile-link-block .div-block-20048138,
  .tile-link-block .text-block-111497-copy {
    font-size: 9px !important;
    letter-spacing: 0.8px !important;
  }

  .tile-link-block .content-card > .section {
    padding: 7px 12px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    font-size: 8px !important;
    letter-spacing: 1.5px !important;
  }

  .tile-link-block .content-card > .card-content {
    padding: 10px 12px !important;
  }

  .tile-link-block .fa-title-arch {
    font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif !important;
    font-size: 28px !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    padding-bottom: 5px !important;
  }

  .tile-link-block .feature-dash {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
  }

  .tile-link-block .feature-item-2 .feature-dash::after,
  .tile-link-block .feature-item-3 .feature-dash::after,
  .tile-link-block .feature-item-4 .feature-dash::after {
    font-size: 9px !important;
  }

  .tile-link-block .feature-item-2,
  .tile-link-block .feature-item-3,
  .tile-link-block .feature-item-4 {
    padding: 7px 0 !important;
    gap: 8px !important;
  }

  .tile-link-block .text-block-111498 {
    font-size: 12px !important;
  }

  /* Corners — horizontal row, same as desktop, proportionally scaled */
  .tile-link-block .also-section > .also-item-1 {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 0 !important;
  }

  .tile-link-block .also-item-1 > .arch-ts-no {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    flex: 0 0 80px !important;
    text-align: left !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: 0.8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tile-link-block .also-item-1 > .arch-ts-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    text-align: left !important;
    max-width: 100% !important;
    flex: 1 1 0% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* ============================================
   9. COLLECTION LIST LAYOUT
   ============================================ */

.collection-list-120,
.collection-list-120 .w-dyn-items {
  display: flex !important;
  flex-direction: column !important;
}


/* ============================================
   10. SIDEBAR HIDE + AD CONTAINER
   ============================================ */

.ibx-arch-ad {
  display: none !important;
}

@media (max-width: 1080px) {
  .sidebar-25 {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .content-75 {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  .ibx-arch-ad {
    display: block !important;
    width: 100% !important;
    margin: 11px 0 !important;
    text-align: center !important;
  }

  .ibx-arch-ad-label {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #b8a080 !important;
    margin-bottom: 6px !important;
  }

  .ibx-arch-ad a {
    display: block !important;
    width: 50% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #d8d5c0 !important;
    text-decoration: none !important;
  }

  .ibx-arch-ad img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

@media (max-width: 767px) {
  .ibx-arch-ad {
    margin: 11px 0 !important;
  }
  .ibx-arch-ad a {
    width: 60% !important;
  }
}

@media (max-width: 479px) {
  .ibx-arch-ad a {
    width: 70% !important;
  }
}