/* =====================================================================
   REFINE (8 nov 2026) — a calmer, more refined look.
   Loaded last. To go back: remove the refine.css <link> from index.html.
   ===================================================================== */

/* 1. Typography: one family for headings, one weight per heading.
   The second line of a title keeps the same weight and only changes tone. */
body.v2 h1 em,body.v2 h2 em,body.v2 .cta-text em{font-weight:inherit;letter-spacing:inherit}
body.v2 .credit-band .credit-row li:nth-child(even){font-weight:700;letter-spacing:-.02em}
body.v2 .k-b .k-word,body.v2 .k-a .k-word.k-it{font-weight:800;letter-spacing:-.045em}
body.v2 .partner:nth-child(even) .partner-word{font-weight:900;letter-spacing:-.05em}
body.v2 h1 em,body.v2 h2 em,body.v2 .cta-text em{color:var(--soft,#aeb2b8);background:none;-webkit-text-fill-color:currentColor}
body.v2 .classes-head h2 em,body.v2 .cc-title em{font-weight:inherit}

/* 2. One accent colour: gold. Category band and partner words alternate in tone, not colour. */
body.v2 .credit-band .credit-row li:nth-child(even),
body.v2 .partner:nth-child(even) .partner-word,
body.v2 .k-b .k-word,body.v2 .k-a .k-word.k-it{color:var(--soft,#aeb2b8)}

/* 3. Less glass: the section panels stay frosted; the cards inside them become flat. */
body.v2 .partner,body.v2 .class-card .cc-back,body.v2 .af-block,
body.v2 .practice-list details,body.v2 .practice-list details:last-child{
 background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);box-shadow:none;
 -webkit-backdrop-filter:none;backdrop-filter:none}
body.v2 .practice-list details[open]{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14)}
@media(hover:hover) and (pointer:fine){
 body.v2 .practice-list details:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);box-shadow:0 24px 50px -32px rgba(0,0,0,.7)}
}

/* 4. More air: wider gaps between sections, shorter reading lines. */
body.v2{--gap:clamp(24px,3.4vw,52px);--sec:clamp(80px,12vh,140px)}
body.v2 :is(.photos-intro,.contact-intro,.partners-intro,.work-summary,.about-text p,.v2-head>p){max-width:58ch}
@media(max-width:700px){body.v2{--gap:14px;--sec:64px}}

/* 5. Photos: one shared grade, so every picture looks like the same shoot. */
html:not(.work-focus) body.v2 .work-card .media-button>img,
body.v2 .photos-rail .ph img,body.v2 .portrait-wrap img{filter:contrast(1.05) saturate(.88)}

/* 6. Calmer motion: things appear softly instead of out of a heavy blur. */
body.v2 .rv{filter:blur(6px);transform:none;transition:opacity .8s var(--ease),filter .8s var(--ease);transition-delay:var(--rd,0ms)}
body.v2 .rv.rv-txt{filter:blur(4px)}
body.v2 .rv.rv-in{filter:none}

