/* ===========================================================================
   hamudi.de — relaunch stylesheet
   ---------------------------------------------------------------------------
   Self-contained. Loaded ONLY by pages that set $relaunch_shell = true before
   including header.php, which means none of the Joomla/TZ-Portfolio bundle is
   present: no Bootstrap grid, no template reset, and — importantly — none of
   the `html{font-size:10px}` trick the fossil template relies on. rem here is
   a normal 16px root, so rem/clamp() can be used freely. Do not copy px-unit
   habits over from index.php's old inline <style> blocks.

   Design language: a white page, black type, one acid accent, and an
   ultra-condensed cap for anything that carries weight. Photographs are the
   only colour on the page — every surface around them is neutral on purpose.
   ======================================================================== */

:root {
    --rl-bg: #ffffff;
    --rl-fg: #0a0a0a;
    --rl-gray: #8e9095;
    --rl-hair: #e4e4e6;
    --rl-ink: #000000;
    --rl-accent: #ea2b74; /* his existing brand pink, used as the acid */
    --rl-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --rl-pad: clamp(1.25rem, 4vw, 3.5rem);
}

/* --- reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.rl {
    margin: 0;
    background: var(--rl-bg);
    color: var(--rl-fg);
    font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.0625rem;
    font-stretch: 100%;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
/* The reset is wrapped in :where() so it contributes ZERO specificity and
   lands at (0,0,1) — element level.
   Written plainly as `.rl p { margin: 0 }` it scores (0,1,1) and silently
   beats every single-class rule that tries to give a paragraph a margin
   (.rl-ctfield, .rl-prose-tags, .rl-credit …), collapsing the spacing with no
   error anywhere. That bug was found twice before this reset was fixed; do not
   unwrap these. */
:where(.rl) img { max-width: 100%; display: block; }
:where(.rl) a { color: inherit; text-decoration: none; }
:where(.rl) h1, :where(.rl) h2, :where(.rl) h3,
:where(.rl) p, :where(.rl) ul, :where(.rl) figure { margin: 0; }
:where(.rl) ul { list-style: none; padding: 0; }
.rl ::selection { background: var(--rl-accent); color: #fff; }
.rl :focus-visible { outline: 2px solid var(--rl-accent); outline-offset: 4px; }

/* --- type roles --------------------------------------------------------
   .rl-display  the condensed cap. Anton only; never set a weight on it.
   .rl-label    the small uppercase UI label — Archivo pulled to 62% width,
                which is what makes navigation read as a caption, not a link.
   ---------------------------------------------------------------------- */
.rl-display {
    font-family: 'Anton', 'Archivo', Impact, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.86;
    letter-spacing: -0.01em;
}
.rl-label {
    font-family: 'Archivo', sans-serif;
    font-stretch: 62%;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}
.rl-lead {
    font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
    line-height: 1.65;
    color: #2c2c2e;
}

/* --- the page veil -----------------------------------------------------
   The reference fades its whole document in over 0.4s. Same idea: hold the
   first paint behind a white sheet so the hero photograph never appears
   half-decoded. Removed by JS on load; a `no-js` visitor never sees it
   because the element is only painted when the class is present.
   ---------------------------------------------------------------------- */
.rl-veil {
    position: fixed;
    inset: 0;
    background: var(--rl-bg);
    z-index: 300;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.rl-veil.is-up { opacity: 1; pointer-events: auto; }

/* --- header ------------------------------------------------------------ */
.rl-head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: clamp(0.9rem, 2vw, 1.35rem) var(--rl-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* difference-blend lets ONE header sit legibly over a dark photograph and
       over a white page with no light/dark variant to keep in sync — which is
       why the links carry no colour of their own. Its blind spot is mid-grey:
       white on #808080 differences back to #7f7f7f and vanishes. Below the
       first viewport, where photographs scroll under the bar, .is-stuck swaps
       in a frosted plate instead. */
    mix-blend-mode: difference;
    color: #fff;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease, color 0.4s ease;
}
.rl-head.is-stuck {
    mix-blend-mode: normal;
    color: var(--rl-fg);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.rl-head a { transition: opacity 0.3s ease, color 0.3s ease; }
.rl-head a:hover { opacity: 0.5; }
/* The active item is marked with a RULE, not a colour, while the header is
   difference-blended: difference inverts against the backdrop, so the accent
   pink (#ea2b74) over a white page resolves to #15d48b and the current page
   reads as bright green. An underline in currentColor inverts with the text
   and stays correct on any background. Once the frosted plate is in (normal
   blend) the accent is safe again. */
.rl-head a.is-on {
    opacity: 1;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.rl-head.is-stuck a.is-on { color: var(--rl-accent); border-bottom-color: var(--rl-accent); }
.rl-head-group { display: flex; gap: clamp(0.75rem, 2vw, 1.5rem); align-items: baseline; }

/* The centred wordmark. Absolutely placed so the two link groups stay pinned
   to the page edges regardless of how long the name renders. */
.rl-mark {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Anton', sans-serif;
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
    transition: letter-spacing 0.5s var(--rl-ease);
}
.rl-mark:hover { letter-spacing: 0.3em; opacity: 1 !important; }

@media (max-width: 640px) {
    .rl-mark { display: none; }
    .rl-head { font-size: 0.75rem; }
}

/* --- hero --------------------------------------------------------------- */
.rl-hero {
    position: relative;
    height: 100svh;
    min-height: 34rem;
    overflow: hidden;
    background: var(--rl-ink);
}
.rl-hero-media { position: absolute; inset: 0; }
.rl-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.82;
    transform: scale(1.04);
    animation: rl-drift 22s ease-out forwards;
}
@keyframes rl-drift { to { transform: scale(1.13); } }

/* A bottom scrim so the display type keeps contrast over any photograph. */
.rl-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.15) 42%, rgba(0,0,0,0.35) 100%);
    pointer-events: none;
}
.rl-hero-inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--rl-pad);
    /* Clears the consent banner, which is fixed to the bottom on first visit. */
    padding-bottom: clamp(3.5rem, 9vh, 6rem);
    color: #fff;
}
.rl-hero-kicker { color: rgba(255,255,255,0.72); margin-bottom: auto; padding-top: clamp(4rem, 9vh, 6rem); }
.rl-hero h1 { display: block; }
.rl-hero-line {
    display: block;
    /* 12vw, not 15: two lines at 15vw plus the kicker and the keyword line
       overran a 900px-tall viewport and pushed the keywords under the consent
       banner. Check both lines still clear the banner before raising this. */
    font-size: clamp(2.75rem, 12vw, 10rem);
    color: #fff;
    /* Each line wipes up from its own baseline — the mask is on a wrapper so
       the clip never cuts descenders of the line above. */
    overflow: hidden;
}
.rl-hero-line > span {
    display: block;
    transform: translateY(105%);
    animation: rl-rise 1.1s var(--rl-ease) forwards;
}
.rl-hero-line:nth-child(2) > span { animation-delay: 0.1s; }
@keyframes rl-rise { to { transform: translateY(0); } }

