/* ============================================================
   WUF website UI kit — shared component styles
   Loads on top of ../../colors_and_type.css
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-1);color:var(--fg-1);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* iOS Safari renders color-less buttons in the system accent (blue); inherit instead */
button{color:inherit;-webkit-text-fill-color:currentColor}
::selection{background:var(--wuf-red);color:#fff}

/* Film grain overlay */
.grain{position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* Layout */
.container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);width:100%}
.section{padding-block:clamp(64px,9vw,140px)}
.section--tight{padding-block:clamp(40px,5vw,72px)}
.bg-dark{background:var(--bg-dark);color:var(--fg-inv)}
.bg-paper{background:var(--bg-2)}
.bg-red{background:var(--action);color:#fff}

/* Eyebrow / labels */
.eyebrow{font-family:var(--font-sans);font-size:var(--fs-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1;display:inline-flex;align-items:center;gap:8px}
.eyebrow--red{color:var(--action)}
.eyebrow .num{color:var(--action)}
.eyebrow.on-dark{color:rgba(255,255,255,.7)}

/* Section heading row */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:48px}
.bg-dark .sec-head{border-color:var(--wuf-hairline-inv)}
@media(max-width:640px){.sec-head{flex-direction:column;align-items:flex-start;gap:10px}.sec-head>.sec-mark{white-space:normal!important}}
.sec-mark{font-family:var(--font-sans);font-size:var(--fs-label);font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3)}
/* Serif head modifier — add alongside .wuf-d1/.wuf-d2 to set a head in PP Mondwest */
.serif-head{font-family:var(--font-display)!important;font-weight:400!important;text-transform:none!important;letter-spacing:0!important;line-height:1.0}
/* WUF mark used as the asterisk device */
.wuf-mark{display:inline-block;width:auto;vertical-align:baseline}
.signature{font-family:var(--font-display);font-weight:400;letter-spacing:0;line-height:.98;text-transform:none}

