/* ================================================================
   VOELLMIN — COMPONENTS.CSS v3.0
   ================================================================ */

/* Scroll progress */
#v-progress {
  position: fixed; top: 0; left: 0;
  height: 1px; width: 100%;
  transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, transparent, var(--gold) 40%, var(--gold-light));
  box-shadow: 0 0 12px var(--gold-glow);
  z-index: 9999; pointer-events: none;
}

/* Custom cursor */
#v-cursor-dot, #v-cursor-ring {
  display: none; position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 10000; border-radius: 50%;
  transform: translate(-50%,-50%); will-change: left, top;
}
#v-cursor-dot { width: 4px; height: 4px; background: var(--gold-light); }
#v-cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid rgba(191,160,80,0.4);
  transition: width .5s var(--ease-exp), height .5s var(--ease-exp), background .4s, border-color .4s, opacity .3s;
}
#v-cursor-ring.is-hover { width: 72px; height: 72px; background: rgba(191,160,80,0.05); border-color: var(--gold-light); }
#v-cursor-ring.is-click { width: 12px; height: 12px; opacity: .5; }

/* Preloader */
#v-loader {
  position: fixed; inset: 0; background: var(--void); z-index: 9100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(18px,3vh,30px); padding: 0 24px;
}
.loader-curtain {
  position: absolute; top: 0; height: 100%; width: 50%;
  background: var(--void); z-index: 9101; will-change: transform;
}
.loader-curtain--left  { left: 0; transform-origin: left; }
.loader-curtain--right { right: 0; transform-origin: right; }
.loader-name {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1rem,4.5vw,1.3rem); letter-spacing: 0.72em; color: var(--cream-55);
  opacity: 0; animation: fade-in 0.9s var(--ease-exp) 0.2s forwards;
}
.loader-sub {
  font-family: var(--mono); font-size: clamp(0.44rem,1.8vw,0.52rem);
  letter-spacing: 0.5em; text-transform: uppercase; color: var(--cream-14);
  opacity: 0; animation: fade-in 0.7s var(--ease-exp) 0.7s forwards;
}
@keyframes fade-in { to { opacity: 1; transform: none; } }
.loader-track { width: min(280px,68vw); height: 1px; background: rgba(191,160,80,0.1); position: relative; }
.loader-bar { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: linear-gradient(90deg, rgba(191,160,80,0.3), var(--gold-light)); box-shadow: 0 0 20px var(--gold-glow); }
.loader-pct { font-family: var(--mono); font-size: clamp(0.6rem,2.2vw,0.68rem); letter-spacing: 0.38em; color: var(--gold); align-self: flex-end; }

/* Navigation */
#v-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  padding: calc(clamp(14px,2.5vh,26px) + var(--safe-t)) calc(clamp(18px,4.5vw,72px) + var(--safe-r)) clamp(14px,2.5vh,26px) calc(clamp(18px,4.5vw,72px) + var(--safe-l));
  display: flex; align-items: center; justify-content: space-between;
  transition: backdrop-filter .6s var(--ease-smooth), background .6s var(--ease-smooth);
}
#v-nav.is-scrolled {
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  background: rgba(2,2,2,0.75);
}
#v-nav::after {
  content: ''; position: absolute; bottom: 0; left: 7%; right: 7%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-a22) 20%, var(--gold-a40) 50%, var(--gold-a22) 80%, transparent);
  opacity: 0; transition: opacity .8s;
}
#v-nav.is-scrolled::after { opacity: 1; }

