/* ─────────────────────────────────────────────────────────
   biancale.STUDIO — v4 visual refinement layer (Oct 2026)
   Helvetica Neue only · Swiss / institutional-editorial · monochrome interface.
   Reference: Fondazione Prada — heavy uppercase titles set tight, sitting right on the
   pictures, compact bold metadata, hairline rules, black on white.

   Loads AFTER site.css and restyles only: fonts, type, colour tokens, spacing, alignment.
   No mechanics are touched — sticky pins, transforms, overflow, slider/strip sizing,
   gallery and transitions all stay in site.css / site.js exactly as they were.
   Rollback = remove the one <link> to this file (head() in gen.py).
   ⚠ The Helvetica Neue files are NOT licensed for web use yet — preview only until a
     Monotype web licence (or a substitute face) is in place.
   ───────────────────────────────────────────────────────── */
@font-face{font-family:'HN';src:url('../fonts/helvetica-neue/HelveticaNeue-Roman.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'HN';src:url('../fonts/helvetica-neue/HelveticaNeue-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'HN';src:url('../fonts/helvetica-neue/HelveticaNeue-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'HN';src:url('../fonts/helvetica-neue/HelveticaNeue-Heavy.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'HN';src:url('../fonts/helvetica-neue/HelveticaNeue-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

:root{
  --hn:'HN','Helvetica Neue',Helvetica,Arial,sans-serif;
  --sans:var(--hn);
  --serif:var(--hn);                 /* one typeface: every old Canela slot becomes Helvetica Neue */
  --paper:#FFFFFF;
  --paper-2:#F2F2F2;
  --ink:#0D0D0D;
  --ink-body:#0D0D0D;
  --ink-soft:rgba(13,13,13,.56);
  --ink-faint:rgba(13,13,13,.22);
  --hair:rgba(13,13,13,.18);
  --mid:#8C8C8C;
  --midL:#B5B5B5;
  /* type scale — display titles are set tight with negative tracking */
  --w-head:700;   /* main headlines: Bold, was Heavy 800 — her request 29 Oct 2026, matched to FP's stroke weight */
  --t-display:-.048em;
  --t-title:-.035em;
  --t-label:-.004em;
}
body{font-family:var(--hn);font-synthesis:none;-webkit-font-smoothing:antialiased}

/* utility voices from v3 → Helvetica Neue hierarchy */
.d1,.d2,.d3{font-family:var(--hn)}
.hand{font-family:var(--hn);font-weight:800;letter-spacing:var(--t-title)}
.lbl{font-family:var(--hn);font-weight:700;font-size:11px;letter-spacing:var(--t-label);color:var(--ink);line-height:1.25}
.lbl-f{color:var(--ink-soft);font-weight:500}
.body-t{font-family:var(--hn);font-weight:400;letter-spacing:0;color:var(--ink)}

/* ── menu rail: utilitarian, compact, bold — same rail, same behaviour ── */
.r-logo{font-family:var(--hn);font-weight:var(--w-head);letter-spacing:-.02em;line-height:1}   /* logo = headline weight (her call, 29 Oct) */
.r-nav{font-family:var(--hn);font-weight:700;letter-spacing:var(--t-label);line-height:1}
.r-logo,.r-nav{text-transform:uppercase}            /* the sentence-case /selected page must not soften the menu */
.lg2nd{margin-inline-start:.3em}
.lang-rail .r-lang{font-family:var(--hn);font-weight:500;letter-spacing:0}
.r-lang b{font-weight:800}
@media (min-width:861px){
  .r-logo,.r-nav{font-size:clamp(11px,.95vw,13px)}
}

/* ── entrance splash — same wipe & timing, new type ── */
.sp-lg{font-family:var(--hn);font-weight:var(--w-head);letter-spacing:-.045em;line-height:.9;text-transform:uppercase}
.sp-tag{font-family:var(--hn);font-weight:700;letter-spacing:var(--t-label);color:var(--ink)}
@media (min-width:861px){
  .sp-lg{font-size:clamp(28px,3.2vw,52px)}
  .sp-tag{font-size:clamp(12px,1.1vw,16px)}
}

/* ── footer ── */
footer .f-mail{font-family:var(--hn);font-weight:700;letter-spacing:-.01em;border-bottom-color:var(--ink)}

/* ═══════════ LANDING ═══════════ */
/* the hover reveal stays (blur + title) — the title now arrives as a bold block, bottom-left */
.hitem .hcap{align-items:flex-end;justify-content:flex-start;text-align:left;padding:clamp(14px,1.3vw,22px)}
.hitem .hcap .hcap-t{font-family:var(--hn);font-weight:800;font-size:clamp(18px,1.75vw,30px);line-height:.92;letter-spacing:var(--t-title);white-space:normal;max-width:14ch}
.h-cue{font-family:var(--hn);font-weight:500;font-size:11px;letter-spacing:0;color:var(--ink)}
.h-end a{font-family:var(--hn);font-weight:var(--w-head);font-size:clamp(30px,3.6vw,62px);line-height:.9;letter-spacing:var(--t-display);border-bottom:0;padding-bottom:0}
@media (min-width:861px){
  /* introduction: one heavy line, top-left on the shared left edge — above the tallest picture */
  .home-eyebrow{left:var(--railpad);right:auto;top:clamp(22px,3.6vh,38px);text-align:left;
    font-family:var(--hn);font-weight:var(--w-head);font-size:clamp(22px,2.9vw,50px);line-height:.9;
    letter-spacing:-.04em;text-transform:uppercase;color:var(--ink)}
  .home-eyebrow br{display:none}
}

/* ═══════════ PORTFOLIO ═══════════ */
/* categories = the big title stack; count = small bold index; description = plain text block */
.pf-eyebrow{font-family:var(--hn);font-weight:700;letter-spacing:var(--t-label);color:var(--ink);text-transform:uppercase;
  border-top:1px solid var(--ink);padding-top:9px}
.pf-cat{font-family:var(--hn);font-weight:var(--w-head);letter-spacing:var(--t-display);color:#CCCCCC}
.pf-cat:hover,.pf-cat.on{color:var(--ink)}
.pf-cat .pf-num{font-weight:700;letter-spacing:0;opacity:1;align-self:flex-start;font-size:.3em;line-height:1;margin-top:.32em}
.pf-cat .pf-num i{opacity:.45}
.pf-desc{font-family:var(--hn);font-weight:400;letter-spacing:0;color:var(--ink);text-transform:none}
.pf-shot .pf-name{align-items:flex-end;justify-content:flex-start;text-align:left;padding:clamp(14px,1.3vw,22px)}
.pf-shot .pf-name span{font-family:var(--hn);font-weight:800;font-size:clamp(18px,1.75vw,30px);line-height:.92;letter-spacing:var(--t-title);white-space:normal;max-width:14ch}
@media (min-width:861px){
  .pf-right{padding-right:clamp(28px,5vw,96px);gap:0}
  .pf-eyebrow{font-size:12px;margin-bottom:clamp(18px,3.2vh,34px)}
  .pf-cat-list{gap:clamp(2px,.5vh,6px)}
  .pf-cat{font-size:clamp(24px,2.55vw,42px);line-height:.94}
  .pf-desc{font-size:clamp(13px,1.02vw,15px);line-height:1.32;max-width:38ch;margin-top:clamp(22px,3.6vh,36px)}
}

/* ═══════════ ALBUMS ═══════════ */
/* hero title: oversized Heavy, tight, bottom-left on the shared left edge (was serif, right) */
.ah-overlay{align-items:flex-start;text-align:left}
.ah-title{font-family:var(--hn);font-weight:var(--w-head);line-height:.86;letter-spacing:var(--t-display);text-transform:uppercase;color:#fff;max-width:11ch}
.ah-info{font-family:var(--hn);font-weight:700;letter-spacing:var(--t-label);color:#fff}
@media (min-width:861px){
  .ah-overlay{left:var(--railpad);right:auto;bottom:clamp(34px,6.5vh,76px);gap:clamp(10px,1.4vh,16px)}
  .ah-title{font-size:clamp(52px,7.2vw,128px)}
  .ah-title.short{font-size:clamp(60px,9vw,160px)}
  .ah-info{font-size:clamp(12px,1vw,15px)}
}
/* project notes read as an information block: hairline on top, bold first line, plain text */
.album-note{font-family:var(--hn);font-weight:400;letter-spacing:-.003em;color:var(--ink);text-transform:none;
  border-top:1px solid var(--ink);padding-top:12px}
.album-note p::first-line{font-weight:700;text-transform:uppercase}
.album-note .album-cred::first-line{font-weight:inherit;text-transform:inherit}
.album-cred{font-family:var(--hn);font-weight:700;letter-spacing:var(--t-label);color:var(--ink);text-transform:uppercase}
.dark-sec .album-note,.alb-french-garden .album-note{border-top-color:rgba(240,238,232,.6)}
/* the note box starts on the shared left edge (it was centred inside a wider box → 20px off the pictures);
   the curtain-stack albums keep their centred full-screen credit card */
body:not(.alb-stack) .album-note-inline{justify-content:flex-start}
.album-note{width:min(36ch,100%)}                  /* one rule length for every note, short or long */
/* Fashion Week: the note now opens the Lisbon pictures — it reads as the chapter title */
.alb-fashion-weeks .album-note-inline{max-width:none}
.alb-fashion-weeks .album-note{font-weight:var(--w-head);line-height:.9;letter-spacing:var(--t-display);text-transform:uppercase;width:auto;padding-top:14px;white-space:nowrap}
@media (min-width:861px){.alb-fashion-weeks .album-note{font-size:clamp(30px,3.4vw,58px)}}
@media (max-width:860px){.alb-fashion-weeks .album-note{font-size:clamp(22px,7vw,32px)}}
@media (min-width:861px){
  .album-note{font-size:clamp(14px,1.12vw,17px);line-height:1.3;max-width:42ch}
  .album-cred{font-size:12px}
}
/* chapters inside one album (Uoga Uoga: brow campaign, then skincare) */
.chap-t{border-top:1px solid var(--ink);padding-top:14px}
.chap-h{font-family:var(--hn);font-weight:var(--w-head);line-height:.88;letter-spacing:var(--t-display);text-transform:uppercase}
.chap-m{font-family:var(--hn);font-weight:700;font-size:12px;letter-spacing:var(--t-label);text-transform:uppercase;margin-top:12px}
/* the five characters: the line from the film as a title, then her still + 35 mm frames close together */
.ch-q{font-family:var(--hn);font-weight:var(--w-head);line-height:.92;letter-spacing:var(--t-title);text-transform:uppercase;margin-bottom:clamp(14px,2vh,22px)}
.ch-row{display:flex;align-items:flex-start;gap:clamp(6px,.7vw,12px)}
.ch-row figure{margin:0}
.ch-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px)}
.ch-pair .ch-row figure{flex:none;width:min(100%,54vh)}
@media (min-width:861px){
  .chap-h{font-size:clamp(40px,5.6vw,100px)}
  .ch-q{font-size:clamp(22px,2.4vw,42px)}
}
@media (max-width:860px){
  .chap-h{font-size:clamp(32px,10vw,46px)}
  .ch-q{font-size:clamp(20px,6vw,26px)}
  /* phone: her still full width, the film frames in one row underneath */
  .ch-row{display:grid;grid-template-columns:repeat(var(--nf),minmax(0,1fr));gap:6px}
  .ch-row figure:first-child{grid-column:1/-1}
  .ch-pair{grid-template-columns:minmax(0,1fr);gap:7svh}
  .ch-pair .ch-row figure{width:100%}
}
/* next project: big Heavy title, compact labels — same thumbnails, same progress line */
.next-proj .lbl{color:var(--ink)}
.np-line{background:var(--hair)}
.np-line .np-fill{background:var(--ink)}
.np-title{font-family:var(--hn);font-weight:var(--w-head);line-height:.9;letter-spacing:var(--t-display);text-transform:uppercase}
.np-prev{color:var(--ink-soft)}
@media (min-width:861px){
  .np-title{font-size:clamp(34px,4.4vw,76px)}
}
.m-topnav a{font-family:var(--hn);font-weight:700;letter-spacing:var(--t-label)}

/* gallery overlay labels */
.gal-cap,.gal-x{font-family:var(--hn);font-weight:700;letter-spacing:var(--t-label)}

/* films slider labels */
.fs-lbl{font-family:var(--hn);font-weight:700;letter-spacing:var(--t-label);color:var(--ink);text-transform:uppercase}
.f-dur{color:var(--ink-soft)}

/* portraits: names in bold, tight */
.pt-name{font-family:var(--hn);font-weight:700;letter-spacing:-.025em;text-transform:uppercase}

/* ═══════════ INFORMATION — stays red; typography rebuilt in the new hierarchy ═══════════ */
/* Heavy statement → plain paragraph (flush left, Swiss — no more justified block) →
   services as a ruled list → bold contact line → compact small print */
.info-panel{gap:clamp(16px,2.6vh,26px)}
.info-panel .i-lead{font-family:var(--hn);font-weight:var(--w-head);line-height:.9;letter-spacing:var(--t-display);text-transform:uppercase;max-width:13ch}
.info-panel .i-body{font-family:var(--hn);font-weight:400;letter-spacing:-.003em;line-height:1.32;max-width:46ch}
.info-panel .i-body.i-just{text-align:left}
.info-panel .i-svc{font-family:var(--hn);font-weight:700;letter-spacing:var(--t-label);text-transform:uppercase;line-height:1.15;
  border-bottom:1px solid rgba(249,246,243,.45);max-width:46ch}
.info-panel .i-svc li{border-top:1px solid rgba(249,246,243,.45);padding:7px 0 6px}
.info-panel .i-mail{font-family:var(--hn);font-weight:800;letter-spacing:-.025em;text-transform:uppercase}
.i-links{font-family:var(--hn);font-weight:700;letter-spacing:var(--t-label);text-transform:uppercase;color:rgba(249,246,243,.78)}
.i-links a{border-bottom-color:rgba(249,246,243,.5)}
@media (min-width:861px){
  .info-panel{width:min(720px,54vw)}
  .info-panel .i-lead{font-size:min(clamp(34px,4.3vw,72px),7.4vh)}   /* the page never scrolls — short screens cap it */
  .info-panel .i-body{font-size:clamp(14px,1.15vw,17px)}
  .info-panel .i-svc{font-size:clamp(12px,.98vw,14px)}
  .info-panel .i-mail{font-size:clamp(17px,1.55vw,24px)}
  .i-links{font-size:11px}
}

/* ═══════════ PRIVATE PORTFOLIO PAGE (/selected) — same language; .uu = the Uoga Uoga album, built the same way ═══════════ */
/* name = display line · section = heavy title on a black rule · project = bold title ·
   metadata / captions = compact bold caps · text = plain sentence case */
:is(.pg-sel,.uu) .sel-name{font-weight:var(--w-head);line-height:.9;letter-spacing:var(--t-display);text-transform:uppercase;color:var(--ink)}
:is(.pg-sel,.uu) .sel-name span{color:var(--midL);display:block}   /* the role sits under the name — no dash */
:is(.pg-sel,.uu) .sel-name i{display:none}
:is(.pg-sel,.uu) .sel-intro{font-weight:400;letter-spacing:-.003em;color:var(--ink);line-height:1.3}
:is(.pg-sel,.uu) .sel-mail{font-weight:700;letter-spacing:-.01em;border-bottom-color:var(--ink)}
:is(.pg-sel,.uu) .sel-sec{font-weight:var(--w-head);line-height:.92;letter-spacing:var(--t-title);text-transform:uppercase;color:var(--ink);
  border-top:1px solid var(--ink);padding-top:12px}
:is(.pg-sel,.uu) .cs-title{font-weight:var(--w-head);line-height:.95;letter-spacing:-.03em;text-transform:uppercase}
:is(.pg-sel,.uu) .cs-sub{font-weight:700;letter-spacing:var(--t-label);text-transform:uppercase;color:var(--ink);font-size:12px;line-height:1.3}
:is(.pg-sel,.uu) .cs-sum{font-weight:400;letter-spacing:-.003em;color:var(--ink);line-height:1.32}
:is(.pg-sel,.uu) .cs-tags{font-weight:700;letter-spacing:var(--t-label);color:var(--ink-soft);font-size:11px}
:is(.pg-sel,.uu) .cs-facts dt{font-weight:700;letter-spacing:var(--t-label);color:var(--ink);font-size:11px;padding-top:2px}
:is(.pg-sel,.uu) .cs-facts dd{font-weight:400;color:var(--ink);font-size:14px;line-height:1.35}
:is(.pg-sel,.uu) .cs-h{font-weight:700;letter-spacing:var(--t-label);font-size:12px;border-top:1px solid var(--ink);padding-top:8px}
:is(.pg-sel,.uu) .cs-p,:is(.pg-sel,.uu) .cs-list{font-weight:400;color:var(--ink);font-size:14px;line-height:1.4}
:is(.pg-sel,.uu) .cs-list b{font-weight:700}
:is(.pg-sel,.uu) .sc-t{font-weight:700;letter-spacing:var(--t-label);font-size:12px;line-height:1.3}
:is(.pg-sel,.uu) .sc-l{font-weight:400;color:var(--ink);letter-spacing:-.003em}
:is(.pg-sel,.uu) .pr-lb{font-weight:500;color:var(--ink-soft);letter-spacing:0}
:is(.pg-sel,.uu) .sel-more{font-weight:var(--w-head);letter-spacing:-.02em;font-size:clamp(15px,1.3vw,19px)}
:is(.pg-sel,.uu) .sel-more a{border-bottom:0}
.sel-back{font-family:var(--hn);font-weight:700;letter-spacing:var(--t-label);font-size:11px}
@media (min-width:861px){
  :is(.pg-sel,.uu) .sel-name{font-size:clamp(34px,4.4vw,74px)}
  :is(.pg-sel,.uu) .sel-intro{font-size:clamp(16px,1.35vw,20px);max-width:40ch}
  :is(.pg-sel,.uu) .sel-sec{font-size:clamp(26px,2.7vw,46px)}
  :is(.pg-sel,.uu) .cs-title{font-size:clamp(22px,2.1vw,34px)}
  :is(.pg-sel,.uu) .cs-sum{font-size:clamp(15px,1.25vw,18px)}
}

/* ── phones / small tablets ── */
@media (max-width:860px){
  .r-logo,.r-nav{font-size:12px}
  /* the menu bar's buttons: the whole bar height is the tap area — she couldn't hit the thin line of text */
  .rail{padding:0 4vw env(safe-area-inset-bottom,0px)}
  .r-logo,.r-nav{padding:18px 3vw}
  .sp-lg{font-size:30px}
  .sp-tag{font-size:11px}
  .home-eyebrow{font-family:var(--hn);font-weight:var(--w-head);font-size:clamp(24px,7.4vw,34px);line-height:.9;letter-spacing:-.04em;
    text-transform:uppercase;color:var(--ink);max-width:none;padding:calc(18px + env(safe-area-inset-top,0px)) 78px 4svh var(--pad)}   /* clear of the FR/EN tab */
  .home-eyebrow br{display:none}
  .pf-eyebrow{font-size:10px;max-width:calc(100% - 70px);padding-top:7px}   /* the rule stops short of the FR/EN tab */
  .pf-cat{font-size:clamp(19px,6vw,26px);line-height:1}
  .pf-desc{font-size:13px;line-height:1.3}
  .ah-overlay{left:var(--pad);right:var(--pad)}
  .ah-title{font-size:clamp(40px,12.5vw,68px)}
  .ah-title.short{font-size:clamp(48px,15vw,80px)}
  .ah-info{font-size:12px}
  .album-note{font-size:15px;line-height:1.3}
  .album-cred{font-size:11px}
  .np-title{font-size:clamp(30px,10vw,48px)}
  .hitem .hcap .hcap-t,.pf-shot .pf-name span{font-size:22px}
  .pt-name{font-size:17px}
  .info-panel{gap:1.7svh}
  .info-panel .i-lead{font-size:clamp(26px,8.2vw,36px)}
  .info-panel .i-body{font-size:13px;line-height:1.35}
  .info-panel .i-svc{font-size:11px}
  .info-panel .i-svc li{padding:5px 0 4px}
  .info-panel .i-mail{font-size:15px}
  .i-links{font-size:9.5px}
  :is(.pg-sel,.uu) .sel-name{font-size:clamp(28px,8.6vw,38px)}
  :is(.pg-sel,.uu) .sel-name span{display:block}
  :is(.pg-sel,.uu) .sel-intro{font-size:16px}
  :is(.pg-sel,.uu) .sel-sec{font-size:clamp(22px,6.6vw,30px)}
  :is(.pg-sel,.uu) .cs-title{font-size:20px}
  :is(.pg-sel,.uu) .cs-sum{font-size:15px}
}