@layer components {
  .skip-link {
    position: fixed;
    z-index: 10000;
    inset-block-start: var(--ikuta-space-2);
    inset-inline-start: var(--ikuta-space-2);
    padding: 0.65rem 1rem;
    color: var(--ikuta-color-white);
    background: var(--ikuta-color-purple-deep);
    transform: translateY(-200%);
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .site-header {
    position: relative;
    z-index: 50;
    height: 3.125rem;
    color: var(--ikuta-color-white);
    background: var(--ikuta-color-purple-deep);
  }

  .site-header__utility {
    display: none;
  }

  .site-header__main {
    display: grid;
    grid-template-columns: 80% 20%;
    align-items: center;
    gap: 0;
    width: 100%;
    min-height: 3.125rem;
    padding: 0;
  }

  .site-header__comment {
    display: none;
  }

  .utility-navigation {
    display: flex;
    justify-content: flex-end;
    gap: var(--ikuta-space-3);
    padding: 0;
    list-style: none;
  }

  .utility-navigation a {
    color: var(--ikuta-color-white);
    font-family: var(--ikuta-font-gothic);
    font-size: 0.75rem;
    text-decoration: none;
  }

  .utility-navigation a::before {
    content: "▶";
    margin-inline-end: 0.35em;
    font-size: 0.65em;
  }

  .site-branding {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    color: var(--ikuta-color-white);
    text-decoration: none;
  }

  .site-branding__vertical {
    display: none;
  }

  .site-branding__scrolled {
    display: none;
  }

  .site-branding__compact {
    display: block;
  }

  .site-branding__compact img {
    width: auto;
    height: 3.125rem;
  }

  .nav-toggle {
    display: grid;
    justify-items: end;
    align-content: center;
    width: 100%;
    min-width: 0;
    min-height: 3.125rem;
    padding: 0 0.75rem;
    color: var(--ikuta-color-white);
    background: var(--ikuta-color-purple-deep);
    border: 0;
  }

  .nav-toggle__icon,
  .nav-toggle__icon::before,
  .nav-toggle__icon::after {
    display: block;
    width: 1.5rem;
    height: 2px;
    background: currentColor;
  }

  .nav-toggle__icon {
    position: relative;
    margin-block-start: 0.5rem;
  }

  .nav-toggle__icon::before,
  .nav-toggle__icon::after {
    position: absolute;
    content: "";
  }

  .nav-toggle__icon::before { transform: translateY(-0.45rem); }
  .nav-toggle__icon::after { transform: translateY(0.45rem); }

  .nav-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .primary-navigation {
    position: absolute;
    inset-block-start: 3.125rem;
    inset-inline: 0;
    z-index: 3;
    grid-column: 1 / -1;
    min-width: 0;
    color: var(--ikuta-color-ink);
    background: var(--ikuta-color-purple-deep);
  }

  .primary-navigation__list {
    display: grid;
    padding: 0;
    list-style: none;
  }

  .primary-navigation__list a {
    display: flex;
    align-items: center;
    padding: 0.5rem var(--ikuta-space-2);
    min-height: 3.125rem;
    color: var(--ikuta-color-white);
    background: var(--ikuta-color-purple-deep);
    border-block-end: 1px solid var(--ikuta-color-white);
    text-decoration: none;
  }

  .primary-navigation__list a:hover,
  .primary-navigation__list a[aria-current="page"] {
    color: var(--ikuta-color-white);
    background: var(--ikuta-color-purple);
  }

  .site-footer {
    color: var(--ikuta-color-ink);
    background: var(--ikuta-color-white);
  }

  .site-footer a { color: #666; }

  .footer-banner-strip {
    padding-inline: 5%;
    background: var(--ikuta-color-white);
  }

  .footer-banner-strip--secondary {
    padding-block-end: 10%;
  }

  .footer-banners {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2%;
  }

  .footer-banners a {
    border: 1px solid rgba(255, 255, 255, 0.28);
    transition: opacity var(--ikuta-motion-duration) var(--ikuta-motion-easing);
  }

  .footer-banners a:hover {
    opacity: 0.78;
  }

  .footer-banners img {
    width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
  }

  .site-footer__body {
    background: url("../images/brand/footer-texture.jpg") repeat-y top center;
    background-size: 100% auto;
  }

  .site-footer__sitemap {
    width: 100%;
  }

  .footer-navigation {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0;
  }

  .footer-navigation__group,
  .footer-navigation {
    list-style: none;
  }

  .footer-navigation__group {
    padding: 0;
  }

  .footer-navigation a {
    display: block;
    width: 100%;
    padding: 0.75rem 3%;
    color: var(--ikuta-color-white);
    font-family: var(--ikuta-font-gothic);
    font-size: var(--ikuta-font-small);
    background: var(--ikuta-color-muted);
    border-block-start: 1px solid var(--ikuta-color-white);
    text-decoration: none;
  }

  .footer-navigation a::before {
    content: "◆";
    margin-inline-end: 0.45em;
    color: var(--ikuta-color-gold);
    font-size: 0.6em;
  }

  .site-footer__copyright {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 5% 0;
    color: var(--ikuta-color-white);
    font-family: "Times New Roman", Times, serif;
    font-size: 0.8rem;
    text-align: center;
    background: linear-gradient(var(--ikuta-color-purple), var(--ikuta-color-purple-deep));
  }

  .entry-card {
    padding-block-end: var(--ikuta-grid-gap);
    border-block-end: var(--ikuta-border-width) solid var(--ikuta-color-border);
  }

  .entry-card__image {
    overflow: hidden;
  }

  .entry-card__image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .entry-title a {
    color: inherit;
  }

  .entry-meta {
    color: var(--ikuta-color-muted);
    font-family: var(--ikuta-font-gothic);
    font-size: var(--ikuta-font-small);
  }

  .entry-content > * + * {
    margin-block-start: var(--ikuta-space-3);
  }

  .entry-content table {
    width: 100%;
    border-collapse: collapse;
  }

  .entry-content th,
  .entry-content td {
    padding: 0.75rem;
    border: 1px solid var(--ikuta-color-border);
  }

  /* Default button: the purple gradient used across the current site.
     .wpcf7-submit is included so Contact Form 7 submit buttons match without extra classes. */
  .c-button,
  .wp-block-button__link,
  .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--c-button-height);
    padding: var(--c-button-padding);
    color: var(--ikuta-color-white);
    font: inherit;
    text-align: center;
    text-decoration: none;
    background: var(--c-button-gradient);
    border: 1px solid var(--c-button-border);
    border-radius: 0;
    box-shadow: var(--c-button-shadow);
    cursor: pointer;
    transition: filter var(--ikuta-motion-duration) var(--ikuta-motion-easing), background-color var(--ikuta-motion-duration) var(--ikuta-motion-easing);
  }

  .c-button:hover,
  .c-button:focus-visible,
  .wp-block-button__link:hover,
  .wp-block-button__link:focus-visible,
  .wpcf7-submit:hover,
  .wpcf7-submit:focus-visible {
    color: var(--ikuta-color-white);
    filter: brightness(1.15);
  }

  /* Visual variation: flat purple instead of the gradient. */
  .c-button--solid {
    background: var(--ikuta-color-purple);
  }

  /* Size variations. */
  .c-button--small {
    min-height: 2.5rem;
    padding: 0.4rem 1rem;
    font-size: var(--ikuta-font-small);
  }

  .c-button--large {
    min-height: 3.5rem;
    padding: 0.9rem 2rem;
    font-size: 1.125rem;
  }

  /* Width variations, for CTAs that should not shrink to their text.
     These switch to block-level flex so the page can centre them with margin auto. */
  .c-button--wide,
  .c-button--full {
    display: flex;
  }

  .c-button--wide {
    width: min(100%, 25rem);
  }

  .c-button--full {
    width: 100%;
  }

  @media (prefers-reduced-motion: reduce) {
    .c-button,
    .wp-block-button__link,
    .wpcf7-submit {
      transition: none;
    }
  }

  /* Form fields. Sized to sit on Contact Form 7 output without extra wrappers. */
  .c-field {
    display: grid;
    gap: 0.5rem;
    margin-block-end: 1.5rem;
  }

  .c-field__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
  }

  .c-field__required {
    padding: 0.1rem 0.5rem;
    color: var(--ikuta-color-white);
    font-size: 0.75rem;
    background: var(--ikuta-color-purple);
    border-radius: 0.125rem;
  }

  .c-field__note {
    color: var(--ikuta-color-muted);
    font-size: var(--ikuta-font-small);
  }

  .c-input,
  .c-select,
  .c-textarea {
    width: 100%;
    padding: var(--c-field-space);
    color: var(--ikuta-color-ink);
    font: inherit;
    background-color: var(--ikuta-color-white);
    border: 1px solid var(--c-field-border);
    border-radius: var(--c-field-radius);
    transition: border-color var(--ikuta-motion-duration) var(--ikuta-motion-easing), box-shadow var(--ikuta-motion-duration) var(--ikuta-motion-easing);
  }

  .c-input,
  .c-select {
    min-height: var(--c-field-height);
  }

  .c-textarea {
    display: block;
    min-height: calc(var(--c-field-height) * 2.5);
    line-height: var(--ikuta-line-body);
    resize: vertical;
  }

  .c-input::placeholder,
  .c-textarea::placeholder {
    color: #a8a29a;
  }

  .c-input:hover,
  .c-select:hover,
  .c-textarea:hover {
    border-color: var(--c-field-border-hover);
  }

  /* Text fields keep the ring on pointer focus too, so the active row is always obvious. */
  .c-input:focus,
  .c-select:focus,
  .c-textarea:focus {
    border-color: var(--c-field-border-active);
    box-shadow: 0 0 0 3px var(--c-field-ring);
    outline: none;
  }

  .c-select {
    padding-inline-end: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23303030' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.75rem auto;
    appearance: none;
  }

  /* Checkboxes and radios. Matches the span > label > input markup Contact Form 7 emits. */
  .c-choice .wpcf7-list-item,
  .c-choice > label {
    display: block;
    margin: 0 0 0.5rem;
  }

  .c-choice .wpcf7-list-item:last-child,
  .c-choice > label:last-child {
    margin-block-end: 0;
  }

  .c-choice label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--ikuta-color-white);
    border: 1px solid var(--c-field-border);
    border-radius: var(--c-field-radius);
    cursor: pointer;
    transition: border-color var(--ikuta-motion-duration) var(--ikuta-motion-easing), background-color var(--ikuta-motion-duration) var(--ikuta-motion-easing);
  }

  .c-choice label:hover {
    border-color: var(--c-field-border-hover);
  }

  .c-choice label:has(:checked) {
    background: var(--c-field-selected);
    border-color: var(--c-field-border-active);
  }

  .c-choice label:has(:focus-visible) {
    box-shadow: 0 0 0 3px var(--c-field-ring);
  }

  .c-choice input[type="checkbox"],
  .c-choice input[type="radio"] {
    display: grid;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    background: var(--ikuta-color-white);
    border: 1px solid var(--c-field-border);
    border-radius: 0.2rem;
    cursor: pointer;
    place-content: center;
    appearance: none;
  }

  .c-choice input[type="radio"] {
    border-radius: 50%;
  }

  .c-choice input[type="checkbox"]::before,
  .c-choice input[type="radio"]::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    background: var(--ikuta-color-white);
    transform: scale(0);
    transition: transform 140ms var(--ikuta-motion-easing);
    clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 38% 65%);
  }

  .c-choice input[type="radio"]::before {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    clip-path: none;
  }

  .c-choice input:checked {
    background: var(--ikuta-color-purple);
    border-color: var(--ikuta-color-purple);
  }

  .c-choice input:checked::before {
    transform: scale(1);
  }

  /* Contact Form 7 validation, scoped to the shared field classes. */
  .c-input.wpcf7-not-valid,
  .c-select.wpcf7-not-valid,
  .c-textarea.wpcf7-not-valid,
  .c-choice .wpcf7-not-valid {
    border-color: #c0392b;
  }

  .c-field .wpcf7-not-valid-tip {
    color: #c0392b;
    font-size: var(--ikuta-font-small);
  }

  @media (width >= 60rem) {
    .site-header {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      z-index: 30000;
      width: 100%;
      height: 6rem;
      color: var(--ikuta-color-ink);
      background: var(--ikuta-color-white);
      border-block-end: 4px solid #d5d5d5;
      box-shadow: 0 1px 1px 1px rgb(0 0 0 / 0.2);
    }

    .site-header__utility {
      display: block;
      min-height: 2rem;
      color: var(--ikuta-color-white);
      background: linear-gradient(var(--ikuta-color-purple-deep), var(--ikuta-color-purple));
      border-block-end: 2px solid #cca93f;
      box-shadow: 0 1px 1px 1px rgb(0 0 0 / 0.2);
    }

    .site-header__utility-inner {
      display: flex;
      align-items: center;
      min-height: 2rem;
      padding-inline-start: 7.5rem;
    }

    .site-header__comment {
      display: block;
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      color: var(--ikuta-color-white);
      font-size: 0.875rem;
      line-height: 2rem;
      letter-spacing: 0.0625rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .utility-navigation {
      flex: 0 0 auto;
      width: 28.75rem;
      gap: 1.25rem;
    }

    .site-header__main {
      grid-template-columns: 7.5rem minmax(0, 1fr);
      gap: 0;
      width: min(calc(100% - (var(--ikuta-gutter) * 2)), var(--ikuta-wide));
      min-height: 4rem;
      padding-block: 0;
    }

    .site-branding {
      position: relative;
      align-self: stretch;
      width: 7.5rem;
    }

    .site-branding__vertical {
      position: absolute;
      z-index: 2;
      inset-block-start: -2rem;
      inset-inline-start: 0;
      display: block;
      width: 7.5rem;
      height: 26.25rem;
      max-width: none;
      opacity: 1;
      transition: opacity 900ms ease;
    }

    .site-branding__scrolled {
      position: absolute;
      z-index: 2;
      inset-block-start: -2rem;
      inset-inline-start: 0;
      display: block;
      width: 7.5rem;
      height: 6rem;
      max-width: none;
      opacity: 0;
      transition: opacity 900ms ease;
    }

    .site-header.is-scrolled .site-branding__vertical {
      opacity: 0;
      pointer-events: none;
    }

    .site-header.is-scrolled .site-branding__scrolled {
      opacity: 1;
    }

    .site-branding__compact {
      display: none;
    }

    .nav-toggle { display: none; }

    .primary-navigation,
    .primary-navigation[hidden] {
      display: block !important;
      grid-column: auto;
      align-self: stretch;
      position: static;
      background: transparent;
      border-block-start: 0;
    }

    .primary-navigation__list {
      display: flex;
      flex-wrap: nowrap;
      height: 100%;
    }

    .primary-navigation__list > li {
      display: flex;
      flex: 1 1 0;
      min-width: 0;
      border-inline-start: 1px solid var(--ikuta-color-border);
    }

    .primary-navigation__item--mobile-only {
      display: none !important;
    }

    .primary-navigation__list > li:last-child {
      border-inline-end: 1px solid var(--ikuta-color-border);
    }

    .primary-navigation__list a {
      justify-content: center;
      width: 100%;
      min-height: 4rem;
      margin-block: 0;
      padding: 0.5rem 0.35rem;
      color: var(--ikuta-color-ink);
      background: var(--ikuta-color-white);
      border-block-end: 0;
      font-size: clamp(0.75rem, 1vw, 0.875rem);
      text-align: center;
      white-space: nowrap;
    }

    .primary-navigation__list a:hover,
    .primary-navigation__list a[aria-current="page"] {
      color: #606060;
      background: var(--ikuta-color-white);
    }

    .footer-banners {
      grid-template-columns: repeat(4, minmax(0, 15rem));
      gap: 1.25rem;
      width: min(calc(100% - (var(--ikuta-gutter) * 2)), 65rem);
      margin-inline: auto;
    }

    .footer-banner-strip {
      padding: 1.25rem 0;
    }

    .footer-banner-strip--primary {
      background: #efefef;
      border-block-end: 1px solid #ccc;
    }

    .footer-banner-strip--secondary {
      background: var(--ikuta-color-white);
      border-block-end: 1px solid #ccc;
    }

    .site-footer__sitemap {
      width: min(calc(100% - (var(--ikuta-gutter) * 2)), 60rem);
      min-height: 15.875rem;
      padding-block: 1.25rem;
    }

    .footer-navigation {
      grid-template-columns: max-content max-content max-content;
      column-gap: 1.25rem;
      width: 29.375rem;
    }

    .footer-navigation a {
      padding: 0.3125rem;
      color: #666;
      font-size: 0.875rem;
      background: transparent;
      border: 0;
      white-space: nowrap;
    }

    .site-footer__copyright {
      height: 2.5rem;
      padding: 0;
      font-size: 0.625rem;
      line-height: 2.5rem;
    }
  }
}


/* Deliberately outside @layer.

   Core prints its own .wp-block-button__link styles unlayered, and unlayered
   declarations beat layered ones no matter how specific the layered rule is.
   Without this, core buttons inside articles came out as pill-shaped, borderless
   and shadowless while every other button on the site stayed square. */
.wp-block-button > .wp-block-button__link {
  padding: var(--c-button-padding);
  border: 1px solid var(--c-button-border);
  border-radius: 0;
  box-shadow: var(--c-button-shadow);
}