/* ==========================================================================
   Production partner — Ragalhães section on the Selfie home (.rgx)
   Mirror of the "Selfie" section on ragalhaes.com: the paper page sinks into
   Ragalhães' night navy and rises back. Ragalhães identity inside:
   navy #0B2D53 · night #06121F · ocean tint #9BBDE4 · dusk gradient (gold → sunset → Selfie orange)
   Archivo wide · JetBrains Mono · camera viewfinder (REC, timecode, corner brackets).
   ========================================================================== */
.rgx {
  --rg-night: #06121F; --rg-night-2: #0A1C31; --rg-navy: #0B2D53; --rg-ocean: #3B6EA8; --rg-sky: #5B9BD5;
  --rg-ice: #9BBDE4; --rg-paper: #F4F2EE; --rg-dim: #8DA0B8; --rg-line: rgba(155,189,228,.18);
  --rg-dusk: linear-gradient(90deg, #F4B000 0%, #FF8A3D 55%, #FF4E2A 100%);
  --rg-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--rg-night); color: var(--rg-paper);
}
.rgx .label { color: var(--rg-ice); }
.rgx .wrap { position: relative; }

/* entering / leaving: Selfie paper ⇄ Ragalhães night */
.rgx-in { height: clamp(220px, 26vw, 360px); background: linear-gradient(180deg, var(--paper, #F7F2EF) 0%, #E7EBEF 16%, #9BB4CF 40%, var(--rg-ocean) 58%, var(--rg-navy) 78%, var(--rg-night) 100%); display: flex; align-items: flex-start; }
.rgx-in .wrap { width: 100%; padding-top: 28px; }
.rgx-in .label { color: var(--muted, #6E6661); }
.rgx-out { height: clamp(220px, 26vw, 360px); margin-top: clamp(72px, 8vw, 120px); background: linear-gradient(0deg, var(--paper, #F7F2EF) 0%, #E7EBEF 16%, #9BB4CF 40%, var(--rg-ocean) 58%, var(--rg-navy) 78%, var(--rg-night) 100%); }

/* top: logo + HUD */
.rgx-top { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; padding: clamp(20px, 3vw, 36px) 0 clamp(18px, 2.4vw, 28px); border-bottom: 1px solid var(--rg-line); }
.rgx-logo { height: clamp(30px, 3.4vw, 44px); width: auto; display: block; }
.rgx-hud { display: flex; gap: 10px 24px; flex-wrap: wrap; align-items: center; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rg-ice); }
.rgx-hud b { font-weight: 500; color: var(--rg-paper); }
.rgx-rec { display: inline-flex; align-items: center; gap: 8px; color: var(--rg-paper); font-variant-numeric: tabular-nums; }
.rgx-rec i, .rgx-cam i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange, #FF4E2A); animation: rgx-blink 1.2s steps(2) infinite; }
@keyframes rgx-blink { 50% { opacity: .15; } }

/* marquee */
.rgx-marq { overflow: hidden; border-bottom: 1px solid var(--rg-line); padding: clamp(14px, 1.6vw, 20px) 0; }
.rgx-marq-t { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px); width: max-content; animation: rgx-marq 46s linear infinite; }
.rgx-marq span { font-family: var(--rg-display); font-variation-settings: "wdth" 118; font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 2.2rem); letter-spacing: -.02em; white-space: nowrap; color: var(--rg-paper); }
.rgx-marq span.o { color: var(--rg-ice); font-weight: 500; }
.rgx-marq i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange, #FF4E2A); flex: none; }
@keyframes rgx-marq { to { transform: translateX(-50%); } }

/* headline */
.rgx-head { display: grid; gap: 28px 64px; align-items: end; padding: clamp(64px, 8vw, 120px) 0 clamp(36px, 4vw, 56px); }
@media (min-width: 960px) { .rgx-head { grid-template-columns: 1.15fr .85fr; } }
.rgx-h { font-family: var(--rg-display); font-variation-settings: "wdth" 125; font-weight: 800; font-size: clamp(3rem, 7.6vw, 7rem); line-height: .9; letter-spacing: -.035em; color: var(--rg-paper); }
.rgx-h em { font-style: normal; background: var(--rg-dusk); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-right: .04em; }
.rgx-intro { display: grid; gap: 14px; max-width: 46ch; }
.rgx-sub { font-family: var(--rg-display); font-variation-settings: "wdth" 110; font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: var(--rg-paper); }
.rgx-intro p:not(.rgx-sub) { color: rgba(244,242,238,.72); }
.rgx-intro b { color: var(--rg-paper); }

/* films board (built from the shared feed) */
.rgx-board .board { margin-top: 0; }
.rgx .film { border-color: var(--rg-line); }

/* ecosystem: R / S + photo frames */
.rgx-eco { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; margin-top: clamp(80px, 9vw, 130px); }
@media (min-width: 960px) { .rgx-eco { grid-template-columns: .8fr 1.2fr; } }
.rgx-copy { display: grid; gap: 22px; align-content: center; }
.rgx-pair { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rg-line); border-bottom: 1px solid var(--rg-line); }
.rgx-pair > div { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 28px 12px; }
.rgx-pair > div + div { border-left: 1px solid var(--rg-line); }
.rgx-pair img { height: 54px; width: auto; }
.rgx-pair b { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -.03em; line-height: 1.05; color: var(--rg-paper); }
.rgx-pair .label { color: var(--rg-dim); }
.rgx-p { color: rgba(244,242,238,.76); max-width: 44ch; }
.rgx-credit { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-dim); max-width: 52ch; line-height: 1.6; }

.rgx-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); align-items: start; }
.rgx-col { display: grid; gap: clamp(14px, 1.8vw, 26px); }
.rgx-col:nth-child(2) { margin-top: 12%; }
.rgx-col:nth-child(3) { margin-top: 24%; }
.rgx-f { margin: 0; position: relative; aspect-ratio: var(--ar); transform: rotate(var(--rot, 0deg)); transition: transform .8s var(--ease), opacity .9s var(--ease); }
.rgx-f.rv { transform: translateY(28px) rotate(var(--rot, 0deg)); }
.rgx-f.rv.in { transform: rotate(var(--rot, 0deg)); }
.rgx-f.rv.in:hover { transform: rotate(0deg); }
.rgx-f img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 4px; box-shadow: 0 26px 48px -28px rgba(0,0,0,.85); }
.rgx-osd { position: absolute; inset: 0; pointer-events: none; }
.rgx-cam { position: absolute; top: 10px; left: 12px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.rgx-cr { position: absolute; inset: -9px; }
.rgx-cr i { position: absolute; width: 18px; height: 18px; border: 2px solid var(--rg-paper); }
.rgx-cr i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.rgx-cr i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.rgx-cr i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.rgx-cr i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }

