/* Relay column: the rotating cylinder of project photos and records beside the intro heading. */
.mono-s { font-family: var(--mono); font-stretch: 112.5%; font-variation-settings: "wdth" 112.5; text-transform: uppercase; letter-spacing: .07em; font-weight: 400; }
.cyl { position: relative; width: 100%; height: 640px; perspective: 1500px; perspective-origin: 50% 46%; user-select: none; }
.cyl-scene { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-6deg); }
.cyl-row { position: absolute; left: 0; top: 0; transform-style: preserve-3d; will-change: transform; }
.cyl-card { position: absolute; left: 0; top: 0; transform-style: flat; }
.cyl-face { position: absolute; inset: 0; border-radius: var(--cr, 14px); overflow: hidden; will-change: opacity, transform; backface-visibility: visible; }
.cyl-face.flip { transform: scaleX(-1); }
.cyl-face.b1 { filter: blur(.8px); } .cyl-face.b2 { filter: blur(1.6px); } .cyl-face.b3 { filter: blur(2.6px); } .cyl-face.b4 { filter: blur(3.6px); } .cyl-face.b5 { filter: blur(4.6px); }
.cyl-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cyl-face .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22% 9% 8%; background: linear-gradient(to top, rgba(45,32,35,.62), rgba(45,32,35,0)); color: var(--pale); font-size: var(--fs-s); }
.cyl-data { width: 100%; height: 100%; box-sizing: border-box; padding: 11% 10%; display: flex; flex-direction: column; background: #FBFAF6; border: 1px solid rgba(169,165,149,.5); border-radius: inherit; }
.cyl-data.dark { background: var(--carbon); border-color: var(--carbon); color: var(--pale); }
.cyl-data.lime { background: var(--limestone); border-color: var(--limestone); }
.cyl-data .k { font-size: var(--fs-s); color: var(--oxide-deep); display: flex; align-items: center; gap: .6em; }
.cyl-data.dark .k { color: var(--fleck); }
.cyl-data .k i { width: .7em; height: .7em; border-radius: 50%; background: var(--oxide-deep); flex: none; }
.cyl-data.dark .k i { background: var(--coral); }
.cyl-data .v { margin-top: auto; font-size: var(--fs-l); line-height: 1.12; font-weight: 600; letter-spacing: -.025em; }
.cyl-data .m { margin-top: .5em; font-size: var(--fs-s); opacity: .66; }
.cyl-data .bar { margin-top: 1em; height: 3px; background: rgba(169,165,149,.4); border-radius: 2px; overflow: hidden; }
.cyl-data .bar span { display: block; height: 100%; background: var(--oxide-deep); border-radius: 2px; }
.cyl-data.dark .bar { background: rgba(198,197,191,.22); } .cyl-data.dark .bar span { background: var(--coral); }
.cyl-data .gates { margin-top: 1em; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cyl-data .gates span { height: 4px; border-radius: 2px; background: rgba(169,165,149,.45); }
.cyl-data .gates span.on { background: var(--oxide-deep); }
.cyl-data.dark .gates span { background: rgba(198,197,191,.25); } .cyl-data.dark .gates span.on { background: var(--coral); }
.cyl-ring { position: absolute; left: 0; top: 0; transform-style: preserve-3d; will-change: transform; }
.cyl-hoop { position: absolute; left: 0; top: 0; border-radius: 50%; border: 1px solid rgba(45,32,35,.22); }
.cyl-tag { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: var(--fs-t); color: var(--carbon); }
.cyl-tag span { display: flex; align-items: center; gap: 7px; padding: 5px 9px; background: var(--pale); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(169,165,149,.5); }
.cyl-tag i { width: 5px; height: 5px; border-radius: 50%; background: var(--oxide-deep); }
.cyl-tag.flip span { transform: scaleX(-1); }
.cyl-floor { position: absolute; left: 14%; right: 14%; bottom: 1%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(45,32,35,.16), rgba(45,32,35,0)); }
.cyl-anchor { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: min(244px, 66%); box-sizing: border-box; padding: 15px 17px 14px; border-radius: 14px; color: var(--pale); background: rgba(45,32,35,.94); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 30px 60px -26px rgba(45,32,35,.6), inset 0 0 0 1px rgba(244,242,234,.08); }
.cyl-anchor .t { display: flex; align-items: center; gap: 10px; }
.cyl-anchor .t svg { flex: none; }
.cyl-anchor .t b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.cyl-anchor .t small { display: block; font-size: 9.5px; color: var(--fleck); margin-top: 3px; }
.cyl-anchor .tick { margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(198,197,191,.2); display: flex; align-items: flex-start; gap: 10px; color: var(--limestone); min-height: 34px; }
.cyl-anchor .tick i { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); flex: none; margin-top: 4px; }
.cyl-anchor .tick small { display: block; font-size: 9px; color: var(--fleck); }
.cyl-anchor .tick em { display: block; font-style: normal; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--pale); margin-top: 3px; }
.cyl-anchor .tick span { min-width: 0; transition: opacity .35s, transform .35s; }
.cyl-anchor .tick span.out { opacity: 0; transform: translateY(4px); }
@media (max-width: 520px) { .cyl-anchor { width: 58%; padding: 10px 12px; border-radius: 11px; } .cyl-anchor .t { gap: 8px; } .cyl-anchor .t svg { width: 24px; height: 24px; } .cyl-anchor .t b { font-size: 14px; } .cyl-anchor .t small { font-size: 8px; } .cyl-anchor .tick { margin-top: 8px; padding-top: 7px; font-size: 8px; } }