/* ==========================================================================
   Design Tokens
   ========================================================================== */

:root {
  /* --- Primitive: Color --- */
  --color-white: #ffffff;
  --color-gray-300: #e2dfdb;
  --color-gray-500: #b2b2b8;
  --color-gray-700: #7d878c;
  --color-gray-900: #3a4043;
  --color-dark-blue-deep: #1a2830;
  --color-dark-blue-muted: #264050;
  --color-ivory: #f4f0e8;
  --color-paper: #fbf9f4;
  --color-black: #000000;
  --color-gold-pale: #d5c5a6;
  --color-gold-light: #dac69b;
  --color-gold-bright: #ebd276;
  --color-gold: #e5af4b;
  --color-gold-dark: #b99a61;
  --color-gold-warm: #8b7c5b;
  --color-black-alpha-10: rgba(0, 0, 0, 0.1);
  --color-black-alpha-30: rgba(0, 0, 0, 0.3);
  --color-black-alpha-56: rgba(0, 0, 0, 0.56);
  --color-black-alpha-76: rgba(0, 0, 0, 0.76);
  --color-white-alpha-10: rgba(255, 255, 255, 0.1);
  --color-white-alpha-20: rgba(255, 255, 255, 0.2);
  --color-white-alpha-80: rgba(255, 255, 255, 0.8);

  /* --- Primitive: Space --- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-92: 92px;
  --space-120: 120px;
  --space-140: 140px;
  --space-160: 160px;
  --space-180: 180px;
  --space-200: 200px;

  /* --- Primitive: Font size --- */
  --font-size-10: 10px;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: clamp(17px, calc(17px + (100vw - 320px) * 0.0545), 20px);
  --font-size-24: clamp(20px, calc(20px + (100vw - 320px) * 0.0727), 24px);
  --font-size-32: clamp(27px, calc(27px + (100vw - 320px) * 0.0909), 32px);
  --font-size-36: clamp(30px, calc(30px + (100vw - 320px) * 0.1091), 36px);
  --font-size-40: clamp(33px, calc(33px + (100vw - 320px) * 0.1273), 40px);
  --font-size-48: clamp(40px, calc(40px + (100vw - 320px) * 0.1455), 48px);
  --font-size-56: clamp(46px, calc(46px + (100vw - 320px) * 0.1818), 56px);

  /* --- Primitive: Font family / weight / line-height / letter-spacing --- */
  --font-jp-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-en-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-en-number: "Cormorant SC", "Times New Roman", Georgia, serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-snug: 1.4;
  --line-height-medium: 1.6;
  --line-height-loose: 1.8;
  --line-height-loosest: 2;
  --letter-spacing-hairline: 0.02em;
  --letter-spacing-tight: 0.04em;
  --letter-spacing-medium: 0.08em;
  --letter-spacing-wide: 0.16em;

  /* --- Semantic: Font size --- */
  --font-size-body: var(--font-size-14);
  --font-size-lead: var(--font-size-16);
  --font-size-section-label: var(--font-size-14);
  --font-size-section-heading: var(--font-size-24);
  --font-size-content-heading: var(--font-size-18);
  --font-size-button: var(--font-size-16);
  --font-size-nav: var(--font-size-24);
  --font-size-mv-display: var(--font-size-56);
  --font-size-mv-display-sm: var(--font-size-48);
  --font-size-mv-display-xs: var(--font-size-40);
  --font-size-mv-lg: var(--font-size-40);
  --font-size-mv-lg-sm: var(--font-size-36);
  --font-size-mv-md: var(--font-size-24);
  --font-size-mv-sm: var(--font-size-14);

  /* --- Semantic: Layout / spacing --- */
  --container-xs: 80%;
  --container-sm: 86%;
  --container-md: 90%;
  --container-card: min(351px, calc(100% - var(--space-32)));
  --section-space-default: var(--space-80);
  --section-space-large: var(--space-120);
  --gap-inline-xs: var(--space-4);
  --gap-inline-sm: var(--space-8);
  --gap-inline-md: var(--space-16);
  --gap-inline-lg: var(--space-24);
  --gap-block-xs: var(--space-8);
  --gap-block-sm: var(--space-16);
  --gap-block-md: var(--space-24);
  --gap-block-lg: var(--space-32);
  --gap-block-xl: var(--space-48);

  /* --- Semantic: Color (Light Surface = default) --- */
  --color-bg-default: var(--color-paper);
  --color-bg-subtle: var(--color-ivory);
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-700);
  --color-text-link: var(--color-gold-warm);
  --color-text-accent-primary: var(--color-gold-dark);
  --color-text-button-primary: var(--color-white);
  --color-border-default: var(--color-gray-300);
  --color-border-accent: var(--color-gold-bright);

  /* --- Effect --- */
  --shadow-dropshadow-dark60: 0 0 14px rgba(0, 0, 0, 0.6);
  --shadow-dropshadow-light40: 0 0 10px rgba(244, 240, 232, 0.4);
  --shadow-dropshadow-white-glow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 14px rgba(255, 255, 255, 0.4);
  --gradient-btn-gold: linear-gradient(36deg,
      #c7954a 0.33%,
      #d1a15d 38%,
      #ddb475 54%,
      #d1a15d 70%,
      #ca9a51);
}

