/* ══════════════════════════════════════════════════════════════════ RECO-LAB · site shell · August 2026 Implements the RECO-LAB shell design system: header, home hero, footer and the methods page, as a layer that sits on top of system-2.9.css and v3-reco-lab.css. Nothing here fights the older sheets for the same selectors: the old header.site / footer.site / .hero markup is gone from every page, so those rules are simply unreachable, and the shell owns a private namespace (.rl-hdr, .rl-hero, .rl-ftr, .rl-mp). Two rules govern where the design system was followed literally and where it was adapted: · structure, layout, colour, spacing and display type come from the design system, at the values it declares; · every size that carries running text respects the site's own legibility floors — nav 14px, body 14–16px, notes and metadata 11px minimum, body line-height 1.5 or more. Where the design system specified 13px nav or 12.5px lead-ins for reading text, the floor wins. Display type, labels and technical strips keep the design system's tracking-heavy small caps. Dark mode is defined but not exposed. The design system ships a light/dark pair and the tokens are here in full, so switching data-theme on repaints the shell; there is no control in the UI because the project pages and their embedded outputs are light-only documents, and a dark shell around a white figure is worse than no dark mode at all. ══════════════════════════════════════════════════════════════════ */ /* ── Tokens ─────────────────────────────────────────────────────── */ :root{ --color-bg:#f2f2f3; --color-text:#1d1f20; --color-accent:#5980a6; --color-accent-700:#416180; --color-accent-900:#1d2d3d; --color-divider:#dcdcdf; --color-neutral-400:#b7b7ba; --color-neutral-500:#98989b; --color-neutral-600:#78787b; --color-neutral-700:#5a5a5d; --reco-cta-bg:#1d2d3d; --reco-cta-fg:#ffffff; --reco-teal:#4fb3a5; --reco-gold:#c8901f; --space-1:2.6px; --space-2:5.1px; --space-3:10.2px; --space-4:13.6px; --space-5:16px; --space-6:20.4px; --space-7:24px; --space-8:27.2px; --radius-md:4px; --radius-lg:7px; --font-display:'Barlow Condensed','Barlow',var(--sans); --font-shell:'Barlow',var(--sans); --font-ui:'IBM Plex Sans',var(--sans); /* The bar is 62px per the design system; site.js re-measures the live element and overwrites this, so it only has to be right for the no-JS case. */ --rl-hdr-h:62px; } html[data-theme="dark"]{ --color-bg:#0f1c26; --color-text:#e9eef2; --color-accent:#7ea6cc; --color-accent-700:#a9c6e0; --color-accent-900:#16242f; --color-divider:rgba(255,255,255,0.15); --color-neutral-400:rgba(255,255,255,0.35); --color-neutral-500:rgba(255,255,255,0.45); --color-neutral-600:rgba(255,255,255,0.62); --color-neutral-700:rgba(255,255,255,0.72); --reco-cta-bg:#7ea6cc; --reco-cta-fg:#0f1c26; } @keyframes recoPing{0%{transform:scale(.6);opacity:.55}70%,100%{transform:scale(2.1);opacity:0}} @keyframes recoBlink{0%,100%{opacity:1}50%{opacity:.55}} /* ── Shared shell primitives ────────────────────────────────────── */ /* Chrome is laid out on the same column as the page body, so the wordmark sits directly above the first section's first character. The design system's own clamp() padding would leave the header 70px out of register with a 1240px content column. */ .rl-shell-row{ width:100%;max-width:var(--container);margin:0 auto; padding:0 var(--gutter); } .rl-wordmark{ font-family:var(--font-ui);font-weight:700;font-size:18px; letter-spacing:-0.02em;color:#ffffff;white-space:nowrap; text-decoration:none;line-height:1; } .rl-wordmark em{font-style:normal;color:var(--color-accent);} .rl-wordmark:hover,.rl-wordmark:focus-visible{color:#ffffff;} .rl-hdr :focus-visible, .rl-ftr :focus-visible, .rl-hero :focus-visible, .rl-mp :focus-visible{ outline:2px solid var(--color-accent);outline-offset:2px; } /* ══ HEADER ══════════════════════════════════════════════════════ Grid auto | 1fr | auto at 62px on the institutional navy. Inicio is the first item of the primary nav; the language switch is a separate control on the far right, kept off the nav row by the divider so the two never read as one list. Contacto closes the nav as an outlined accent pill — present in the nav order the brief fixes, and never a black button. */ .rl-hdr{ position:sticky;top:0;z-index:60; background:var(--color-accent-900); } .rl-hdr-row{ display:grid;grid-template-columns:auto 1fr auto; align-items:center;gap:24px;height:62px; } .rl-nav{ display:flex;align-items:center;justify-content:center;gap:22px; font-family:var(--font-shell); } .rl-nav a{ font-size:14px;letter-spacing:0.02em;line-height:1; color:rgba(255,255,255,0.74);text-decoration:none;white-space:nowrap; transition:color .16s ease; } .rl-nav a:hover{color:#ffffff;} .rl-nav a[aria-current="page"]{ color:#ffffff; box-shadow:inset 0 -1px 0 var(--color-accent); padding-bottom:3px; } /* Contacto: outlined, transparent, fills with the accent on hover. */ .rl-nav-contact{ font-family:var(--font-ui);font-weight:600;font-size:12px; letter-spacing:0.06em;text-transform:uppercase; color:#ffffff;background:transparent; border:1px solid var(--color-accent);border-radius:var(--radius-lg); padding:7px 15px;white-space:nowrap;text-decoration:none; transition:background .16s ease,color .16s ease; } .rl-nav-contact:hover,.rl-nav-contact:focus-visible{ background:var(--color-accent);color:#ffffff; } .rl-hdr-end{display:flex;align-items:center;justify-content:flex-end;gap:16px;} .rl-hdr-sep{ width:1px;height:20px;background:rgba(255,255,255,0.18);flex:none; } .rl-lang{ display:flex;border:1px solid rgba(255,255,255,0.22); border-radius:var(--radius-md);overflow:hidden; } .rl-lang button{ font-family:var(--font-ui);font-weight:600;font-size:12px; letter-spacing:0.08em;padding:5px 11px; border:0;background:transparent;color:rgba(255,255,255,0.7); cursor:pointer;line-height:1.35; } .rl-lang button:hover{color:#ffffff;} .rl-lang button.active{background:#ffffff;color:var(--color-accent-900);} .rl-burger{ display:none;border:1px solid rgba(255,255,255,0.22); border-radius:var(--radius-md);background:transparent; color:#ffffff;font-size:16px;line-height:1;padding:7px 10px;cursor:pointer; } /* Drawer. Closed by default and only reachable below 900px, where the nav row is hidden; language lives inside it so the bar keeps one control. */ .rl-drawer{display:none;} .rl-drawer[data-open="true"]{display:block;} .rl-drawer nav{ display:flex;flex-direction:column; border-top:1px solid rgba(255,255,255,0.14); padding:var(--space-5) 0 var(--space-7); } .rl-drawer nav a{ font-family:var(--font-shell);font-size:15px;line-height:1.5; color:rgba(255,255,255,0.82);text-decoration:none; padding:11px 0;border-bottom:1px solid rgba(255,255,255,0.08); } .rl-drawer nav a:last-child{border-bottom:0;} .rl-drawer nav a:hover{color:#ffffff;} /* ══ HOME HERO ═══════════════════════════════════════════════════ Two columns: the statement on the light technical ground, the globe bleeding off the right edge without a card or a frame. */ .rl-hero{ background:var(--color-bg);color:var(--color-text); border-bottom:1px solid var(--color-divider); overflow:hidden; } .rl-hero-grid{ display:grid;grid-template-columns:minmax(360px,44%) 1fr; align-items:center;gap:clamp(24px,4vw,72px); padding-top:clamp(48px,7vh,96px); padding-bottom:clamp(48px,7vh,88px); /* Left edge lands on the body column; the right runs to the viewport. */ padding-left:max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); padding-right:0; } .rl-hero-copy{max-width:620px;} .rl-hero-kicker{ display:flex;align-items:flex-start;gap:11px; font-family:var(--font-shell); font-size:11.5px;line-height:1.5;letter-spacing:0.16em; text-transform:uppercase;color:var(--color-accent-700); margin:0 0 var(--space-6) 9.5px; } .rl-hero-kicker .sig{position:relative;width:7px;height:7px;flex:none;margin-top:5px;} .rl-hero-kicker .sig i{ position:absolute;inset:0;border-radius:50%;background:var(--color-accent); } .rl-hero-kicker .sig b{ position:absolute;inset:-1px;border-radius:50%; border:1.5px solid var(--color-accent); animation:recoPing 3.6s cubic-bezier(.2,.6,.3,1) infinite; } /* The text is its own min-width:0 child: as an inline sibling of the signal it escapes the flex box when it wraps. */ .rl-hero-kicker .txt{min-width:0;} .rl-hero h1{ font-family:var(--font-display);font-weight:700; font-size:clamp(66px,8vw,116px);line-height:0.9;letter-spacing:-0.02em; color:var(--color-text);margin:0 0 var(--space-6); } .rl-hero h1 em{font-style:normal;color:var(--color-accent);} .rl-hero-fields{ font-family:var(--font-shell); font-size:12.5px;letter-spacing:0.14em;line-height:1.6; text-transform:uppercase;color:var(--color-accent-700); padding-bottom:var(--space-6); border-bottom:1px solid var(--color-divider); margin-bottom:var(--space-8); } .rl-hero-lead{ font-family:var(--font-shell); font-size:clamp(17px,1.35vw,20px);line-height:1.5; max-width:47ch;margin:0 0 var(--space-6);color:var(--color-text); } .rl-hero-close{ font-family:var(--font-shell); font-size:15px;line-height:1.6;max-width:47ch; color:var(--color-neutral-700);margin:0 0 var(--space-8); } .rl-hero-ctas{display:flex;gap:var(--space-4);flex-wrap:wrap;} .rl-btn{ font-family:var(--font-ui);font-weight:600;font-size:13px; letter-spacing:0.06em;text-transform:uppercase;line-height:1.2; padding:12px 22px;border-radius:var(--radius-lg); text-decoration:none;display:inline-block; transition:background .16s ease,color .16s ease,border-color .16s ease; } .rl-btn-primary{ background:var(--reco-cta-bg);color:var(--reco-cta-fg); border:1px solid var(--reco-cta-bg); } .rl-btn-primary:hover,.rl-btn-primary:focus-visible{ background:var(--color-accent);border-color:var(--color-accent);color:#ffffff; } .rl-btn-secondary{ background:transparent;color:var(--color-text); border:1px solid var(--color-text); } .rl-btn-secondary:hover,.rl-btn-secondary:focus-visible{ border-color:var(--color-accent);color:var(--color-accent-700); } /* Globe column: no card, no frame, four registration marks. */ .rl-hero-globe{ position:relative;justify-self:stretch; margin-right:clamp(-120px,-4vw,0px); } .rl-hero-globe .reg{ position:absolute;color:var(--color-neutral-400); font-size:12px;line-height:1;pointer-events:none; } .rl-hero-globe .reg.tl{left:-6px;top:-6px;} .rl-hero-globe .reg.tr{right:-6px;top:-6px;} .rl-hero-globe .reg.bl{left:-6px;bottom:30px;} .rl-hero-globe .reg.br{right:-6px;bottom:30px;} reco-globe{display:block;width:100%;aspect-ratio:1/1;max-height:62vh;} .rl-hero-strip{ display:flex;align-items:baseline;gap:14px;flex-wrap:wrap; padding-top:var(--space-4);margin-top:var(--space-4); border-top:1px solid var(--color-divider); font-family:var(--font-shell); } .rl-hero-strip .k{ font-size:11px;letter-spacing:0.18em;text-transform:uppercase; color:var(--color-neutral-500); } .rl-hero-strip .v{ font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase; color:var(--color-accent-700); } /* ══ FOOTER ══════════════════════════════════════════════════════ */ .rl-ftr{ background:var(--color-accent-900); color:rgba(255,255,255,0.72); font-family:var(--font-shell); padding:clamp(40px,6vh,64px) 0 0; } .rl-ftr-grid{ display:grid;grid-template-columns:minmax(280px,1.5fr) 1fr 1fr; gap:clamp(28px,5vw,80px); padding-bottom:clamp(32px,5vh,48px); } .rl-ftr-tag{ display:flex;align-items:flex-start;gap:8px; font-size:12.5px;font-weight:400;line-height:1.6;letter-spacing:0.04em; color:#ffffff;margin-top:var(--space-2); } .rl-ftr-tag .dot{ width:6px;height:6px;border-radius:50%;background:var(--reco-teal); flex:none;margin-top:6px;animation:recoBlink 4.5s ease-in-out infinite; } .rl-ftr-tag .txt{min-width:0;} .rl-ftr-blurb{ font-size:14px;line-height:1.6;max-width:40ch; margin:var(--space-6) 0 0;color:rgba(255,255,255,0.62); } .rl-ftr-rule{ height:1px;background:rgba(255,255,255,0.14); margin:var(--space-8) 0;max-width:380px; } .rl-ftr-name{ font-family:var(--font-display);font-weight:600;font-size:17px; letter-spacing:0.01em;color:#ffffff;line-height:1.2; } .rl-ftr-role{ font-size:12px;letter-spacing:0.02em;line-height:1.5; color:rgba(255,255,255,0.6);margin-top:2px; } .rl-ftr-btns{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-6);} .rl-ftr-btn{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-ui);font-weight:600;font-size:12.5px;line-height:1.2; color:#ffffff;text-decoration:none; border:1px solid rgba(255,255,255,0.28);border-radius:var(--radius-lg); padding:8px 16px;transition:border-color .16s ease,color .16s ease; } .rl-ftr-btn:hover,.rl-ftr-btn:focus-visible{ border-color:var(--color-accent);color:var(--color-accent); } .rl-ftr-btn svg{ width:15px;height:15px;flex:none; fill:none;stroke:currentColor;stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round; } .rl-ftr-h{ font-size:11px;letter-spacing:0.18em;text-transform:uppercase; color:rgba(255,255,255,0.45);margin-bottom:var(--space-6); } .rl-ftr-list{display:flex;flex-direction:column;gap:var(--space-3);list-style:none;} .rl-ftr-list a, .rl-ftr-list .pending{ display:flex;gap:9px;align-items:flex-start; font-size:13.5px;line-height:1.5;text-decoration:none; color:rgba(255,255,255,0.75); } .rl-ftr-list a:hover,.rl-ftr-list a:focus-visible{color:var(--color-accent);} .rl-ftr-list .n{ font-family:var(--font-ui);font-size:11px;line-height:1.85; color:var(--color-accent);flex:none; } .rl-ftr-list .t{min-width:0;} /* A page that does not exist yet is named and marked, never linked. */ .rl-ftr-list .pending{color:rgba(255,255,255,0.42);} .rl-ftr-list .pending .n{color:rgba(255,255,255,0.3);} /* 11px is the floor for every label on the site, marker chips included. */ .rl-ftr-list .pending .soon{ font-family:var(--font-ui);font-size:11px;letter-spacing:0.1em; text-transform:uppercase;color:rgba(255,255,255,0.34); border:1px solid rgba(255,255,255,0.16);border-radius:var(--radius-md); padding:1px 6px;line-height:1.7;flex:none; } .rl-ftr-bot{ border-top:1px solid rgba(255,255,255,0.14); padding:var(--space-6) 0 var(--space-8);text-align:center; font-size:11px;letter-spacing:0.16em;text-transform:uppercase; color:rgba(255,255,255,0.42); } /* ══ HOME · METHODS BAND ═════════════════════════════════════════ Same object as a methodological block on a project page: off-white ground, hairline border, one accent edge. No button, no navy strip, no dead grey — Métodos is already a named destination in the header and in the footer, and the way in here is a sentence. */ .rl-methods{ background:#fbfbfc; border:1px solid var(--color-divider); border-left:3px solid var(--color-accent); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:clamp(24px,3vw,34px) clamp(24px,3vw,38px); display:block; } .rl-methods-eyebrow{ font-family:var(--font-shell); font-size:11px;letter-spacing:0.18em;text-transform:uppercase; color:var(--color-accent-700);font-weight:500;margin-bottom:var(--space-4); } .rl-methods-copy{min-width:0;max-width:none;} .rl-methods-copy h2{ font-family:var(--serif);font-weight:400; font-size:24px;line-height:1.3;color:var(--color-text); margin:0 0 var(--space-4); } .rl-methods-copy h2 em{font-style:normal;color:var(--color-accent-700);} .rl-methods-copy p{ font-size:15px;line-height:1.65;max-width:78ch; color:var(--color-neutral-700);margin:0; } .rl-methods-link{ display:inline-block;margin-top:var(--space-6); font-family:var(--font-ui);font-weight:600;font-size:13px; letter-spacing:0.02em;text-decoration:none; color:var(--color-accent-700); border-bottom:1px solid rgba(89,128,166,0.4);padding-bottom:2px; } .rl-methods-link:hover,.rl-methods-link:focus-visible{ color:var(--color-accent-900);border-bottom-color:var(--color-accent-900); } /* ══ HOME · pending entries ══════════════════════════════════════ Projects 03 and 04 and the full-CV page do not exist yet. They keep their place in the series so the shape of the programme is visible, but they are not links: nothing on the site points at a 404. */ .rl-project.is-pending{opacity:.72;} .rl-project.is-pending .rl-project-link{cursor:default;} .rl-project-cta.is-pending{ color:var(--color-neutral-600); border-bottom-color:transparent; } .rl-action.is-pending{ display:flex;align-items:center;justify-content:space-between;gap:var(--space-5); cursor:default;opacity:.78; } .rl-action-soon{ font-family:var(--font-ui);font-weight:600;font-size:11px; letter-spacing:0.1em;text-transform:uppercase; color:var(--color-neutral-600); border:1px solid var(--color-divider);border-radius:var(--radius-md); padding:2px 8px;line-height:1.7;flex:none; } /* ══ METHODS PAGE ════════════════════════════════════════════════ Built to the grammar the project pages already use: a page head on the technical ground, then numbered modular blocks. No black call to action, no oversized button, no muted grey panel, no underlined links in running text, nothing below 11px. */ .rl-mp-head{ background:var(--color-bg); border-bottom:1px solid var(--color-divider); padding:clamp(44px,6vh,72px) 0 clamp(36px,5vh,56px); } .rl-mp-head-grid{ display:grid;grid-template-columns:minmax(0,1.55fr) minmax(220px,0.85fr); gap:clamp(28px,4vw,64px);align-items:end; } .rl-mp-kicker{ display:flex;align-items:flex-start;gap:11px; font-family:var(--font-shell); font-size:11.5px;line-height:1.5;letter-spacing:0.16em; text-transform:uppercase;color:var(--color-accent-700); margin:0 0 var(--space-6) 1px; } .rl-mp-kicker .sig{position:relative;width:7px;height:7px;flex:none;margin-top:5px;} .rl-mp-kicker .sig i{position:absolute;inset:0;border-radius:50%;background:var(--color-accent);} .rl-mp-kicker .sig b{ position:absolute;inset:-1px;border-radius:50%; border:1.5px solid var(--color-accent); animation:recoPing 3.6s cubic-bezier(.2,.6,.3,1) infinite; } .rl-mp-kicker .txt{min-width:0;} .rl-mp-head h1{ font-family:var(--font-display);font-weight:700; font-size:clamp(34px,3.6vw,40px);line-height:1.06;letter-spacing:-0.01em; color:var(--color-text);margin:0 0 var(--space-6); } .rl-mp-head h1 em{font-style:normal;color:var(--color-accent);} .rl-mp-lead{ font-family:var(--font-shell); font-size:17px;line-height:1.55;max-width:56ch; color:var(--color-text);margin:0 0 var(--space-6); } .rl-mp-note{ font-size:14px;line-height:1.6;max-width:62ch; color:var(--color-neutral-700);margin:0; } /* Page metadata: a real strip of facts, not decoration. */ .rl-mp-meta{ display:flex;flex-direction:column;gap:var(--space-4); border-left:1px solid var(--color-divider); padding-left:clamp(18px,2vw,28px); } .rl-mp-meta div{display:flex;flex-direction:column;gap:3px;} .rl-mp-meta .k{ font-family:var(--font-shell);font-size:11px;letter-spacing:0.18em; text-transform:uppercase;color:var(--color-neutral-500); } .rl-mp-meta .v{ font-family:var(--font-ui);font-size:13px;line-height:1.45; color:var(--color-accent-900);font-weight:500; } .rl-mp-body{padding:clamp(44px,6vh,68px) 0 clamp(48px,7vh,76px);} .rl-mp-secnum{ font-family:var(--font-shell); display:flex;align-items:center;gap:12px; font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase; color:var(--color-accent-700);margin-bottom:var(--space-6); } .rl-mp-secnum::after{ content:"";flex:1;height:1px;background:var(--color-divider);max-width:220px; } .rl-mp-secnum .num{ font-family:var(--font-ui);font-weight:600;font-size:11.5px; color:var(--color-accent); } .rl-mp-h2{ font-family:var(--serif);font-weight:400; font-size:24px;line-height:1.3;color:var(--color-text); margin:0 0 var(--space-6);max-width:44ch; } .rl-mp-h2 em{font-style:normal;color:var(--color-accent-700);} .rl-mp-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(18px,2vw,26px); } .rl-mp-block{ background:#ffffff; border:1px solid var(--color-divider); border-top:2px solid var(--color-accent); padding:clamp(22px,2.4vw,30px); display:flex;flex-direction:column; } .rl-mp-block .n{ font-family:var(--font-ui);font-weight:600;font-size:11.5px; letter-spacing:0.1em;color:var(--color-accent);margin-bottom:var(--space-3); } .rl-mp-block h3{ font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.32; color:var(--color-text);margin:0 0 var(--space-4); } .rl-mp-block p{ font-size:14.5px;line-height:1.65;color:var(--color-neutral-700); margin:0 0 var(--space-4); } .rl-mp-block p:last-child{margin-bottom:0;} .rl-mp-block p strong{font-weight:600;color:var(--color-text);} .rl-mp-block ul{margin:0;padding-left:18px;} .rl-mp-block li{ font-size:14.5px;line-height:1.6;color:var(--color-neutral-700); margin-bottom:var(--space-3); } .rl-mp-block li:last-child{margin-bottom:0;} /* Definition rows: what a published figure is allowed to claim. */ .rl-mp-defs{ display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:1px;background:var(--color-divider); border:1px solid var(--color-divider); } .rl-mp-def{background:#ffffff;padding:clamp(18px,2vw,24px);} .rl-mp-def .k{ font-family:var(--font-ui);font-weight:600;font-size:12px; letter-spacing:0.1em;text-transform:uppercase; color:var(--color-accent-900);margin-bottom:var(--space-3); } .rl-mp-def p{font-size:14px;line-height:1.6;color:var(--color-neutral-700);margin:0;} /* Module framing block. Sits on the navy only as a closing statement of what the modules are and are not — it carries no call to action. */ .rl-mp-frame{ background:var(--color-accent-900);color:rgba(255,255,255,0.78); padding:clamp(28px,3.4vw,42px); } .rl-mp-frame h3{ font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.3; color:#ffffff;margin:0 0 var(--space-6); } .rl-mp-frame p{font-size:14.5px;line-height:1.68;max-width:80ch;margin:0 0 var(--space-5);} .rl-mp-frame p:last-child{margin-bottom:0;} .rl-mp-frame strong{color:#ffffff;font-weight:600;} .rl-mp-chain{ display:flex;flex-wrap:wrap;gap:var(--space-3); margin:var(--space-6) 0; } .rl-mp-chain span{ font-family:var(--font-ui);font-weight:600;font-size:12px; letter-spacing:0.08em;color:#ffffff; border:1px solid rgba(255,255,255,0.28);border-radius:var(--radius-md); padding:5px 12px;line-height:1.5; } .rl-mp-chain span:first-child{ border-color:var(--color-accent);background:rgba(89,128,166,0.22); } /* Closing links: two named destinations as running text, side by side. Discreet by construction — no panel, no arrow, no filled block. */ .rl-mp-next{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,3vw,44px); border-top:1px solid var(--color-divider); margin-top:clamp(36px,5vh,56px);padding-top:clamp(24px,3vh,32px); } .rl-mp-next .k{ font-family:var(--font-shell);font-size:11px;letter-spacing:0.18em; text-transform:uppercase;color:var(--color-neutral-500); display:block;margin-bottom:var(--space-3); } .rl-mp-next a{ font-family:var(--font-ui);font-weight:600;font-size:15px; color:var(--color-accent-700);text-decoration:none; border-bottom:1px solid rgba(89,128,166,0.4);padding-bottom:2px; } .rl-mp-next a:hover,.rl-mp-next a:focus-visible{ color:var(--color-accent-900);border-bottom-color:var(--color-accent-900); } .rl-mp-next p{ font-size:14px;line-height:1.6;color:var(--color-neutral-600); margin:var(--space-3) 0 0;max-width:46ch; } .rl-mp-stack{display:flex;flex-direction:column;gap:clamp(36px,5vh,56px);} /* ══ Responsive ══════════════════════════════════════════════════ */ @media (max-width:1180px){ .rl-nav{gap:16px;} .rl-nav a{font-size:14px;} } @media (max-width:900px){ .rl-hdr-row{grid-template-columns:auto 1fr auto;gap:12px;} .rl-nav{display:none;} .rl-hdr-sep{display:none;} .rl-burger{display:inline-block;} .rl-hero-grid{ grid-template-columns:1fr; gap:clamp(28px,5vh,44px); padding-left:var(--gutter);padding-right:var(--gutter); } .rl-hero-copy{max-width:none;} .rl-hero h1{font-size:clamp(52px,13vw,84px);} .rl-hero-globe{margin-right:0;max-width:520px;justify-self:center;width:100%;} reco-globe{max-height:none;} .rl-ftr-grid{grid-template-columns:1fr;gap:clamp(28px,5vh,40px);} .rl-ftr-rule{max-width:none;} .rl-mp-head-grid{grid-template-columns:1fr;align-items:start;} .rl-mp-meta{ border-left:0;padding-left:0; border-top:1px solid var(--color-divider);padding-top:var(--space-6); flex-direction:row;flex-wrap:wrap;gap:var(--space-6) clamp(24px,5vw,48px); } } @media (max-width:560px){ .rl-hdr-row{height:58px;} .rl-hero h1{font-size:clamp(46px,14vw,64px);} .rl-hero-lead{font-size:17px;} .rl-lang button{padding:5px 9px;} .rl-hero-globe .reg{display:none;} } @media (prefers-reduced-motion:reduce){ .rl-hero-kicker .sig b, .rl-mp-kicker .sig b, .rl-ftr-tag .dot{animation:none;} .rl-hero-kicker .sig b, .rl-mp-kicker .sig b{opacity:.45;} } @media print{ .rl-hdr,.rl-burger,.rl-drawer{position:static;} .rl-hero-globe{display:none;} }