@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800&display=swap");

@font-face {
  font-family: "ivymode";
  src: url("https://use.typekit.net/af/c59ffc/00000000000000007735ce7b/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

:root {
  --grape-coral: #f16767;
  --grape-cream-yellow: #f3f5d5;
  --grape-citron: #cec934;
  --grape-wine: #600b38;
  --grape-bordeaux: #69262c;
  --grape-linen: #eae9e1;
  --grape-blush: #f4dbd0;
  --grape-wine-muted: #85566d;
  --grape-border: #dbc9c3;
  --grape-coral-deep: #db5b60;
  --grape-shadow: rgba(96, 11, 56, 0.13);
  --font-display: "ivymode", "IvyMode", Georgia, serif;
  --font-body: "Mulish", "Segoe UI", Arial, sans-serif;
  --content-max: 76rem;
  --measure: 65ch;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  color: var(--grape-wine);
  background: var(--grape-linen);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0;
  max-width: var(--measure);
  overflow-wrap: break-word;
  text-wrap: pretty;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.99;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.shell {
  width: min(calc(100% - 2.5rem), var(--content-max));
  margin-inline: auto;
  min-width: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--grape-wine);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 2.1rem;
  height: 1px;
  background: var(--grape-coral);
  content: "";
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.3rem, 3vw, 2.1rem);
}

.brand {
  display: inline-flex;
  width: clamp(8.8rem, 17vw, 12.25rem);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.65rem);
  font-size: 0.88rem;
  font-weight: 700;
  min-width: 0;
}

.nav-link {
  position: relative;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

.nav-link::after {
  position: absolute;
  right: 0;
  bottom: 0.42rem;
  left: 0;
  height: 1px;
  background: var(--grape-coral);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms var(--ease-out);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  max-width: 100%;
  min-width: 0;
}

.button {
  min-height: 3.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.88rem 1.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.015em;
  transition:
    background-color 260ms var(--ease-out),
    border-color 260ms var(--ease-out),
    color 260ms var(--ease-out),
    transform 260ms var(--ease-out);
}

.button-primary {
  color: var(--grape-wine);
  background: var(--grape-coral);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--grape-coral-deep);
  transform: translateY(-2px);
}

.button-secondary {
  color: var(--grape-wine);
  border-color: var(--grape-wine);
  background: transparent;
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: var(--grape-wine);
  color: var(--grape-cream-yellow);
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(1px);
}

a:focus-visible {
  border-radius: 0.35rem;
  outline: 3px solid var(--grape-citron);
  outline-offset: 4px;
}

.mark {
  display: block;
  width: clamp(3.6rem, 7vw, 5.35rem);
  opacity: 0.86;
}

.maintenance-page {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 83% 20%, var(--grape-blush) 0 18%, transparent 18.1%),
    var(--grape-linen);
}

.maintenance-main {
  display: grid;
  align-items: center;
  padding-block: clamp(3.5rem, 8vh, 7rem);
}

.maintenance-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.8rem, 8vw, 7rem);
  min-width: 0;
}

.maintenance-copy {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  max-width: 43rem;
  min-width: 0;
}

.maintenance-copy h1 {
  max-width: 10ch;
  color: var(--grape-wine);
  font-size: clamp(3rem, 10vw, 5.8rem);
}

.maintenance-copy .lead {
  color: var(--grape-bordeaux);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
}

.maintenance-art {
  position: relative;
  min-height: min(64vw, 31rem);
  display: none;
  align-items: center;
  justify-content: center;
}

.seal-panel {
  width: clamp(18rem, 32vw, 27rem);
  aspect-ratio: 1 / 1.18;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 2.5rem 2.5rem;
  background: var(--grape-wine);
  box-shadow: 0 1.6rem 3.5rem -2rem var(--grape-shadow);
}

.seal-panel::after {
  position: absolute;
  width: clamp(16.8rem, 30vw, 25rem);
  aspect-ratio: 1;
  border: 1px solid var(--grape-coral);
  border-radius: 50%;
  content: "";
}