[data-surface="dark"] {
  --color-bg-default: var(--color-dark-blue-deep);
  --color-bg-subtle: var(--color-dark-blue-muted);
  --color-text-primary: var(--color-paper);
  --color-text-secondary: var(--color-gray-300);
  --color-text-link: var(--color-gold-pale);
  --color-text-accent-primary: var(--color-gold-light);
  --color-border-default: var(--color-paper);
}

/* ==========================================================================
   Base reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  height: 100dvh;
  overflow: hidden;
}

body {
  display: flex;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--color-bg-default);
  color: var(--color-text-primary);
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  letter-spacing: var(--letter-spacing-medium);
  line-height: var(--line-height-medium);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p,
h1,
h2,
h3,
h4 {
  margin: 0;
}

/* ==========================================================================
   Common components
   ========================================================================== */

.btn-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-16);
  background-image: var(--gradient-btn-gold);
  background-size: 220% 100%;
  background-position: 78% 0;
  color: var(--color-text-button-primary);
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-button);
  letter-spacing: var(--letter-spacing-medium);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-position 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}

.btn-cta:hover {
  background-position: 22% 0;
  filter: brightness(1.08);
}

.btn-cta::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-12);
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background-image: var(--btn-cta-arrow, url("../img/icon-chevron-right-white.svg"));
  background-repeat: no-repeat;
  background-size: 4px 7.33px;
  background-position: center;
  transition: transform 0.2s ease;
}

.btn-cta:hover::after {
  transform: translateY(-50%) translateX(4px);
}

.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-sm);
  text-align: center;
}

.section-heading__label {
  font-family: var(--font-en-serif);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-section-label);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-accent-primary);
}

.section-heading__title {
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-section-heading);
  letter-spacing: var(--letter-spacing-medium);
  line-height: var(--line-height-medium);
  color: var(--color-text-primary);
}

.section-heading__title-accent {
  color: var(--color-text-accent-primary);
}

.divider {
  display: flex;
  justify-content: center;
}

.divider img {
  width: 140px;
  height: 10px;
}

.content-heading {
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-content-heading);
  letter-spacing: var(--letter-spacing-medium);
  line-height: var(--line-height-medium);
  color: var(--color-text-primary);
}

.glass-btn {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-white-alpha-20);
  background:
    linear-gradient(135deg, var(--color-white-alpha-20) 0%, transparent 45%),
    var(--color-black-alpha-10);
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 60%),
    0 8px 20px var(--color-black-alpha-30);
}

.main-visual .glass-btn,
.nav-menu .glass-btn,
.aside-right .glass-btn {
  background: var(--cta-glass-bg,
      linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 45%),
      var(--color-black-alpha-10));
  border: 1px solid rgba(235, 210, 118, 0.3);
}

.btn-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-20) var(--space-24);
  color: var(--color-text-button-primary);
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-button);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-none);
  text-shadow: var(--shadow-dropshadow-dark60);
  text-decoration: none;
  white-space: nowrap;
}

.btn-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-8);
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background-image: url("../img/icon-chevron-right-white.svg");
  background-repeat: no-repeat;
  background-size: 4px 7.33px;
  background-position: center;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.note-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

.note {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline-xs);
  width: 100%;
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-12);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.note__mark {
  flex-shrink: 0;
}

.note__link {
  color: var(--color-text-link);
  text-decoration: underline;
  transition: filter 0.2s ease;
}

.note__link:hover {
  filter: brightness(1.1);
}

.divider-label {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
}

.divider-label__deco {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.divider-label__deco:first-child {
  transform: rotate(-45deg);
}

.divider-label__deco:last-child {
  transform: scaleX(-1) rotate(-45deg);
}

.divider-label__line {
  flex: 1 0 0;
  height: 1px;
  background: var(--color-border-accent);
}

.index-label {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--space-4);
  color: var(--color-text-accent-primary);
}

.index-label__en {
  font-family: var(--font-en-serif);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-20);
  letter-spacing: var(--letter-spacing-medium);
  line-height: var(--line-height-tight);
}

.index-label__num {
  font-family: var(--font-en-number);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-32);
  letter-spacing: var(--letter-spacing-medium);
  line-height: var(--line-height-none);
}

.text-lead {
  font-size: var(--font-size-lead);
  line-height: var(--line-height-loose);
  text-align: center;
  color: var(--color-text-primary);
}

.text-loose {
  letter-spacing: var(--letter-spacing-hairline);
  line-height: var(--line-height-loosest);
  color: var(--color-text-primary);
}

.event-name {
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-mv-display);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-none);
}

.event-subtitle {
  font-family: var(--font-en-serif);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-mv-lg-sm);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-none);
  color: var(--color-text-accent-primary);
}

.event-date {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-12);
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-medium);
}

.event-date__year,
.event-date__weekday {
  font-size: var(--font-size-mv-md);
}

.event-date__day {
  font-size: var(--font-size-mv-lg);
}

.event-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-en-serif);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-accent-primary);
}

.event-place__venue {
  font-size: var(--font-size-mv-md);
}

.event-place__city {
  font-size: var(--font-size-mv-sm);
}