/* Editorial non-linear typography layout */

:root { --ed-headline-scale: 12rem; }

.page-section { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 6rem 1.25rem; }
.page-section .content { position: relative; z-index: 2; max-width: 1200px; width: 100%; }
.parallax-bg { position: absolute; inset: -10vh 0 -10vh 0; background-size: cover; background-position: center; z-index: 1; will-change: transform; }

.headline-large, .big-text { font-size: clamp(3rem, 8vw, var(--ed-headline-scale)); line-height: 0.9; font-weight: 900; letter-spacing: -0.02em; }
.headline-medium { font-size: clamp(1.75rem, 5.2vw, 4rem); line-height: 1; font-weight: 900; letter-spacing: -0.015em; }
.kicker { text-transform: uppercase; letter-spacing: .2em; font-weight: 700; opacity: .85; }
.micro-text, .side-note { font-size: clamp(.625rem, 1.8vw, .875rem); opacity: .8; max-width: 40ch; line-height: 1.35; }
.side-note { position: absolute; right: 1rem; top: 1rem; transform: rotate(-6deg); transform-origin: top right; }
.corner-note { position: absolute; left: 1rem; bottom: 1rem; font-size: clamp(.6rem, 1.6vw, .8rem); opacity: .75; }

/* Hover micro-interactions (motion-safe) */
@media (prefers-reduced-motion: no-preference) {
  .hover-tilt { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  .hover-tilt:hover { transform: translateY(-2px) skewY(-1deg) scale(1.01); }
}

/* Accessibility & contrast helpers */
.ed-on-dark { color: #f2f2f2; }
.ed-on-dark .micro-text { color: #d1d5db; }
.ed-on-dark a { color: #ff1e1e; text-decoration: underline; text-underline-offset: 2px; }

/* Responsive stacking for small text clusters */
.inline-cluster { display: flex; gap: .75rem; flex-wrap: wrap; align-items: baseline; }
@media (max-width: 640px) {
  .side-note { position: static; transform: none; margin-top: .75rem; }
  .corner-note { position: static; margin-top: 1rem; }
}

/* Initial animation states (progressively enhanced) */
.will-animate { will-change: transform, opacity; }
.from-below { transform: translateY(120px); opacity: 0; }
.from-near { transform: translateY(20px); opacity: 0; }

/* Tech stack pinned sequence */
.tech-sequence { position: relative; min-height: 60vh; display: grid; place-items: center; overflow: hidden; }
.tech-item { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(50px); }
.tech-item .tech-label { font-size: clamp(2rem, 9vw, 6.5rem); line-height: .95; font-weight: 900; letter-spacing: -0.02em; text-align: center; }
.tech-item .tech-sub { margin-top: .5rem; font-size: clamp(.8rem, 2.1vw, 1rem); opacity: .8; text-align: center; }
@media (max-width: 640px){ 
  .tech-sequence { min-height: 50vh; } 
  .ed-list { gap: 1.5rem; }
  .tech-item .tech-label { font-size: clamp(1.5rem, 8vw, 3rem); }
}

/* Grouped chips for categories */
.tech-chips { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .5rem .6rem; justify-content: center; }
.tech-chip { padding: .35rem .6rem; border: 1px solid rgba(255,30,30,.45); border-radius: 9999px; font-size: clamp(.65rem, 1.9vw, .9rem); color: #f2f2f2; background: rgba(255,30,30,.06); backdrop-filter: blur(2px); }

/* Editorial list mapping for projects */
.ed-list { display: grid; gap: 2.5rem; }
@media (min-width: 768px){ .ed-list { gap: 3rem; } }
.ed-item { position: relative; padding-block: .25rem; display:flex; gap:1rem; align-items: center; }
.ed-item .big-text { font-size: clamp(1.6rem, 4.8vw, 4rem); line-height: .98; }
.project-title { font-size: clamp(1.25rem, 3.2vw, 2.5rem); line-height: 1; font-weight: 800; letter-spacing: -0.01em; }
.ed-item .meta { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.35rem; }
.ed-item .meta a { color:#ff1e1e; text-decoration: underline; text-underline-offset: 2px; }

/* Icon treatment */
.icon-wrap { width: 72px; height: 72px; border-radius: 9999px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid rgba(255,30,30,.45); background: radial-gradient(ellipse at center, rgba(255,30,30,.08), rgba(0,0,0,0) 60%); box-shadow: 0 0 24px rgba(255,30,30,.15) inset; }
.icon-wrap svg { width: 36px; height: 36px; stroke: #ff1e1e; stroke-width: 1.6; fill: none; }

/* Staggered rhythm */
.ed-item--alt { justify-content: flex-end; text-align: right; }
.ed-item--alt .icon-wrap { order: 2; }
.ed-item--alt .meta { justify-content: flex-end; }

/* Size rhythm variations */
.ed-item:nth-child(3n) .big-text { font-size: clamp(1.5rem, 4.2vw, 3.2rem); }
.ed-item:nth-child(4n) .big-text { font-size: clamp(1.8rem, 4.8vw, 3.6rem); }