/* Buttons */
.btn{font-family:var(--font-pixel);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;border:1.5px solid var(--wuf-black);padding:15px 26px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;background:var(--wuf-black);color:#fff;transition:background var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std),border-color var(--dur-fast),transform var(--dur-fast);text-decoration:none}
.btn .ar{transition:transform var(--dur) var(--ease-out)}
.btn:hover .ar{transform:translateX(5px)}
.btn:active{transform:scale(.98)}
.btn--primary:hover{background:var(--action);border-color:var(--action)}
.btn--red{background:var(--action);border-color:var(--action)}
.btn--red:hover{background:var(--wuf-red-press);border-color:var(--wuf-red-press)}
.btn--ghost{background:transparent;color:var(--wuf-black)}
.btn--ghost:hover{background:var(--wuf-black);color:#fff}
.btn--ghost-inv{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--ghost-inv:hover{background:#fff;color:var(--wuf-black);border-color:#fff}
.btn--text{background:transparent;border:0;border-bottom:2px solid currentColor;padding:6px 0;color:inherit}
.btn--text:hover{color:var(--action)}
.btn:focus-visible{outline:2px solid var(--action);outline-offset:3px}

/* Tag / pill */
.tag{font-family:var(--font-pixel);font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:5px 12px;display:inline-block}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background var(--dur),border-color var(--dur),backdrop-filter var(--dur)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:clamp(18px,3vw,48px);flex-wrap:nowrap}
.nav-logo,.drawer-logo{height:24px;width:auto;flex:none;display:block}
.nav-left{display:flex;align-items:center;gap:22px;flex:none;overflow:visible}
.nav-mp{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;position:relative;top:1px;flex:none;overflow:visible}
.nav-mp-rule{width:1px;height:22px;background:currentColor;opacity:.22;flex:none}
.nav-mp-lab{font-family:var(--font-sans);font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;opacity:.5;line-height:1;flex:none}
.nav-mp img{height:13px;width:auto;display:block;opacity:.95;position:relative;top:.5px;flex:none}
/* Corriere media-partner lockup: drops once the bar gets tight so it can never push the CTAs into an overlap */
@media(max-width:1000px){.nav-mp{display:none}}
.nav-right{display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);flex:0 0 auto;min-width:0}
.nav-links{display:flex;gap:clamp(16px,1.7vw,26px);align-items:center;flex:0 0 auto;white-space:nowrap}
/* accent CTA buttons — stay visible alongside the burger */
.nav-ctas{display:flex;gap:10px;align-items:stretch;flex:0 0 auto}
.nav-cta{padding:11px 18px;font-size:12px;white-space:nowrap}
/* WUF ID (ink) button stays solid black everywhere; on the dark hero add a faint outline so its edge reads against the photo and it differs from the language pill */
.nav--dark:not(.nav--scrolled) .nav-cta-inverts{background:var(--wuf-black);border-color:rgba(255,255,255,.35);color:#fff}
.nav--dark:not(.nav--scrolled) .nav-cta-inverts:hover{background:var(--action);border-color:var(--action);color:#fff}
/* WUF ID nav button — red outline + mark + looping shimmer (light & dark nav) */
.nav-wufid{--wufid-grad:linear-gradient(105deg,var(--action) 0%,var(--action) 43%,#ffe2e3 50%,var(--action) 57%,var(--action) 100%);position:relative;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 18px;border:1.5px solid transparent;box-sizing:border-box;background:linear-gradient(180deg,rgba(237,32,36,.13),rgba(237,32,36,.03));font-family:var(--font-pixel);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;isolation:isolate;transition:background .35s var(--ease-out)}
/* red outline (drawn just OUTSIDE the box) carrying the moving highlight */
.nav-wufid::before{content:"";position:absolute;inset:-1.5px;padding:1.5px;background:var(--wufid-grad);background-size:240% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:wufid-glint 3.4s ease-in-out infinite;pointer-events:none}
/* icon: the svg shape is the mask, the glint gradient is its fill */
.nav-wufid .wufid-ico{width:15px;height:15px;flex:none;background:var(--wufid-grad);background-size:240% 100%;-webkit-mask:url(../assets/logos/wuf-symbol-accent.svg) center/contain no-repeat;mask:url(../assets/logos/wuf-symbol-accent.svg) center/contain no-repeat;animation:wufid-glint 3.4s ease-in-out infinite}
/* label: glint clipped to the text */
.nav-wufid .wufid-label{background:var(--wufid-grad);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:wufid-glint 3.4s ease-in-out infinite}
.nav-wufid:hover{background:linear-gradient(180deg,rgba(237,32,36,.24),rgba(237,32,36,.07))}
@keyframes wufid-glint{0%,18%{background-position:165% 0}82%,100%{background-position:-65% 0}}
@media(prefers-reduced-motion:reduce){.nav-wufid::before,.nav-wufid .wufid-ico,.nav-wufid .wufid-label{animation:none}}

.drawer-ctas{display:flex;flex-direction:column;gap:12px;margin-top:28px;align-items:stretch}
.drawer-ctas .btn{justify-content:center;font-size:14px;padding:16px}
/* WUF ID drawer button — identical treatment to the nav button, full width */
.drawer-wufid{width:100%;padding:16px;font-size:14px;letter-spacing:.16em;gap:12px}
.drawer-wufid .wufid-ico{width:19px;height:19px}
@media(prefers-reduced-motion:reduce){.drawer-wufid,.drawer-wufid::after,.drawer-wufid .wufid-mark{animation:none}}
.nav-link{font-family:var(--font-pixel);font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;position:relative;padding:4px 0;transition:color var(--dur-fast)}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--action);transition:right var(--dur) var(--ease-out)}
.nav-link:hover::after{right:0}
.nav-link:hover{color:var(--action)}
.nav--scrolled{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav--dark{color:#fff}
.nav--dark.nav--scrolled{background:rgba(10,10,10,.7);border-color:var(--wuf-hairline-inv)}
.nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;background:none;border:0;padding:0;width:44px;height:44px;margin-right:-10px}
.nav-burger span{width:24px;height:2px;background:currentColor;transition:transform var(--dur),opacity var(--dur)}
/* burger bars are always white on the dark nav (hero and scrolled), ink only on the light nav */
.nav--dark .nav-burger span{background:#fff}

/* Mobile drawer */
.drawer{position:fixed;inset:0;z-index:1100;background:var(--wuf-black);color:#fff;display:flex;flex-direction:column;padding:24px var(--gutter);transform:translateY(-100%);transition:transform var(--dur) var(--ease-out);visibility:hidden}
.drawer.open{transform:translateY(0);visibility:visible}
.drawer-link{font-family:var(--font-sans);font-weight:600;font-size:clamp(2rem,8vw,3rem);text-transform:uppercase;letter-spacing:-.02em;padding:10px 0;border-bottom:1px solid var(--wuf-hairline-inv)}
.drawer-link:hover{color:var(--action)}
.drawer-lang{margin-top:auto;padding-top:22px;border-top:1px solid var(--wuf-hairline-inv);display:flex;flex-direction:column;align-items:stretch;gap:14px}
.drawer-lang-lab{font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-inv-2)}
/* Drawer language selector — fine, editorial row of letter-spaced labels (no boxes) */
.langrow{display:flex;align-items:center;gap:0}
.langrow-opt{font-family:var(--font-sans);font-weight:500;font-size:12px;letter-spacing:.14em;line-height:1;padding:4px 18px 4px 0;margin-right:18px;border:0;background:none;color:rgba(255,255,255,.45);cursor:pointer;transition:color var(--dur);text-transform:uppercase;position:relative}
.langrow-opt::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:11px;background:rgba(255,255,255,.18)}
.langrow-opt:last-child{margin-right:0;padding-right:0}
.langrow-opt:last-child::after{display:none}
.langrow-opt:hover{color:rgba(255,255,255,.85)}
.langrow-opt.is-active{color:var(--action)}
.langrow-opt:focus-visible{outline:2px solid var(--action);outline-offset:3px}

/* Marquee / ticker */
.marquee{overflow:hidden;white-space:nowrap;border-block:1px solid var(--wuf-hairline-inv)}
.marquee-track{display:inline-flex;align-items:center;gap:0;animation:marq 38s linear infinite;will-change:transform}
.marquee-track > *{flex:0 0 auto}
.marquee-track span{font-family:var(--font-pixel);font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:14px 0;line-height:1}
.marquee-track .dot{color:var(--action);padding-inline:22px}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Cards */
.card{border:1px solid var(--line);background:#fff;transition:border-color var(--dur)}
.bg-dark .card{background:transparent;border-color:var(--wuf-hairline-inv)}
.card-link:hover{border-color:var(--fg-1)}
.bg-dark .card-link:hover{border-color:#fff}

/* Image frame with hover zoom */
.imgframe{overflow:hidden;position:relative;background:#000}
.imgframe img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.card-link:hover .imgframe img,.fmt:hover img{transform:scale(1.05)}

/* Reveal animation */
/* Reveal — opacity is ALWAYS 1 (content can never be stuck invisible).
   Only the transform animates, so a frozen/never-running animation still shows content. */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:revealIn .7s var(--ease-out) both}
}
@keyframes revealIn{from{transform:translateY(18px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* Big stat */
.stat{font-family:var(--font-pixel);font-weight:700;font-size:clamp(2.2rem,4.5vw,3.6rem);line-height:1;letter-spacing:.01em}
.stat .u{font-size:.42em;letter-spacing:.05em}
/* "What is WUF" 3-fact grid (07 / 16 / 50K). 3-up on desktop; the 1px gap over a
   line-coloured background draws the hairline cell dividers. On mobile it stacks to a
   single column so 3 facts never leave an empty 4th cell (the hollow square). */
.what-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:64px}

/* Format full-bleed card */
.fmt{position:relative;display:block;overflow:hidden;background:#000;color:#fff;min-height:340px}
.fmt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.fmt .fmt-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,0) 45%,rgba(0,0,0,.82))}
.fmt .fmt-bd{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:24px}

/* Media partner lockup — highlighted, NO box. Small label + dim rule + logo. */
.media-partner-lockup{display:inline-flex;align-items:center;gap:14px;max-width:100%}
.media-partner-lockup img{min-width:0;max-width:100%;height:auto;object-fit:contain}
.media-partner-lockup .sec-mark{border-right:1px solid var(--wuf-ink-15)!important;padding-right:14px!important}
.bg-dark .media-partner-lockup .sec-mark{border-right-color:rgba(255,255,255,.22)!important}

/* Ecosystem grid — homogeneous 3×2, no overflow */
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.eco-card{background:#fff;padding:28px 26px;display:flex;flex-direction:column;gap:24px;min-height:210px;text-decoration:none;color:inherit}
.eco-top{display:flex;justify-content:space-between;align-items:flex-start}
.eco-arrow{color:var(--action);transition:transform var(--dur) var(--ease-out)}
.eco-card:hover .eco-arrow{transform:translateX(4px)}
.eco-body{margin-top:auto}
.eco-title{font-family:var(--font-sans);font-weight:600;font-size:26px;letter-spacing:-.015em;line-height:1.05;margin:0;overflow-wrap:anywhere}
.eco-meta{display:block;font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--action);margin-top:6px}
.eco-desc{margin-top:12px}
@media(max-width:900px){.eco-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.eco-grid{grid-template-columns:1fr}}

/* ===== WUF entry loader (full-screen) ===== */
.entry-loader{position:fixed;inset:0;z-index:9999;background:var(--wuf-black);display:flex;align-items:center;justify-content:center;transition:opacity .5s var(--ease-out),visibility .5s}
.entry-loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.entry-loader-mark{width:62px;height:auto;animation:wufpulse 1.25s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.entry-loader-mark{animation:none;opacity:.7}}

/* ===== WUF smart-image loader ===== */
.smartimg{position:relative;display:block;overflow:hidden;background:var(--wuf-ink-08)}
.bg-dark .smartimg{background:#141414}
.smartimg img{display:block;opacity:0;transition:opacity .5s var(--ease-out)}
.smartimg.is-loaded img{opacity:1}
.wuf-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;min-height:120px}
.wuf-loader-mark{opacity:.5;animation:wufpulse 1.25s ease-in-out infinite}
.smartimg.is-loaded .wuf-loader{opacity:0;transition:opacity .3s}
@keyframes wufpulse{0%,100%{opacity:.22;transform:scale(.9)}50%{opacity:.6;transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.wuf-loader-mark{animation:none;opacity:.4}}

/* Portfolio grid — full uncropped cards (text lives in the image) */
.pf-grid{columns:3;column-gap:14px}
@media(max-width:900px){.pf-grid{columns:2}}
@media(max-width:560px){.pf-grid{columns:1}}
.pf-card{position:relative;display:block;break-inside:avoid;margin-bottom:14px;border:1px solid var(--wuf-hairline-inv);background:#000;overflow:hidden;transition:border-color var(--dur),transform var(--dur) var(--ease-out)}
.pf-card img{width:100%;height:auto;display:block;transition:opacity var(--dur)}
.pf-card .smartimg{width:100%;display:block;aspect-ratio:16 / 9}
.pf-card .smartimg img{width:100%;height:100%;object-fit:cover}
.pf-card:hover{border-color:var(--action);transform:translateY(-3px)}
.pf-card:hover img{opacity:.82}
.pf-go{position:absolute;bottom:12px;left:12px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--action);color:#fff;font-size:15px;opacity:0;transform:scale(.8);transition:opacity var(--dur),transform var(--dur) var(--ease-out)}
.pf-card:hover .pf-go{opacity:1;transform:scale(1)}

/* Aftermovie play badge + button-as-card reset */
.play-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--action);padding:11px 18px}
.play-badge.sm{padding:11px;align-self:flex-start;border-radius:999px}
button.fmt{text-align:left;font:inherit;color:#fff;display:block}
button.fmt:focus-visible{outline:2px solid var(--action);outline-offset:3px}

/* WUF ID members — full cards */
.member-card{transition:background var(--dur) var(--ease-std),transform var(--dur) var(--ease-out)}
.member-card:hover{background:rgba(237,32,36,.06);transform:translateY(-3px)}
.member-card--more{border-style:dashed !important;background:transparent}
.member-card--more:hover{background:rgba(237,32,36,.05);transform:none}

/* WUF ID member registry wall */
.members-grid{display:flex;flex-wrap:wrap;gap:12px}
.member-cell{flex:1 1 210px;border:1px solid var(--wuf-hairline-inv);background:var(--wuf-black);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 22px;min-height:84px;transition:background var(--dur) var(--ease-std)}
.member-name{font-family:var(--font-sans);font-weight:500;font-size:18px;letter-spacing:-.01em;color:#fff;transition:color var(--dur)}
.member-tick{opacity:.32;transition:opacity var(--dur)}
.member-cell:hover{background:var(--action)}
.member-cell:hover .member-tick{opacity:1}
.member-cell--more{border-style:dashed;border-color:rgba(237,32,36,.5)}
.member-cell--more:hover{background:transparent}
@media(max-width:680px){.member-cell{flex:1 1 140px;padding:18px;min-height:72px}.member-name{font-size:16px}}

/* Language switcher — EN / IT segmented control */
.langswitch{display:inline-flex;align-items:center;border:1px solid var(--wuf-ink-15);border-radius:999px;padding:2px;gap:2px}
.langswitch--dark{border-color:rgba(255,255,255,.28)}
.langswitch-opt{font-family:var(--font-sans);font-weight:500;font-size:11px;letter-spacing:.08em;line-height:1;padding:6px 10px;border:0;background:none;color:var(--fg-2);cursor:pointer;border-radius:999px;transition:background var(--dur-fast),color var(--dur-fast)}
.langswitch--dark .langswitch-opt{color:rgba(255,255,255,.6)}
.langswitch-opt:hover{color:var(--fg-1)}
.langswitch--dark .langswitch-opt:hover{color:#fff}
.langswitch-opt.is-active{background:var(--wuf-black);color:#fff}
.langswitch--dark .langswitch-opt.is-active{background:#fff;color:var(--wuf-black)}
.langswitch-opt:focus-visible{outline:2px solid var(--action);outline-offset:2px}

/* Language dropdown (auto-used when 4+ languages registered) */
.langdrop{position:relative;font-family:var(--font-sans)}
.langdrop-btn{display:inline-flex;align-items:center;gap:7px;font-weight:500;font-size:11px;letter-spacing:.08em;color:var(--fg-1);background:none;border:1px solid var(--wuf-ink-15);border-radius:999px;padding:7px 12px;cursor:pointer}
.langdrop--dark .langdrop-btn{color:#fff;border-color:rgba(255,255,255,.28)}
.langdrop-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:168px;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-pop)}
.langdrop-item{display:flex;align-items:center;gap:10px;padding:9px 10px;cursor:pointer;transition:background var(--dur-fast)}
.langdrop-item:hover{background:var(--bg-2)}
.langdrop-item.is-active{background:var(--wuf-black)}
.langdrop-item.is-active .langdrop-code,.langdrop-item.is-active .langdrop-name{color:#fff}
.langdrop-code{font-weight:600;font-size:11px;letter-spacing:.08em;width:24px;flex:none;color:var(--fg-3)}
.langdrop-name{font-size:13px;color:var(--fg-1)}

/* Instagram story case-history cards */
.ig-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.ig-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ig-row{grid-template-columns:1fr}}
.igstory{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;display:flex;flex-direction:column;box-shadow:0 18px 50px -24px rgba(0,0,0,.6)}
.ig-bars{position:absolute;top:8px;left:8px;right:8px;z-index:3;display:flex;gap:4px}
.ig-bars span{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.35)}
.ig-bars span.on{background:#fff}
.ig-bars span{position:relative;overflow:hidden}
.ig-fill{position:absolute;inset:0;background:#fff;width:0}
/* Inline reel bar — auto-advances across cards like Instagram */
.ig-seg{position:relative;flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.ig-segfill{position:absolute;inset:0;width:0;background:#fff;border-radius:2px}
.ig-segfill.full{width:100%}
.ig-segfill.run{animation:igreel linear forwards}
@keyframes igreel{from{width:0}to{width:100%}}
.igstory{transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.igstory.is-active{box-shadow:0 0 0 2px var(--action),0 18px 50px -22px rgba(0,0,0,.7)}
@media (prefers-reduced-motion:reduce){.ig-segfill.run{animation:none;width:100%}}
.ig-muted{margin-left:auto;display:flex;opacity:.85}
.ig-sound-btn{margin-left:auto;background:none;border:0;cursor:pointer;display:flex;padding:4px}
.ig-head{position:absolute;top:18px;left:10px;right:10px;z-index:3;display:flex;align-items:center;gap:8px}
.ig-av{width:30px;height:30px;border-radius:50%;overflow:hidden;flex:none;display:flex;align-items:center;justify-content:center;background:#000}
.ig-av.ring{padding:2px;background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7)}
.ig-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.ig-user{display:flex;align-items:center;gap:5px;font-family:var(--font-sans);font-weight:600;font-size:13px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.ig-time{font-family:var(--font-sans);font-size:13px;color:rgba(255,255,255,.8);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.ig-media{position:absolute;inset:0;z-index:1}
.ig-media img,.ig-media video{width:100%;height:100%;object-fit:cover;display:block}
.ig-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 22% 64%,rgba(0,0,0,.72))}
.ig-label{position:absolute;left:12px;bottom:96px;font-family:var(--font-sans);font-weight:600;font-size:17px;letter-spacing:-.01em;color:#fff;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.5);max-width:80%;line-height:1.05}
.ig-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ig-play>svg{background:rgba(0,0,0,.35);backdrop-filter:blur(2px);border-radius:50%;padding:14px;width:54px;height:54px}
.ig-stats{position:absolute;left:12px;right:12px;bottom:52px;z-index:2;display:flex;gap:18px}
.ig-stats>div{display:flex;flex-direction:column}
.ig-stats b{font-family:var(--font-sans);font-weight:700;font-size:18px;color:#fff;line-height:1}
.ig-stats span{font-family:var(--font-sans);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-top:3px}
.ig-foot{position:absolute;left:12px;right:12px;bottom:14px;z-index:3;display:flex;align-items:center;justify-content:space-between}
.ig-caption{font-family:var(--font-sans);font-size:12px;color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.5)}
.ig-acts{display:flex;gap:12px;align-items:center}
.igstory:focus-visible{outline:2px solid var(--action);outline-offset:3px}
.igstory video{transition:transform var(--dur-slow) var(--ease-out)}
.igstory:hover video,.igstory:hover .ig-media img{transform:scale(1.04)}

/* Fullscreen vertical Story Viewer */
.sv-scrim{position:fixed;inset:0;z-index:1300;background:rgba(8,8,8,.94);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;animation:svfade .2s var(--ease-out)}
@keyframes svfade{from{opacity:0}to{opacity:1}}
.sv-card{position:relative;height:min(88vh,820px);aspect-ratio:9/16;max-width:94vw;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.sv-media{position:absolute;inset:0}
.sv-media img,.sv-media video{width:100%;height:100%;object-fit:cover;display:block}
.sv-x{position:absolute;top:22px;right:24px;z-index:5;background:none;border:0;cursor:pointer;padding:6px}
.sv-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast)}
.sv-nav:hover{background:rgba(255,255,255,.24)}
.sv-nav.left{left:max(16px,4vw)}
.sv-nav.right{right:max(16px,4vw)}
/* Viewer content — identical layout to the card, proportionally larger */
.sv-card .ig-bars{top:12px;left:12px;right:12px}
.sv-card .ig-head{top:20px;left:14px;right:14px;gap:9px}
.sv-card .ig-av{width:36px;height:36px}
.sv-card .ig-user{font-size:15px}
.sv-card .ig-time{font-size:14px}
.sv-card .ig-label{bottom:110px;font-size:25px}
.sv-card .ig-stats{bottom:62px;gap:26px}
.sv-card .ig-stats b{font-size:24px}
.sv-card .ig-stats span{font-size:11px}
.sv-card .ig-foot{bottom:20px;left:16px;right:16px}
.sv-card .ig-caption{font-size:14px}
.sv-card .ig-acts{gap:16px}
@media(max-width:640px){.sv-nav{display:none}}

/* ===== WUF ID — premium 3D membership card ===== */
.idcard-wrap{perspective:1200px;width:100%}
/* levitation layer — floats gently on hover */
.idcard-float{transition:transform .5s var(--ease-out)}
.idcard-wrap:hover .idcard-float{animation:idfloat 3.2s ease-in-out infinite;}
@keyframes idfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.idcard-wrap:hover .idcard{box-shadow:0 56px 90px -30px rgba(0,0,0,.95),0 14px 30px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.03)}
@media (prefers-reduced-motion:reduce){.idcard-wrap:hover .idcard-float{animation:none}}
.idcard{position:relative;width:100%;aspect-ratio:1.585/1;border-radius:18px;overflow:hidden;color:#fff;
  background:radial-gradient(135% 130% at 78% -10%,#262626 0%,#121212 46%,#050505 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 36px 70px -28px rgba(0,0,0,.85),0 6px 18px -8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.03);
  transform-style:preserve-3d;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out);will-change:transform}
.idcard *{transform-style:preserve-3d}
/* top edge sheen + faint diagonal grain */
.idcard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 78%,rgba(255,255,255,.05) 100%)}
/* red accent hairline near top */
.idcard::after{content:"";position:absolute;left:24px;right:24px;top:0;height:3px;background:var(--action);opacity:.92;border-radius:0 0 3px 3px}
.idcard-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.22),rgba(255,255,255,0) 55%);mix-blend-mode:screen}
.idcard-wm{position:absolute;right:-9%;bottom:-22%;width:56%;opacity:.05;transform:translateZ(1px);pointer-events:none}
.idcard-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,4.5%,30px)}
.idcard-top{display:flex;align-items:flex-start;justify-content:space-between;transform:translateZ(34px)}
.idcard-brand{display:flex;align-items:center;gap:10px}
.idcard-brand img{height:26px}
.idcard-brand img.idlockup{height:30px;width:auto}
.idcard-brand .lab{font-family:var(--font-sans);font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase}
.idcard-cert{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 11px}
.idcard-cert .dot{width:6px;height:6px;border-radius:50%;background:var(--action);box-shadow:0 0 8px var(--action)}
.idcard-chiprow{display:flex;align-items:center;gap:14px;transform:translateZ(26px)}
.idcard-chip{width:46px;height:34px;border-radius:7px;flex:none;
  background:linear-gradient(135deg,#e9e9e9,#9b9b9b 42%,#f4f4f4 58%,#888);position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.idcard-chip::before{content:"";position:absolute;inset:6px 8px;border:1px solid rgba(0,0,0,.28);border-radius:3px;
  background:linear-gradient(90deg,transparent 47%,rgba(0,0,0,.28) 48% 52%,transparent 53%),linear-gradient(0deg,transparent 40%,rgba(0,0,0,.28) 49% 51%,transparent 60%)}
.idcard-holo{height:22px;flex:1;border-radius:5px;opacity:.6;
  background:conic-gradient(from 210deg,#3a3a3a,#6e6e6e,#2b2b2b,#7a7a7a,#3a3a3a);mix-blend-mode:screen;max-width:120px}
.idcard-name{transform:translateZ(40px)}
.idcard-name .co,.idcard-name .sub{transition:opacity .32s var(--ease-std),transform .32s var(--ease-out)}
.idcard-name.is-fading .co,.idcard-name.is-fading .sub{opacity:0;transform:translateY(8px)}
.idcard-name .co{font-family:var(--font-sans);font-weight:700;font-size:clamp(1.5rem,4vw,2.1rem);letter-spacing:-.02em;line-height:1}
.idcard-name .sub{font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.04em;color:rgba(255,255,255,.62);margin-top:6px}
.idcard-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;transform:translateZ(30px)}
.idcard-field .k{font-family:var(--font-sans);font-size:8.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap}
.idcard-field .v{font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.02em;margin-top:4px;font-variant-numeric:tabular-nums}
.idcard-field .v.red{color:var(--action)}
/* Verified-by lockup — real logos */
.idcard-verify{display:flex;align-items:center;gap:7px;margin-top:5px}
.idcard-verify img{height:12px;display:block;width:auto}
.idcard-verify img.cds{height:13px}
.idcard-verify .x{font-size:11px;color:rgba(255,255,255,.55);line-height:1}
.idcard-foot-r{text-align:right}
.idcard-sig{font-family:var(--font-display);font-size:14px;color:rgba(255,255,255,.85);text-align:right;line-height:1.25;display:inline-block}

/* ===== WUF ID — membership plate · A5 portrait, polished titanium ===== */
.idplate-wrap{perspective:1500px;width:100%}
.idplate{position:relative;width:100%;aspect-ratio:1/1.414;overflow:hidden;color:#d6d9db;border-radius:10px;
  background:linear-gradient(168deg,#3b3f45 0%,#17181b 26%,#2e3137 46%,#0d0e10 62%,#383c41 82%,#16171a 100%);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 6px rgba(0,0,0,.8),0 40px 80px -30px rgba(0,0,0,.95),0 10px 24px -10px rgba(0,0,0,.6);
  transform-style:preserve-3d;will-change:transform;transition:transform .45s var(--ease-out)}
/* moving mirror band — sweeps with cursor */
.idplate-mirror{position:absolute;inset:-20%;pointer-events:none;mix-blend-mode:screen;opacity:.85;
  background:linear-gradient(115deg,transparent calc(var(--mx,30%) - 14%),rgba(255,255,255,.07) calc(var(--mx,30%) - 5%),rgba(255,255,255,.16) var(--mx,30%),rgba(255,255,255,.07) calc(var(--mx,30%) + 5%),transparent calc(var(--mx,30%) + 14%))}
.idplate-glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(520px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.14),rgba(255,255,255,0) 60%);mix-blend-mode:screen}
/* red enamel inlay — top edge, full width */
.idplate-inlay{position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--wuf-red-press),var(--wuf-red) 30%,var(--wuf-red) 70%,#8f1114);box-shadow:0 1px 2px rgba(0,0,0,.6),inset 0 -1px 1px rgba(255,255,255,.25)}
.idplate-cds{height:13px;width:auto;opacity:.9}
.idplate-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:clamp(30px,9%,48px) clamp(24px,8%,40px)}
.idplate-lockup{height:clamp(26px,7%,32px);width:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.7))}
.idplate-kicker{font-family:var(--font-display);font-size:clamp(.9rem,2.2vw,1.1rem);color:rgba(255,255,255,.55);text-shadow:0 -1px 0 rgba(0,0,0,.9)}
.idplate-name{font-family:var(--font-sans);font-weight:700;font-size:clamp(1.6rem,5vw,2.4rem);letter-spacing:-.02em;line-height:1;
  background:linear-gradient(100deg,#f4f5f6 8%,#b9bdc2 36%,#ffffff 52%,#9da2a8 74%,#e8eaec 94%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.85))}
.idplate-name-wrap{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.idplate-name-wrap .co,.idplate-name-wrap .sub{transition:opacity .32s var(--ease-std),transform .32s var(--ease-out)}
.idplate-name-wrap .idplate-badge{transition:opacity .32s var(--ease-std)}
.idplate-name-wrap.is-fading .co,.idplate-name-wrap.is-fading .sub{opacity:0;transform:translateY(8px)}
.idplate-name-wrap.is-fading .idplate-badge{opacity:0}
.idplate-sub{font-family:var(--font-sans);font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5);max-width:86%}
/* short red etched rule between name block and member-since */
.idplate-rule{display:block;width:46px;height:2px;background:var(--action);opacity:.92;box-shadow:0 1px 1px rgba(0,0,0,.7);margin:clamp(14px,4%,22px) auto 0}
.idplate-since{display:block;font-family:var(--font-sans);font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--action);margin-top:12px}
/* name row — company name + verified badge inline, social-media style */
.idplate-name-row{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2.5%,12px)}
.idplate-badge{width:clamp(20px,6.5%,28px);aspect-ratio:1;flex:none;display:inline-flex;animation:badgepulse 2.6s ease-in-out infinite;transform-origin:center}
.idplate-badge svg{width:100%;height:100%;display:block}
@keyframes badgepulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(237,32,36,0))}50%{transform:scale(1.12);filter:drop-shadow(0 0 12px rgba(237,32,36,.65))}}
@media (prefers-reduced-motion:reduce){.idplate-badge{animation:none}}
.idplate-foot{width:100%;display:flex;justify-content:center;padding-top:clamp(12px,3.5%,18px)}
.idcard-cds{height:13px;width:auto;opacity:.9;display:block}

/* ===== WUF Weeks — interactive calendar ===== */
.wk-head{width:100%;display:flex;align-items:center;gap:clamp(14px,3vw,28px);padding:clamp(18px,3vw,26px) 0;background:none;border:0;cursor:pointer;text-align:left;color:#fff}
.wk-num{color:rgba(255,255,255,.4);font-size:14px;flex:none;width:28px}
.wk-name{flex:1;display:flex;flex-direction:column;gap:5px}
.wk-meta{font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-inv-2)}
.wk-toggle{font-family:var(--font-sans);font-size:28px;font-weight:400;line-height:1;flex:none;transition:color var(--dur)}
.wk-row:hover .wk-head .wuf-h2{color:#fff}
.wk-panel{display:grid;transition:grid-template-rows .55s cubic-bezier(0.4,0,0.2,1)}
.wk-panel > div{transition:opacity .45s ease,transform .45s ease}
.wk-row .wk-panel[style*="0fr"] > div{opacity:0;transform:translateY(-6px)}
.wk-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);padding:10px 0 44px;align-items:start}
.wk-col-meta{display:flex;flex-direction:column;gap:20px;padding-left:clamp(0px,3vw,32px);border-left:1px solid var(--wuf-hairline-inv)}
.wk-col-meta .btn{align-self:stretch}
.wk-k{color:var(--action);margin-bottom:6px}
@media (max-width:820px){.wk-body{grid-template-columns:1fr;gap:28px}.wk-col-meta{padding-left:0;border-left:0;border-top:1px solid var(--wuf-hairline-inv);padding-top:24px}.wk-col-meta .btn{align-self:flex-start}}
@media (prefers-reduced-motion:reduce){.wk-panel,.wk-panel > div{transition:none}}