/* services, Ragalhães "scene" numbering */
.rgx-svc { list-style: none; margin: clamp(80px, 9vw, 130px) 0 0; padding: 0; border-top: 1px solid var(--rg-ice); }
.rgx-svc li { display: grid; grid-template-columns: 80px 1fr; gap: 6px 20px; padding: 20px 0; border-bottom: 1px solid var(--rg-line); align-items: baseline; }
.rgx-svc .n { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; color: var(--rg-sky); }
.rgx-svc b { font-family: var(--rg-display); font-variation-settings: "wdth" 115; font-weight: 800; font-size: clamp(1.3rem, 2vw, 1.75rem); letter-spacing: -.02em; line-height: 1.05; }
.rgx-svc p { grid-column: 2; color: rgba(244,242,238,.68); font-size: .95rem; }
@media (min-width: 860px) { .rgx-svc li { grid-template-columns: 90px .9fr 1.1fr; } .rgx-svc p { grid-column: auto; } }

.rgx-end { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 64px); }
.rgx-note { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-dim); }
.rgx-ctas { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; }
.rgx-ctas .link-arrow { color: var(--rg-paper); }
.rgx-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; background: transparent; color: var(--rg-paper); border: 1px solid rgba(155,189,228,.45); border-radius: 999px; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background .25s, color .25s, border-color .25s; }
.rgx-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rg-sky); }
.rgx-btn:hover, .rgx-btn:focus-visible { background: var(--rg-paper); color: var(--rg-navy); border-color: var(--rg-paper); }
.rgx-btn:hover .dot { background: var(--rg-ocean); }

@media (max-width: 959px) { .rgx-frames { order: -1; } }
@media (max-width: 599px) {
  .rgx-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rgx-col:nth-child(3) { grid-column: 1 / -1; grid-template-columns: 1fr 1.6fr; align-items: center; margin-top: 0; }
  .rgx-col:nth-child(2) { margin-top: 18%; }
  .rgx-hud-l { display: none; }
  .rgx-pair b { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { .rgx-marq-t, .rgx-rec i, .rgx-cam i { animation: none; } }

/* overrides of Selfie globals inside the Ragalhães block */
.rgx .rgx-h em { font-family: var(--rg-display); font-style: normal; font-weight: 800; font-variation-settings: "wdth" 125; letter-spacing: -.035em; }
.rgx .board-strip { display: none; }   /* the photos live in the frames below */