:root {
        --ink: #1b1715;
        --muted: #746b66;
        --paper: #fbf8f3;
        --cream: #f2ebe2;
        --accent: #7d1f32;
        --accent-dark: #4b101d;
        --accent-rgb: 125, 31, 50;
        --line: rgba(27, 23, 21, 0.14);
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        color: var(--ink);
        background: var(--paper);
        font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
      }
      button, input { font: inherit; }
      a { color: inherit; }
      .topbar {
        min-height: 40px;
        display: grid;
        place-items: center;
        padding: 8px 20px;
        color: #fff;
        background: var(--accent-dark);
        font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        font-size: 12px;
        letter-spacing: .12em;
        text-align: center;
        transition: background .35s ease;
      }
      header {
        height: 76px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 clamp(22px, 6vw, 84px);
        border-bottom: 1px solid var(--line);
        background: rgba(251,248,243,.93);
        position: sticky;
        top: 0;
        z-index: 20;
        backdrop-filter: blur(14px);
      }
      .logo {
        font-family: Georgia, serif;
        font-size: 27px;
        letter-spacing: .28em;
        text-decoration: none;
      }
      nav {
        display: flex;
        gap: 30px;
        font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        font-size: 13px;
      }
      nav a { text-decoration: none; }
      .hero {
        min-height: 570px;
        display: grid;
        grid-template-columns: 1.04fr .96fr;
        overflow: hidden;
      }
      .hero-copy {
        padding: clamp(70px, 9vw, 130px) clamp(28px, 8vw, 120px);
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .eyebrow {
        margin: 0 0 22px;
        color: var(--accent);
        font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .24em;
        text-transform: uppercase;
        transition: color .35s ease;
      }
      h1 {
        margin: 0;
        font-size: clamp(42px, 6vw, 80px);
        line-height: 1.14;
        font-weight: 500;
        letter-spacing: .04em;
      }
      .lead {
        max-width: 540px;
        margin: 32px 0 0;
        color: var(--muted);
        font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        line-height: 2;
        font-size: 15px;
      }
      .hero-art {
        position: relative;
        min-height: 520px;
        overflow: hidden;
        background:
          radial-gradient(circle at 50% 48%, rgba(var(--accent-rgb),.96) 0 11%, rgba(var(--accent-rgb),.75) 27%, var(--accent-dark) 61%, #150e0f 82%);
        transition: background .5s ease;
      }
      .hero-art::before,
      .hero-art::after {
        content: "";
        position: absolute;
        inset: 16%;
        border: 1px solid rgba(255,255,255,.18);
        transform: rotate(45deg);
      }
      .hero-art::after {
        inset: 29%;
        border-color: rgba(255,255,255,.32);
      }
      .spectrum {
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(72%, 440px);
        aspect-ratio: 1;
        translate: -50% -50%;
        border-radius: 50%;
        animation: turn 40s linear infinite;
      }
      .spectrum i {
        --n: 14;
        position: absolute;
        left: calc(50% - 12px);
        top: -12px;
        width: 24px;
        height: 24px;
        border: 1px solid rgba(255,255,255,.7);
        border-radius: 50%;
        background: var(--dot);
        box-shadow: 0 3px 14px rgba(0,0,0,.28), inset 5px 5px 8px rgba(255,255,255,.35);
        transform-origin: 12px calc(50% + min(36vw, 220px));
        transform: rotate(calc(var(--i) * 25.714deg));
      }
      .hero-art span {
        position: absolute;
        left: 50%;
        bottom: 44px;
        translate: -50% 0;
        color: rgba(255,255,255,.82);
        font-family: Georgia, serif;
        letter-spacing: .28em;
        font-size: 11px;
        white-space: nowrap;
      }
      @keyframes turn { to { rotate: 360deg; } }
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .spectrum { animation: none; }
      }
      main { padding: 0 clamp(20px, 6vw, 84px) 110px; }
      .intro {
        max-width: 760px;
        margin: 96px auto 54px;
        text-align: center;
      }
      .intro h2 {
        margin: 0 0 20px;
        font-size: clamp(30px, 4vw, 48px);
        font-weight: 500;
      }
      .intro p {
        margin: 0;
        color: var(--muted);
        font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        line-height: 2;
      }
      .controls {
        max-width: 1280px;
        margin: 0 auto 42px;
      }
      .method-tabs {
        width: min(720px, 100%);
        margin: 0 auto 28px;
        padding: 5px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(255,255,255,.6);
      }
      .method-tab {
        padding: 12px 16px;
        border: 0;
        border-radius: 999px;
        color: var(--muted);
        background: transparent;
        cursor: pointer;
        font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        font-size: 13px;
        transition: .2s ease;
      }
      .method-tab.active {
        color: #fff;
        background: var(--accent);
      }
      .filter-options {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 9px;
      }
      .chip {
        min-width: 74px;
        padding: 10px 16px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        transition: .2s ease;
      }
      .chip:hover { border-color: var(--accent); color: var(--accent); }
      .chip.active {
        color: #fff;
        border-color: var(--accent);
        background: var(--accent);
      }
      .chip small {
        display: block;
        margin-top: 4px;
        font: 9px/1.3 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        letter-spacing: .08em;
        opacity: .72;
      }
      .chip em {
        display: block;
        margin-top: 8px;
        font: 700 9px/1 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        letter-spacing: .1em;
        opacity: .62;
      }
      .filter-options.month-mode .chip {
        min-width: 94px;
        border-radius: 10px;
      }
      .filter-options.oshi-mode {
        max-width: 1080px;
        margin-inline: auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .filter-options.oshi-mode .chip {
        min-width: 0;
        min-height: 112px;
        padding: 18px;
        border-radius: 10px;
        text-align: left;
      }
      .filter-options.oshi-mode .chip span {
        font-size: 14px;
        font-weight: 700;
      }
      .filter-options.oshi-mode .chip small {
        min-height: 2.8em;
        margin-top: 8px;
        font-size: 10px;
        line-height: 1.55;
        letter-spacing: 0;
      }
      .collection-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 22px;
        max-width: 1280px;
        margin: 0 auto 20px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--line);
      }
      .collection-meta h2 { margin: 0; font-size: 23px; font-weight: 500; }
      .count {
        color: var(--muted);
        font: 12px/1.6 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        letter-spacing: .08em;
      }
      .grid {
        max-width: 1280px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 18px;
      }
      .card {
        min-width: 0;
        padding: 0;
        border: 1px solid var(--line);
        color: var(--ink);
        background: #fff;
        text-align: left;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: transform .25s ease, box-shadow .25s ease;
      }
      .card:hover, .card:focus-visible {
        transform: translateY(-6px);
        box-shadow: 0 22px 48px rgba(var(--accent-rgb),.14);
        outline: none;
      }
      .photo {
        position: relative;
        display: block;
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        background: #f3efe9;
        isolation: isolate;
      }
      .photo img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: 50% 49%;
        transform: scale(var(--gem-scale, 2.35));
        transform-origin: 50% 49%;
        mix-blend-mode: darken;
        filter: saturate(.94) contrast(.97) brightness(1.01) blur(.12px);
        transition: transform .4s ease;
      }
      .photo::after,
      .modal-case-frame::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background-image:
          radial-gradient(circle, rgba(56,44,38,.18) 0 .35px, transparent .55px),
          radial-gradient(circle, rgba(255,255,255,.26) 0 .4px, transparent .6px);
        background-position: 0 0, 1px 2px;
        background-size: 3px 3px, 5px 5px;
        mix-blend-mode: soft-light;
        opacity: .15;
      }
      .card:hover img { transform: scale(var(--gem-hover-scale, 2.44)); }
      .card-body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%;
        padding: 22px 20px 24px;
      }
      .code {
        display: block;
        color: var(--accent);
        font: 700 10px/1 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        letter-spacing: .18em;
        text-transform: uppercase;
      }
      .card h3 {
        min-height: 3em;
        margin: 13px 0 10px;
        font-size: 17px;
        line-height: 1.5;
        font-weight: 500;
        overflow-wrap: anywhere;
      }
      .meaning {
        display: block;
        color: var(--muted);
        font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        font-size: 13px;
      }
      .price {
        display: block;
        margin-top: auto;
        padding-top: 22px;
        font-family: Georgia, "Yu Mincho", serif;
        font-size: 16px;
      }
      .note {
        max-width: 950px;
        margin: 76px auto 0;
        padding: 28px 34px;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        color: var(--muted);
        font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        font-size: 13px;
        line-height: 1.9;
        text-align: center;
      }
      footer {
        padding: 42px 24px;
        text-align: center;
        border-top: 1px solid var(--line);
        color: var(--muted);
        font: 12px/1.7 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
      }
      dialog {
        width: min(900px, calc(100% - 32px));
        max-height: calc(100vh - 32px);
        padding: 0;
        border: 0;
        color: var(--ink);
        background: #fff;
        box-shadow: 0 30px 100px rgba(0,0,0,.32);
      }
      dialog::backdrop { background: rgba(25,10,13,.72); backdrop-filter: blur(5px); }
      .modal-grid { display: grid; grid-template-columns: 1fr 1fr; }
      .modal-photo {
        position: relative;
        min-height: 520px;
        overflow: hidden;
        display: grid;
        place-items: center;
        background: #f3efe9;
        isolation: isolate;
      }
      .modal-case-frame {
        position: relative;
        width: 100%;
        max-width: 520px;
        aspect-ratio: 1 / 1.08;
        overflow: hidden;
        background:
          linear-gradient(145deg, rgba(255,255,255,.6), rgba(228,218,206,.45)),
          #ebe4da;
      }
      .modal-case-frame img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: 50% 49%;
        transform: scale(var(--modal-gem-scale, 2.35));
        transform-origin: 50% 49%;
        mix-blend-mode: darken;
        filter: saturate(.94) contrast(1.01) brightness(1.01);
      }
      .modal-copy {
        position: relative;
        padding: 56px 48px 46px;
        align-self: center;
      }
      .modal-copy h2 { margin: 16px 0 22px; font-size: 34px; font-weight: 500; }
      .modal-copy dl { margin: 0; }
      .modal-copy dl div {
        display: grid;
        grid-template-columns: 90px 1fr;
        gap: 18px;
        padding: 13px 0;
        border-bottom: 1px solid var(--line);
      }
      .modal-copy dt {
        color: var(--muted);
        font: 12px/1.7 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
      }
      .modal-copy dd { margin: 0; line-height: 1.7; }
      .detail-link {
        display: block;
        margin-top: 24px;
        padding: 14px 18px;
        color: #fff;
        background: var(--accent);
        text-align: center;
        text-decoration: none;
        font: 12px/1.5 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        letter-spacing: .06em;
      }
      .close {
        position: absolute;
        right: 16px;
        top: 14px;
        z-index: 2;
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 50%;
        background: rgba(255,255,255,.92);
        font-size: 22px;
        cursor: pointer;
      }
      @media (max-width: 1080px) {
        .grid { grid-template-columns: repeat(3, 1fr); }
        .spectrum i { transform-origin: 12px calc(50% + min(34vw, 190px)); }
      }
      @media (max-width: 760px) {
        nav { display: none; }
        .hero { grid-template-columns: 1fr; }
        .hero-copy { min-height: 420px; }
        .hero-art { min-height: 380px; }
        .spectrum { width: 68%; }
        .spectrum i { transform-origin: 12px calc(50% + min(32vw, 145px)); }
        main { padding-inline: 14px; }
        .intro { margin-top: 72px; }
        .method-tabs {
          width: 100%;
          border-radius: 14px;
        }
        .method-tab {
          padding: 10px 6px;
          border-radius: 10px;
          font-size: 11px;
          line-height: 1.45;
        }
        .filter-options {
          justify-content: flex-start;
          flex-wrap: nowrap;
          overflow-x: auto;
          padding: 2px 1px 12px;
        }
        .filter-options.oshi-mode {
          max-width: none;
          display: flex;
        }
        .filter-options.oshi-mode .chip {
          flex: 0 0 244px;
        }
        .chip { flex: 0 0 auto; }
        .grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
        .card-body { min-height: 168px; padding: 17px 13px 20px; }
        .card h3 { min-height: 3.3em; margin-bottom: 12px; font-size: 14px; line-height: 1.65; }
        .meaning { font-size: 12px; }
        .price { font-size: 14px; }
        .modal-grid { grid-template-columns: 1fr; }
        .modal-photo { min-height: 0; height: 42vh; }
        .modal-case-frame {
          width: auto;
          max-width: none;
          height: 100%;
        }
        .modal-case-frame img { transform: scale(var(--modal-gem-scale-mobile, 2.35)); }
        .modal-copy { padding: 34px 24px; }
        .modal-copy h2 { font-size: 28px; }
      }

      /* AXB editorial refinement */
      :root {
        --ink: #241f1b;
        --muted: #756d66;
        --paper: #f8f5ef;
        --cream: #eee8df;
        --accent: #6f2131;
        --accent-dark: #32151c;
        --accent-rgb: 111, 33, 49;
        --line: rgba(36, 31, 27, .16);
      }
      body { background: var(--paper); }
      .topbar { display: none; }
      header {
        height: 70px;
        max-width: 1440px;
        margin: 0 auto;
        padding-inline: clamp(22px, 5vw, 72px);
        background: rgba(248, 245, 239, .94);
        border-color: rgba(36, 31, 27, .1);
      }
      .logo {
        font-size: 24px;
        letter-spacing: .34em;
      }
      nav {
        gap: 36px;
        font-size: 12px;
        letter-spacing: .08em;
      }
      nav a {
        padding-block: 8px;
        border-bottom: 1px solid transparent;
      }
      nav a:hover { border-bottom-color: var(--ink); }
      .hero {
        width: min(1440px, 100%);
        min-height: 650px;
        margin: 0 auto;
        grid-template-columns: minmax(0, .86fr) minmax(520px, 1.14fr);
        border-bottom: 1px solid var(--line);
      }
      .hero-copy {
        position: relative;
        padding: clamp(84px, 10vw, 148px) clamp(32px, 7vw, 104px);
        align-items: flex-start;
      }
      .hero-copy::after {
        content: "";
        width: 58px;
        height: 1px;
        margin-top: 44px;
        background: var(--accent);
      }
      .eyebrow {
        margin-bottom: 25px;
        color: var(--accent);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .28em;
      }
      h1 {
        font-size: clamp(45px, 5.4vw, 74px);
        line-height: 1.28;
        letter-spacing: .06em;
      }
      .lead {
        max-width: 470px;
        margin-top: 34px;
        font-size: 14px;
        line-height: 2.15;
      }
      .hero-art {
        min-height: 650px;
        padding: clamp(30px, 4.2vw, 60px);
        display: grid;
        grid-template-columns: 1.12fr .72fr;
        grid-template-rows: 1fr 1fr;
        gap: 13px;
        background: #e9e2d8;
      }
      .hero-art::before,
      .hero-art::after { content: none; }
      .hero-frame {
        position: relative;
        min-height: 0;
        overflow: hidden;
        background: #f3efe9;
      }
      .hero-frame:first-child { grid-row: 1 / 3; }
      .hero-frame img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: 50% 49%;
        transform: scale(var(--hero-scale, 2.18));
        transform-origin: 50% 49%;
        mix-blend-mode: darken;
        filter: saturate(.94) contrast(.97) brightness(1.01) blur(.12px);
      }
      .hero-frame span {
        position: absolute;
        left: 18px;
        bottom: 15px;
        z-index: 2;
        color: rgba(36,31,27,.62);
        font: 9px/1.4 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        letter-spacing: .18em;
      }
      main { padding: 0 clamp(20px, 5vw, 72px) 120px; }
      .intro {
        max-width: 1280px;
        margin: 108px auto 58px;
        display: grid;
        grid-template-columns: minmax(280px, .72fr) minmax(380px, 1fr);
        column-gap: clamp(50px, 9vw, 140px);
        align-items: end;
        text-align: left;
      }
      .intro .eyebrow {
        grid-column: 1;
        margin-bottom: 18px;
      }
      .intro h2 {
        grid-column: 1;
        margin: 0;
        font-size: clamp(29px, 3.4vw, 43px);
        line-height: 1.45;
      }
      .intro p {
        grid-column: 2;
        grid-row: 1 / 3;
        max-width: 560px;
        padding-left: 32px;
        border-left: 1px solid var(--line);
        font-size: 13px;
        line-height: 2.15;
      }
      .controls {
        max-width: 1280px;
        margin-bottom: 56px;
        padding: 0;
        border-top: 1px solid var(--line);
      }
      .method-tabs {
        width: 100%;
        margin: 0 0 34px;
        padding: 0;
        display: flex;
        justify-content: flex-start;
        gap: 38px;
        border: 0;
        border-radius: 0;
        background: transparent;
      }
      .method-tab {
        position: relative;
        padding: 22px 0 15px;
        border-radius: 0;
        color: var(--muted);
        background: transparent;
        font-size: 12px;
        letter-spacing: .06em;
      }
      .method-tab::after {
        content: "";
        position: absolute;
        left: 0;
        right: 100%;
        bottom: -1px;
        height: 2px;
        background: var(--accent);
        transition: right .25s ease;
      }
      .method-tab:hover { color: var(--ink); }
      .method-tab.active {
        color: var(--ink);
        background: transparent;
      }
      .method-tab.active::after { right: 0; }
      .filter-options {
        justify-content: flex-start;
        gap: 8px;
      }
      .chip {
        min-width: 0;
        padding: 9px 14px;
        border-color: rgba(36, 31, 27, .13);
        border-radius: 2px;
        background: rgba(255,255,255,.28);
        color: #625b55;
        font: 12px/1.5 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
      }
      .chip:hover {
        border-color: rgba(111,33,49,.55);
        color: var(--accent);
      }
      .chip.active {
        color: var(--accent);
        border-color: var(--accent);
        background: rgba(111,33,49,.045);
      }
      .filter-options.month-mode .chip { border-radius: 2px; }
      .filter-options.oshi-mode {
        max-width: none;
        margin-inline: 0;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
      }
      .filter-options.oshi-mode .chip {
        min-height: 122px;
        padding: 18px 17px;
        border-radius: 2px;
      }
      .filter-options.oshi-mode .chip span {
        font-size: 13px;
        font-weight: 600;
      }
      .filter-options.oshi-mode .chip small {
        margin-top: 9px;
        font-size: 10px;
        line-height: 1.65;
      }
      .collection-meta {
        margin-bottom: 25px;
        padding-bottom: 16px;
      }
      .collection-meta h2 {
        font-size: 22px;
        letter-spacing: .04em;
      }
      .count {
        font-size: 10px;
        letter-spacing: .15em;
      }
      .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 42px 18px;
      }
      .card {
        border: 0;
        background: transparent;
        overflow: visible;
      }
      .card:hover,
      .card:focus-visible {
        transform: none;
        box-shadow: none;
      }
      .card:focus-visible { outline: 1px solid var(--accent); outline-offset: 5px; }
      .photo { aspect-ratio: 1 / 1.12; }
      .card:hover img { transform: scale(var(--gem-hover-scale, 2.41)); }
      .card-body {
        min-height: 174px;
        padding: 18px 2px 0;
        border-top: 1px solid rgba(36,31,27,.08);
      }
      .code {
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .16em;
      }
      .card h3 {
        min-height: 0;
        margin: 11px 0 7px;
        font-size: 16px;
        line-height: 1.6;
      }
      .meaning { font-size: 12px; }
      .price {
        padding-top: 16px;
        font-size: 14px;
      }
      .note {
        max-width: 1280px;
        margin-top: 90px;
        padding: 25px 0;
        text-align: left;
        font-size: 11px;
      }
      footer {
        padding: 50px 24px;
        background: #eee8df;
        border-top: 0;
        font-size: 11px;
        line-height: 2;
      }
      .catalog-socials {
        margin: 14px 0 8px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
      }
      .catalog-socials a {
        color: inherit;
        text-decoration: none;
      }
      .catalog-socials a:hover,
      .catalog-socials a:focus-visible { text-decoration: underline; }
      dialog {
        width: min(980px, calc(100% - 40px));
        background: var(--paper);
        box-shadow: 0 26px 80px rgba(26,18,17,.27);
      }
      dialog::backdrop {
        background: rgba(31,24,22,.68);
        backdrop-filter: blur(2px);
      }
      .modal-photo { background: #f3efe9; }
      .modal-copy { padding: 50px 52px 44px; }
      .modal-copy h2 {
        margin-top: 14px;
        font-size: 31px;
      }
      .modal-copy dl div {
        grid-template-columns: 78px 1fr;
        padding: 11px 0;
      }
      .close {
        right: 17px;
        top: 16px;
        border-radius: 0;
        background: transparent;
        font-family: Arial, sans-serif;
        font-size: 20px;
      }
      @media (max-width: 1080px) {
        .hero { grid-template-columns: .9fr 1.1fr; }
        .grid { grid-template-columns: repeat(3, 1fr); }
        .filter-options.oshi-mode { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      }
      @media (max-width: 760px) {
        header { height: 62px; }
        .hero {
          min-height: 0;
          grid-template-columns: 1fr;
        }
        .hero-copy {
          min-height: 420px;
          padding: 72px 26px 64px;
        }
        h1 { font-size: clamp(40px, 12vw, 54px); }
        .hero-art {
          min-height: 430px;
          padding: 13px;
          grid-template-columns: 1.1fr .8fr;
          gap: 7px;
        }
        .intro {
          margin: 80px auto 48px;
          display: block;
        }
        .intro h2 { margin-bottom: 28px; }
        .intro p {
          padding: 22px 0 0;
          border-left: 0;
          border-top: 1px solid var(--line);
        }
        .method-tabs {
          gap: 22px;
          overflow-x: auto;
          white-space: nowrap;
        }
        .method-tab {
          padding-inline: 0;
          font-size: 11px;
        }
        .filter-options.oshi-mode .chip { flex-basis: 248px; }
        .grid { gap: 32px 10px; }
        .card-body {
          min-height: 154px;
          padding: 14px 1px 0;
        }
        .card h3 {
          min-height: 3.2em;
          margin-top: 9px;
          font-size: 14px;
        }
        .note { margin-top: 70px; }
      }

      /* AXB Stone Edit — the catalog continues the homepage editorial direction */
      body {
        background:
          linear-gradient(rgba(245,249,250,.42), rgba(249,244,248,.44)),
          url("../brand/rainbow-background.webp") center / cover fixed;
      }
      header {
        height: 82px;
        max-width: none;
        padding-inline: clamp(24px, 5.5vw, 88px);
        background: rgba(247,243,236,.95);
      }
      .logo {
        width: clamp(100px, 9vw, 138px);
        height: 47px;
        display: flex;
        align-items: center;
      }
      .logo img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
      }
      nav {
        gap: clamp(22px, 3vw, 46px);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
      }
      .hero {
        width: 100%;
        max-width: none;
        min-height: min(720px, calc(100vh - 82px));
        grid-template-columns: minmax(380px, .72fr) minmax(560px, 1.28fr);
        color: #f9f4ec;
        background: #2e0b13;
        border: 0;
      }
      .hero-copy {
        min-height: 640px;
        padding: clamp(88px, 10vw, 150px) clamp(38px, 7vw, 112px);
        background:
          linear-gradient(145deg, rgba(125,31,50,.32), transparent 56%),
          #2e0b13;
      }
      .hero-copy::after {
        width: 86px;
        margin-top: 48px;
        background: rgba(255,255,255,.4);
      }
      .hero .eyebrow {
        color: #d7aa9b;
        letter-spacing: .34em;
      }
      .hero h1 {
        max-width: 560px;
        font-size: clamp(38px, 4vw, 62px);
        line-height: 1.22;
        letter-spacing: .04em;
      }
      .hero-title-line { display: block; white-space: nowrap; }
      .hero .lead {
        max-width: 510px;
        color: rgba(255,250,243,.72);
        font-size: 13px;
        line-height: 2.25;
      }
      .hero-art {
        position: relative;
        min-height: 640px;
        padding: 0;
        display: block;
        overflow: hidden;
        background: #310c14;
      }
      .hero-editorial-image {
        width: 100%;
        height: 100%;
        min-height: min(720px, calc(100vh - 82px));
        display: block;
        object-fit: cover;
        object-position: center;
        filter: saturate(.9) contrast(1.04);
      }
      .hero-art::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        background:
          linear-gradient(90deg, rgba(46,11,19,.36), transparent 32%),
          linear-gradient(0deg, rgba(25,4,9,.54), transparent 32%);
        pointer-events: none;
      }
      .hero-edition {
        position: absolute;
        top: 38px;
        right: 42px;
        z-index: 2;
        width: 114px;
        aspect-ratio: 1;
        display: grid;
        place-content: center;
        border: 1px solid rgba(255,255,255,.45);
        border-radius: 50%;
        color: #fff;
        text-align: center;
      }
      .hero-edition strong {
        font: 400 38px/.9 Georgia, serif;
      }
      .hero-edition span {
        margin-top: 8px;
        font: 700 8px/1.2 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        letter-spacing: .22em;
        text-transform: uppercase;
      }
      .hero-caption {
        position: absolute;
        right: 42px;
        bottom: 35px;
        z-index: 2;
        margin: 0;
        color: rgba(255,255,255,.72);
        font: 700 9px/1.6 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        letter-spacing: .22em;
        text-align: right;
        text-transform: uppercase;
      }
      main {
        padding: 0 clamp(22px, 5.5vw, 88px) 138px;
        background: rgba(252,252,253,.28);
        box-shadow: none;
        backdrop-filter: blur(5px);
      }
      .intro {
        margin: 0 auto;
        min-height: 440px;
        padding: 106px 0 86px;
        grid-template-columns: minmax(280px, .68fr) minmax(420px, 1fr);
        align-items: center;
        border-bottom: 1px solid var(--line);
      }
      .intro .eyebrow {
        color: var(--accent);
      }
      .intro h2 {
        font-size: clamp(34px, 3.7vw, 50px);
        line-height: 1.48;
      }
      .intro p {
        max-width: 610px;
        padding: 12px 0 12px clamp(34px, 5vw, 74px);
        font-size: 13px;
        line-height: 2.35;
      }
      .controls {
        margin: 0 auto 86px;
        padding-top: 54px;
        border-top: 0;
      }
      .controls::before {
        content: "FIND YOUR STONE";
        display: block;
        margin-bottom: 25px;
        color: var(--accent);
        font: 700 9px/1 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        letter-spacing: .32em;
      }
      .method-tabs {
        margin-bottom: 32px;
        gap: clamp(28px, 5vw, 72px);
        border-bottom: 1px solid var(--line);
      }
      .method-tab {
        padding: 0 0 19px;
        color: #7a7169;
        font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
        font-size: 17px;
        letter-spacing: .04em;
      }
      .method-tab b {
        margin-right: 12px;
        color: rgba(36,31,27,.45);
        font: 400 9px/1 Georgia, serif;
        letter-spacing: .12em;
      }
      .method-tab.active {
        color: var(--accent);
      }
      .method-tab.active b {
        color: var(--accent);
      }
      .filter-options {
        gap: 7px;
      }
      .chip {
        padding: 10px 17px;
        border: 1px solid rgba(36,31,27,.17);
        background: rgba(255,255,255,.32);
        font-size: 11px;
      }
      .chip:hover,
      .chip.active {
        color: #fff;
        border-color: var(--accent);
        background: var(--accent);
      }
      .filter-options.oshi-mode {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .filter-options.oshi-mode .chip {
        min-height: 128px;
        padding: 22px 20px;
        border-color: rgba(36,31,27,.13);
        background: rgba(255,255,255,.26);
      }
      .filter-options.oshi-mode .chip:hover,
      .filter-options.oshi-mode .chip.active {
        color: #fff;
        border-color: var(--accent);
        background: var(--accent);
      }
      .collection-meta {
        margin-bottom: 34px;
        padding: 24px 0 20px;
        border-top: 1px solid var(--ink);
        border-bottom-color: rgba(36,31,27,.12);
      }
      .collection-meta h2 {
        font-size: clamp(24px, 2.4vw, 34px);
      }
      .collection-meta .count {
        color: var(--accent);
        font-size: 9px;
      }
      .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 70px clamp(18px, 2.2vw, 34px);
      }
      .card {
        position: relative;
      }
      .photo {
        aspect-ratio: 1 / 1.08;
        background:
          linear-gradient(145deg, rgba(255,255,255,.6), rgba(228,218,206,.45)),
          #ebe4da;
      }
      .photo::before,
      .modal-case-frame::before {
        content: "";
        position: absolute;
        inset: 18px;
        z-index: 2;
        border: 1px solid rgba(255,255,255,.5);
        pointer-events: none;
      }
      .photo img {
        filter: saturate(.94) contrast(1.01) brightness(1.01);
        transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .4s ease;
      }
      .card:hover img {
        filter: saturate(1.02) contrast(1.04);
      }
      .card-number {
        position: absolute;
        left: 18px;
        top: 16px;
        z-index: 3;
        color: rgba(36,31,27,.55);
        font: 400 10px/1 Georgia, serif;
        letter-spacing: .12em;
      }
      .card-body {
        position: relative;
        min-height: 188px;
        padding: 20px 0 0;
        border: 0;
      }
      .code {
        color: var(--accent);
      }
      .card h3 {
        margin-top: 13px;
        font-size: 18px;
      }
      .meaning {
        font-size: 11px;
        letter-spacing: .03em;
      }
      .price {
        padding-top: 20px;
        font-size: 13px;
      }
      .card-open {
        position: absolute;
        right: 0;
        bottom: 2px;
        color: rgba(36,31,27,.48);
        font: 700 8px/1 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        letter-spacing: .16em;
        transition: color .2s ease;
      }
      .card:hover .card-open {
        color: var(--accent);
      }
      .note {
        margin-top: 120px;
        padding: 30px 0;
      }
      .pair-story {
        position: relative;
        max-width: 1280px;
        margin: 0 auto 104px;
        padding: clamp(34px, 5vw, 68px);
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.72);
        background:
          radial-gradient(circle at 92% 8%, rgba(168,205,239,.28), transparent 34%),
          radial-gradient(circle at 5% 95%, rgba(238,188,219,.24), transparent 35%),
          rgba(255,255,255,.48);
        box-shadow: 0 28px 80px rgba(76,61,92,.1), inset 0 1px 0 rgba(255,255,255,.75);
        backdrop-filter: blur(16px);
      }
      .pair-story::before {
        content: "";
        position: absolute;
        inset: 14px;
        border: 1px solid rgba(125,31,50,.12);
        pointer-events: none;
      }
      .pair-story-head {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: .75fr 1.25fr;
        align-items: end;
        gap: clamp(28px, 6vw, 90px);
        margin-bottom: 42px;
      }
      .pair-story-head h2 {
        margin: 0;
        font-size: clamp(30px, 3.7vw, 48px);
        font-weight: 500;
        line-height: 1.45;
      }
      .pair-story-head p:last-child {
        margin: 0;
        padding-left: clamp(24px, 4vw, 58px);
        border-left: 1px solid var(--line);
        color: var(--muted);
        font: 13px/2.15 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
      }
      .pair-selector {
        position: relative;
        z-index: 1;
      }
      .pair-slots {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 18px;
      }
      .pair-slot {
        min-height: 124px;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 20px;
        padding: 23px 25px;
        border: 1px dashed rgba(36,31,27,.24);
        background: rgba(255,255,255,.34);
        transition: border-color .25s ease, background .25s ease, transform .25s ease;
      }
      .pair-slot.selected {
        border-style: solid;
        border-color: rgba(var(--accent-rgb),.35);
        background: rgba(255,255,255,.68);
        transform: translateY(-2px);
      }
      .pair-slot-number {
        color: var(--accent);
        font: 400 12px/1 Georgia, serif;
        letter-spacing: .14em;
      }
      .pair-slot-copy { min-width: 0; }
      .pair-slot-copy small,
      .pair-slot-copy span {
        display: block;
        color: var(--muted);
        font: 9px/1.5 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        letter-spacing: .14em;
      }
      .pair-slot-copy strong {
        display: block;
        margin: 9px 0 8px;
        font-size: clamp(16px, 1.7vw, 21px);
        font-weight: 500;
        overflow-wrap: anywhere;
      }
      .pair-slot-copy span {
        letter-spacing: .04em;
      }
      .pair-remove {
        display: none;
        width: 34px;
        height: 34px;
        border: 1px solid rgba(36,31,27,.15);
        border-radius: 50%;
        color: var(--muted);
        background: transparent;
        cursor: pointer;
      }
      .pair-slot.selected .pair-remove { display: grid; place-items: center; }
      .pair-join {
        color: var(--accent);
        font: italic 20px/1 Georgia, serif;
      }
      .pair-result {
        margin-top: 25px;
        padding: clamp(28px, 4vw, 48px);
        color: #fff;
        background:
          radial-gradient(circle at 85% 20%, rgba(213,168,198,.24), transparent 30%),
          linear-gradient(135deg, #2d1119, #562332 58%, #40304f);
        box-shadow: 0 18px 50px rgba(52,21,33,.18);
      }
      .pair-result[hidden] { display: none; }
      .pair-result-label {
        margin: 0 0 15px;
        color: #e8cbd4;
        font: 700 9px/1 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        letter-spacing: .28em;
        text-transform: uppercase;
      }
      .pair-result h3 {
        margin: 0;
        font-size: clamp(23px, 3vw, 35px);
        font-weight: 500;
        line-height: 1.55;
      }
      .pair-result-copy {
        max-width: 800px;
        margin: 18px 0 0;
        color: rgba(255,255,255,.78);
        font: 13px/2.15 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
      }
      .pair-tools {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-top: 20px;
      }
      .pair-hint {
        margin: 0;
        color: var(--muted);
        font: 10px/1.8 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        letter-spacing: .04em;
      }
      .pair-reset {
        padding: 9px 0;
        border: 0;
        border-bottom: 1px solid currentColor;
        color: var(--accent);
        background: transparent;
        cursor: pointer;
        font: 11px/1.4 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
      }
      .pair-reset[hidden] { display: none; }
      .pair-shop {
        position: relative;
        z-index: 1;
        margin-top: 22px;
        padding: clamp(24px, 3.4vw, 38px);
        border: 1px solid rgba(255,255,255,.6);
        background: rgba(255,255,255,.42);
        backdrop-filter: blur(10px);
      }
      .pair-shop[hidden] { display: none; }
      .pair-shop-label {
        margin: 0 0 6px;
        color: var(--accent);
        font: 700 9px/1 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        letter-spacing: .28em;
        text-transform: uppercase;
      }
      .pair-shop-picks {
        margin: 0 0 4px;
        font-size: 15px;
      }
      .pair-shop-picks b { font-weight: 600; }
      .pair-shop-hint {
        margin: 0 0 22px;
        color: var(--muted);
        font: 11px/1.9 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
      }
      .pair-shop-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .pair-shop-row {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 96px repeat(2, minmax(0, 1fr));
        align-items: center;
        gap: 10px;
      }
      .pair-shop-row-label {
        color: var(--muted);
        font: 11px/1.5 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        letter-spacing: .04em;
      }
      .pair-shop-link {
        display: block;
        padding: 13px 16px;
        border: 1px solid rgba(36,31,27,.18);
        color: var(--ink);
        background: rgba(255,255,255,.55);
        text-decoration: none;
        font: 12px/1.5 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        letter-spacing: .02em;
        transition: border-color .2s ease, background .2s ease, color .2s ease;
      }
      .pair-shop-link:hover,
      .pair-shop-link:focus-visible {
        color: #fff;
        border-color: var(--accent);
        background: var(--accent);
      }
      .pair-shop-link small {
        display: block;
        margin-top: 3px;
        opacity: .68;
        font-size: 10px;
      }
      .pair-shop-both {
        grid-column: 1 / -1;
        padding-top: 6px;
        border-top: 1px solid rgba(36,31,27,.12);
      }
      @media (max-width: 520px) {
        .pair-shop-row { grid-template-columns: 1fr; gap: 8px; }
        .pair-shop-row-label { padding-top: 4px; }
      }

      .picker {
        max-width: 1000px;
        margin: 0 auto 64px;
        padding: 0 20px;
        text-align: center;
      }
      .picker-head { margin-bottom: 26px; }
      .picker-lead {
        max-width: 520px;
        margin: 10px auto 0;
        color: var(--muted);
        font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        font-size: 13px;
        line-height: 1.9;
      }
      .reel-wrap {
        position: relative;
        padding: 18px 0;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
      }
      .reel {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 50%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 50%;
        cursor: grab;
      }
      .reel.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
      .reel::-webkit-scrollbar { display: none; }
      .reel:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
      .reel-card {
        flex: 0 0 clamp(120px, 30vw, 168px);
        scroll-snap-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 14px 8px;
        border: 1px solid var(--line);
        border-radius: 4px;
        background: rgba(255,255,255,.6);
        cursor: pointer;
        opacity: .72;
        transform: scale(.92);
        transition: opacity .2s ease, transform .2s ease;
      }
      .reel-card.centered { opacity: 1; transform: scale(1); border-color: var(--accent); }
      .reel-card img {
        width: 76px;
        height: 76px;
        object-fit: cover;
        object-position: 50% 50%;
        border-radius: 50%;
        background: var(--cream);
      }
      .reel-card-name {
        font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        font-size: 11px;
        color: var(--ink);
        text-align: center;
        line-height: 1.4;
      }
      .picker-controls {
        margin-top: 22px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }
      .picker-spin {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 13px 40px;
        border: 1px solid var(--accent);
        border-radius: 999px;
        color: #fff;
        background: var(--accent);
        font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        font-size: 13px;
        letter-spacing: .1em;
        cursor: pointer;
        transition: .2s ease;
      }
      .picker-spin:hover,
      .picker-spin:focus-visible { color: var(--accent); background: transparent; }
      .picker-hint {
        margin: 0;
        color: var(--muted);
        font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        font-size: 12px;
      }
      .picker-reveal {
        margin-top: 30px;
        padding: clamp(22px, 3.4vw, 34px);
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: 24px;
        align-items: start;
        text-align: left;
        border: 1px solid rgba(255,255,255,.6);
        background: rgba(255,255,255,.5);
        backdrop-filter: blur(10px);
      }
      .picker-reveal[hidden] { display: none; }
      .picker-reveal-photo {
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        background: var(--cream);
        border-radius: 4px;
        overflow: hidden;
      }
      .picker-reveal-photo img { width: 96%; height: 96%; object-fit: contain; }
      .picker-reveal-copy .eyebrow {
        margin: 0 0 4px;
        color: var(--accent);
        font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        font-size: 10px;
        letter-spacing: .2em;
      }
      .picker-reveal-copy h3 { margin: 0 0 10px; font-size: clamp(22px, 3vw, 30px); }
      .picker-reveal-copy p { margin: 0 0 8px; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; font-size: 13px; line-height: 1.8; color: var(--ink); }
      .picker-reveal-price { font-weight: 600; }
      .picker-random-note { color: var(--muted); font-size: 11px !important; }
      .picker-reveal-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 14px 0 10px;
      }
      .picker-action {
        flex: 1 1 auto;
        min-width: 120px;
        padding: 12px 14px;
        border: 1px solid var(--accent);
        color: #fff;
        background: var(--accent);
        font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        font-size: 12px;
        cursor: pointer;
        transition: .2s ease;
      }
      .picker-action.ghost { color: var(--accent); background: transparent; }
      .picker-action:hover,
      .picker-action:focus-visible { color: var(--accent); background: transparent; }
      .picker-action.ghost:hover,
      .picker-action.ghost:focus-visible { color: #fff; background: var(--accent); }
      @media (max-width: 560px) {
        .picker-reveal { grid-template-columns: 1fr; text-align: center; }
        .picker-reveal-photo { width: 140px; margin: 0 auto; }
        .picker-reveal-actions { flex-direction: column; }
      }
      @media (prefers-reduced-motion: reduce) {
        .reel { scroll-behavior: auto; }
        .reel-card { transition: none; }
      }
      dialog {
        width: min(1040px, 100%);
        max-width: none;
        height: 100dvh;
        max-height: none;
        margin: 0 auto;
        color: #f8f1e9;
        background: #2e0b13;
      }
      body:has(dialog[open]) {
        overflow: hidden;
      }
      .modal-grid {
        grid-template-columns: 1.08fr .92fr;
        min-height: 100%;
      }
      .modal-photo {
        min-height: 620px;
        box-sizing: border-box;
        padding: clamp(20px, 3vw, 42px);
        background: #f6f2eb;
      }
      .modal-copy {
        padding: 58px 52px 48px;
      }
      .modal-copy .code {
        color: #d7aa9b;
      }
      .modal-copy dl div {
        border-bottom-color: rgba(255,255,255,.14);
      }
      .modal-copy dt {
        color: rgba(255,255,255,.55);
      }
      .detail-link {
        color: #2e0b13;
        background: #f4eee5;
      }
      .modal-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 24px;
      }
      .modal-actions .detail-link { margin-top: 0; }
      .modal-select {
        padding: 14px 18px;
        border: 1px solid rgba(255,255,255,.48);
        color: #fff;
        background: transparent;
        cursor: pointer;
        font: 12px/1.5 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        letter-spacing: .06em;
        transition: background .2s ease, color .2s ease;
      }
      .modal-select:hover,
      .modal-select:focus-visible,
      .modal-select.selected {
        color: #2e0b13;
        background: #f4eee5;
      }
      .modal-select:disabled {
        opacity: .48;
        cursor: not-allowed;
      }
      .close {
        color: #fff;
      }
      @media (max-width: 1080px) {
        .hero {
          grid-template-columns: .82fr 1.18fr;
        }
        .grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @media (max-width: 820px) {
        header {
          height: 68px;
        }
        .logo {
          width: 108px;
          height: 42px;
        }
        .hero {
          min-height: 0;
          grid-template-columns: 1fr;
        }
        .hero-copy {
          min-height: 490px;
          padding: 86px 28px 74px;
        }
        .hero-art,
        .hero-editorial-image {
          min-height: 440px;
        }
        .hero-edition {
          top: 24px;
          right: 24px;
          width: 88px;
        }
        .hero-edition strong {
          font-size: 31px;
        }
        .hero-caption {
          right: 24px;
          bottom: 22px;
        }
        .intro {
          min-height: 0;
          padding: 78px 0 64px;
          display: block;
        }
        .intro p {
          margin-top: 32px;
          padding: 25px 0 0;
          border-top: 1px solid var(--line);
        }
        .controls {
          padding-top: 42px;
          margin-bottom: 64px;
        }
        .pair-story-head { grid-template-columns: 1fr; }
        .pair-story-head p:last-child {
          padding: 22px 0 0;
          border-top: 1px solid var(--line);
          border-left: 0;
        }
        .method-tabs {
          gap: 28px;
        }
        .filter-options.oshi-mode {
          display: flex;
        }
        .grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 46px 12px;
        }
        .card-body {
          min-height: 174px;
        }
        .modal-grid {
          grid-template-columns: 1fr;
        }
        .modal-photo {
          min-height: 0;
          height: 42vh;
          padding: 16px;
        }
      }
      @media (max-width: 520px) {
        main {
          padding-inline: 14px;
        }
        .hero-copy {
          min-height: 455px;
        }
        .hero h1 {
          font-size: clamp(40px, 12vw, 54px);
        }
        .hero-art,
        .hero-editorial-image {
          min-height: 360px;
        }
        .method-tabs {
          gap: 24px;
          overflow-x: auto;
        }
        .method-tab {
          flex: 0 0 auto;
          font-size: 14px;
        }
        .filter-options {
          padding-bottom: 8px;
        }
        .photo::before {
          inset: 9px;
        }
        .card-number {
          left: 11px;
          top: 10px;
        }
        .card-body {
          min-height: 168px;
        }
        .card h3 {
          min-height: 3.2em;
          font-size: 14px;
        }
        .meaning {
          font-size: 10px;
        }
        .price {
          font-size: 12px;
        }
        .card-open {
          display: none;
        }
        dialog {
          width: 100%;
        }
        .modal-copy {
          padding: 34px 24px;
        }
        .pair-story {
          margin-bottom: 72px;
          padding: 34px 24px;
        }
        .pair-story::before { inset: 8px; }
        .pair-slots {
          grid-template-columns: 1fr;
          gap: 12px;
        }
        .pair-join {
          justify-self: center;
          transform: rotate(90deg);
        }
        .pair-slot { min-height: 108px; padding: 19px 18px; }
        .pair-tools { align-items: flex-start; flex-direction: column; }
        .modal-actions { grid-template-columns: 1fr; }
      }

      /* Keep the global AXB navigation identical on every page */
      .skip-link {
        position: fixed;
        left: 16px;
        top: -100px;
        z-index: 100;
        padding: 12px 18px;
        color: #fff;
        background: #32151c;
      }
      .skip-link:focus { top: 16px; }
      .site-header {
        position: sticky;
        top: 0;
        z-index: 30;
        width: 100%;
        max-width: none;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 clamp(22px, 5vw, 76px);
        border-bottom: 1px solid rgba(255, 255, 255, .72);
        background: linear-gradient(90deg, rgba(224, 242, 249, .72), rgba(252, 241, 247, .62) 48%, rgba(238, 235, 252, .68));
        box-shadow: 0 10px 34px rgba(65, 66, 94, .09);
        backdrop-filter: blur(22px) saturate(1.4);
      }
      .site-header::after {
        content: "";
        position: absolute;
        right: clamp(22px, 5vw, 76px);
        bottom: -1px;
        left: clamp(22px, 5vw, 76px);
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(119, 221, 240, .72), rgba(244, 184, 211, .72), rgba(190, 167, 239, .72), transparent);
        pointer-events: none;
      }
      .wordmark {
        display: block;
        width: 150px;
        height: 64px;
        text-decoration: none;
      }
      .wordmark img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .main-nav {
        display: flex;
        align-items: center;
        gap: clamp(2px, .7vw, 10px);
        padding: 5px;
        border: 1px solid rgba(255, 255, 255, .66);
        border-radius: 999px;
        background: rgba(255, 255, 255, .2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64), 0 8px 24px rgba(80, 72, 111, .07);
        font: 11px/1 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
        letter-spacing: .08em;
        text-transform: none;
      }
      .main-nav a {
        padding: 10px 12px;
        border-bottom: 0;
        border-radius: 999px;
        text-decoration: none;
        transition: background .2s ease, box-shadow .2s ease, color .2s ease;
      }
      .main-nav a:hover,
      .main-nav a:focus-visible {
        border-bottom-color: transparent;
        background: rgba(255, 255, 255, .5);
        box-shadow: 0 3px 14px rgba(94, 75, 123, .1);
      }
      .main-nav a[aria-current="page"] {
        color: var(--accent);
        background: rgba(255, 255, 255, .54);
        box-shadow: 0 3px 14px rgba(94, 75, 123, .1);
      }
      .nav-contact {
        padding: 10px 17px !important;
        color: #fff;
        border: 0 !important;
        border-radius: 999px;
        background: linear-gradient(135deg, #4a2130, #76516f);
        box-shadow: 0 6px 18px rgba(73, 31, 49, .18);
      }
      .menu-toggle {
        display: none;
        width: 42px;
        height: 42px;
        border: 1px solid var(--line);
        border-radius: 50%;
        color: var(--ink);
        background: rgba(255, 255, 255, .28);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
        cursor: pointer;
      }
      @media (max-width: 760px) {
        .site-header { height: 62px; }
        .wordmark {
          width: 120px;
          height: 52px;
        }
        .menu-toggle { display: grid; place-items: center; }
        .main-nav {
          position: fixed;
          inset: 62px 0 auto;
          min-height: calc(100svh - 62px);
          padding: 46px 26px;
          display: none;
          align-items: stretch;
          flex-direction: column;
          gap: 8px;
          color: var(--ink);
          border: 0;
          border-radius: 0;
          background:
            linear-gradient(rgba(244, 248, 250, .88), rgba(250, 243, 249, .9)),
            url("../brand/rainbow-background.webp") center / cover;
          box-shadow: none;
          backdrop-filter: blur(22px) saturate(1.25);
          font-size: 16px;
        }
        .main-nav.open { display: flex; }
        .main-nav a { padding: 18px 2px; border-radius: 0; border-bottom-color: var(--line); }
        .nav-contact { margin-top: 18px; padding: 14px 18px !important; border-radius: 999px !important; text-align: center; }
        body.menu-open { overflow: hidden; }
      }

      /* Typography: use one Mincho family and lift the smallest labels. */
      body,
      body *,
      button,
      input,
      select,
      textarea {
        font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif !important;
      }
      .topbar,
      nav,
      .eyebrow,
      .method-tab,
      .chip {
        font-size: 13px;
      }
      .lead,
      .intro p {
        font-size: 14px;
      }
      .filter-options.oshi-mode .chip small,
      .code,
      .collection-meta .count,
      .card-open {
        font-size: 12px;
      }
      .meaning,
      .note,
      footer {
        font-size: 13px;
      }
      .price {
        font-size: 14px;
      }

      /* A lighter gemstone showcase that reflects the full color range. */
      .hero {
        color: var(--ink);
        background: #f7f5f2;
      }
      .hero-copy {
        background:
          radial-gradient(circle at 12% 18%, rgba(221, 238, 244, .76), transparent 36%),
          radial-gradient(circle at 82% 70%, rgba(245, 218, 231, .68), transparent 42%),
          linear-gradient(145deg, #faf8f5, #f3eef3);
        border-right: 1px solid rgba(66, 50, 59, .1);
      }
      .hero-copy::after { background: rgba(111, 33, 49, .42); }
      .hero .eyebrow { color: var(--wine); }
      .hero h1 { color: #3f2530; }
      .hero .lead { color: rgba(36, 31, 27, .7); }
      .hero-art {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        place-items: center;
        padding: clamp(38px, 5vw, 76px);
        background:
          radial-gradient(circle at 18% 18%, rgba(196, 229, 241, .78), transparent 34%),
          radial-gradient(circle at 82% 24%, rgba(244, 207, 226, .72), transparent 35%),
          radial-gradient(circle at 55% 88%, rgba(218, 207, 242, .7), transparent 38%),
          #f7f5f2;
      }
      .hero-art::before {
        background:
          linear-gradient(135deg, rgba(255,255,255,.5), transparent 46%),
          linear-gradient(0deg, rgba(255,255,255,.42), transparent 35%);
      }
      .hero-gem-cloud {
        position: relative;
        z-index: 0;
        width: min(610px, 90%);
        aspect-ratio: 5 / 3;
        display: grid;
        grid-template-columns: repeat(10, minmax(0, 1fr));
        grid-template-rows: repeat(6, minmax(0, 1fr));
        gap: clamp(5px, .55vw, 8px);
      }
      .hero-art .hero-gem {
        position: relative;
        left: auto;
        bottom: auto;
        translate: none;
        aspect-ratio: 1;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.76);
        border-radius: 8px;
        background: rgba(255,255,255,.64);
        box-shadow: 0 10px 24px rgba(74, 65, 96, .08), inset 0 0 0 4px rgba(255,255,255,.22);
      }
      .hero-art .hero-gem:nth-child(2),
      .hero-art .hero-gem:nth-child(5),
      .hero-art .hero-gem:nth-child(8) { transform: none; }
      .hero-art a.hero-gem {
        color: inherit;
        text-decoration: none;
        cursor: pointer;
        transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      }
      .hero-art a.hero-gem:hover {
        transform: translateY(-3px);
        border-color: rgba(111, 33, 49, .24);
        box-shadow: 0 14px 28px rgba(74, 65, 96, .16), inset 0 0 0 4px rgba(255,255,255,.28);
      }
      .hero-art a.hero-gem:focus-visible {
        outline: 2px solid var(--wine);
        outline-offset: 3px;
      }
      .hero-gem img {
        position: relative;
        left: var(--hero-gem-shift-x, 0%);
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: 50% 50%;
        transform: none;
        transform-origin: 50% 50%;
        mix-blend-mode: darken;
        filter: saturate(.96) contrast(.98) brightness(1.04);
      }
      .hero-edition {
        color: var(--wine-dark);
        border-color: rgba(75, 39, 58, .28);
        background: rgba(255,255,255,.44);
        backdrop-filter: blur(8px);
      }
      .hero-caption { color: rgba(49, 42, 59, .64); }
      @media (min-width: 821px) {
        .hero-art { place-items: start center; }
        .hero-gem-cloud { margin-top: 112px; }
      }
      @media (max-width: 820px) {
        .hero-art { min-height: 460px; padding: 54px 30px 42px; }
        .hero-gem-cloud { width: min(520px, 94%); }
      }
      @media (max-width: 520px) {
        .hero-art { min-height: 400px; padding: 62px 24px 36px; }
        .hero-gem-cloud { width: 96%; gap: 7px; }
      }