/* quirk.one */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #f8f8f8; color: #111111; font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.6; }
.stack { display: flex; align-items: flex-start; justify-content: center; gap: 2rem; padding: 6rem 2rem 4rem; position: relative; }
.letter-column { display: flex; flex-direction: column; align-items: center; }
.letter { font-family: 'Work Sans', sans-serif; line-height: 1; }
.one-rotated { font-family: 'Work Sans', sans-serif; font-weight: 900; font-size: 2rem; color: #7c3aed; writing-mode: vertical-rl; text-orientation: mixed; align-self: center; letter-spacing: 0.05em; }
.cross { max-width: 700px; margin: 0 auto; padding: 4rem 2rem; }
.cross-row { display: flex; align-items: flex-start; gap: 2rem; margin-bottom: 3rem; }
.cross-row.reverse { flex-direction: row-reverse; }
.vertical-text { writing-mode: vertical-rl; text-orientation: mixed; font-family: 'Cormorant', serif; font-style: italic; font-size: 1.1rem; color: #7c3aed; letter-spacing: 0.05em; }
.cross-content { flex: 1; }
.big-word { font-family: 'Work Sans', sans-serif; font-weight: 900; font-size: 96px; display: block; line-height: 1; margin-bottom: 0.5rem; }
.big-word.pink { color: #ec4899; }
.small-desc { font-size: 14px; color: #a3a3a3; max-width: 360px; }
.pink-bracket { font-family: 'Work Sans', sans-serif; font-weight: 200; font-size: 160px; color: #ec4899; line-height: 1; text-align: center; margin: 1rem 0; }
.turn { max-width: 700px; margin: 0 auto; padding: 4rem 2rem; position: relative; border-top: 1px solid #d4d4d4; }
.rotated-block { transform: rotate(-90deg); transform-origin: left top; margin-left: 3rem; margin-bottom: -2rem; }
.rotated-title { font-family: 'Cormorant', serif; font-style: italic; font-size: clamp(1.2rem, 3vw, 1.6rem); color: #7c3aed; white-space: nowrap; }
.turn-content { padding-left: 4rem; }
.turn-text { font-size: 0.9rem; color: #111111; max-width: 400px; margin-bottom: 1rem; }
.error-label { font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 0.7rem; color: #ec4899; letter-spacing: 0.1em; }
.land { text-align: center; padding: 4rem 2rem 6rem; border-top: 1px solid #d4d4d4; }
.land-brand { font-family: 'Work Sans', sans-serif; font-weight: 400; font-size: 1rem; color: #a3a3a3; margin-bottom: 0.5rem; }
.pink-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ec4899; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }