/* Local comparison only; original logo styles remain unchanged.
   Rollback: snapshots/header-logo-trial-2026-09-10/restore.md */
html.header-logo-trial {
  --trial-header-height: 96px;
  --trial-logo-width: 124px;
}

.header-logo-trial .site-header {
  height: var(--trial-header-height);
  padding-block: 12px;
  gap: 18px;
}

.header-logo-trial .site-header > .brand {
  flex: 0 1 var(--trial-logo-width);
  width: var(--trial-logo-width);
  min-width: 0;
}

.header-logo-trial .header-trial-window {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1766 / 995;
  overflow: hidden;
}

/* Source: 2048 x 1365; all nontransparent pixels lie inside
   (151,193)-(1893,1132). The original window was
   (139,181)-(1905,1144); extend its bottom to 1176 for the kana line.
   The window trims outer transparency; the PNG is unmodified.
   Separate clips keep the optional labels out of the base layers and let the
   CAVARIO line align with the camera without redrawing the image. */
.header-logo-trial .header-trial-image,
.header-logo-trial .header-trial-wordmark {
  display: block;
  position: absolute;
  width: 115.96829%;
  max-width: none;
  height: auto;
  left: -7.870895%;
  top: -18.190955%;
}

.header-logo-trial .header-trial-image {
  /* Original camera outline and Japanese heading: source y = 0..700. */
  clip-path: inset(0 0 48.717949% 0);
}

.header-logo-trial .header-trial-wordmark {
  /* CAVARIO only: source x = 0..1600, y = 700..1000.
     Its original center is x=866; the camera center is x=987.5.
     Shift by 121.5 / 2048 of the image width, retaining the same scale. */
  clip-path: inset(51.282051% 21.875% 26.739927% 0);
  transform: translateX(5.932617%);
}

.header-logo-trial .header-trial-kana {
  /* Reuse the original kana glyphs without modifying the PNG.
     Scale their 52px source height to the purchase label's 118px.
     Center at source x=987.5 and place below CAVARIO at y=1046.
     The 92px gap matches the purchase label-to-CAVARIO gap;
     the extended window keeps the kana fully visible. */
  display: block;
  position: absolute;
  width: 263.158812%;
  max-width: none;
  height: auto;
  left: -178.105671%;
  top: -103.954387%;
  clip-path: inset(59.560440% 6.494141% 33.040293% 78.369141%);
}

.header-logo-trial .site-header > .menu-button,
.header-logo-trial .site-header > nav {
  flex-shrink: 0;
}

/* Reserve only the space required by the absolute/fixed header. */
.header-logo-trial .hero {
  padding-top: var(--trial-header-height);
}

@media (max-width: 900px) {
  html.header-logo-trial {
    --trial-header-height: 92px;
    --trial-logo-width: 118px;
  }

  .header-logo-trial .site-header nav {
    inset: var(--trial-header-height) 0 auto;
    max-height: calc(100dvh - var(--trial-header-height));
    overflow-y: auto;
  }
}

@media (max-width: 600px) {
  html.header-logo-trial {
    scroll-padding-top: var(--trial-header-height);
  }
}

/* Temporary balance comparison, 2026-09-10; not an adopted logo.
   Restore the preceding camera/purchase/CAVARIO/kana layout by removing only
   "header-trial-window--balanced" from index.html. The original rules above,
   kana layer, PNG, header dimensions and link are deliberately preserved.
   This extra purchase layer remains hidden whenever the comparison is off. */
.header-logo-trial .header-trial-purchase {
  display: none;
}

.header-logo-trial .header-trial-window--balanced {
  /* A shorter, vertically centered lockup gives more air above and below
     without changing the header height or the logo's outer width. */
  aspect-ratio: 1766 / 736;
}

.header-logo-trial .header-trial-window--balanced .header-trial-image {
  /* Camera alone at 87.5%; center its visible source bounds on the lockup. */
  width: 101.472254%;
  left: 1.072339%;
  top: -20.771060%;
  clip-path: inset(0 0 63.369963% 0);
}

.header-logo-trial .header-trial-window--balanced .header-trial-purchase {
  /* Original purchase glyphs at 92%; tighten the camera-to-label gap. */
  display: block;
  position: absolute;
  width: 106.690827%;
  max-width: none;
  height: auto;
  left: -1.678369%;
  top: -27.260870%;
  clip-path: inset(36.630037% 0 48.717949% 0);
}

.header-logo-trial .header-trial-window--balanced .header-trial-wordmark {
  /* CAVARIO at 108%, centered independently; keep the original glyphs. */
  width: 125.245753%;
  left: -2.960362%;
  top: -42.538043%;
  transform: none;
}

.header-logo-trial .header-trial-window--balanced .header-trial-kana {
  display: none;
}

/* Local label comparison: replace the purchase label with the original kana
   glyphs, keeping the camera, CAVARIO, scale and header geometry unchanged.
   Remove "header-trial-window--kana-above" to restore the preceding layout;
   restore the corresponding logo alt/aria-label in index.html as well. */
.header-logo-trial .header-trial-window--kana-above .header-trial-image {
  clip-path: inset(0 0 63.369963% 0);
}

.header-logo-trial .header-trial-window--kana-above .header-trial-kana {
  /* Move the existing kana layer from source y=1046 to y=542, the former
     purchase label position. Reusing this single layer avoids a lower copy. */
  top: -154.607653%;
}

/* Supplied logo-master-small-2.png, local comparison only.
   Both PNG files are untouched. Remove header-trial-window--master to restore
   the preceding layered logo (and restore the previous link aria-label).
   The SVG filter uses #b28a67, the previous PNG's dominant opaque color,
   preserving the new image's alpha without shadows, outlines or redrawing. */
.header-logo-trial .header-logo-color-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.header-logo-trial .header-master-image {
  display: none;
}

.header-logo-trial .header-trial-window--master {
  /* Visible bounds: (394,309)-(2606,1807). The larger display window
     (380,295)-(2620,1821) trims transparency only, retaining a safe margin.
     Fit inside the existing header with 12px breathing room above/below. */
  width: calc((var(--trial-header-height) - 24px) * 1.46789);
  max-width: 100%;
  aspect-ratio: 2240 / 1526;
  margin-inline: auto;
}

.header-logo-trial .header-trial-window--master > img:not(.header-master-image) {
  display: none;
}

.header-logo-trial .header-trial-window--master > .header-master-image {
  display: block;
  position: absolute;
  width: 133.928571%;
  max-width: none;
  height: auto;
  left: -16.964286%;
  top: -19.331586%;
  filter: url("#header-logo-brass");
}