/* The keyword line lives inside the <h1> so the heading still carries the
   terms the page ranks for, without printing them at display size. */
.rl-hero-sub {
    display: block;
    margin-top: clamp(0.75rem, 2vh, 1.25rem);
    font-family: 'Archivo', sans-serif;
    font-stretch: 62%;
    font-weight: 500;
    font-size: clamp(0.8125rem, 1.5vw, 1rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
}
.rl-scroll-cue {
    position: absolute;
    right: var(--rl-pad);
    bottom: clamp(2rem, 6vh, 4.5rem);
    color: rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.rl-scroll-cue i {
    display: block;
    width: 1px;
    height: 2.5rem;
    background: rgba(255,255,255,0.5);
    transform-origin: top;
    animation: rl-cue 2.4s ease-in-out infinite;
}
@keyframes rl-cue { 0%,100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@media (max-width: 640px) { .rl-scroll-cue { display: none; } }

/* --- section chrome ----------------------------------------------------- */
.rl-sec { padding: clamp(4rem, 11vh, 9rem) var(--rl-pad); }
.rl-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.1rem;
    margin-bottom: clamp(2rem, 5vh, 3.5rem);
    border-bottom: 1px solid var(--rl-hair);
}
.rl-sec-head .rl-label { color: var(--rl-gray); }
.rl-sec-head em { font-style: normal; color: var(--rl-accent); }

/* --- the work index ----------------------------------------------------
   The signature interaction: a fixed full-bleed stage behind a list of
   categories. Hovering an entry cross-fades the stage to that gallery's
   cover and dims every sibling. The dimming is done with a parent :hover
   rather than JS so it still works if the script never loads.
   ---------------------------------------------------------------------- */
.rl-work {
    position: relative;
    background: var(--rl-ink);
    color: #fff;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(4rem, 10vh, 7rem) var(--rl-pad);
    overflow: hidden;
}
/* The stage holds the WHOLE frame, not a 100%-cover crop.
   Filling the section meant every cover was cropped to the viewport's aspect
   ratio, which on a wide window sliced heads off and cut the composition the
   photograph was made for. So on desktop the stage is inset to the right half
   — clear of the list — and the image is `contain`: the full frame, scaled to
   fit, never cropped. On narrow screens there is no room beside the list, so
   it falls back to a full-bleed cover behind the type. */
.rl-work-stage {
    position: absolute;
    top: clamp(3.5rem, 11vh, 7rem);
    right: clamp(1rem, 3vw, 3rem);
    bottom: clamp(2rem, 7vh, 4.5rem);
    left: 40%;
    z-index: 0;
}
.rl-work-stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center right;
    opacity: 0;
    transform: scale(1.03);
    transition: opacity 0.9s ease, transform 1.6s var(--rl-ease);
}
.rl-work-stage img.is-active { opacity: 0.9; transform: scale(1); }

@media (max-width: 860px) {
    .rl-work-stage { inset: 0; }
    .rl-work-stage img { object-fit: cover; object-position: center; }
    .rl-work-stage img.is-active { opacity: 0.42; }
}
/* Vignette: keeps the list legible over any frame and gives the section the
   cinematic top/bottom fade the layout is built around. */
.rl-work::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Top and bottom fade only. The heavy left ramp that used to protect the
       list is unnecessary now the stage is inset to the right and no longer
       runs under the type — it only muddied the photograph. It comes back
       below 860px, where the frame IS behind the list again. */
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 78%, rgba(0,0,0,0.85) 100%);
}
@media (max-width: 860px) {
    .rl-work::before {
        background:
            linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 74%, rgba(0,0,0,0.9) 100%),
            linear-gradient(to right, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.2) 100%);
    }
}
.rl-work-inner { position: relative; z-index: 2; width: 100%; }
/* The stage now occupies the right of the section, so a head that stretches
   edge-to-edge drops its right-hand item on top of the photograph. Keep both
   head items together on the left, over the black. */