.nav-logo { display: flex; align-items: center; gap: 12px; padding: 6px 0; flex-shrink: 0; }
.nav-logo__mark {
  position: relative; width: clamp(26px,5.5vw,32px); height: clamp(26px,5.5vw,32px);
  border: 1px solid var(--gold-a22); display: flex; align-items: center; justify-content: center;
  transition: border-color .4s; overflow: hidden;
}
.nav-logo__mark img { width: 90%; height: 90%; object-fit: contain; filter: brightness(0.85) saturate(0.7); }
.nav-logo:hover .nav-logo__mark { border-color: var(--gold); }
.nav-logo__name { font-family: var(--serif); font-style: italic; font-size: clamp(0.9rem,3vw,1.05rem); letter-spacing: 0.22em; color: var(--cream-80); transition: color .3s; }
.nav-logo:hover .nav-logo__name { color: var(--cream); }

.nav-links { display: none; gap: clamp(24px,4vw,52px); }
@media (min-width: 960px) { .nav-links { display: flex; align-items: center; } }
.nav-link {
  font-family: var(--mono); font-size: clamp(0.48rem,1.4vw,0.54rem); letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--cream-30); padding: 6px 0; position: relative; transition: color .35s;
}
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--gold); transition: width .4s var(--ease-exp); }
.nav-link:hover { color: var(--cream-80); }
.nav-link:hover::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: clamp(12px,3vw,24px); }
.nav-badge { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: clamp(0.4rem,1.3vw,0.46rem); letter-spacing: 0.36em; text-transform: uppercase; color: var(--cream-30); }
@media (max-width: 480px) { .nav-badge__text { display: none; } }
.nav-badge__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); animation: badge-pulse 3.5s ease-in-out infinite; }
@keyframes badge-pulse { 0%,100% { opacity:.2; box-shadow:0 0 0 0 var(--gold-a40); } 50% { opacity:1; box-shadow:0 0 0 4px rgba(191,160,80,0); } }

.nav-hamburger { display: flex; flex-direction: column; gap: 5px; padding: 10px; position: relative; z-index: 901; }
@media (min-width: 960px) { .nav-hamburger { display: none; } }
.nav-hamburger__line { display: block; width: 26px; height: 1px; background: var(--cream-55); transform-origin: center; transition: transform .45s var(--ease-exp), opacity .3s, background .3s; }
.nav-hamburger.is-open .nav-hamburger__line:nth-child(1) { transform: translateY(6px) rotate(45deg); background: var(--gold); }
.nav-hamburger.is-open .nav-hamburger__line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open .nav-hamburger__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); background: var(--gold); width: 26px !important; }
.nav-hamburger__line:nth-child(3) { width: 18px; }

/* Mobile menu */
#v-mobile-menu {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(2,2,2,0.97); backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: calc(100px + var(--safe-t)) clamp(28px,8vw,72px) calc(60px + var(--safe-b));
  gap: clamp(8px,2vh,16px); opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease-exp);
}
#v-mobile-menu.is-open { opacity: 1; pointer-events: all; }
.mobile-nav-item { overflow: hidden; padding: clamp(8px,1.5vh,14px) 0; border-bottom: 1px solid var(--edge); width: 100%; }
.mobile-nav-item:last-child { border-bottom: none; }
.mobile-nav-link { display: flex; align-items: baseline; gap: clamp(16px,4vw,32px); transform: translateY(110%); transition: transform .6s var(--ease-exp); }
#v-mobile-menu.is-open .mobile-nav-link { transform: translateY(0); }
#v-mobile-menu.is-open .mobile-nav-item:nth-child(1) .mobile-nav-link { transition-delay: .06s; }
#v-mobile-menu.is-open .mobile-nav-item:nth-child(2) .mobile-nav-link { transition-delay: .12s; }
#v-mobile-menu.is-open .mobile-nav-item:nth-child(3) .mobile-nav-link { transition-delay: .18s; }
#v-mobile-menu.is-open .mobile-nav-item:nth-child(4) .mobile-nav-link { transition-delay: .24s; }
#v-mobile-menu.is-open .mobile-nav-item:nth-child(5) .mobile-nav-link { transition-delay: .30s; }
#v-mobile-menu.is-open .mobile-nav-item:nth-child(6) .mobile-nav-link { transition-delay: .36s; }
.mobile-nav-num { font-family: var(--mono); font-size: clamp(0.44rem,1.5vw,0.5rem); letter-spacing: .32em; color: var(--gold-a40); flex-shrink: 0; }
.mobile-nav-title { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2.2rem,10vw,3.8rem); color: var(--cream-80); line-height: 1; }

