@layer patterns {
  @media (prefers-reduced-motion: reduce) {
    .front-button,
    .front-news-card {
      transition: none;
    }
  }

  .front-page { overflow: clip; }

  .front-hero {
    position: relative;
    min-height: calc(100svh - 3.125rem);
    color: var(--ikuta-color-white);
    background: url("../images/front-page/back_top_1.jpg") no-repeat bottom center / cover;
  }

  .front-hero__inner { position: relative; min-height: inherit; }
  /* Shown on small screens only, as the current site does. */
  .front-hero__catch { display: none; }
  .front-hero__campaign { position: absolute; inset-inline-end: 5%; inset-block-end: 1.25rem; width: 13.75rem; padding: 0.625rem; background: var(--ikuta-color-white); }
  .front-hero__campaign img { width: 100%; }

  .front-section-title { display: flex; align-items: center; gap: 1rem; width: min(100%, 44rem); margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); font: clamp(1.6rem, 3vw, 1.875rem)/1.4 var(--ikuta-font-mincho); text-align: center; }
  .front-section-title::before, .front-section-title::after { flex: 1; height: 1px; background: var(--ikuta-color-rule); content: ""; }
  .front-section-title--light { color: var(--ikuta-color-white); text-shadow: -1px 1px 1px var(--ikuta-text-shade-1); }

  .front-goshuin { display: grid; min-height: 44rem; padding: clamp(4rem, 12vw, 12.5rem) var(--ikuta-gutter); place-items: center; background: url("../images/front-page/page_gosyuin-r808.png") no-repeat center / cover; }
  .front-panel { width: min(100%, 50rem); padding: clamp(1.5rem, 4vw, 2rem); background: var(--ikuta-scrim-paper); border-radius: 0.5rem; text-align: center; }
  .front-goshuin__mobile-image { display: none; }
  .front-goshuin__links { display: grid; gap: 1rem; width: min(100%, 31.25rem); margin: 0 auto; }

  .front-button { display: flex; min-height: 3.125rem; align-items: center; justify-content: center; padding: 0.5rem 1rem; color: var(--ikuta-color-white); font-family: var(--ikuta-font-mincho); text-align: center; text-decoration: none; background: var(--c-button-gradient); border: 1px solid var(--c-button-border); box-shadow: var(--ikuta-shadow-strong); transition: border-color var(--c-button-hover-duration) var(--ikuta-motion-easing), box-shadow var(--c-button-hover-duration) var(--ikuta-motion-easing); }
  /* Same gold edge the buttons elsewhere on the site take. */
  .front-button:hover, .front-button:focus-visible { color: var(--ikuta-color-white); border-color: var(--c-button-hover-border); box-shadow: var(--ikuta-shadow-strong), 0 0 0 3px var(--c-button-hover-ring); }

  .front-news { padding: clamp(4rem, 7vw, 6.25rem) var(--ikuta-gutter); background: url("../images/front-page/back_top_2.jpg") no-repeat bottom center / cover; }
  .front-news__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; padding: 0.75rem; background: var(--ikuta-color-white); box-shadow: var(--ikuta-shadow-medium); }
  .front-news-card { min-width: 0; margin: 0; border: 1px solid var(--ikuta-color-border-card); transition: border-color var(--c-button-hover-duration) var(--ikuta-motion-easing); }
  /* The whole card is the link, so the gold lands on its edge rather than on the strip inside. */
  .front-news-card:has(.front-news-card__link:hover), .front-news-card:has(.front-news-card__link:focus-visible) { border-color: var(--c-button-hover-border); }
  .front-news-card__link { display: grid; grid-template-rows: auto auto auto 1fr auto; height: 100%; padding: 0.625rem; color: var(--ikuta-color-ink); text-decoration: none; }
  .front-news-card__label { height: 1.875rem; margin-block-end: 0.3125rem; color: var(--ikuta-color-white); font: 0.9375rem/1.875rem var(--ikuta-font-mincho); text-align: center; text-shadow: -2px 2px 2px var(--ikuta-color-news-label); background: var(--ikuta-color-news-label); }
  .front-news-card__image { display: block; overflow: hidden; aspect-ratio: 3 / 2; margin-block-end: 0.3125rem; background: var(--ikuta-color-surface-muted); }
  .front-news-card__image img { width: 100%; height: 100%; object-fit: cover; }
  .front-news-card__placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: var(--ikuta-color-ink-faint); font-family: var(--ikuta-font-mincho); }
  .front-news-card__title { min-width: 0; margin: 0 0 0.3125rem; padding-block-end: 0.3125rem; overflow-wrap: anywhere; border-block-end: 1px solid var(--ikuta-color-border-card); font: 1rem/1.35 var(--ikuta-font-mincho); }
  .front-news-card__excerpt { display: none; margin: 0 0 0.3125rem; font-size: 0.75rem; line-height: 1.4; }
  .front-news-card__more { align-self: end; min-height: 1.875rem; color: var(--ikuta-color-white); font-size: 0.875rem; line-height: 1.875rem; text-align: center; background: var(--c-button-gradient); }
  .front-news__all { width: min(100%, 30rem); margin: 1.25rem auto 0; }

  .front-pickup { padding: clamp(3rem, 7vw, 6.25rem) var(--ikuta-gutter); background: url("../images/front-page/back_top_3.jpg") no-repeat bottom center / cover; }
  .front-pickup__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .front-pickup__grid a { padding: 0.25rem; background: var(--ikuta-color-white); border: 1px solid var(--ikuta-color-white); box-shadow: var(--ikuta-shadow-soft); }
  .front-pickup__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }

  .front-access { padding: clamp(3rem, 7vw, 5rem) var(--ikuta-gutter) 2.5rem; color: var(--ikuta-color-white); background: url("../images/front-page/back_top_5.jpg") no-repeat top center / cover; }
  .front-access__grid { display: grid; gap: 1.5rem; }
  .front-access__map { padding: 0.625rem; background: var(--ikuta-scrim-soft); border: 1px solid var(--ikuta-color-border-inverse); }
  .front-access__map iframe { display: block; width: 100%; height: min(22.5rem, 70vw); border: 0; }
  .front-access__text { text-shadow: -2px 2px 2px var(--ikuta-text-shade-2); }
  .front-access__text p { max-width: none; margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.7; }
  .front-access__text strong { font: 1.125rem/1.7 var(--ikuta-font-mincho); }

  @media (width >= 48rem) {
    .front-news__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .front-news-card__excerpt { display: block; }
    .front-pickup__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
  }

  @media (width >= 60rem) {
    .front-hero { min-height: 100vh; }
    .front-hero__campaign { inset-inline-end: 1.25rem; width: 15rem; }
    .front-access__grid { grid-template-columns: minmax(0, 35rem) minmax(20rem, 1fr); align-items: start; }
    .front-access__map { grid-column: 1; }
    .front-access__text { grid-column: 2; grid-row: 1; }
  }

  @media (width < 37.5rem) {
    /* Phone only. On a tablet the photograph is large enough to speak for
       itself, so the catch copy stays hidden there. */
    .front-hero__catch {
      position: absolute;
      inset-block-start: 58%;
      inset-inline: 0;
      display: block;
      margin: 0;
      font: 700 1.375rem/1.4 var(--ikuta-font-mincho);
      text-align: center;
      text-shadow: -2px 2px 2px var(--ikuta-text-shade-3);
      transform: translateY(-50%);
    }

    .front-goshuin { min-height: auto; padding: 3rem var(--ikuta-gutter); background: var(--ikuta-color-white); }
    .front-panel { padding: 0; background: transparent; }
    .front-goshuin__mobile-image { display: block; width: 80%; margin: 0 auto 1.25rem; aspect-ratio: 16 / 9; object-fit: cover; }
    .front-news { padding-inline: 0; }
    .front-news .l-container { width: 100%; }
    /* Inset from the screen edges, matching the sections above and below. */
    .front-news__grid { gap: 1px; padding: 0 var(--ikuta-gutter); background: transparent; box-shadow: none; }
    .front-news-card { height: 12.5rem; border: 0; }
    .front-news-card__link { position: relative; display: block; padding: 0; }
    .front-news-card__label, .front-news-card__more { display: none; }
    .front-news-card__image { width: 100%; height: 100%; margin: 0; aspect-ratio: auto; }
    .front-news-card__title { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1; margin: 0; padding: 0.5rem; color: var(--ikuta-color-white); border: 0; font: 700 0.875rem/1.45 var(--ikuta-font-gothic); background: var(--ikuta-scrim-strong); }
    .front-news__all { width: 80%; }
  }

  /* Small screens follow the current site's first view: the whole photograph at
     its own 16:9 proportions, and the campaign
     banner sitting underneath rather than floating on the image. */
  @media (width < 60rem) {
    /* Each section insets its content by a different amount, so the section
       titles ended up three different widths. Sizing them against the viewport
       instead of the parent keeps the rules the same length throughout; the
       min() keeps the title inside its parent whatever that parent is. */
    .front-section-title {
      width: min(100%, calc(100vw - var(--ikuta-gutter) * 4));
    }

    .front-hero {
      min-height: 0;
      background: none;
    }

    .front-hero__inner {
      min-height: 0;
      aspect-ratio: 16 / 9;
      background: url("../images/front-page/back_top_1.jpg") no-repeat center center / cover;
    }

    .front-hero__campaign {
      position: static;
      display: block;
      width: min(20rem, 90%);
      margin: 1.25rem auto;
      padding: 0;
      background: transparent;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .front-page * { scroll-behavior: auto !important; }
  }
}