@media (min-width: 861px) {
    .rl-work .rl-sec-head { justify-content: flex-start; gap: clamp(1rem, 3vw, 2.5rem); }
}
/* "Hover to preview" is an instruction a touch device cannot follow. */
@media (hover: none), (pointer: coarse) { .rl-work-hint { display: none; } }
.rl-work-list { margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.rl-work-item { border-top: 1px solid rgba(255,255,255,0.16); }
.rl-work-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.16); }
.rl-work-item a {
    display: flex;
    align-items: baseline;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    padding: clamp(0.5rem, 1.4vh, 0.9rem) 0;
    opacity: 0.88;
    transition: opacity 0.45s ease, color 0.45s ease, transform 0.55s var(--rl-ease);
}
.rl-work-list:hover .rl-work-item a { opacity: 0.3; }
.rl-work-list .rl-work-item a:hover,
.rl-work-list .rl-work-item a:focus-visible {
    opacity: 1;
    color: var(--rl-accent);
    transform: translateX(clamp(0.5rem, 2vw, 1.75rem));
}
/* Six entries plus the section head have to fit one viewport without the last
   one clipping — 7.5vw overran a 1440x900 window. Raising this means dropping
   an entry or letting the section grow past 100svh. */
.rl-work-name { font-size: clamp(1.5rem, 5vw, 4rem); }
.rl-work-count {
    font-family: 'Archivo', sans-serif;
    font-stretch: 62%;
    font-weight: 500;
    font-size: clamp(0.75rem, 1.2vw, 0.9375rem);
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.72);
    white-space: nowrap;
}
.rl-work-item a:hover .rl-work-count { color: var(--rl-accent); }
.rl-work-arrow { margin-left: auto; font-size: clamp(1rem, 2vw, 1.5rem); opacity: 0; transition: opacity 0.4s ease; }
.rl-work-item a:hover .rl-work-arrow { opacity: 1; }

/* --- marquee ------------------------------------------------------------ */
.rl-marquee {
    background: var(--rl-accent);
    color: #fff;
    padding: clamp(0.6rem, 1.6vh, 1rem) 0;
    overflow: hidden;
    white-space: nowrap;
}
.rl-marquee-track {
    display: inline-flex;
    gap: 2.5rem;
    padding-right: 2.5rem;
    animation: rl-marq 34s linear infinite;
    will-change: transform;
}
.rl-marquee span { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: clamp(1.1rem, 2.6vw, 2rem); letter-spacing: 0.02em; }
@keyframes rl-marq { to { transform: translateX(-50%); } }

/* --- selected frames ---------------------------------------------------
   A deliberately uneven editorial grid: 12 columns, items of different spans
   and vertical offsets, so it reads as a laid-out spread and not a gallery
   dump. Offsets collapse to zero below the tablet breakpoint.
   ---------------------------------------------------------------------- */
.rl-frames { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(0.75rem, 2vw, 1.75rem); }
.rl-frame figure { position: relative; overflow: hidden; background: #f2f2f3; }
.rl-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--rl-ease); }
.rl-frame:hover img { transform: scale(1.045); }
.rl-frame figcaption {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.7rem;
    color: var(--rl-gray);
}
.rl-frame-no { color: var(--rl-accent); }

.rl-frame--a { grid-column: 1 / span 7; }
/* Offsets stay small on purpose: the tallest item sets its row's height, so a
   large margin-top on a 3/4 frame leaves the landscape frame beside it sitting
   on a band of dead white. These are nudges, not a staircase. */
.rl-frame--b { grid-column: 9 / span 4; margin-top: clamp(1rem, 3.5vw, 3rem); }
.rl-frame--c { grid-column: 1 / span 4; }
.rl-frame--d { grid-column: 6 / span 7; margin-top: clamp(-2.5rem, -2vw, -0.5rem); }
.rl-frame--e { grid-column: 3 / span 5; }
.rl-frame--f { grid-column: 9 / span 4; margin-top: clamp(0.5rem, 2.5vw, 2rem); }

.rl-frame--a img, .rl-frame--d img { aspect-ratio: 3 / 2; }
.rl-frame--b img, .rl-frame--c img, .rl-frame--f img { aspect-ratio: 3 / 4; }
.rl-frame--e img { aspect-ratio: 1 / 1; }

@media (max-width: 860px) {
    .rl-frames { grid-template-columns: repeat(6, 1fr); }
    .rl-frame--a, .rl-frame--d, .rl-frame--e { grid-column: 1 / span 6; }
    .rl-frame--b, .rl-frame--c, .rl-frame--f { grid-column: span 3; }
    .rl-frame--b, .rl-frame--d, .rl-frame--f { margin-top: 0; }
}

