/* Real, supplied illustration assets only. Load after the shared site styles.
   Frames and masks are decorative presentation, not CSS-drawn subject matter.
   Every stage (including tilted crops) stays inside its thread-obstacle figure.
   There is intentionally no animation, hover motion, or JavaScript dependency. */

.gaelic-illustration {
  --gaelic-paper: var(--paper, #f4f1ea);
  --gaelic-forest: var(--forest, #14392c);
  --gaelic-gold: #bd9a63;
  position: relative;
  display: block;
  isolation: isolate;
  box-sizing: border-box;
  clear: both;
  float: none;
  width: min(100%, 34rem);
  max-width: 100%;
  min-width: 0;
  margin: clamp(1.75rem, 4vw, 3rem) auto;
  padding: 0;
  color: var(--gaelic-forest);
  background: transparent;
  border: 0;
  pointer-events: none;
  user-select: none;
}

.gaelic-illustration__stage {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 2;
  padding: 4%;
  /* The fallback is intentionally local, never a page-wide overflow fix. */
  overflow: hidden;
  overflow: clip;
}

.gaelic-illustration .gaelic-illustration__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: multiply;
  /* Feather the supplied paper/alpha edge, leaving the actual art visible. */
  -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, #000d 72%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 55%, #000d 72%, transparent 100%);
}

.gaelic-illustration--heading {
  width: 100%;
  max-width: 18rem;
  margin: 0;
  justify-self: end;
  align-self: center;
}

.gaelic-illustrated-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 18rem);
  gap: 1.5rem 2.5rem;
  align-items: center;
}

.gaelic-illustrated-heading > :not(.gaelic-illustration) {
  min-width: 0;
}

/* Search remains a real, full-size control, separate from decorative media. */
.gaelic-library-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 18rem);
  gap: 1.5rem 2.5rem;
  align-items: end;
}

.gaelic-library-heading > h2 {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

.gaelic-library-heading > .search-box {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  max-width: 100%;
}

.gaelic-library-heading > .gaelic-illustration {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.gaelic-illustration--interlude {
  width: min(30rem, calc(100% - 2.5rem));
  max-width: calc(100% - 2.5rem);
  margin-block: clamp(1.75rem, 4vw, 3.5rem);
}

.gaelic-illustration--learning {
  width: 100%;
  max-width: 36rem;
  margin: 0;
  align-self: center;
  justify-self: center;
}

.gaelic-illustration--learning .gaelic-illustration__stage {
  aspect-ratio: 6 / 5;
  padding: 5%;
}

/* A cleared editorial breakout, not an absolutely positioned text overlay.
   The figure itself is NEVER rotated, so measured thread geometry is truthful. */
.article-content > .gaelic-illustration--collage {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  margin-block: clamp(2rem, 5vw, 3.5rem);
}

.gaelic-illustration--collage .gaelic-illustration__stage {
  aspect-ratio: 3 / 2;
  padding: 6% 5%;
}

.gaelic-illustration--collage .gaelic-illustration__image {
  position: relative;
  z-index: 1;
  transform: rotate(-3deg) scale(.91);
  filter: drop-shadow(0 .6rem .6rem #14392c15);
}

.gaelic-illustration__trim {
  position: absolute;
  z-index: 2;
  display: block;
  box-sizing: border-box;
  width: 26%;
  height: 36%;
  padding: clamp(3px, .6vw, 7px);
  overflow: hidden;
  border: 1px solid var(--gaelic-gold);
  border-radius: 2px;
  background: var(--gaelic-paper);
  box-shadow: 0 .55rem .9rem #14392c24;
}

.gaelic-illustration__trim--near {
  left: 4%;
  bottom: 10%;
  transform: rotate(-11deg);
}

.gaelic-illustration__trim--far {
  right: 4%;
  top: 11%;
  transform: rotate(9deg);
}

.gaelic-illustration .gaelic-illustration__detail {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.gaelic-illustration__trim--near .gaelic-illustration__detail {
  object-position: 15% 70%;
}

.gaelic-illustration__trim--far .gaelic-illustration__detail {
  object-position: 85% 30%;
}

/* At this breakpoint the shared wrap has at least 56px outer gutters. A 40px
   outward-only breakout stays inside that margin; the sidebar side stays put. */
@media (min-width: 1201px) {
  .article-content > .gaelic-illustration--collage {
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
    margin-inline: 0 -40px;
  }
}

@media (max-width: 700px) {
  .gaelic-illustrated-heading,
  .gaelic-library-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .gaelic-illustration--heading {
    max-width: 17rem;
    justify-self: center;
  }

  .gaelic-library-heading > h2 {
    grid-column: 1;
    grid-row: 1;
  }

  .gaelic-library-heading > .gaelic-illustration {
    grid-column: 1;
    grid-row: 2;
  }

  .gaelic-library-heading > .search-box {
    grid-column: 1;
    grid-row: 3;
  }

  .gaelic-illustration--interlude {
    width: min(24rem, 100%);
    max-width: 100%;
    padding-inline: 1rem;
  }

  .gaelic-illustration--learning {
    max-width: 27rem;
  }

  .gaelic-illustration--learning .gaelic-illustration__stage {
    aspect-ratio: 3 / 2;
  }

  .gaelic-illustration--collage .gaelic-illustration__stage {
    padding: 6% 3%;
  }

  .gaelic-illustration__trim {
    width: 25%;
    height: 34%;
  }
}

/* Artwork is already static. Keep that invariant when global motion is off. */
@media (prefers-reduced-motion: reduce) {
  .gaelic-illustration,
  .gaelic-illustration * {
    animation: none;
    transition: none;
  }
}

[data-motion="off"] .gaelic-illustration,
[data-motion="off"] .gaelic-illustration * {
  animation: none;
  transition: none;
}

@media print {
  .gaelic-illustration {
    display: none !important;
  }

  .gaelic-illustrated-heading,
  .gaelic-library-heading {
    display: block;
  }
}