/* ===== WUF Magazine — framed issue cards ===== */
.mag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
.mag-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);transition:border-color var(--dur),box-shadow var(--dur) var(--ease-out)}
.mag-card:hover{border-color:var(--wuf-ink-30);box-shadow:0 18px 40px -24px rgba(10,10,10,.45)}
/* passepartout frame around the cover */
.mag-card-frame{padding:clamp(14px,1.4vw,20px);background:var(--wuf-paper);border-bottom:1px solid var(--line)}
.mag-card-cover{aspect-ratio:0.78;background:#0b0b0b;overflow:hidden;box-shadow:0 6px 18px -8px rgba(10,10,10,.5)}
.mag-card-cover img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.mag-card:hover .mag-card-cover img{transform:scale(1.04)}
.mag-card-body{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.mag-card-top{display:flex;align-items:baseline;gap:11px;margin-bottom:9px}
.mag-card-n{font-family:var(--font-sans);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--action)}
.mag-card-yr{font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);border-left:1px solid var(--wuf-ink-15);padding-left:11px}
.mag-card-title{font-size:clamp(1.2rem,1.5vw,1.45rem);line-height:1.05;letter-spacing:-.01em;color:var(--fg-1)}
.mag-card-cur{font-family:var(--font-sans);font-size:12.5px;color:var(--fg-2);margin-top:7px}
@media(max-width:980px){.mag-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.mag-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== Brand activations — minimal editorial index (9 touchpoints) ===== */
.actv-section .sec-head{border-bottom:0;margin-bottom:30px}
.actv-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--wuf-hairline-inv)}
.actv-row{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:clamp(18px,3vw,48px);padding:clamp(22px,2.8vw,32px) 2px;border-bottom:1px solid var(--wuf-hairline-inv)}
.actv-n{font-family:var(--font-pixel);font-weight:700;font-size:13px;letter-spacing:.12em;color:var(--action);line-height:1;min-width:2.4em}
.actv-t{font-family:var(--font-sans);font-weight:400;font-size:clamp(1.1rem,1.7vw,1.45rem);line-height:1.25;color:#fff;text-wrap:balance;transition:color var(--dur)}
.actv-ch{font-family:var(--font-pixel);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-inv-2);white-space:nowrap;justify-self:end}
.actv-row:hover .actv-t{color:var(--action)}
@media(max-width:640px){
  .actv-row{grid-template-columns:auto 1fr;row-gap:4px;column-gap:16px}
  .actv-ch{grid-column:2;justify-self:start}
}

