/* Overview-only nested-grid and note compositions */

@layer application {
/*
  The notice board owns a nested detail grid whose track count mirrors the
  outer tile footprint. Its padding follows the shared text-tile inset while
  labels and other overlays remain outside the nested grid flow.
*/
.notice-board-grid.detail-grid {
  position: absolute;
  z-index: 1;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  padding: calc(2 * var(--detail-content-tile-padding));
}

.title-notice-board > .notice-board-grid {
  padding-block-start: calc(
    var(--title-notice-board-label-block-start)
    + var(--type-size-overview-extension-label)
    + (2 * var(--detail-content-tile-padding))
  );
}

.notice-board-grid__item {
  position: relative;
  z-index: 1;
  grid-column: var(--notice-board-grid-item-column, 1) / span
    var(--notice-board-grid-item-columns, 1);
  grid-row: var(--notice-board-grid-item-row, 1) / span
    var(--notice-board-grid-item-rows, 1);
  min-inline-size: 0;
  min-block-size: 0;
}

.notice-board-grid__item--at-1 {
  --notice-board-grid-item-column: 1;
  --notice-board-grid-item-row: 1;
}

.notice-board-grid__item--at-9 {
  --notice-board-grid-item-column: 4;
  --notice-board-grid-item-row: 2;
}

.notice-board-grid__item--size-2x2 {
  --notice-board-grid-item-columns: 2;
  --notice-board-grid-item-rows: 2;
}

.notice-board-grid__item--size-3x4 {
  --notice-board-grid-item-columns: 3;
  --notice-board-grid-item-rows: 4;
}

.pin-note {
  --pin-note-rotation: 0deg;
  --pin-note-pin-inline: 50%;
  --pin-note-pin: #59676e;
  --pin-note-pin-dark: #303b40;
  --pin-note-pin-light: #aab4b8;

  isolation: isolate;
  display: flex;
  flex-direction: column;
  margin: clamp(0.18rem, calc(0.38 * var(--site-scale-unit)), 0.42rem);
  padding: clamp(1.35rem, calc(2.1 * var(--site-scale-unit)), 2.1rem) clamp(0.9rem, calc(1.45 * var(--site-scale-unit)), 1.5rem);
  border: 1px solid rgb(80 58 31 / 0.08);
  background: #f7f5ef;
  box-shadow:
    0 0.25rem 0.3rem rgb(32 22 12 / 0.16),
    0 0.8rem 1.15rem rgb(32 22 12 / 0.2);
  transform: rotate(var(--pin-note-rotation));
  transform-origin: center;
  transition:
    box-shadow 220ms var(--site-ease-out),
    transform 220ms var(--site-ease-out);
  pointer-events: auto;
}

.pin-note[href] {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.pin-note:hover,
.pin-note:focus-visible {
  z-index: 2;
  box-shadow:
    0 0.32rem 0.42rem rgb(32 22 12 / 0.18),
    0 1rem 1.45rem rgb(32 22 12 / 0.24);
  transform: rotate(var(--pin-note-rotation)) scale(1.035);
}

.pin-note:focus-visible {
  outline: 2px solid var(--pin-note-accent, #59676e);
  outline-offset: 0.2rem;
}

.pin-note::before {
  position: absolute;
  z-index: 2;
  inset-block-start: clamp(-0.32rem, calc(-0.28 * var(--site-scale-unit)), -0.2rem);
  inset-inline-start: var(--pin-note-pin-inline);
  inline-size: clamp(0.8rem, calc(1.05 * var(--site-scale-unit)), 1.08rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 34% 28%,
      rgb(255 255 255 / 0.92) 0 7%,
      transparent 9%
    ),
    radial-gradient(
      circle at 42% 36%,
      var(--pin-note-pin-light) 0 28%,
      var(--pin-note-pin) 50% 72%,
      var(--pin-note-pin-dark) 74% 100%
    );
  box-shadow: none;
  content: "";
  translate: -50% 0;
}

.pin-note--paper {
  background:
    linear-gradient(105deg, rgb(255 255 255 / 0.98), rgb(244 243 239 / 0.98));
}

.pin-note--sticky {
  background:
    linear-gradient(145deg, #fbfaf2 0%, #f4f0dc 72%, #e9e3c9 100%);
}

.pin-note--large {
  --pin-note-rotation: -0.7deg;
}

.pin-note--lower {
  --pin-note-rotation: -4deg;
  --pin-note-pin-inline: 46%;
  --pin-note-pin: #77756d;
  --pin-note-pin-dark: #44433e;
  --pin-note-pin-light: #c2bfb5;
}

.pin-note__content {
  display: flex;
  flex-direction: column;
  gap: clamp(0.45rem, calc(0.72 * var(--site-scale-unit)), 0.72rem);
  color: rgb(30 30 28 / 0.78);
  font-family: var(--type-family-text);
}

.pin-note__title {
  color: rgb(22 22 20 / 0.86);
  font-family: var(--type-family-display);
  font-weight: var(--type-weight-semibold);
}

.pin-note__copy {
  margin: 0;
}

.pin-note--job-search {
  --pin-note-accent: #9f1922;
}

.pin-note--job-search .pin-note__content {
  flex: 1;
  gap: clamp(0.3rem, calc(0.46 * var(--site-scale-unit)), 0.48rem);
}

.pin-note--job-search .pin-note__eyebrow {
  align-self: flex-start;
  padding: 0.34em 0.64em 0.3em;
  border-radius: 0.18rem;
  background: var(--pin-note-accent);
  color: #fff;
  font-family: var(--type-family-display);
  font-size: var(--type-size-overview-note-job-eyebrow);
  font-weight: var(--type-weight-semibold);
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.pin-note--job-search .pin-note__title {
  margin-block-start: clamp(0.16rem, calc(0.28 * var(--site-scale-unit)), 0.3rem);
  font-size: var(--type-size-overview-note-job-title);
  line-height: 1;
}

.pin-note--job-search .pin-note__subtitle {
  color: rgb(30 30 28 / 0.68);
  font-size: var(--type-size-overview-note-job-subtitle);
  font-weight: var(--type-weight-regular);
  hyphens: auto;
  line-height: 1.2;
  text-align: justify;
}

.pin-note--job-search .pin-note__facts {
  flex: 1;
  display: grid;
  grid-template-rows: repeat(4, max-content);
  align-content: center;
  margin: clamp(0.55rem, calc(0.78 * var(--site-scale-unit)), 0.8rem) 0;
}

.pin-note--job-search .pin-note__facts > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(0.55rem, calc(0.7 * var(--site-scale-unit)), 0.72rem);
  border-block-start: 1px solid rgb(30 30 28 / 0.16);
}

.pin-note--job-search .pin-note__facts > div:last-child {
  border-block-end: 1px solid rgb(30 30 28 / 0.16);
}

.pin-note--job-search .pin-note__facts dt,
.pin-note--job-search .pin-note__facts dd {
  margin: 0;
}

.pin-note--job-search .pin-note__facts dt {
  color: var(--pin-note-accent);
  font-size: var(--type-size-overview-note-job-fact-label);
  font-weight: var(--type-weight-semibold);
  letter-spacing: 0.055em;
  line-height: 1.1;
  text-transform: uppercase;
}

.pin-note--job-search .pin-note__facts dd {
  margin-block-start: 0.16rem;
  font-size: var(--type-size-overview-note-job-fact-value);
  font-weight: var(--type-weight-regular);
  hyphens: auto;
  line-height: 1.25;
  text-align: justify;
}

.pin-note--job-search .pin-note__closing {
  font-size: var(--type-size-overview-note-job-fact-value);
  font-weight: var(--type-weight-regular);
  hyphens: auto;
  line-height: 1.35;
  text-align: justify;
}

.pin-note--contact {
  --pin-note-accent: #59676e;

  justify-content: center;
  border-color: color-mix(in srgb, var(--pin-note-accent) 28%, transparent);
  background:
    radial-gradient(
      circle at 85% 12%,
      color-mix(in srgb, var(--pin-note-accent) 13%, transparent),
      transparent 38%
    ),
    linear-gradient(145deg, #fffdf5 0%, #f4f0dc 72%, #e9e3c9 100%);
}

.pin-note--contact .pin-note__content {
  align-items: center;
  gap: clamp(0.38rem, calc(0.58 * var(--site-scale-unit)), 0.6rem);
  justify-content: center;
  inline-size: 100%;
  text-align: center;
}

.pin-note--contact .pin-note__contact-kicker {
  padding: 0.34em 0.68em 0.3em;
  border-radius: 0.18rem;
  background: var(--pin-note-accent);
  color: #fff;
  font-family: var(--type-family-display);
  font-size: var(--type-size-overview-note-contact-kicker);
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.085em;
  line-height: 1;
  text-transform: uppercase;
}

.pin-note--contact .pin-note__contact-icon {
  display: block;
  inline-size: clamp(2.3rem, calc(3.15 * var(--site-scale-unit)), 3.2rem);
  margin-block-start: clamp(0.18rem, calc(0.3 * var(--site-scale-unit)), 0.32rem);
}

.pin-note--contact .pin-note__contact-icon img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.pin-note--contact .pin-note__title {
  font-size: var(--type-size-overview-note-contact-title);
  line-height: 1.08;
}

.pin-note--contact .pin-note__copy {
  font-size: var(--type-size-overview-note-contact-copy);
  font-weight: var(--type-weight-regular);
  line-height: 1.3;
  text-align: center;
}

@media (max-width: 46rem) {
  .detail-grid__tile.title-notice-board {
    aspect-ratio: auto;
    block-size: auto;
    min-block-size: 0;
    max-block-size: none;
  }

  .title-notice-board > .notice-board-grid {
    position: relative;
    inset: auto;
    display: flex;
    block-size: auto;
    padding-block-start: calc(
      var(--title-notice-board-label-block-start)
      + var(--type-size-overview-extension-label)
      + (2 * var(--detail-content-tile-padding))
      + (var(--detail-grid-gap) / 2)
    );
    flex-direction: column;
    gap: calc(2 * var(--detail-grid-gap));
  }

  .pin-note--job-search .pin-note__content {
    gap: 0.5rem;
  }

  .pin-note--job-search .pin-note__facts {
    margin-block: 0.75rem;
  }

  .pin-note--job-search .pin-note__facts > div {
    padding-block: 0.78rem;
  }

  .title-notice-board .pin-note--contact {
    inline-size: 72%;
    padding-block: 0.9rem;
    padding-inline: 0.7rem;
    align-self: center;
  }

  .pin-note--contact .pin-note__contact-icon {
    inline-size: 2.35rem;
  }
}

.chapter-overview__layout {
  --overview-half-gap: calc(clamp(1rem, calc(2 * var(--site-scale-unit)), 2.75rem) + 1px);
  --overview-column-gap: calc(clamp(2rem, calc(4 * var(--site-scale-unit)), 5.5rem) + 2px);

  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0, min(80%, 76rem))
    minmax(min(12rem, 100%), 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--overview-column-gap);
  inline-size: 100%;
  max-inline-size: var(--site-composition-max-inline-size);
  block-size: var(--chapter-overview-block-size);
  /* Never exceed the overview's usable navigation-to-cinema content band. */
  max-block-size: var(--chapter-overview-available-block-size, 100%);
  margin-inline: auto;
  align-items: stretch;
  transform: none;
}

.chapter-overview__layout--accordion-only {
  grid-template-columns: minmax(0, min(80%, 76rem));
  align-items: center;
  justify-content: center;
}

.chapter-overview__layout:not(.chapter-overview__layout--accordion-only)::after {
  position: absolute;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  inset-block: 0;
  inset-inline-start: calc(-1 * var(--overview-half-gap));
  inline-size: 2px;
  background: #111;
  content: "";
  opacity: 0;
  transform: scaleY(0.94);
  transform-origin: center;
  transition:
    opacity 680ms ease,
    transform 850ms var(--site-ease-out);
  pointer-events: none;
}

.route-stage.is-divider-revealed
  .chapter-overview__layout:not(.chapter-overview__layout--accordion-only)::after {
  opacity: 1;
  transform: scaleY(1);
}
}