/* 7. Same details everywhere: one corner size for cards, one for panels. */
body.v2{--card-r:16px}
body.v2 :is(.partner,.af-block,.practice-list details,.practice-list details:last-child,#project-dialog){border-radius:var(--card-r)}
@media(max-width:700px){body.v2 #project-dialog{border-radius:0}}

/* Phones: keep the e-mail address on one line */
@media(max-width:700px){body.v2 .email{font-size:clamp(17px,5.4vw,26px);overflow-wrap:normal;white-space:nowrap}}
/* The heavier second line must still fit long German words ("zusammenarbeiten") */
@media(max-width:520px){html[lang="de"] body.v2 .cta-text em{font-size:.5em}}

/* Small grey text a little lighter, so it reads well over the water photo and in sunlight */
body.v2{--muted:#a3a8af}

/* ---------- Round 2 (8 nov): finishing touches ---------- */

/* A. Work grid: two equal columns, side by side, no step down on the right */
@media(min-width:701px){
 body.v2 .work-grid:not(.reel-grid) .work-card:nth-child(n){grid-column:span 6;margin-top:0}
 body.v2 .work-grid{align-items:start}
}

/* B. Artist section: the three boxes become calm, open lists with a thin line between them */
body.v2 .af-block{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:22px 0 0;margin:0}
body.v2 .af-block+.af-block{margin-top:26px}
body.v2 .af-list li{padding:10px 0;border-bottom:0}
body.v2 .af-list li+li{border-top:1px solid rgba(255,255,255,.05)}
body.v2 .af-brands{color:var(--soft)}
body.v2 .af-chips li{border-color:rgba(255,255,255,.12);color:var(--soft)}

/* C. Partners: a compact section — title on the left, the two brands on the right as slim cards */
body.v2 .partner{flex-direction:row;align-items:center;gap:clamp(18px,2vw,28px);padding:clamp(18px,2vw,26px) clamp(76px,7vw,96px) clamp(18px,2vw,26px) clamp(20px,2.2vw,30px)}
body.v2 .partner-logo{min-height:0;flex:0 0 auto;justify-content:center;width:clamp(92px,9vw,150px)}
body.v2 .partner-logo[data-partner="middle-beast"] img{width:clamp(52px,4.6vw,68px)}
body.v2 .partner-logo[data-partner="steppix"] img{width:100%;max-width:100%}
body.v2 .partner-meta{border-top:0;padding-top:0;padding-left:clamp(18px,2vw,28px);border-left:1px solid var(--line)}
body.v2 .partner-go{top:50%;margin-top:-25px}
body.v2 .partners-grid{grid-template-columns:1fr;gap:12px}
@media(min-width:901px){
 body.v2 .v2-partners{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:4vw;align-items:center;padding:calc(var(--sec) * .8) var(--pad)}
 body.v2 .partners-intro{margin:0}
}
@media(max-width:700px){
 body.v2 .partner{padding:16px 70px 16px 16px;gap:16px}
 body.v2 .partner-logo{width:84px}
 body.v2 .partner-meta{padding-left:16px}
 body.v2 .partner-go{width:42px;height:42px;margin-top:-21px;right:14px}
}

/* D. "What I do": the switching word sits under the title as a calm subtitle, same voice as the headings */
body.v2 .svc-rotator{flex-direction:column;align-items:flex-start;gap:6px;margin-top:22px}
body.v2 .svc-for{font-size:11px}
body.v2 .svc-slot{flex:none;width:100%}
body.v2 .svc-word{font-weight:800;letter-spacing:-.03em;color:var(--soft)}
body.v2 :not(.af-block)+.af-block{border-top:0}
body.v2 .partner-meta{flex:1;min-width:0}
@media(max-width:700px){
 body.v2 .partner{flex-direction:column;align-items:flex-start;padding:20px 72px 20px 20px;gap:14px}
 body.v2 .partner-logo{width:auto;justify-content:flex-start}
 body.v2 .partner-logo[data-partner="steppix"] img{width:120px}
 body.v2 .partner-meta{padding-left:0;border-left:0}
 body.v2 .partner-go{top:18px;margin-top:0}
}

/* What is Breaking? — short explainer for visitors new to the culture (11 Nov 2026) */
body.v2 .v2-breaking{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,5vw,80px);align-items:end;padding:clamp(56px,8vh,96px) var(--pad,4vw);border-top:1px solid var(--line,#2a2e33)}
body.v2 .v2-breaking .v2-head h2{margin-bottom:0;font-size:clamp(40px,5.4vw,92px)}
.bk-body p{margin:0 0 16px;max-width:62ch;font-size:clamp(15px,1.15vw,17px);line-height:1.65;color:var(--soft,#aeb2b8)}
.bk-body p:first-child{color:var(--ink,#f3f3f1)}
.bk-elements{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bk-elements li{padding:7px 14px;border:1px solid var(--line,#2a2e33);border-radius:999px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft,#aeb2b8)}
.bk-elements li:last-child{border-color:var(--accent,#ffcc33);color:var(--accent,#ffcc33)}
@media(max-width:800px){body.v2 .v2-breaking{grid-template-columns:1fr;align-items:start}}