html { scroll-behavior: smooth; }
body { background:#fdfcfb; color:#1a3a5f; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
.bg-horizon { background: radial-gradient(1200px 600px at 50% -10%, rgba(201,162,73,.18), transparent 60%), radial-gradient(900px 500px at 80% 20%, rgba(74,102,140,.15), transparent 65%), linear-gradient(180deg, #eef4f9 0%, #fdfcfb 45%, #d8e3ed 100%); background-attachment: fixed; }
.font-display { font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; letter-spacing: -.02em; }
.font-serif { font-family: "Cormorant Garamond", ui-serif, Georgia, serif; }
.font-mono { font-family: ui-monospace, "JetBrains Mono", Menlo, monospace; }
.hero-img-static { transform: scale(1.05); transform-origin: center center; }
.hero-radial { background: radial-gradient(ellipse at center, transparent 0%, transparent 58%, rgba(17,39,68,.22) 100%); }
.hero-fade { background: linear-gradient(to bottom, transparent, rgba(253,252,251,.7), #fdfcfb); }
.logo-glow { filter: drop-shadow(0 0 36px rgba(253,252,251,.62)); }
.scroll-shadow { text-shadow: 0 1px 2px rgba(255,255,255,.6); }
.bg-gradient-line { background: linear-gradient(to bottom, rgba(17,39,68,.7), rgba(17,39,68,.3), transparent); }
.bg-footer-line { background: linear-gradient(to right, transparent, rgba(26,58,95,.15), transparent); }
.shadow-knot { box-shadow: 0 0 0 2px #e3c989, 0 2px 4px rgba(0,0,0,.25); }
.shadow-card-preview { box-shadow: 0 30px 80px -40px rgba(26,58,95,.45); }
.shadow-card-preview:hover { box-shadow: 0 40px 100px -30px rgba(26,58,95,.55); }
.shadow-caption-preview { box-shadow: 0 8px 24px -12px rgba(26,58,95,.25); }
.hero-fade-in { animation: hero-fade-in .95s cubic-bezier(.16,1,.3,1); }
.nav-dot-label { opacity:0; }
.nav-dot.is-active .nav-dot-label, .nav-dot:hover .nav-dot-label { opacity:.8; }
.nav-dot-bullet { background: rgba(26,58,95,.25); }
.nav-dot:hover .nav-dot-bullet { background: rgba(26,58,95,.6); }
.nav-dot.is-active .nav-dot-bullet { background:#c9a249; transform: scale(1.25); }
.reveal { opacity:0; transform:translateY(30px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in-view { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.12s; }
.reveal-delay-2 { transition-delay:.24s; }
.rope-bg { background-image:url('/assets/rope.webp'); background-repeat:repeat-y; background-size:100% auto; filter:drop-shadow(0 6px 10px rgba(40,24,8,.25)); }
.scroll-top-btn { opacity:0; transform:translateY(.75rem); pointer-events:none; }
.scroll-top-btn.is-visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.prose-shell { color:#4a668c; line-height:1.75; }
.prose-shell h2 { font-family:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; letter-spacing:-.02em; font-size:1.5rem; line-height:2rem; color:#1a3a5f; margin:2.5rem 0 .75rem; }
.prose-shell p, .prose-shell ul { margin: 0 0 1rem; }
.prose-shell ul { padding-left: 1.25rem; }
.prose-shell a { color:#1a3a5f; text-decoration:underline; }
.prose-shell a:hover { color:#c9a249; }
.tile-image:hover { transform: translateY(-.25rem); }
.tile-image img { transition: transform 1.4s ease-out; }
.tile-image:hover img { transform: scale(1.04); }
.tile-image:hover .tile-overlay { opacity:.2; }
.tile-outer, .tile-inner { transform-origin: top center; }
.tile-outer.pause, .tile-inner.pause { animation-play-state: paused; }
@keyframes hero-fade-in { from { opacity:0; transform:scale(.97);} to { opacity:1; transform:scale(1);} }
@keyframes scroll-hint { 0% { transform: scaleY(.2); transform-origin:top; opacity:.2; } 50% { transform:scaleY(1); opacity:1; } 100% { transform:scaleY(.2); transform-origin:bottom; opacity:.2; } }
.animate-scroll-hint { animation: scroll-hint 2.6s ease-in-out infinite; }
@keyframes float-wave-a { 0% { transform: translate3d(0,0,0) rotate(-1.1deg);} 25% { transform: translate3d(2px,-6px,0) rotate(.6deg);} 55% { transform: translate3d(-3px,4px,0) rotate(-.4deg);} 80% { transform: translate3d(1px,-3px,0) rotate(1deg);} 100% { transform: translate3d(0,0,0) rotate(-1.1deg);} }
@keyframes float-wave-b { 0% { transform: translate3d(0,0,0) rotate(.9deg);} 30% { transform: translate3d(-2px,5px,0) rotate(-.7deg);} 60% { transform: translate3d(3px,-4px,0) rotate(.5deg);} 85% { transform: translate3d(-1px,3px,0) rotate(-1.2deg);} 100% { transform: translate3d(0,0,0) rotate(.9deg);} }
@keyframes float-wave-c { 0% { transform: translate3d(0,0,0) rotate(-.6deg);} 28% { transform: translate3d(3px,4px,0) rotate(.9deg);} 62% { transform: translate3d(-2px,-5px,0) rotate(-.8deg);} 88% { transform: translate3d(2px,2px,0) rotate(.4deg);} 100% { transform: translate3d(0,0,0) rotate(-.6deg);} }
@keyframes float-wave-d { 0% { transform: translate3d(0,0,0) rotate(.4deg);} 33% { transform: translate3d(-3px,-4px,0) rotate(-.9deg);} 66% { transform: translate3d(2px,5px,0) rotate(.7deg);} 100% { transform: translate3d(0,0,0) rotate(.4deg);} }
@keyframes float-wave-e { 0% { transform: translate3d(0,0,0) rotate(-.9deg);} 22% { transform: translate3d(2px,5px,0) rotate(.8deg);} 58% { transform: translate3d(-3px,-3px,0) rotate(-.5deg);} 82% { transform: translate3d(1px,4px,0) rotate(1deg);} 100% { transform: translate3d(0,0,0) rotate(-.9deg);} }
.animate-float-wave-a { animation: float-wave-a 8.7s ease-in-out infinite; }
.animate-float-wave-b { animation: float-wave-b 11.3s ease-in-out infinite; }
.animate-float-wave-c { animation: float-wave-c 9.7s ease-in-out infinite; }
.animate-float-wave-d { animation: float-wave-d 12.1s ease-in-out infinite; }
.animate-float-wave-e { animation: float-wave-e 10.3s ease-in-out infinite; }
@keyframes sway-outer-drift { 0% { transform: rotate(-1.4deg) translate3d(-3px,0,0);} 25% { transform: rotate(.9deg) translate3d(2px,-2px,0);} 55% { transform: rotate(-.6deg) translate3d(3px,1px,0);} 78% { transform: rotate(1.6deg) translate3d(-1px,2px,0);} 100% { transform: rotate(-1.4deg) translate3d(-3px,0,0);} }
@keyframes sway-outer-roll { 0% { transform: rotate(1.2deg) translate3d(2px,1px,0);} 30% { transform: rotate(-1.1deg) translate3d(-3px,-1px,0);} 62% { transform: rotate(.8deg) translate3d(1px,2px,0);} 85% { transform: rotate(-1.5deg) translate3d(3px,0,0);} 100% { transform: rotate(1.2deg) translate3d(2px,1px,0);} }
@keyframes sway-inner-bob { 0% { transform: rotate(.7deg) translate3d(0,1px,0);} 33% { transform: rotate(-.9deg) translate3d(2px,-1px,0);} 67% { transform: rotate(.5deg) translate3d(-2px,2px,0);} 100% { transform: rotate(.7deg) translate3d(0,1px,0);} }
@keyframes sway-inner-flutter { 0% { transform: rotate(-.8deg) translate3d(1px,0,0);} 40% { transform: rotate(1deg) translate3d(-1px,1px,0);} 72% { transform: rotate(-.4deg) translate3d(2px,-1px,0);} 100% { transform: rotate(-.8deg) translate3d(1px,0,0);} }
.animate-sway-outer-a { animation: sway-outer-drift 13.7s ease-in-out infinite; }
.animate-sway-outer-b { animation: sway-outer-roll 17.3s ease-in-out infinite; }
.animate-sway-outer-c { animation: sway-outer-drift 19.1s ease-in-out infinite reverse; }
.animate-sway-outer-d { animation: sway-outer-roll 14.9s ease-in-out infinite reverse; }
.animate-sway-outer-e { animation: sway-outer-drift 21.7s ease-in-out infinite; }
.animate-sway-outer-f { animation: sway-outer-roll 16.1s ease-in-out infinite; }
.animate-sway-inner-a { animation: sway-inner-bob 6.3s ease-in-out infinite; }
.animate-sway-inner-b { animation: sway-inner-flutter 7.7s ease-in-out infinite; }
.animate-sway-inner-c { animation: sway-inner-flutter 5.9s ease-in-out infinite reverse; }
.animate-sway-inner-d { animation: sway-inner-bob 8.1s ease-in-out infinite reverse; }
.animate-sway-inner-e { animation: sway-inner-bob 6.7s ease-in-out infinite; }
.animate-sway-inner-f { animation: sway-inner-flutter 7.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal { opacity:1 !important; transform:none !important; }
  .scroll-top-btn { opacity:1 !important; transform:none !important; pointer-events:auto !important; }
}