/* --- statement / about -------------------------------------------------- */
/* Multi-line display text needs air that a one-word headline does not: at the
   0.86 the display role sets, the comma of one line lands on the caps of the
   next. Only the hero, which is one word per line, keeps the tighter value. */
.rl-statement { max-width: 22ch; font-size: clamp(2rem, 5.5vw, 4.5rem); line-height: 0.95; }
.rl-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 5vw, 5rem);
    align-items: start;
}
.rl-about-body > * + * { margin-top: 1.15rem; }
.rl-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.75rem; }
.rl-tags li {
    border: 1px solid var(--rl-hair);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-family: 'Archivo', sans-serif;
    font-stretch: 62%;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #3a3a3c;
}
@media (max-width: 860px) { .rl-about-grid { grid-template-columns: 1fr; } }

/* --- link with an underline that draws on hover ------------------------- */
.rl-link {
    display: inline-block;
    font-family: 'Archivo', sans-serif;
    font-stretch: 62%;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding-bottom: 0.2rem;
    background-image: linear-gradient(var(--rl-accent), var(--rl-accent));
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.5s var(--rl-ease), color 0.35s ease;
}
.rl-link:hover { color: var(--rl-accent); background-size: 100% 1px; }

/* --- stories ------------------------------------------------------------ */
.rl-stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.rl-story { display: block; border-top: 1px solid var(--rl-fg); padding-top: 1rem; transition: color 0.35s ease; }
.rl-story:hover { color: var(--rl-accent); }
.rl-story h3 { font-family: 'Archivo', sans-serif; font-stretch: 80%; font-weight: 700; font-size: 1.25rem; line-height: 1.25; margin-top: 0.4rem; }
.rl-story p { color: var(--rl-gray); font-size: 0.9375rem; margin-top: 0.5rem; }

/* --- services ----------------------------------------------------------- */
.rl-svc { border-top: 1px solid var(--rl-hair); }
.rl-svc-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    gap: clamp(1rem, 3vw, 3rem);
    align-items: baseline;
    padding: clamp(1.25rem, 3.5vh, 2.25rem) 0;
    border-bottom: 1px solid var(--rl-hair);
}
.rl-svc-name { font-size: clamp(1.5rem, 3.2vw, 2.5rem); }
.rl-svc-desc { color: #4a4a4d; font-size: 0.9375rem; line-height: 1.6; }
.rl-svc-price {
    font-family: 'Archivo', sans-serif;
    font-stretch: 62%;
    font-weight: 700;
    font-size: clamp(1rem, 2vw, 1.375rem);
    color: var(--rl-accent);
    white-space: nowrap;
}
@media (max-width: 860px) {
    .rl-svc-row { grid-template-columns: 1fr auto; }
    .rl-svc-desc { grid-column: 1 / -1; }
}

/* --- contact ------------------------------------------------------------ */
.rl-contact { background: var(--rl-ink); color: #fff; }
.rl-contact .rl-sec-head { border-color: rgba(255,255,255,0.2); }
.rl-contact-cta {
    display: inline-block;
    font-size: clamp(2.5rem, 11vw, 9rem);
    color: #fff;
    transition: color 0.4s ease;
}
.rl-contact-cta:hover { color: var(--rl-accent); }
.rl-contact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 4vw, 3.5rem);
    margin-top: clamp(1.75rem, 5vh, 3rem);
    color: rgba(255,255,255,0.6);
}
.rl-contact-meta strong { display: block; color: #fff; font-weight: 500; font-stretch: 100%; text-transform: none; letter-spacing: 0; font-size: 1rem; margin-top: 0.3rem; }
.rl-contact .rl-link { color: #fff; }
.rl-contact .rl-link:hover { color: var(--rl-accent); }

/* --- footer ------------------------------------------------------------- */
.rl-foot {
    background: var(--rl-ink);
    color: rgba(255,255,255,0.55);
    padding: clamp(2rem, 6vh, 3.5rem) var(--rl-pad);
    border-top: 1px solid rgba(255,255,255,0.14);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem clamp(1rem, 3vw, 2.5rem);
    align-items: center;
    justify-content: space-between;
}
.rl-foot a { transition: color 0.3s ease; }
.rl-foot a:hover { color: var(--rl-accent); }
.rl-foot-nav { display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 2vw, 1.75rem); }

/* --- scroll reveal ------------------------------------------------------ */
.rl-r { opacity: 0; transform: translateY(2rem); }
.rl-r.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 1s var(--rl-ease), transform 1s var(--rl-ease);
}
/* Without JS nothing would ever get .is-in, so the whole page below the fold
   would stay invisible. Reveal is opt-in via a class on <html> set by the
   script itself — no script, no hiding. */
html:not(.rl-js) .rl-r { opacity: 1; transform: none; }

/* --- cursor ring -------------------------------------------------------- */
.rl-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border: 1px solid var(--rl-accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 250;
    opacity: 0;
    transition: opacity 0.3s ease, width 0.3s var(--rl-ease), height 0.3s var(--rl-ease),
        margin 0.3s var(--rl-ease), background-color 0.3s ease;
}
.rl-cursor.is-on { opacity: 1; }
.rl-cursor.is-big { width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; background: rgba(234, 43, 116, 0.14); }
@media (hover: none), (pointer: coarse) { .rl-cursor { display: none; } }