/* BTT */
#v-btt {
  position: fixed; bottom: calc(clamp(20px,4vw,36px) + var(--safe-b)); right: calc(clamp(20px,4vw,36px) + var(--safe-r));
  width: clamp(46px,8vw,54px); height: clamp(46px,8vw,54px);
  border: 1px solid var(--gold-a22); display: flex; align-items: center; justify-content: center;
  color: var(--gold); z-index: 700; opacity: 0; transform: translateY(20px);
  transition: opacity .45s var(--ease-exp), transform .45s var(--ease-exp), background .3s, border-color .3s;
  background: rgba(2,2,2,0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
#v-btt.is-visible { opacity: 1; transform: translateY(0); }
@media (hover:hover) { #v-btt:hover { background: var(--gold-a12); border-color: var(--gold); } }

/* Ornament */
.v-orn { display: flex; align-items: center; justify-content: center; gap: 14px; padding: clamp(24px,5vh,64px) var(--pad-x); pointer-events: none; }
.v-orn__line { flex: 1; max-width: 220px; height: 1px; }
.v-orn__line--l { background: linear-gradient(90deg, transparent, var(--gold-a22)); }
.v-orn__line--r { background: linear-gradient(270deg, transparent, var(--gold-a22)); }
.v-orn__diamond { width: 5px; height: 5px; border: 1px solid rgba(191,160,80,0.6); transform: rotate(45deg); flex-shrink: 0; }
.v-orn__diamond--sm { width: 3px; height: 3px; border-color: rgba(191,160,80,0.3); }

/* Section label */
.v-section-label {
  display: flex; align-items: center; gap: 14px; font-family: var(--mono);
  font-size: clamp(0.52rem,1.5vw,0.62rem); letter-spacing: 0.48em; text-transform: uppercase;
  color: var(--gold); margin-bottom: clamp(18px,3.5vh,32px); opacity: 0;
  transition: opacity .8s var(--ease-exp);
}
.v-section-label.is-visible { opacity: 1; }
.v-section-label::before { content: ''; display: block; width: clamp(28px,5vw,48px); height: 1px; background: linear-gradient(90deg, var(--gold-a22), var(--gold)); flex-shrink: 0; }

/* Buttons */
.v-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: clamp(52px,8vh,62px); padding: 0 clamp(32px,5vw,56px);
  background: transparent; border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--mono); font-size: clamp(0.62rem,1.8vw,0.7rem); letter-spacing: 0.36em; text-transform: uppercase;
  position: relative; overflow: hidden;
  transition: color .45s var(--ease-exp), box-shadow .45s;
  touch-action: manipulation; flex-shrink: 0;
}
@media (max-width: 560px) { .v-btn { width: 100%; } }
.v-btn__fill { position: absolute; inset: 0; background: var(--gold); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease-cin); z-index: 0; }
@media (hover:hover) { .v-btn:hover .v-btn__fill { transform: scaleY(1); } .v-btn:hover { color: var(--void); box-shadow: 0 8px 70px rgba(191,160,80,0.32); } }
.v-btn__content { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.v-btn--ghost { border-color: var(--gold-a22); color: var(--cream-55); }
.v-btn--ghost .v-btn__fill { background: var(--gold-a12); }
@media (hover:hover) { .v-btn--ghost:hover { color: var(--cream-80); box-shadow: none; border-color: var(--gold-a40); } }
.v-btn__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: btn-pulse 2.2s ease-in-out infinite; flex-shrink: 0; }
@keyframes btn-pulse { 0%,100% { opacity:.35; transform:scale(0.85); } 50% { opacity:1; transform:scale(1); } }