.seal-panel .mark {
  width: clamp(5.25rem, 10vw, 7.5rem);
  filter: invert(91%) sepia(16%) saturate(228%) hue-rotate(23deg) brightness(109%);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.45rem 1.8rem;
  border-top: 1px solid var(--grape-border);
  color: var(--grape-wine-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.preview-page {
  background: var(--grape-linen);
}

.preview-hero {
  padding-block: clamp(2.8rem, 6vw, 6.5rem) clamp(4rem, 8vw, 7.25rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: stretch;
  min-width: 0;
}

.hero-copy {
  display: grid;
  align-content: center;
  gap: clamp(1.3rem, 2vw, 1.8rem);
  min-width: 0;
}

.hero-copy h1 {
  max-width: 10ch;
  font-size: clamp(3.2rem, 8vw, 6.25rem);
}

.hero-copy .lead {
  color: var(--grape-bordeaux);
  font-size: clamp(1.04rem, 1.8vw, 1.22rem);
}

.hero-composition {
  position: relative;
  min-height: clamp(26rem, 55vw, 39rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--grape-blush);
  overflow: hidden;
}

.hero-composition::before {
  position: absolute;
  top: clamp(2.5rem, 8vw, 5rem);
  right: clamp(-2rem, -1vw, 0rem);
  width: clamp(14rem, 29vw, 22rem);
  height: clamp(20rem, 38vw, 30rem);
  border-radius: 9rem 9rem 1.75rem 1.75rem;
  background: var(--grape-wine);
  content: "";
}

.hero-composition::after {
  position: absolute;
  bottom: clamp(2.1rem, 5vw, 3rem);
  left: clamp(1.25rem, 5vw, 3.2rem);
  width: min(55%, 15rem);
  height: 1px;
  background: var(--grape-coral);
  content: "";
}

.composition-label {
  position: absolute;
  bottom: clamp(3.6rem, 8vw, 5.3rem);
  left: clamp(1.25rem, 5vw, 3.2rem);
  width: min(44%, 12.5rem);
  color: var(--grape-wine);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  line-height: 1.65;
  text-transform: uppercase;
}

.composition-mark {
  position: absolute;
  top: clamp(5.3rem, 12vw, 8.2rem);
  right: clamp(4.2rem, 9vw, 7.2rem);
  width: clamp(4.5rem, 8vw, 6rem);
  filter: invert(91%) sepia(16%) saturate(228%) hue-rotate(23deg) brightness(109%);
}

.composition-note {
  position: absolute;
  top: clamp(1.4rem, 4vw, 2.25rem);
  left: clamp(1.2rem, 4vw, 2.2rem);
  color: var(--grape-bordeaux);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  line-height: 1.1;
}

.manifesto {
  color: var(--grape-cream-yellow);
  background: var(--grape-wine);
}

.manifesto-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.6rem, 5vw, 4rem);
  padding-block: clamp(4rem, 8vw, 7rem);
  min-width: 0;
}

.manifesto .eyebrow {
  color: var(--grape-cream-yellow);
}

.manifesto h2 {
  max-width: 15ch;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
}

.manifesto-text {
  display: grid;
  align-content: end;
  gap: 1.3rem;
  color: var(--grape-cream-yellow);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
}

.paths {
  padding-block: clamp(4.25rem, 8vw, 7.5rem);
}

.paths-heading {
  display: grid;
  gap: 1.2rem;
  margin-bottom: clamp(2.7rem, 6vw, 4.75rem);
}

.paths-heading h2 {
  max-width: 12ch;
  font-size: clamp(2.35rem, 5vw, 4rem);
}

.path-list {
  border-top: 1px solid var(--grape-border);
}

.path {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  padding-block: clamp(1.45rem, 3vw, 2.3rem);
  border-bottom: 1px solid var(--grape-border);
  min-width: 0;
}

.path-number {
  color: var(--grape-coral);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.path h3 {
  font-size: clamp(1.65rem, 3vw, 2.35rem);
}

.path p {
  color: var(--grape-bordeaux);
}

.community {
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
  padding: clamp(2rem, 6vw, 5rem);
  border-radius: clamp(1.5rem, 4vw, 3rem);
  background: var(--grape-blush);
}

.community-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: end;
  min-width: 0;
}

.community h2 {
  max-width: 13ch;
  margin-top: 1.2rem;
  font-size: clamp(2.2rem, 5vw, 3.85rem);
}

.community-actions {
  display: grid;
  gap: 1.3rem;
}

.community-actions p {
  color: var(--grape-bordeaux);
}

.digital-card-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  color: var(--grape-cream-yellow);
  background: #3d0924;
}