/* --- consent banner ----------------------------------------------------
   header.php styles the banner in Poppins, which the relaunch shell never
   loads. Re-point it at the fonts this page actually has.
   ---------------------------------------------------------------------- */
.rl #ga-consent, .rl #ga-consent button { font-family: 'Archivo', sans-serif; }

/* =========================================================================
   ABOUT PAGE
   ====================================================================== */

/* The one intro on the site that is not a full-bleed cover: a 4:5 portrait
   cropped to a 16:9 viewport would cut the face, so the photograph keeps its
   own frame and the type sits beside it. */
.rl-abhero {
    background: var(--rl-ink);
    color: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(1.5rem, 5vw, 5rem);
    align-items: center;
    padding: clamp(7rem, 16vh, 11rem) var(--rl-pad) clamp(3rem, 9vh, 6rem);
    min-height: 92svh;
}
.rl-abhero-kicker { color: var(--rl-accent); margin-bottom: clamp(1rem, 3vh, 2rem); }
.rl-abhero-word { display: block; font-size: clamp(2.75rem, 9vw, 7.5rem); color: #fff; }
.rl-abhero-sub {
    display: block; margin-top: clamp(0.75rem, 2vh, 1.25rem);
    font-family: 'Archivo', sans-serif; font-stretch: 62%; font-weight: 500;
    font-size: clamp(0.8125rem, 1.4vw, 1rem);
    letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.8);
}
.rl-abhero-photo { margin: 0; }
.rl-abhero-photo img { width: 100%; height: auto; display: block; }
.rl-abhero-photo figcaption { margin-top: 0.75rem; color: rgba(255,255,255,0.5); }
@media (max-width: 860px) {
    .rl-abhero { grid-template-columns: 1fr; min-height: 0; align-items: start; }
    .rl-abhero-photo { max-width: 22rem; }
}

/* --- the six bodies of work, as a list ---------------------------------- */
.rl-ablist { border-top: 1px solid var(--rl-hair); }
.rl-ablist-item { border-bottom: 1px solid var(--rl-hair); }
.rl-ablist-item a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
    gap: clamp(1rem, 3vw, 3rem);
    align-items: baseline;
    padding: clamp(1rem, 3vh, 1.75rem) 0;
    transition: color 0.35s ease;
}
.rl-ablist-item a:hover { color: var(--rl-accent); }
.rl-ablist-name { font-size: clamp(1.375rem, 3vw, 2.25rem); }
.rl-ablist-blurb { color: #4a4a4d; font-size: 0.9375rem; line-height: 1.6; }
.rl-ablist-item a:hover .rl-ablist-blurb { color: var(--rl-accent); }
.rl-ablist-count { color: var(--rl-gray); white-space: nowrap; }
@media (max-width: 860px) {
    .rl-ablist-item a { grid-template-columns: 1fr auto; }
    .rl-ablist-blurb { grid-column: 1 / -1; }
}

.rl-credit { margin-top: clamp(2rem, 6vh, 3.5rem); color: rgba(255,255,255,0.45); }
.rl-credit a { color: rgba(255,255,255,0.75); border-bottom: 1px solid rgba(255,255,255,0.3); }
.rl-credit a:hover { color: var(--rl-accent); border-color: var(--rl-accent); }

/* =========================================================================
   GALLERY PAGES
   ====================================================================== */

/* --- intro: same full-bleed treatment as the homepage hero -------------- */
.rl-gintro {
    position: relative;
    height: 82svh;
    min-height: 26rem;
    overflow: hidden;
    background: var(--rl-ink);
}
.rl-gintro-media { position: absolute; inset: 0; }
.rl-gintro-media img {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0.8; transform: scale(1.04);
    animation: rl-drift 22s ease-out forwards;
}
.rl-gintro::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.12) 45%, rgba(0,0,0,0.38) 100%);
}
.rl-gintro-inner {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: var(--rl-pad); padding-bottom: clamp(2.5rem, 7vh, 4.5rem);
    color: #fff;
}
/* Breadcrumb left, frame count right, both on one line at the top — stacking
   the count under the blurb crowded the three text blocks into one grey mass. */
.rl-gintro-top {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; margin-bottom: auto; padding-top: clamp(4rem, 9vh, 6rem);
}
.rl-gintro-kicker { color: rgba(255,255,255,0.7); }
.rl-gintro-kicker a { border-bottom: 1px solid rgba(255,255,255,0.35); }
.rl-gintro-kicker a:hover { border-color: var(--rl-accent); color: var(--rl-accent); }
.rl-gintro-title { color: #fff; }
.rl-gintro-word { display: block; font-size: clamp(2.75rem, 11vw, 9rem); }
.rl-gintro-sub {
    display: block; margin-top: 0.5rem;
    font-family: 'Archivo', sans-serif; font-stretch: 62%; font-weight: 500;
    font-size: clamp(0.75rem, 1.3vw, 0.9375rem);
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.75);
}
.rl-gintro-blurb {
    max-width: 42ch; margin-top: 0.9rem;
    font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
    color: rgba(255,255,255,0.82); line-height: 1.55;
}
.rl-gintro-count { color: var(--rl-accent); white-space: nowrap; }