/* Marquee */
.v-marquee { overflow: hidden; padding: clamp(36px,6vh,72px) 0; pointer-events: none; user-select: none; white-space: nowrap; }
.v-marquee__track { display: inline-flex; gap: clamp(48px,8vw,120px); align-items: center; animation: marquee-scroll 40s linear infinite; will-change: transform; }
.v-marquee--reverse .v-marquee__track { animation-direction: reverse; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
.v-marquee__word { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(3.5rem,10vw,9rem); color: transparent; -webkit-text-stroke: 1px rgba(191,160,80,0.1); line-height: 1; white-space: nowrap; }
.v-marquee__sep { width: 6px; height: 6px; border: 1px solid rgba(191,160,80,0.2); transform: rotate(45deg); flex-shrink: 0; }

/* Portal cards */
.portal-grid { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--edge); border: 1px solid var(--edge); }
@media (min-width: 700px) { .portal-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1300px) { .portal-grid { grid-template-columns: repeat(4,1fr); } }
.portal-card {
  background: var(--surface); padding: clamp(32px,5vw,64px) clamp(28px,4.5vw,52px);
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  gap: clamp(14px,2.5vh,22px); position: relative; overflow: hidden;
  opacity: 0; transform: translateY(40px);
  transition: background .55s, opacity .9s var(--ease-exp), transform .9s var(--ease-exp);
  min-height: clamp(280px,46vh,440px); touch-action: manipulation;
}
.portal-card.is-visible { opacity: 1; transform: translateY(0); }
.portal-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 20% 60%, rgba(191,160,80,0.08), transparent 70%); opacity: 0; transition: opacity .6s; }
.portal-card::after { content: ''; position: absolute; top: 0; left: 0; height: 1px; width: 0; background: linear-gradient(90deg, var(--gold), rgba(191,160,80,0)); transition: width .8s var(--ease-exp); }
@media (hover:hover) { .portal-card:not(.is-inactive):hover::before { opacity: 1; } .portal-card:not(.is-inactive):hover::after { width: 100%; } .portal-card:not(.is-inactive):hover { background: var(--lift); } }
.portal-card.is-inactive { opacity: 0.35 !important; pointer-events: none; }
.portal-card__num { font-family: var(--mono); font-size: clamp(0.44rem,1.6vw,0.5rem); letter-spacing: .4em; color: rgba(191,160,80,0.38); position: relative; z-index: 1; }
.portal-card__icon { width: clamp(40px,7.5vw,50px); height: clamp(40px,7.5vw,50px); border: 1px solid var(--gold-a22); display: flex; align-items: center; justify-content: center; color: var(--gold); transition: border-color .4s, background .4s; position: relative; z-index: 1; }
.portal-card__status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: clamp(0.38rem,1.3vw,0.42rem); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-a22); padding: 4px 10px; width: fit-content; position: relative; z-index: 1; }
.portal-card__status--soon { color: var(--cream-14); border-color: rgba(255,255,255,0.05); }
.portal-card__url { font-family: var(--mono); font-size: clamp(0.44rem,1.6vw,0.5rem); letter-spacing: .24em; color: var(--gold); position: relative; z-index: 1; }
.portal-card__name { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.6rem,5.5vw,2.8rem); color: var(--cream); line-height: 0.92; position: relative; z-index: 1; }
.portal-card__desc { font-family: var(--mono); font-size: clamp(0.6rem,1.9vw,0.68rem); line-height: 2.1; color: var(--cream-30); position: relative; z-index: 1; flex: 1; }
.portal-card__action { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; font-family: var(--mono); font-size: clamp(0.48rem,1.7vw,0.54rem); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); position: relative; z-index: 1; transition: gap .38s var(--ease-exp); }
@media (hover:hover) { .portal-card:hover .portal-card__action { gap: 18px; } }

