/* bwib-24 C: the light look, shared by every page: fonts, tokens, base, buttons, nav, menu, footer.
   Source: docs/design/light-concept/index.html (KD's mock-up), copied rule for rule.
   The homepage chapters live in css/light-home.css, loaded by the homepage only, so their short
   class names (.card, .panel, .book ...) never reach the inner pages.
   Changes from the mock-up, each for a reason:
   - Spectral and Jost are self-hosted under /fonts (CSP: no Google Fonts stylesheet);
     the Spectral files carry no hinting (same letters, about a third smaller: the homepage scores 93-94 on a phone in Lighthouse);
   - the BG/EN switch dims to .66, not .45, so the language not chosen still passes contrast;
   - the nav logo gets 3px of white round it so the full circle is never cropped;
   - footer headings are h2/h3 (heading order); the newsletter row sits inside a form that also
     carries the consent box and a status line (lane E's newsletter-signup.js contract). */
@font-face{font-family:"Spectral";font-style:normal;font-weight:200;font-display:swap;src:url("/fonts/spectral-200.woff2") format("woff2")}
@font-face{font-family:"Spectral";font-style:italic;font-weight:200;font-display:swap;src:url("/fonts/spectral-200-italic.woff2") format("woff2")}
@font-face{font-family:"Spectral";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/spectral-300.woff2") format("woff2")}
@font-face{font-family:"Spectral";font-style:italic;font-weight:300;font-display:swap;src:url("/fonts/spectral-300-italic.woff2") format("woff2")}
@font-face{font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/spectral-400.woff2") format("woff2")}
@font-face{font-family:"Spectral";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/spectral-400-italic.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/jost-300.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/jost-400.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/jost-500.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/jost-600.woff2") format("woff2")}

:root{
  /* Layout: one cinematic scroll in seven chapters. The club's round emblem becomes the recurring circle mask for photos, portraits and transitions. Light only. */
  color-scheme:light;
  --paper:#FBF8F7; --white:#FFFFFF; --ink:#1E1520; --ink2:#5E5160; --line:rgba(30,21,32,.13); --line2:rgba(30,21,32,.07);
  --rose:#E8437A; --rose-ink:#C31851; --rose-deep:#A3123F; --gold:#B8935A; --gold2:#E3D2B2; --blush:#F7EAED; --mist:#EFEAF3;
  --serif:'Spectral',Georgia,'Times New Roman',serif; --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --gut:clamp(16px,4.6vw,76px); --ease:cubic-bezier(.2,.75,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
/* English visitors: hidden until the English words are in (set in the page head, cleared by js/v6-light.js) */
html.i18n-hold body{visibility:hidden}
html{background:var(--paper)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
:focus-visible{outline:2px solid var(--rose-ink);outline-offset:3px}
h1,h2,h3,h4,h5{margin:0;font-family:var(--serif);font-weight:200;letter-spacing:-.022em;line-height:1.02;text-wrap:balance}
em{font-style:italic}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{padding-inline:var(--gut)}
.eyebrow{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--ink2);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);flex-shrink:0}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.wi{display:inline-block;will-change:transform}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border-radius:999px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;white-space:nowrap;transition:background .35s,color .35s,border-color .35s;will-change:transform;position:relative}
.btn-rose{background:var(--rose-ink);color:#fff}
.btn-rose:hover{background:var(--rose-deep)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--rose-ink)}
.btn-line{border:1px solid currentColor}
.btn-line:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-s{height:42px;padding:0 20px;font-size:11.5px}
.lnk{display:inline-flex;gap:10px;align-items:center;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;padding-bottom:6px;border-bottom:1px solid var(--line);transition:gap .35s,border-color .35s;align-self:flex-start}
.lnk:hover{gap:16px;border-color:var(--rose-ink)}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s;flex-shrink:0;background:var(--white)}
.icon-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
svg.i,.icon-btn svg,.kv svg,.row-arr svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:calc(12px + env(safe-area-inset-top,0px)) var(--gut) 12px;color:var(--ink);transition:background .5s,color .5s,box-shadow .5s}
.nav.scrolled{background:color-mix(in srgb,var(--paper) 84%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 1px 0 var(--line2)}
html.hero-open .nav:not(.scrolled){color:#fff}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{width:56px;height:56px;border-radius:50%;background:#fff;padding:3px;object-fit:contain;box-shadow:0 4px 18px rgba(30,21,32,.1)}
.brand-t{font-family:var(--serif);font-size:15px;line-height:1.15;font-weight:400}
.links{display:flex;gap:28px}
.links a{font-size:13px;letter-spacing:.05em;position:relative;padding:6px 0}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-r{display:flex;align-items:center;gap:16px}
.lang{display:flex;font-size:12px;letter-spacing:.14em;font-weight:500}
.lang button{padding:8px 7px;opacity:.66;transition:opacity .3s}
.lang button.on,.lang button.active,.lang button[aria-pressed="true"]{opacity:1}
.burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.burger i{display:block;width:24px;height:1px;background:currentColor;transition:transform .45s var(--ease)}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:99;background:var(--paper);display:flex;flex-direction:column;justify-content:center;gap:2px;padding:110px var(--gut) 40px;clip-path:circle(0% at calc(100% - 50px) 46px);visibility:hidden;transition:clip-path .9s var(--ease),visibility 0s .9s}
.menu.open{clip-path:circle(150% at calc(100% - 50px) 46px);visibility:visible;transition:clip-path .9s var(--ease),visibility 0s}
.menu .m{font-family:var(--serif);font-weight:200;font-size:clamp(38px,9vw,72px);line-height:1.15;letter-spacing:-.02em}
.menu .btn{margin-top:28px;align-self:flex-start}
@media (max-width:1180px){.links{display:none}.burger{display:flex}}
@media (max-width:640px){.brand-t,.nav-r>.btn{display:none}.brand img{width:50px;height:50px}}

body>footer{background:var(--mist);padding-block:clamp(64px,8vw,110px) 28px}
.ft-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px}
.ft-brand{display:flex;flex-direction:column;gap:22px}
.ft-logo{width:136px;height:136px;border-radius:50%;background:#fff;padding:4px}
.nl{display:flex;flex-direction:column;gap:12px;max-width:420px}
.nl h2{font-family:var(--serif);font-weight:300;font-size:30px}
.nl p{color:var(--ink2);font-size:15px}
.nl-row{display:flex;gap:8px;border-bottom:1px solid var(--ink);padding-bottom:4px;align-items:center}
.nl-row:focus-within{border-color:var(--rose-ink)}
.nl-row input{flex:1;min-width:0;border:0;background:transparent;font:inherit;padding:10px 0;color:var(--ink)}
.nl-row input:focus{outline:none}
.nl-row button{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;padding:10px 0;white-space:nowrap}
.ft-col h3{font-family:var(--sans);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--ink2);margin-bottom:16px}
.ft-col a{display:block;padding:5px 0;font-size:15px;transition:color .3s}
.ft-col a:hover{color:var(--rose-ink)}
.ft-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(48px,6vw,80px);padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--ink2)}
.ft-bot nav{display:flex;gap:20px;flex-wrap:wrap}
@media (max-width:900px){.ft-top{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){
  .menu{transition:none}
}

/* bwib-24 C additions (not in the mock-up's CSS, needed by the real page) */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.skip-link{position:fixed;left:16px;top:-80px;z-index:400;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-size:13px;letter-spacing:.06em;transition:top .2s}
.skip-link:focus{top:calc(16px + env(safe-area-inset-top,0px))}
.nl-form{display:flex;flex-direction:column;gap:12px}
.nl-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--ink2);cursor:pointer}
.nl-consent input{width:16px;height:16px;margin:2px 0 0;flex-shrink:0;accent-color:var(--rose-ink)}
.nl-consent a{text-decoration:underline;text-underline-offset:2px}
.nl-status{font-size:14px;color:var(--ink2)}
.nl-status:empty{display:none}
/* the "not fully translated" line from js/i18n-fallback.js, in the light look: it takes the top
   strip and the nav moves down by its measured height */
.untranslated-notice{margin:0;padding:10px var(--gut);background:var(--blush);color:var(--ink);border-bottom:1px solid var(--line);font:500 13px/1.5 var(--sans);text-align:center}
body.has-untranslated-notice .untranslated-notice{position:fixed;inset-inline:0;top:0;z-index:5300}
body.has-untranslated-notice .nav{top:var(--notice-h,42px)}
body.has-untranslated-notice .menu{padding-top:calc(110px + var(--notice-h,42px))}
[data-untranslated]{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:color-mix(in srgb,currentColor 55%,transparent);text-underline-offset:.22em}