/* --- the frames --------------------------------------------------------
   CSS columns, not a row grid: mixed aspect ratios pack without cropping and
   without per-item span arithmetic. break-inside is what stops a figure being
   split across a column boundary — removing it silently tears photographs.
   ---------------------------------------------------------------------- */
.rl-gsec { padding-top: clamp(2.5rem, 7vh, 5rem); }
/* The copy block above the grid supplies its own bottom space; without this the
   two section paddings stack into a gap that reads as a missing element. */
.rl-gintro-text { padding-bottom: 0; }
.rl-gintro-measure { max-width: 44rem; }
.rl-gintro-measure .rl-lead { font-size: clamp(1.0625rem, 1.7vw, 1.3125rem); }
.rl-gintro-text + .rl-gsec { padding-top: clamp(1.5rem, 4vh, 2.5rem); }
.rl-gcols { columns: 3; column-gap: clamp(0.75rem, 1.6vw, 1.5rem); }
.rl-gfig { break-inside: avoid; margin: 0 0 clamp(0.75rem, 1.6vw, 1.5rem); }
.rl-gbtn {
    display: block; position: relative; width: 100%;
    padding: 0; border: 0; background: #f2f2f3; cursor: pointer;
    overflow: hidden; font: inherit; color: inherit;
}
.rl-gbtn img { width: 100%; height: auto; display: block; transition: transform 1.1s var(--rl-ease), opacity 0.4s ease; }
.rl-gbtn:hover img, .rl-gbtn:focus-visible img { transform: scale(1.035); opacity: 0.88; }
.rl-gno {
    position: absolute; left: 0.75rem; bottom: 0.6rem;
    color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.75);
    opacity: 0; transition: opacity 0.35s ease;
}
.rl-gbtn:hover .rl-gno, .rl-gbtn:focus-visible .rl-gno { opacity: 1; }

@media (max-width: 1100px) { .rl-gcols { columns: 2; } }
@media (max-width: 700px)  { .rl-gcols { columns: 1; } }

/* --- pager -------------------------------------------------------------- */
.rl-pager {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(2.5rem, 7vh, 5rem) var(--rl-pad);
    border-top: 1px solid var(--rl-hair);
}
.rl-pager-side { display: block; color: var(--rl-gray); transition: color 0.35s ease; }
.rl-pager-side:hover { color: var(--rl-accent); }
.rl-pager-next { text-align: right; }
.rl-pager-name { display: block; margin-top: 0.4rem; font-size: clamp(1.5rem, 4vw, 3rem); color: var(--rl-fg); transition: color 0.35s ease; }
.rl-pager-side:hover .rl-pager-name { color: var(--rl-accent); }

/* --- lightbox ----------------------------------------------------------
   Ours, because Fancybox ships in the fossil bundle this shell never loads.
   ---------------------------------------------------------------------- */