/* Value cards */
.value-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--edge); }
@media (min-width: 600px) { .value-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .value-grid { grid-template-columns: repeat(3,1fr); } }
.value-card { background: var(--surface); padding: clamp(28px,5vw,56px) clamp(24px,4vw,44px); position: relative; overflow: hidden; opacity: 0; transform: translateY(28px); transition: background .4s, opacity .9s var(--ease-exp), transform .9s var(--ease-exp); }
.value-card.is-visible { opacity: 1; transform: none; }
@media (hover:hover) { .value-card:hover { background: var(--lift); } }
.value-card__bg-num { position: absolute; bottom: -20px; right: clamp(10px,3vw,24px); font-family: var(--serif); font-style: italic; font-size: clamp(4rem,12vw,8rem); color: rgba(191,160,80,0.04); line-height: 1; pointer-events: none; user-select: none; }
.value-card__icon { width: clamp(38px,7vw,46px); height: clamp(38px,7vw,46px); border: 1px solid var(--gold-a22); display: flex; align-items: center; justify-content: center; color: var(--gold); margin-bottom: clamp(16px,3vh,28px); }
.value-card__title { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.25rem,4vw,1.75rem); color: var(--cream); margin-bottom: clamp(10px,2vh,18px); line-height: 1.1; }
.value-card__desc { font-family: var(--mono); font-size: clamp(0.6rem,1.9vw,0.68rem); line-height: 2.1; color: var(--cream-30); }

/* Quick access */
.access-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px; }
@media (min-width: 640px)  { .access-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1000px) { .access-grid { grid-template-columns: repeat(5,1fr); } }
.access-item { padding: clamp(20px,4vh,42px) clamp(16px,3vw,30px); border: 1px solid var(--edge); background: var(--surface); text-decoration: none; color: inherit; opacity: 0; transform: translateY(24px); transition: border-color .4s, background .4s, opacity .9s var(--ease-exp), transform .9s var(--ease-exp); position: relative; min-height: clamp(110px,18vw,170px); touch-action: manipulation; }
.access-item.is-visible { opacity: 1; transform: none; }
@media (hover:hover) { .access-item:not([data-inactive]):hover { border-color: var(--gold-a22); background: var(--lift); } }
.access-item::after { content: '→'; position: absolute; right: clamp(12px,2.5vw,20px); bottom: clamp(12px,2.5vw,20px); font-family: var(--mono); font-size: .58rem; color: var(--gold); opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .35s var(--ease-exp); }
@media (hover:hover) { .access-item:not([data-inactive]):hover::after { opacity: 1; transform: translateX(0); } }
.access-item__num { font-family: var(--mono); font-size: clamp(0.5rem,1.6vw,0.58rem); letter-spacing: .3em; color: var(--gold); text-transform: uppercase; margin-bottom: clamp(8px,1.5vh,12px); }
.access-item__title { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem,3.8vw,1.3rem); font-weight: 300; color: var(--cream); line-height: 1.2; }
.access-item__url { font-family: var(--mono); font-size: clamp(0.5rem,1.6vw,0.58rem); letter-spacing: .14em; color: var(--cream-30); margin-top: clamp(8px,1.5vh,14px); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Contact */
.contact-link { display: flex; align-items: center; justify-content: space-between; padding: clamp(18px,3vh,28px); border: 1px solid var(--edge); background: var(--surface); text-decoration: none; color: inherit; transition: border-color .4s, background .4s; gap: 16px; }
@media (hover:hover) { .contact-link:hover { border-color: var(--gold-a22); background: var(--lift); } }
.contact-link__info { display: flex; flex-direction: column; gap: 5px; }
.contact-link__type { font-family: var(--mono); font-size: clamp(0.4rem,1.4vw,0.44rem); letter-spacing: .34em; color: var(--gold); text-transform: uppercase; }
.contact-link__val { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem,3.8vw,1.35rem); color: var(--cream-80); }
.contact-link__arrow { color: var(--gold); opacity: .45; flex-shrink: 0; transition: opacity .3s, transform .35s var(--ease-exp); }
@media (hover:hover) { .contact-link:hover .contact-link__arrow { opacity: 1; transform: translateX(5px); } }

