@layer components {
  /* WordPress core blocks, styled to match the shrine's existing pages.
     Headings already inherit mincho from base.css; these rules add the decoration. */

  .wp-block-heading {
    color: var(--ikuta-color-ink);
    font-weight: 500;
  }

  h2.wp-block-heading {
    margin-block: 2.5rem 1.25rem;
    padding-block-end: 0.5rem;
    font-size: 1.5rem;
    border-block-end: 2px solid var(--ikuta-color-gold);
  }

  h3.wp-block-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-block: 2rem 1rem;
    font-size: 1.25rem;
  }

  h3.wp-block-heading::before {
    content: "";
    flex: 0 0 auto;
    width: 0.25rem;
    height: 1.1em;
    background: var(--ikuta-color-purple);
  }

  h4.wp-block-heading {
    margin-block: 1.5rem 0.75rem;
    color: var(--ikuta-color-purple-deep);
    font-size: 1.125rem;
  }

  /* Lists */
  .wp-block-list {
    padding-inline-start: 1.4em;
  }

  .wp-block-list li + li {
    margin-block-start: 0.4em;
  }

  .wp-block-list li::marker {
    color: var(--ikuta-color-purple);
  }

  /* Quotes */
  .wp-block-quote {
    margin-block: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--ikuta-color-paper);
    border-inline-start: 4px solid var(--ikuta-color-gold);
  }

  .wp-block-quote p {
    max-width: none;
    font-family: var(--ikuta-font-mincho);
  }

  .wp-block-quote cite {
    display: block;
    margin-block-start: 0.75rem;
    color: var(--ikuta-color-muted);
    font-size: var(--ikuta-font-small);
    font-style: normal;
  }

  .wp-block-quote cite::before {
    content: "— ";
  }

  .wp-block-pullquote {
    margin-block: 2.5rem;
    padding: 1.75rem 1rem;
    text-align: center;
    border-block: 2px solid var(--ikuta-color-gold);
  }

  .wp-block-pullquote blockquote p {
    max-width: none;
    font-family: var(--ikuta-font-mincho);
    font-size: 1.25rem;
    line-height: var(--ikuta-line-heading);
  }

  .wp-block-pullquote cite {
    color: var(--ikuta-color-muted);
    font-size: var(--ikuta-font-small);
    font-style: normal;
  }

  /* Tables */
  .wp-block-table {
    margin-block: 2rem;
    overflow-x: auto;
  }

  .wp-block-table table {
    width: 100%;
    background: var(--ikuta-color-white);
    border-collapse: collapse;
  }

  .wp-block-table th,
  .wp-block-table td {
    padding: 0.75rem;
    font-weight: 400;
    text-align: start;
    vertical-align: middle;
    border: 1px solid var(--ikuta-color-gold);
  }

  .wp-block-table th {
    color: var(--ikuta-color-ink);
    background: var(--ikuta-color-paper);
  }

  .wp-block-table figcaption {
    margin-block-start: 0.6rem;
    color: var(--ikuta-color-muted);
    font-size: var(--ikuta-font-small);
    text-align: center;
  }

  .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background: rgb(246 239 229 / 0.5);
  }

  /* Images and galleries */
  .wp-block-image figcaption,
  .wp-block-gallery figcaption,
  .wp-block-embed figcaption,
  .wp-block-video figcaption,
  .wp-block-audio figcaption {
    max-width: none;
    margin-block-start: 0.6rem;
    color: var(--ikuta-color-muted);
    font-size: var(--ikuta-font-small);
    line-height: 1.6;
    text-align: center;
  }

  .wp-block-image img {
    height: auto;
  }

  .wp-block-image.is-style-rounded img {
    border-radius: 0.35rem;
  }

  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    background: linear-gradient(transparent, rgb(0 0 0 / 0.72));
  }

  /* Cover */
  .wp-block-cover {
    min-height: 20rem;
    padding: 2rem;
  }

  .wp-block-cover .wp-block-cover__inner-container > * {
    color: var(--ikuta-color-white);
  }

  .wp-block-cover h1,
  .wp-block-cover h2,
  .wp-block-cover h3 {
    font-family: var(--ikuta-font-mincho);
    text-shadow: 0 2px 4px rgb(0 0 0 / 0.5);
  }

  /* Media & text, columns, group */
  .wp-block-media-text {
    margin-block: 2rem;
  }

  .wp-block-media-text__content p {
    max-width: none;
  }

  .wp-block-columns {
    margin-block: 2rem;
  }

  .wp-block-column > * {
    max-width: none;
  }

  .wp-block-group.has-background {
    padding: 1.5rem;
  }

  /* Separator and spacer */
  .wp-block-separator {
    width: 100%;
    max-width: none;
    margin-block: 2.5rem;
    border: 0;
    border-block-start: 1px solid var(--ikuta-color-gold);
  }

  .wp-block-separator.is-style-dots {
    border: 0;
    color: var(--ikuta-color-gold);
  }

  /* Details */
  .wp-block-details {
    margin-block: 1.5rem;
    background: var(--ikuta-color-white);
    border: 1px solid var(--ikuta-color-gold);
  }

  .wp-block-details summary {
    padding: 0.9rem 1.1rem;
    color: var(--ikuta-color-purple-deep);
    font-family: var(--ikuta-font-mincho);
    background: var(--ikuta-color-paper);
    cursor: pointer;
  }

  .wp-block-details summary:focus-visible {
    outline: 3px solid var(--ikuta-color-focus);
    outline-offset: -3px;
  }

  .wp-block-details > *:not(summary) {
    margin-inline: 1.1rem;
  }

  .wp-block-details > *:not(summary):first-of-type {
    margin-block-start: 1rem;
  }

  .wp-block-details > *:last-child {
    margin-block-end: 1rem;
  }

  /* Code and preformatted */
  .wp-block-code,
  .wp-block-preformatted {
    padding: 1rem;
    overflow-x: auto;
    font-size: var(--ikuta-font-small);
    background: #f4f2ee;
    border-inline-start: 3px solid var(--ikuta-color-gold);
  }

  .wp-block-code code {
    white-space: pre;
  }

  /* File and embeds */
  .wp-block-file {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    background: var(--ikuta-color-paper);
    border-inline-start: 3px solid var(--ikuta-color-gold);
  }

  .wp-block-file__button {
    margin-inline-start: auto;
  }

  .wp-block-embed__wrapper {
    position: relative;
  }

  /* Editor colour palette helpers that core does not cover on the front end */
  .has-ikuta-purple-background-color,
  .has-ikuta-violet-background-color {
    color: var(--ikuta-color-white);
  }

  @media (width < 48rem) {
    h2.wp-block-heading { font-size: 1.3rem; }
    h3.wp-block-heading { font-size: 1.15rem; }
    .wp-block-cover { min-height: 15rem; padding: 1.25rem; }
    .wp-block-quote { padding: 1rem 1.1rem; }
    .wp-block-pullquote blockquote p { font-size: 1.1rem; }
  }
}