:root {
  --gallery-paper: #fbfaf6;
  --gallery-ink: #1d1d1b;
  --gallery-muted: #6d6a62;
  --gallery-gold: #a99b68;
  --gallery-line: rgba(29, 29, 27, 0.14);
  --gallery-shadow: 0 22px 60px rgba(29, 29, 27, 0.08);
}

html {
  scroll-padding-top: 92px;
}

body {
  letter-spacing: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 16%, transparent 0 132px, rgba(169, 155, 104, 0.14) 133px 134px, transparent 135px),
    radial-gradient(circle at 50% 16%, transparent 0 220px, rgba(29, 29, 27, 0.08) 221px 222px, transparent 223px);
  opacity: 0.7;
}

.site-header,
.projector-hud,
.garden-hud,
.viewer-topbar,
.hologram-header,
.topbar {
  background: rgba(251, 250, 246, 0.9) !important;
  border-color: var(--gallery-line) !important;
  color: var(--gallery-ink) !important;
  backdrop-filter: blur(16px);
}

.projector-hud p,
.garden-hud p,
.viewer-topbar .eyebrow,
.hologram-header p,
.eyebrow,
.tab-kicker {
  color: var(--gallery-gold) !important;
  letter-spacing: 0.08em;
}

.projector-hud h1,
.garden-hud h1,
.viewer-topbar h1,
.hologram-header h1,
.brand strong,
h1,
h2 {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif !important;
  font-weight: 600;
}

.section-inner,
.shell {
  position: relative;
}

.hero,
.it-hero,
.future-project,
.recruit-request,
.section,
.workspace,
.garden-shell,
.hologram-shell {
  background-color: rgba(251, 250, 246, 0.76);
}

.button,
.return-link,
.return-button,
.back-link,
.primary-link,
.secondary-link,
.secondary-button,
.secondary-action-button,
.mobile-action,
.panel-open,
.mobile-settings-toggle,
.settings-toggle,
.world-tab {
  border-radius: 0 !important;
}

.button,
.return-link,
.return-button,
.back-link,
.primary-link,
.secondary-link,
.secondary-button,
.secondary-action-button {
  box-shadow: none !important;
}

.card,
.request-card,
.learn-card,
.learn-note-card,
.future-team,
.showcase-card,
.manual-card,
.action-card,
.panel,
.memo-card,
.pillar,
.flow-step {
  border-radius: 0 !important;
  box-shadow: var(--gallery-shadow);
}

.hero::before,
.it-hero::before,
.section::before,
.workspace::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  border: 1px solid rgba(169, 155, 104, 0.18);
  pointer-events: none;
}

.vertical-sign,
.gallery-vertical-sign {
  color: var(--gallery-gold);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(1.5rem, 4vw, 3rem);
  line-height: 1.4;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.gallery-circle-mark {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
  border: 1px solid rgba(29, 29, 27, 0.18);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.78), rgba(251, 250, 246, 0.26) 62%, transparent 63%),
    repeating-conic-gradient(from 0deg, rgba(169, 155, 104, 0.38) 0 1deg, transparent 1deg 7deg);
}

.gallery-circle-mark::before {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(29, 29, 27, 0.18);
  border-radius: 50%;
}

.gallery-circle-mark > * {
  position: relative;
  z-index: 1;
}

.hero-grid > div:first-child {
  position: relative;
}

.hero-grid .gallery-vertical-sign {
  position: absolute;
  right: -0.5rem;
  top: 0;
  opacity: 0.74;
}

.kimono-visual.gallery-circle-mark {
  min-height: clamp(300px, 42vw, 480px);
  border-radius: 50% !important;
  overflow: visible;
}

.kimono-visual.gallery-circle-mark .photo-placeholder {
  width: min(72%, 360px);
  margin: auto;
  border-color: rgba(169, 155, 104, 0.22);
  background: rgba(255, 255, 255, 0.74);
}

.it-flow-step,
.it-flow-result {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(251, 250, 246, 0.68)),
    repeating-linear-gradient(90deg, rgba(169, 155, 104, 0.12) 0 1px, transparent 1px 24px) !important;
  color: var(--gallery-ink) !important;
  border-color: rgba(169, 155, 104, 0.34) !important;
}

.it-flow-step strong,
.it-flow-result strong {
  color: var(--gallery-ink) !important;
}

.it-flow-step p,
.it-flow-result p,
.it-hero p {
  color: var(--gallery-muted) !important;
}

.it-flow-step::after,
.it-flow-result::after {
  color: #fff !important;
  background: var(--gallery-ink) !important;
  border-color: var(--gallery-ink) !important;
}

.it-hero {
  color: var(--gallery-ink) !important;
  background:
    radial-gradient(circle at 72% 18%, rgba(169, 155, 104, 0.16), transparent 22rem),
    linear-gradient(135deg, rgba(251, 250, 246, 0.96), rgba(238, 235, 224, 0.76)) !important;
}

.it-hero h2,
.it-hero h3 {
  color: var(--gallery-ink) !important;
}

@media (max-width: 760px) {
  body::after {
    opacity: 0.35;
  }

  .gallery-vertical-sign,
  .vertical-sign {
    writing-mode: horizontal-tb;
    font-size: 1.35rem;
  }

  .gallery-circle-mark {
    min-height: 260px;
  }

  .hero-grid .gallery-vertical-sign {
    position: static;
    margin-bottom: 12px;
  }

  .kimono-visual.gallery-circle-mark {
    border-radius: 0 !important;
  }
}