/* Stats */
.stats-row { display: flex; gap: clamp(28px,6vw,72px); flex-wrap: wrap; margin-top: clamp(32px,5vh,56px); opacity: 0; transition: opacity .9s var(--ease-exp); }
.stats-row.is-visible { opacity: 1; }
.stat-item { flex: 1; min-width: 90px; }
.stat-item__num { display: block; font-family: var(--serif); font-style: italic; font-size: clamp(2.8rem,8vw,5rem); color: var(--gold); line-height: 1; margin-bottom: 8px; }
.stat-item__label { font-family: var(--mono); font-size: clamp(0.54rem,1.6vw,0.62rem); letter-spacing: .36em; text-transform: uppercase; color: var(--cream-30); }

/* Timeline */
.timeline { position: relative; padding-left: clamp(28px,8vw,90px); }
.timeline::before { content: ''; position: absolute; left: clamp(6px,2vw,22px); top: 8px; bottom: 8px; width: 1px; background: linear-gradient(to bottom, transparent, var(--gold-a22) 10%, var(--gold-a22) 90%, transparent); }
.timeline-item { position: relative; padding-bottom: clamp(40px,8vh,80px); opacity: 0; transform: translateX(-22px); transition: opacity .9s var(--ease-exp), transform .9s var(--ease-exp); }
.timeline-item.is-visible { opacity: 1; transform: none; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: calc(-1 * clamp(28px,8vw,90px) + clamp(2px,1.2vw,16px)); top: clamp(4px,1.2vh,10px); width: clamp(11px,2.2vw,15px); height: clamp(11px,2.2vw,15px); border: 1px solid var(--gold-a40); transform: rotate(45deg); background: var(--surface); box-shadow: 0 0 24px rgba(191,160,80,0.18); }
.timeline-item__year { font-family: var(--mono); font-size: clamp(0.58rem,1.8vw,0.68rem); letter-spacing: .44em; color: var(--gold); margin-bottom: 8px; }
.timeline-item__title { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.4rem,4.5vw,2.4rem); color: var(--cream); margin-bottom: 12px; line-height: 1.1; }
.timeline-item__desc { font-family: var(--mono); font-size: clamp(0.58rem,1.9vw,0.68rem); line-height: 2.2; color: var(--cream-30); max-width: 560px; }

/* H-scroll */
.h-scroll-track { display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 var(--pad-x); padding-left: calc(var(--pad-x) + var(--safe-l)); }
.h-scroll-track::-webkit-scrollbar { display: none; }
.h-scroll-card { flex: 0 0 clamp(270px,72vw,390px); background: var(--lift); border: 1px solid var(--edge); padding: clamp(28px,5vw,52px) clamp(24px,4vw,42px); scroll-snap-align: start; position: relative; overflow: hidden; min-height: 300px; display: flex; flex-direction: column; gap: 16px; opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-exp), transform .9s var(--ease-exp); }
.h-scroll-card.is-visible { opacity: 1; transform: none; }
.h-scroll-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--gold-a22), transparent); }
.h-scroll-card__num { font-family: var(--mono); font-size: clamp(0.4rem,1.5vw,0.46rem); letter-spacing: .4em; color: rgba(191,160,80,0.32); }
.h-scroll-card__title { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.4rem,4.5vw,2.1rem); color: var(--cream); line-height: 1.05; flex-shrink: 0; }
.h-scroll-card__body { font-family: var(--mono); font-size: clamp(0.6rem,1.9vw,0.68rem); line-height: 2.1; color: var(--cream-30); flex: 1; }
.h-scroll-card__tag { font-family: var(--mono); font-size: clamp(0.4rem,1.5vw,0.46rem); letter-spacing: .3em; color: var(--gold); text-transform: uppercase; margin-top: auto; }
.h-scroll-hint { display: flex; align-items: center; gap: 10px; padding: clamp(14px,2.5vh,22px) var(--pad-x); font-family: var(--mono); font-size: clamp(0.4rem,1.4vw,0.44rem); letter-spacing: .4em; color: var(--cream-30); animation: hint-slide 2s ease-in-out infinite; }
@media (min-width: 960px) { .h-scroll-hint { display: none; } }
@keyframes hint-slide { 0%,100% { opacity:.4; } 50% { opacity:.8; } }