/* Forms */
.field{margin-bottom:16px}
.field label{font-family:var(--font-pixel);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);display:block;margin-bottom:7px}
.bg-dark .field label{color:var(--fg-inv-2)}
.input{border:1.5px solid var(--wuf-ink-15);background:#fff;padding:14px 15px;font-family:var(--font-sans);font-size:16px;width:100%;color:var(--fg-1);border-radius:0;transition:border-color var(--dur-fast)}
.input:focus{outline:0;border-color:var(--wuf-black)}
.input::placeholder{color:var(--wuf-ink-30)}
.bg-dark .input{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:#fff}
.bg-dark .input:focus{border-color:#fff}
textarea.input{resize:vertical;min-height:92px;line-height:1.45;font-size:15px}
select.input{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%230A0A0A' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
.form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.form-grid2{grid-template-columns:1fr}}
/* intent segmented control */
.seg{display:flex;border:1.5px solid var(--wuf-ink-15);margin-bottom:18px}
.seg-opt{flex:1;padding:15px 6px;min-height:46px;font-family:var(--font-pixel);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:center;cursor:pointer;background:#fff;color:var(--fg-2);border:0;border-right:1.5px solid var(--wuf-ink-15);transition:background var(--dur-fast),color var(--dur-fast)}
.seg-opt:last-child{border-right:0}
.seg-opt:hover{color:var(--wuf-black)}
.seg-opt.is-active{background:var(--wuf-black);color:#fff}
/* selectable chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-sel{font-family:var(--font-pixel);font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;border:1.5px solid var(--wuf-ink-15);background:#fff;color:var(--fg-2);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.chip-sel:hover{border-color:var(--wuf-black);color:var(--wuf-black)}
.chip-sel.is-on{background:var(--action);border-color:var(--action);color:#fff}

/* Modal */
.modal-scrim{position:fixed;inset:0;z-index:1200;background:rgba(10,10,10,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity var(--dur)}
.modal-scrim.open{opacity:1;visibility:visible}
.modal{background:#fff;width:100%;max-width:560px;max-height:88vh;overflow-y:auto;padding:36px;border:1.5px solid var(--wuf-black);transform:translateY(12px);transition:transform var(--dur) var(--ease-out)}
.modal-scrim.open .modal{transform:none}

/* Footer */
.footer{background:var(--wuf-black);color:#fff;padding-block:clamp(48px,7vw,90px)}
.footer-big{font-family:var(--font-display);font-weight:400;font-size:clamp(2.6rem,8vw,5.6rem);line-height:.96;letter-spacing:0;text-transform:none}
/* Footer payoff lockup: large WUF mark | small "We Understand The Future" */
.footer-lockup{display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);flex-wrap:wrap}
.footer-mark{height:clamp(40px,6vw,72px);width:auto}
.footer-bar{width:1px;height:clamp(28px,4vw,46px);background:var(--wuf-hairline-inv)}
.footer-payoff{font-family:var(--font-display);font-size:clamp(1.05rem,1.9vw,1.6rem);line-height:1.05;color:rgba(255,255,255,.7)}
.footer-col b{display:block;font-family:var(--font-pixel);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;color:#fff}
.footer-col a{display:block;font-size:15px;color:var(--fg-inv-2);padding:4px 0;transition:color var(--dur-fast)}
.footer-col a:hover{color:#fff}

/* Utility */
.hairline{height:1px;background:var(--line);border:0}
.bg-dark .hairline{background:var(--wuf-hairline-inv)}
.muted{color:var(--fg-2)}.on-dark .muted,.bg-dark .muted{color:var(--fg-inv-2)}

/* Responsive nav — below the width where the full link row fits, collapse the TEXT LINKS into the burger. The Corriere lockup and the two CTAs stay visible.
   Threshold set generously (1460px) as a fallback; the JS overflow guard (.nav--compact) is the real driver — it collapses the links into the burger the instant the row would overflow, so the Corriere lockup is NEVER clipped, in any language, at any width. */
.nav-inner.nav--compact .nav-links{display:none}
.nav-inner.nav--compact .nav-burger{display:flex}
/* measurement pass: force the full row visible so the guard can read its true width */
.nav-inner.nav--measure .nav-links{display:flex !important}
.nav-inner.nav--measure .nav-burger{display:none !important}
@media (max-width:1460px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  /* language selector STAYS in the bar at every width — just made compact so it never clips */
  .nav-right{gap:10px}
  .nav-right > .langdrop .langdrop-btn{padding:7px 9px;gap:4px}
  .nav-right > .langswitch{padding:1px}
  .nav-right > .langswitch .langswitch-opt{padding:5px 7px}
}
/* Mid screens: the bar is now logo + language + WUF ID + sponsor + burger. Compact the
   buttons so the longest localized labels (ES “CONVIÉRTETE EN SPONSOR”, DE compounds) still fit. */
@media (max-width:1000px){
  .nav-cta, .nav-wufid{padding:9px 13px;font-size:11px}
  .nav-ctas{gap:8px}
}
/* Mobile (phones): the header is the WUF × Corriere lockup on the LEFT (logo always paired
   with the Corriere della Sera mark, but WITHOUT the "media partner" caption) and ONLY the
   burger on the RIGHT. Language selector, nav links and both CTAs all live inside the drawer.
   Logos are stepped down so the lockup + burger never overflow the row. */
@media (max-width:680px){
  .nav-mp{display:inline-flex}          /* re-show the lockup that is hidden ≤1000px */
  .nav-mp-lab{display:none}             /* drop the "MEDIA PARTNER" caption on mobile */
  .nav-right > .langdrop{display:none}  /* language selector -> drawer */
  .nav-ctas{display:none}               /* WUF ID + Sponsor CTAs -> drawer */
  .nav-right{gap:0}
  .nav-left{gap:12px;min-width:0}
  .nav-logo,.drawer-logo{height:20px}   /* keep the drawer logo the same size as the header logo */
  .nav-mp{gap:8px;min-width:0}
  .nav-mp-rule{height:16px}
  .nav-mp img{height:11px}
}
/* Very small phones: tighten the lockup further so it always clears the burger. */
@media (max-width:380px){
  .nav-left{gap:9px}
  .nav-logo,.drawer-logo{height:18px}
  .nav-mp{gap:7px}
  .nav-mp-rule{height:14px}
  .nav-mp img{height:10px}
}

/* ===== Responsive safety — wrapping + small-screen type step-down ===== */
html, body { overflow-x: hidden; max-width: 100%; }
*, *::before, *::after { min-width: 0; }
img, svg, video { max-width: 100%; }
/* big uppercase display heads must break long IT words instead of overflowing */
.wuf-mega, .wuf-d1, .wuf-d2, .wuf-h1, .wuf-h2, .signature, .actv-t, .mag-card-title, .eco-title, .wk-name { overflow-wrap: break-word; }
@media (max-width:680px){
  :root{
    --fs-mega: clamp(2.3rem, 11vw, 3.6rem);
    --fs-d1:   clamp(2rem, 9.5vw, 3rem);
    --fs-d2:   clamp(1.6rem, 7vw, 2.4rem);
  }
  .section{ padding-top: clamp(48px,12vw,72px); padding-bottom: clamp(48px,12vw,72px); }
  /* stack the 3 "What is WUF" facts vertically — no empty 4th cell on phones */
  .what-stats{ grid-template-columns: 1fr; margin-top: clamp(40px,9vw,56px); }
}
/* short landscape phones: trim hero vertical so content isn't cut */
@media (max-height:560px) and (orientation:landscape){
  .hero{ min-height: auto !important; }
}