.digital-card {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding:
    max(2.8rem, env(safe-area-inset-top))
    clamp(1.05rem, 5vw, 1.4rem)
    max(1.45rem, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% -4%, rgba(241, 103, 103, 0.13), transparent 38%),
    linear-gradient(155deg, var(--grape-wine) 0%, #530b30 100%);
  overflow: hidden;
}

.digital-card::after {
  content: none;
}

.card-logo {
  width: clamp(13.5rem, 64vw, 16.8rem);
  color: var(--grape-coral);
  display: block;
}

.card-logo svg {
  display: block;
  width: 100%;
  height: auto;
}

.card-logo svg path {
  fill: currentColor;
}

.card-identity {
  align-self: center;
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  padding-block: clamp(2.8rem, 9vh, 4.8rem) clamp(1.6rem, 5vh, 2.8rem);
  text-align: center;
}

.card-logo + h1 {
  margin-top: calc(clamp(1.8rem, 5vh, 3rem) + 120px);
}

.card-role {
  color: rgba(243, 245, 213, 0.75);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.5;
  text-transform: uppercase;
}

.card-identity h1 {
  color: var(--grape-cream-yellow);
  font-size: clamp(1.96rem, 8.8vw, 2.48rem);
  line-height: 0.98;
}

.card-title {
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.8rem;
  border: 1px solid rgba(241, 103, 103, 0.58);
  border-radius: var(--radius-pill);
  color: var(--grape-coral);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.24em;
}

.card-actions {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(243, 245, 213, 0.19);
}

.card-action {
  min-height: 6.25rem;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.65rem;
  border-radius: 1rem;
  color: var(--grape-cream-yellow);
  font-size: clamp(0.63rem, 2.9vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.45;
  text-align: center;
  text-transform: uppercase;
  transition:
    color 260ms var(--ease-out),
    background-color 260ms var(--ease-out),
    transform 260ms var(--ease-out);
}

.action-icon {
  width: 1.72rem;
  height: 1.72rem;
  opacity: 0.93;
}

.action-icon-store {
  filter: invert(94%) sepia(10%) saturate(302%) hue-rotate(21deg) brightness(105%);
}

.card-action:hover,
.card-action:focus-visible {
  color: var(--grape-coral);
  background: rgba(241, 103, 103, 0.1);
  transform: translateY(-2px);
}

.card-action:hover .action-icon,
.card-action:focus-visible .action-icon {
  filter: invert(61%) sepia(58%) saturate(1360%) hue-rotate(313deg) brightness(98%) contrast(93%);
}

.card-action:active {
  transform: translateY(1px);
}

@media (min-width: 48rem) {
  .maintenance-layout {
    grid-template-columns: minmax(25rem, 1fr) minmax(20rem, 0.8fr);
  }

  .maintenance-art {
    display: flex;
  }

  .hero-grid {
    grid-template-columns: minmax(22rem, 0.9fr) minmax(24rem, 1fr);
  }

  .manifesto-layout {
    grid-template-columns: minmax(21rem, 1.08fr) minmax(18rem, 0.78fr);
  }

  .path {
    grid-template-columns: 4rem minmax(14rem, 0.7fr) minmax(18rem, 0.8fr);
    align-items: baseline;
    gap: 1.2rem;
  }

  .community-layout {
    grid-template-columns: minmax(20rem, 1fr) minmax(17rem, 0.65fr);
  }
}

@media (min-width: 30rem) {
  .digital-card {
    width: min(100%, 27rem);
    min-height: min(54rem, calc(100dvh - 2.5rem));
    border-radius: 1.7rem;
    box-shadow: 0 1.6rem 4.25rem -2rem rgba(35, 4, 19, 0.6);
  }
}

@media (max-width: 40rem) {
  .shell {
    width: auto;
    max-width: none;
    margin-inline: 1rem;
  }

  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .nav-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 1.6rem;
  }

  .button-row .button {
    width: 100%;
  }

  .maintenance-copy,
  .hero-copy,
  .hero-composition,
  .manifesto-text,
  .path,
  .community-actions {
    width: 100%;
    max-width: calc(100vw - 2rem);
  }

  .site-footer {
    flex-direction: column;
  }
}

@media (hover: hover) {
  .hero-composition {
    transition: transform 400ms var(--ease-out);
  }

  .hero-composition:hover {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition: none !important;
    animation: none !important;
  }
}