/* Form */
.v-form { display: flex; flex-direction: column; gap: clamp(14px,2.5vh,22px); }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-label { font-family: var(--mono); font-size: clamp(0.52rem,1.6vw,0.6rem); letter-spacing: .36em; text-transform: uppercase; color: var(--cream-30); }
.form-input, .form-textarea { width: 100%; background: rgba(255,255,255,0.025); border: 1px solid var(--edge); color: var(--cream); font-family: var(--mono); font-size: clamp(0.68rem,2vw,0.78rem); padding: clamp(12px,2.2vh,18px) clamp(14px,2.5vw,20px); outline: none; transition: border-color .35s, background .35s; resize: none; -webkit-appearance: none; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--cream-14); }
.form-input:focus, .form-textarea:focus { border-color: var(--gold-a40); background: rgba(191,160,80,0.028); }
.form-textarea { height: clamp(100px,18vh,140px); }

/* Footer */
.v-footer { border-top: 1px solid var(--edge); padding: clamp(48px,8vh,88px) var(--pad-x); padding-bottom: max(clamp(48px,8vh,88px), calc(48px + var(--safe-b))); padding-left: calc(var(--pad-x) + var(--safe-l)); padding-right: calc(var(--pad-x) + var(--safe-r)); }
.footer-top { display: grid; grid-template-columns: 1fr; gap: clamp(32px,5vh,52px); margin-bottom: clamp(32px,5vh,52px); padding-bottom: clamp(32px,5vh,52px); border-bottom: 1px solid var(--edge); }
@media (min-width: 760px) { .footer-top { grid-template-columns: 1fr auto 1fr; align-items: start; } }
.footer-brand__name { font-family: var(--serif); font-style: italic; font-size: clamp(0.95rem,3vw,1.05rem); letter-spacing: .14em; color: var(--cream-55); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.footer-brand__tagline { font-family: var(--mono); font-size: clamp(0.5rem,1.5vw,0.58rem); letter-spacing: .28em; line-height: 2.1; color: var(--cream-14); }
.footer-center { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.footer-center__badge { width: clamp(32px,6vw,40px); height: clamp(32px,6vw,40px); border: 1px solid var(--gold-a12); display: flex; align-items: center; justify-content: center; color: rgba(191,160,80,0.25); }
.footer-center__copy { font-family: var(--mono); font-size: clamp(0.5rem,1.5vw,0.58rem); letter-spacing: .3em; text-transform: uppercase; color: rgba(238,234,226,0.14); text-align: center; line-height: 2; }
.footer-links { display: flex; flex-direction: column; gap: clamp(4px,1vh,8px); }
.footer-link { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: clamp(0.52rem,1.6vw,0.6rem); letter-spacing: .26em; text-transform: uppercase; color: var(--cream-30); padding: 5px 0; transition: color .35s; min-height: 44px; }
@media (hover:hover) { .footer-link:hover { color: var(--gold); } }
.footer-link__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: .28; transition: opacity .35s; flex-shrink: 0; }
@media (hover:hover) { .footer-link:hover .footer-link__dot { opacity: 1; } }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.footer-legal { font-family: var(--mono); font-size: clamp(0.48rem,1.4vw,0.54rem); letter-spacing: .26em; text-transform: uppercase; color: rgba(238,234,226,0.1); }
.footer-version { font-family: var(--mono); font-size: clamp(0.48rem,1.4vw,0.54rem); letter-spacing: .3em; color: rgba(191,160,80,0.18); }