.rl-lb {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(8,8,8,0.97);
    display: flex; align-items: center; justify-content: center;
    padding: clamp(2.5rem, 7vh, 4.5rem) clamp(1rem, 5vw, 5rem);
    opacity: 0; transition: opacity 0.35s ease;
}
.rl-lb.is-open { opacity: 1; }
.rl-lb[hidden] { display: none; }
.rl-lb-stage { margin: 0; max-width: 100%; max-height: 100%; display: flex; }
.rl-lb-img {
    max-width: 100%; max-height: 82svh;
    width: auto; height: auto; object-fit: contain;
    opacity: 0; transition: opacity 0.3s ease;
}
.rl-lb-img.is-ready { opacity: 1; }
.rl-lb button {
    position: absolute; background: none; border: 0; color: #fff;
    cursor: pointer; font-size: 1.75rem; line-height: 1;
    padding: 0.75rem 1rem; opacity: 0.65; transition: opacity 0.25s ease, color 0.25s ease;
    font-family: 'Archivo', sans-serif;
}
.rl-lb button:hover { opacity: 1; color: var(--rl-accent); }
.rl-lb-close { top: clamp(0.5rem, 2vh, 1.25rem); right: clamp(0.5rem, 2vw, 1.5rem); font-size: 2.25rem; }
.rl-lb-prev { left: clamp(0.25rem, 1.5vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.rl-lb-next { right: clamp(0.25rem, 1.5vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.rl-lb-meta {
    position: absolute; left: 0; right: 0; bottom: clamp(0.75rem, 2.5vh, 1.5rem);
    display: flex; justify-content: center; gap: 1rem;
    color: rgba(255,255,255,0.6); padding: 0 clamp(1rem, 5vw, 5rem); text-align: center;
}
.rl-lb-count { color: var(--rl-accent); }
.rl-lb-alt { max-width: 60ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The page must not scroll behind an open viewer. */
body.rl-lb-open { overflow: hidden; }
@media (max-width: 700px) {
    .rl-lb-prev, .rl-lb-next { top: auto; bottom: clamp(2.5rem, 8vh, 4rem); transform: none; }
    .rl-lb-alt { display: none; }
}

/* =========================================================================
   STORIES
   ====================================================================== */

.rl-storyhero {
    position: relative;
    background: var(--rl-ink);
    color: #fff;
    display: flex;
    align-items: flex-end;
    min-height: 72svh;
    overflow: hidden;
    padding: clamp(7rem, 16vh, 11rem) var(--rl-pad) clamp(2.5rem, 8vh, 5rem);
}
/* No photograph available — the plate carries the type on its own rather than
   leaving an empty picture frame. */
.rl-storyhero--bare { min-height: 60svh; align-items: center; }
.rl-storyhero-media { position: absolute; inset: 0; }
.rl-storyhero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.72; }
.rl-storyhero:not(.rl-storyhero--bare)::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.4) 100%);
}
.rl-storyhero-inner { position: relative; z-index: 2; max-width: 46rem; }
.rl-storyhero-crumb { margin-bottom: 1.25rem; color: rgba(255,255,255,0.6); }
.rl-storyhero-crumb a:hover { color: var(--rl-accent); }
.rl-storyhero-meta { color: var(--rl-accent); margin-bottom: 0.85rem; }
.rl-storyhero-title { font-size: clamp(2rem, 6vw, 4.5rem); color: #fff; line-height: 0.95; }
.rl-storyhero-dek {
    margin-top: clamp(0.85rem, 2vh, 1.35rem);
    font-size: clamp(1rem, 1.8vw, 1.375rem);
    line-height: 1.5; color: rgba(255,255,255,0.82); max-width: 44ch;
}

/* --- the prose ---------------------------------------------------------
   One measure column. story_render_body() emits bare <p> and <blockquote>,
   so these are element selectors on purpose — there are no classes to hook.
   ---------------------------------------------------------------------- */
.rl-prose {
    max-width: 40rem;
    margin: 0 auto;
    padding: clamp(3rem, 9vh, 5.5rem) var(--rl-pad);
}
.rl-prose p {
    font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
    line-height: 1.75; color: #2e2e2e; margin: 0 0 1.35rem;
}
.rl-prose p:first-of-type { font-size: clamp(1.1875rem, 1.9vw, 1.4375rem); line-height: 1.6; color: var(--rl-fg); }
.rl-prose blockquote {
    margin: 2.25rem 0; padding: 0 0 0 1.4rem;
    border-left: 3px solid var(--rl-accent);
    font-size: clamp(1.1875rem, 2.2vw, 1.5rem); line-height: 1.45;
    font-style: italic; color: var(--rl-fg);
}
.rl-prose a { color: var(--rl-accent); border-bottom: 1px solid currentColor; }
.rl-prose-tags { margin-top: 2.5rem; }
.rl-prose-tags a { color: inherit; }
.rl-prose-tags li { padding: 0; }
.rl-prose-tags li a { display: block; padding: 0.35rem 0.85rem; border-bottom: 0; }
.rl-prose-tags li:hover { border-color: var(--rl-accent); color: var(--rl-accent); }
.rl-prose-source { margin-top: 1.75rem; color: var(--rl-gray); font-size: 0.9375rem; }
.rl-prose-source a { color: var(--rl-accent); }

/* --- the index ---------------------------------------------------------- */
.rl-sxlist { border-top: 1px solid var(--rl-hair); }
.rl-sxitem { border-bottom: 1px solid var(--rl-hair); }
.rl-sxitem a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: baseline;
    padding: clamp(1.25rem, 3.5vh, 2rem) 0;
    transition: color 0.35s ease;
}
.rl-sxitem a:hover { color: var(--rl-accent); }
.rl-sxno { color: var(--rl-accent); }
.rl-sxtitle { display: block; font-size: clamp(1.375rem, 3.4vw, 2.5rem); }
.rl-sxdek { display: block; margin-top: 0.45rem; color: #4a4a4d; font-size: 0.9375rem; line-height: 1.6; max-width: 52ch; }
.rl-sxitem a:hover .rl-sxdek { color: var(--rl-accent); }
.rl-sxmeta { color: var(--rl-gray); text-align: right; white-space: nowrap; line-height: 1.6; }
@media (max-width: 700px) {
    .rl-sxitem a { grid-template-columns: auto minmax(0, 1fr); }
    .rl-sxmeta { grid-column: 2; text-align: left; white-space: normal; }
}

/* --- newsletter --------------------------------------------------------- */
.rl-news { max-width: 40rem; }
.rl-contact-lead, .rl-news-lead { color: rgba(255,255,255,0.78); max-width: 44ch; }
.rl-news-form { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.75rem; }
.rl-news-form input[type="email"] {
    flex: 1 1 16rem;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-family: 'Archivo', sans-serif; font-size: 1rem;
    padding: 0.85rem 1.1rem;
    transition: border-color 0.3s ease;
}
.rl-news-form input[type="email"]::placeholder { color: rgba(255,255,255,0.4); }
.rl-news-form input[type="email"]:focus { outline: none; border-color: var(--rl-accent); }
.rl-news-form button {
    flex: 0 0 auto;
    background: var(--rl-accent); color: #fff; border: 1px solid var(--rl-accent);
    font-family: 'Archivo', sans-serif; font-stretch: 62%; font-weight: 700;
    font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.85rem 1.75rem; cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.rl-news-form button:hover { background: transparent; color: var(--rl-accent); }
.rl-news-ok { font-size: clamp(1.375rem, 3vw, 2.25rem); color: var(--rl-accent); margin-top: 1.5rem; }
.rl-news-err { margin-top: 0.85rem; color: #ff9ec4; font-size: 0.9375rem; }
.rl-news-fine { margin-top: 1rem; color: rgba(255,255,255,0.45); font-size: 0.8125rem; line-height: 1.6; }

/* The honeypot and screen-reader-only labels. .rl-hp must stay reachable to a
   bot filling every field but invisible and unreachable to a person — display:
   none would let a smarter bot skip it. */
.rl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rl-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =========================================================================
   CONTACT FORM
   The form sits on the dark plate, so every control is drawn as a hairline on
   black rather than a filled box — a default white input would punch six holes
   in the section.
   ====================================================================== */

.rl-ct-note { margin-top: 1.75rem; color: var(--rl-gray); font-size: 0.9375rem; }
.rl-ctgrid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 5vw, 4.5rem);
    align-items: start;
}
.rl-ctrow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 2vw, 1.5rem); }
.rl-ctfield { display: block; margin-bottom: clamp(1rem, 2.5vh, 1.5rem); }
.rl-ctfield label { display: block; color: rgba(255,255,255,0.65); margin-bottom: 0.5rem; }
.rl-ct-opt { text-transform: none; letter-spacing: 0; color: rgba(255,255,255,0.4); }

