@font-face {
  font-family: "Pretendard";
  src: url("../font/PretendardVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant";
  src: url("../font/Cormorant-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Text Selection */
::selection {
  background: var(--color-brand);
  color: var(--color-text-inverse);
}

::-moz-selection {
  background: var(--color-brand);
  color: var(--color-text-inverse);
}

body {
  font-family: var(--font-body);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root {
  /* Font family */
  --font-display: "Cormorant", serif;
  --font-body: "Pretendard", sans-serif;

  /* Color */
  --color-brand: #4b204f;
  --color-text: #1f1f23;
  --color-text-inverse: #fff;
  --color-text-soft: #f6f4f8;
  --color-text-muted: #6d6875;
  --color-surface-dark: #2a2c31;
  --color-placeholder: #d9d9d9;

  --color-white-06: rgba(255, 255, 255, 0.06);
  --color-white-14: rgba(255, 255, 255, 0.14);
  --color-white-16: rgba(255, 255, 255, 0.16);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-25: rgba(255, 255, 255, 0.25);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-40: rgba(255, 255, 255, 0.4);
  --color-brand-06: rgba(75, 32, 79, 0.06);
  --color-brand-16: rgba(75, 32, 79, 0.16);
  --color-brand-10: rgba(75, 32, 79, 0.1);
  --color-brand-20: rgba(75, 32, 79, 0.2);
  --color-brand-82: rgba(75, 32, 79, 0.82);
  --color-border-dark-20: rgba(31, 31, 35, 0.2);
  --color-text-inverse-60: rgba(255, 255, 255, 0.6);
  --color-text-inverse-80: rgba(255, 255, 255, 0.8);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;

  /* Shadow */
  --shadow-glass-inset: inset 0 2px 0 0 var(--color-white-25);
  --shadow-glass-inset-soft: inset 0 2px 0 0 rgba(255, 255, 255, 0.12);
  --shadow-dropdown: 0 4px 60px 10px rgba(75, 32, 79, 0.1);

  /* Blur */
  --blur-sm: blur(5px);
  --blur-md: blur(15px);

  /* Transition */
  --transition-fast: 0.25s ease;
  --transition-base: 0.35s ease;
  --transition-slow: 0.45s ease;
  --transition-carousel: 0.8s ease;

  /* Letter spacing */
  --ls-tight: -0.02em;
  --ls-normal: 0.02em;
  --ls-wide: 0.04em;
  --ls-eyebrow: 0.12em;
  --ls-word: 0.1em;

  /* Font size */
  --fs-display-brand: 140px;
  --fs-display-hero: 84px;
  --fs-display-section: 56px;
  --fs-display-tab: 68px;
  --fs-card-label: 40px;
  --fs-quote: 36px;
  --fs-heading-lg: 28px;
  --fs-heading-md: 24px;
  --fs-body-lg: 20px;
  --fs-body-md: 18px;
  --fs-body-sm: 16px;

  /* Line height */
  --lh-display: 96px;
  --lh-display-section: 64px;
  --lh-card-label: 48px;
  --lh-quote: 50px;
  --lh-heading-lg: 38px;
  --lh-heading-md: 36px;
  --lh-heading-tabs: 56px;
  --lh-body-lg: 34px;
  --lh-body-md: 28px;
  --lh-body-md-loose: 32px;
  --lh-body-sm: 26px;
  --lh-pager: 32px;

  /* Font weight */
  --fw-display: 300;
  --fw-body: 400;
  --fw-heading: 500;
  --fw-accent: 600;
  --fw-bold: 700;
}

.lydian-v6 {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.section {
  position: relative;
  width: 100%;
  padding-top: var(--section-pt, 0);
  padding-bottom: var(--section-pb, 0);
}

.inner {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

/* Typography */
.type-display-section {
  font-family: var(--font-display);
  font-size: var(--fs-display-section);
  font-weight: var(--fw-display);
  line-height: var(--lh-display-section);
  letter-spacing: var(--ls-normal);
}

.type-display-section--body {
  font-weight: var(--fw-body);
}

.type-display-hero {
  font-family: var(--font-display);
  font-size: var(--fs-display-hero);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-normal);
}

.type-display-brand {
  font-family: var(--font-display);
  font-size: var(--fs-display-brand);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-normal);
}

.type-heading-lg {
  font-family: var(--font-display);
  font-size: var(--fs-heading-lg);
  font-weight: var(--fw-accent);
  line-height: var(--lh-heading-lg);
  letter-spacing: var(--ls-wide);
}

.type-heading-md {
  font-size: var(--fs-heading-md);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading-md);
  letter-spacing: var(--ls-tight);
}

.type-body-lg {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-body);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-tight);
}

.type-body-md {
  font-size: var(--fs-body-md);
  font-weight: var(--fw-body);
  line-height: var(--lh-body-md);
  letter-spacing: var(--ls-tight);
}

.type-body-md--loose {
  line-height: var(--lh-body-md-loose);
}

.type-body-sm {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-body);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-tight);
}

.type-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-accent);
  line-height: var(--lh-body-md);
  letter-spacing: var(--ls-eyebrow);
}

.type-quote {
  font-size: var(--fs-quote);
  font-weight: var(--fw-accent);
  line-height: var(--lh-quote);
  letter-spacing: var(--ls-tight);
}

.type-caption {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-body);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-tight);
}

.type--dark {
  color: var(--color-text);
}

.type--light {
  color: var(--color-text-inverse);
}

.type--soft {
  color: var(--color-text-soft);
}

.type--brand {
  color: var(--color-brand);
}

.type--muted {
  color: var(--color-text-muted);
}

/* Button / Link */
.btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.btn-link--sm {
  font-family: var(--font-display);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-accent);
  line-height: var(--lh-body-md);
  letter-spacing: var(--ls-eyebrow);
}

.btn-link--lg {
  font-family: var(--font-display);
  font-size: var(--fs-heading-lg);
  font-weight: var(--fw-accent);
  line-height: var(--lh-heading-lg);
  letter-spacing: var(--ls-wide);
}

.btn-link--dark {
  color: var(--color-text);
}

.btn-link--light {
  color: var(--color-text-inverse);
}

.btn-link__icon {
  display: block;
  flex-shrink: 0;
  width: 33px;
  height: 8px;
  transition: transform var(--transition-base);
}

.btn-link__icon--light {
  color: var(--color-text-inverse);
}

.btn-link__icon--dark {
  color: var(--color-text);
}

.btn-link__icon--muted {
  color: var(--color-text-muted);
}

.btn-link:hover .btn-link__icon,
.btn-link:focus-visible .btn-link__icon {
  transform: translateX(6px);
}