.rl-ctform input[type="text"],
.rl-ctform input[type="email"],
.rl-ctform select,
.rl-ctform textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.28);
    color: #fff;
    font-family: 'Archivo', sans-serif;
    font-size: 1rem;
    padding: 0.65rem 0;
    transition: border-color 0.3s ease;
    border-radius: 0;
}
.rl-ctform textarea { resize: vertical; line-height: 1.6; }
.rl-ctform ::placeholder { color: rgba(255,255,255,0.35); }
.rl-ctform input:focus, .rl-ctform select:focus, .rl-ctform textarea:focus {
    outline: none;
    border-bottom-color: var(--rl-accent);
}
/* A native <select> paints its own popup with the OS palette; only the closed
   control is ours. The dark option colour keeps the open list readable on the
   platforms that do inherit it. */
.rl-ctform select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.rl-ctform select option { background: #141414; color: #fff; }

.rl-ctsend {
    margin-top: 0.75rem;
    background: var(--rl-accent);
    color: #fff;
    border: 1px solid var(--rl-accent);
    font-family: 'Archivo', sans-serif; font-stretch: 62%; font-weight: 700;
    font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.95rem 2.25rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.rl-ctsend:hover { background: transparent; color: var(--rl-accent); }

.rl-ct-err { display: block; margin-top: 0.4rem; color: #ff9ec4; font-size: 0.875rem; }
.rl-ct-err--form {
    border: 1px solid rgba(255,158,196,0.4);
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.5rem;
}
.rl-ct-ok { font-size: clamp(1.75rem, 4.5vw, 3.25rem); color: var(--rl-accent); }

.rl-ctaside { border-left: 1px solid rgba(255,255,255,0.16); padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.rl-ctaside h3 { color: rgba(255,255,255,0.65); margin-bottom: 0.85rem; }
.rl-ctaside-p { color: rgba(255,255,255,0.62); font-size: 0.9375rem; line-height: 1.65; margin-bottom: 1.25rem; }
.rl-ctaside-mail {
    display: inline-block;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: #fff;
    word-break: break-word;
    transition: color 0.3s ease;
}
.rl-ctaside-mail:hover { color: var(--rl-accent); }

@media (max-width: 860px) {
    .rl-ctgrid { grid-template-columns: 1fr; }
    .rl-ctrow { grid-template-columns: 1fr; }
    .rl-ctaside { border-left: 0; border-top: 1px solid rgba(255,255,255,0.16); padding-left: 0; padding-top: 1.75rem; }
}

/* =========================================================================
   LEGAL PAGE
   Element selectors: the carried-over German compliance markup has no classes
   to hook, and it must not be edited to acquire any.
   ====================================================================== */
.rl-legal h2 {
    font-family: 'Archivo', sans-serif; font-stretch: 80%; font-weight: 700;
    font-size: 1.125rem; letter-spacing: 0.01em;
    margin: 2.5rem 0 0.6rem; color: var(--rl-fg);
}
.rl-legal h2:first-child { margin-top: 0; }
.rl-legal p { font-size: 1rem; line-height: 1.75; }
.rl-legal p:first-of-type { font-size: 1rem; line-height: 1.75; color: #2e2e2e; }
.rl-legal address { font-style: normal; line-height: 1.8; font-size: 1rem; color: #2e2e2e; }
.rl-legal code { background: #f2f2f3; padding: 0.1rem 0.4rem; font-size: 0.875rem; }
.rl-legal a { color: var(--rl-accent); border-bottom: 1px solid currentColor; }
.rl-legal .muted { color: var(--rl-gray); font-size: 0.8125rem; margin-top: 2rem; }

/* --- motion preferences ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rl *, .rl *::before, .rl *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .rl-hero-line > span { transform: none; }
    .rl-hero-media img { animation: none; transform: none; }
    .rl-r { opacity: 1; transform: none; }
    .rl-cursor { display: none; }
}