/* ============================================================
   Pro Swiss Art — design tokens
   ============================================================ */
:root{
  --ink:#0d0d0b; --paper:#f6f3ea; --paper-dim:#efeadd;
  --gold:#b3893a; --gold-bright:#d4ab5c;
  --text-on-paper:#17170f; --text-on-paper-soft:#5c5a4e;
  --text-on-ink:#f6f3ea; --text-on-ink-soft:#c9c6ba;
  --line-on-paper:#dcd7c8; --line-on-ink:#2c2b24;
  --font-display:'Anton',sans-serif; --font-body:'Inter',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gutter: clamp(20px, 4vw, 56px);
  --container: 1180px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: 90px; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body); background:var(--paper); color:var(--text-on-paper);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--gutter);
  background:rgba(13,13,11,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav__brand{ display:flex; align-items:center; gap:10px; }
.nav__brand img{ height:22px; width:auto; }
.nav__brand span{ color:#fff; font-size:14px; font-weight:600; letter-spacing:.04em; }
.nav__links{ display:flex; align-items:center; gap:clamp(18px,3vw,36px); position:relative; }
.nav__link{ font-size:14px; color:var(--text-on-ink-soft); padding:6px 2px; transition:color .2s var(--ease); }
.nav__link:hover{ color:#fff; }
.nav__link.is-active{ color:#fff; }
.nav__indicator{ position:absolute; bottom:-13px; height:2px; background:var(--gold-bright); transition:left .35s var(--ease), width .35s var(--ease); }
.nav__cta{ background:#fff; color:var(--ink); font-size:13px; font-weight:600; padding:10px 20px; border-radius:100px; transition:background .2s var(--ease); }
.nav__cta:hover{ background:var(--gold-bright); }
.nav__burger{ display:none; background:none; border:none; color:#fff; padding:6px; cursor:pointer; }
.nav__burger svg{ display:block; width:24px; height:24px; }
@media (max-width:820px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
}

/* Mobile menu overlay */
.mobile-menu{
  position:fixed; inset:0; z-index:150; background:var(--ink);
  display:flex; flex-direction:column; padding:20px var(--gutter);
  transform:translateY(-100%); transition:transform .35s var(--ease);
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu__top{ display:flex; align-items:center; justify-content:space-between; }
.mobile-menu__close{ background:none; border:none; color:#fff; padding:6px; cursor:pointer; }
.mobile-menu__links{ display:flex; flex-direction:column; gap:8px; margin-top:60px; }
.mobile-menu__links a{ font-family:var(--font-display); text-transform:uppercase; font-size:32px; color:#fff; padding:10px 0; }
.mobile-menu__cta{ margin-top:auto; display:block; text-align:center; background:#fff; color:var(--ink); font-weight:600; padding:16px; border-radius:100px; }

/* ============================================================
   Sections & typography
   ============================================================ */
.section{ padding:clamp(70px,10vw,130px) var(--gutter); }
.section--paper{ background:var(--paper); }
.section--paper-dim{ background:var(--paper-dim); }
.section--ink{ background:var(--ink); color:var(--text-on-ink); }
.section--gold{ background:var(--gold); position:relative; overflow:hidden; }
.container{ max-width:var(--container); margin:0 auto; }
.eyebrow{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-on-paper-soft); }
.eyebrow--light{ color:var(--text-on-ink-soft); }
.eyebrow--gold{ color:rgba(13,13,11,.62); }
.statement{ font-family:var(--font-display); text-transform:uppercase; line-height:1.18; font-size:clamp(26px,3.6vw,46px); margin:14px 0 0; max-width:22ch; }
.statement--light{ color:#fff; }
.statement--gold{ color:var(--ink); max-width:none; }
.body-text{ font-size:16px; line-height:1.65; color:var(--text-on-paper-soft); max-width:62ch; margin-top:18px; }
.body-text--light{ color:var(--text-on-ink-soft); }
.body-text--light strong{ color:var(--text-on-ink); }
.body-text strong{ color:var(--text-on-paper); }
.body-text--gold{ color:rgba(13,13,11,.75); max-width:56ch; }
.body-text--gold strong{ color:var(--ink); }

.home-grid{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.home-grid__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.home-grid__link{ display:inline-block; margin-top:22px; font-size:14px; font-weight:600; border-bottom:1px solid currentColor; padding-bottom:2px; }
@media (max-width:820px){ .home-grid{ grid-template-columns:1fr; gap:28px; } }

/* ============================================================
   Hero
   ============================================================ */
.hero{ position:relative; height:100vh; min-height:640px; overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,13,11,.55) 0%, rgba(13,13,11,.35) 40%, rgba(13,13,11,.85) 100%); }
.hero__content{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:0 var(--gutter) 60px; color:#fff; }
.hero__title{ font-family:var(--font-display); text-transform:uppercase; line-height:.98; font-size:clamp(38px,7vw,88px); max-width:14ch; margin:14px 0 0; }
.hero__sub{ margin-top:18px; font-size:16px; max-width:46ch; color:rgba(255,255,255,.82); }
.hero__eyebrow{ color:rgba(255,255,255,.7); }

/* ============================================================
   Marquee (gold)
   ============================================================ */
.marquee{ background:var(--gold); color:var(--ink); overflow:hidden; padding:18px 0; }
.marquee__track{ display:flex; width:max-content; white-space:nowrap; animation:marqueeScroll 22s linear infinite; }
.marquee__group{ display:flex; align-items:center; }
.marquee__item{ font-family:var(--font-display); text-transform:uppercase; font-size:20px; padding:0 28px; color:var(--ink); }
.marquee__dot{ width:7px; height:7px; border-radius:50%; background:var(--ink); flex-shrink:0; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   Pillars (Mission)
   ============================================================ */
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-on-ink); border-top:1px solid var(--line-on-ink); margin-top:48px; }
.pillar{ background:var(--ink); padding:26px 22px; }
.pillar__verb{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:10px; }
.pillar__title{ font-weight:700; font-size:15px; margin-bottom:8px; }
.pillar__text{ font-size:13.5px; color:var(--text-on-ink-soft); line-height:1.5; }
@media (max-width:860px){ .pillars{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .pillars{ grid-template-columns:1fr; } }

/* ============================================================
   Committee
   ============================================================ */
.committee{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-on-paper); border:1px solid var(--line-on-paper); margin-top:40px; }
.member{ background:var(--paper); padding:22px 20px; }
.member__role{ font-size:12px; font-style:italic; color:var(--text-on-paper-soft); margin-bottom:6px; }
.member__name{ font-weight:700; font-size:15px; margin:0; }
.member__social{ display:flex; gap:10px; margin-top:12px; }
.member__social a{ color:var(--text-on-paper-soft); transition:color .2s var(--ease); }
.member__social a:hover{ color:var(--ink); }
.member__social svg{ width:16px; height:16px; display:block; }
@media (max-width:860px){ .committee{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .committee{ grid-template-columns:1fr; } }

/* ============================================================
   Journal (news) grid + article
   ============================================================ */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:44px; }
.news-card__media{ aspect-ratio:4/3; overflow:hidden; background:var(--paper-dim); position:relative; }
.news-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.news-card:hover .news-card__media img{ transform:scale(1.04); }
.news-card__tag{ position:absolute; top:14px; left:14px; background:var(--ink); color:#fff; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:5px 12px; border-radius:100px; }
.news-card__title{ font-family:var(--font-display); text-transform:uppercase; font-size:21px; margin:16px 0 6px; line-height:1.1; }
.news-card__excerpt{ font-size:14px; color:var(--text-on-paper-soft); line-height:1.55; }
.news-card--soon .news-card__media{ display:flex; align-items:center; justify-content:center; }
.news-card--soon .news-card__media span{ font-family:var(--font-display); text-transform:uppercase; color:var(--line-on-paper); font-size:15px; }
@media (max-width:860px){ .news-grid{ grid-template-columns:1fr; } }

.latest-news__card{ max-width:var(--container); margin:36px auto 0; display:grid; grid-template-columns:1fr 1.1fr; border:1px solid var(--line-on-paper); background:var(--paper); }
.latest-news__media{ aspect-ratio:4/3; overflow:hidden; }
.latest-news__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.latest-news__card:hover .latest-news__media img{ transform:scale(1.03); }
.latest-news__body{ padding:clamp(28px,4vw,48px); display:flex; flex-direction:column; justify-content:center; }
.latest-news__tag{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.latest-news__title{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(24px,3vw,34px); line-height:1.05; margin-bottom:14px; }
.latest-news__excerpt{ font-size:15px; color:var(--text-on-paper-soft); line-height:1.6; margin-bottom:18px; }
@media (max-width:760px){ .latest-news__card{ grid-template-columns:1fr; } }

.article{ max-width:760px; margin:0 auto; }
.article__back{ font-size:13px; font-weight:600; color:var(--text-on-paper-soft); display:inline-flex; align-items:center; gap:6px; margin-bottom:30px; }
.article__back:hover{ color:var(--ink); }
.article__kicker{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); }
.article__title{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(32px,5vw,52px); line-height:1.05; margin:14px 0 22px; }
.article__lede{ font-size:17px; line-height:1.7; color:var(--text-on-paper-soft); font-style:italic; margin-bottom:8px; }
.article__body{ font-size:16px; line-height:1.8; color:var(--text-on-paper); }
.article__body p{ margin:0 0 20px; }
.article__body .q{ font-weight:700; }
.article__body em{ color:var(--text-on-paper-soft); }
.article__related{ margin-top:60px; padding-top:40px; border-top:1px solid var(--line-on-paper); }

/* ============================================================
   Events
   ============================================================ */
.events-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:36px; }
.event-card{ border:1px solid var(--line-on-paper); background:var(--paper); overflow:hidden; }
.event-card[data-linked]{ cursor:pointer; }
.event-card__media{ aspect-ratio:16/9; overflow:hidden; background:var(--paper-dim); }
.event-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.event-card:hover .event-card__media img{ transform:scale(1.04); }
.event-card__body{ display:flex; gap:18px; padding:20px 22px; }
.event-card__date{ flex-shrink:0; width:64px; text-align:center; background:var(--ink); color:#fff; padding:10px 0; border-radius:2px; }
.event-card__day{ font-family:var(--font-display); text-transform:uppercase; font-size:24px; line-height:1; }
.event-card__month{ font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; margin-top:5px; color:var(--text-on-ink-soft); }
.event-card__year{ font-size:10px; margin-top:1px; color:rgba(255,255,255,.45); }
.event-card__title{ font-family:var(--font-display); text-transform:uppercase; font-size:18px; line-height:1.1; margin-bottom:6px; }
.event-card__loc{ font-size:12.5px; color:var(--gold); font-weight:600; margin-bottom:8px; }
.event-card__desc{ font-size:13.5px; color:var(--text-on-paper-soft); line-height:1.5; }
.event-card__link{ margin-top:10px; font-size:12.5px; font-weight:600; color:var(--ink); }
.event-card--past{ opacity:.6; }
.event-card--past .event-card__date{ background:var(--line-on-paper); color:var(--text-on-paper-soft); }
.event-card--past .event-card__month, .event-card--past .event-card__year{ color:var(--text-on-paper-soft); }
@media (max-width:760px){ .events-grid{ grid-template-columns:1fr; } }

.event-featured{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line-on-paper); background:var(--paper); margin-top:36px; overflow:hidden; }
.event-featured[data-linked]{ cursor:pointer; }
.event-featured__media{ aspect-ratio:4/3; overflow:hidden; }
.event-featured__media img{ width:100%; height:100%; object-fit:cover; }
.event-featured__body{ padding:clamp(26px,4vw,40px); display:flex; flex-direction:column; justify-content:center; }
.event-featured__badge{ display:inline-flex; align-items:center; gap:8px; width:fit-content; background:var(--ink); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:6px 14px 6px 10px; border-radius:100px; margin-bottom:16px; }
.event-featured__dot{ width:7px; height:7px; border-radius:50%; background:var(--gold-bright); animation:pulseDot 1.6s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.event-featured__dates{ font-size:13px; color:var(--gold); font-weight:600; margin-bottom:10px; }
.event-featured__title{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(24px,3vw,32px); line-height:1.1; margin-bottom:10px; }
.event-featured__loc{ font-size:13px; color:var(--text-on-paper-soft); margin-bottom:12px; }
.event-featured__desc{ font-size:14.5px; color:var(--text-on-paper-soft); line-height:1.6; margin-bottom:16px; }
.event-featured__link{ font-size:13.5px; font-weight:600; color:var(--ink); }
@media (max-width:760px){ .event-featured{ grid-template-columns:1fr; } }

/* ============================================================
   Appel / résultats MAG (gold section, kept for continuity)
   ============================================================ */
.appel__numeral{ position:absolute; top:-.12em; right:clamp(-40px,4vw,40px); font-family:var(--font-display); text-transform:uppercase; font-size:clamp(220px,34vw,480px); line-height:1; color:rgba(13,13,11,.08); pointer-events:none; user-select:none; z-index:0; }
.appel__intro{ position:relative; z-index:1; max-width:760px; margin:0 auto 40px; text-align:center; }
.appel__inline-link{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.appel__mag-link{ display:inline-block; margin:18px auto 0; font-size:14px; font-weight:600; color:var(--ink); border-bottom:1px solid rgba(13,13,11,.4); padding-bottom:2px; }

/* ============================================================
   Tariffs
   ============================================================ */
.tariffs{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-on-paper); border:1px solid var(--line-on-paper); margin-top:40px; }
.tariff{ background:var(--paper); padding:24px 20px; }
.tariff__name{ font-size:13px; font-weight:600; color:var(--text-on-paper-soft); margin-bottom:10px; }
.tariff__price{ font-family:var(--font-display); text-transform:uppercase; font-size:22px; }
.tariff__price span{ font-family:var(--font-body); font-size:12px; font-weight:400; color:var(--text-on-paper-soft); }
@media (max-width:860px){ .tariffs{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .tariffs{ grid-template-columns:1fr; } }
.join-preview{ background:var(--ink); color:#fff; text-align:center; }
.join-preview__inner{ max-width:640px; margin:0 auto; }
.join-preview .tariffs{ background:var(--line-on-ink); border-color:var(--line-on-ink); }
.join-preview .tariff{ background:var(--ink); }
.join-preview .tariff__name{ color:var(--text-on-ink-soft); }
.join-preview .tariff__price{ color:#fff; }
.join-preview .tariff__price span{ color:var(--text-on-ink-soft); }
.join-preview__btn{ display:inline-block; margin-top:32px; background:var(--gold); color:var(--ink); font-weight:600; font-size:14px; padding:14px 32px; border-radius:100px; }
.join-preview__btn:hover{ background:var(--gold-bright); }

/* ============================================================
   Devenir membre — form + download card
   ============================================================ */
.join-card{ border:1px solid var(--line-on-paper); border-radius:4px; padding:30px; }
.join-card__badge{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--gold); color:var(--ink); padding:5px 12px; border-radius:100px; margin-bottom:16px; }
.join-card__title{ font-family:var(--font-display); text-transform:uppercase; font-size:24px; margin-bottom:10px; }
.join-card__desc{ font-size:14.5px; color:var(--text-on-paper-soft); line-height:1.6; margin-bottom:22px; }
.join-card__btn{ display:inline-block; width:100%; text-align:center; padding:13px; border-radius:100px; border:none; cursor:pointer; font-family:var(--font-body); font-weight:600; font-size:14px; background:var(--ink); color:#fff; transition:background .2s var(--ease); }
.join-card__btn:hover{ background:var(--gold); color:var(--ink); }
.join-card__note{ font-size:12.5px; color:var(--text-on-paper-soft); margin-top:12px; line-height:1.5; }

.form-h{ font-family:var(--font-display); text-transform:uppercase; font-size:19px; margin:44px 0 20px; padding-bottom:10px; border-bottom:1px solid var(--line-on-paper); }
.form-h:first-child{ margin-top:0; }
.form-h--sub{ font-family:var(--font-body); text-transform:none; font-weight:700; font-size:14px; border-bottom:none; padding-bottom:0; margin:30px 0 16px; color:var(--text-on-paper-soft); }
.form-h--sub span{ font-weight:400; font-style:italic; }
.form-field{ margin-bottom:16px; }
.form-field label{ font-size:12.5px; font-weight:600; color:var(--text-on-paper-soft); display:block; margin-bottom:6px; }
.form-field input, .form-field select, .form-field textarea{ width:100%; font-family:var(--font-body); font-size:14.5px; padding:11px 13px; border:1px solid var(--line-on-paper); border-radius:2px; background:var(--paper); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--ink); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-checks{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.form-check{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; margin-bottom:10px; line-height:1.45; }
.form-check input{ margin-top:3px; flex-shrink:0; width:16px; height:16px; accent-color:var(--ink); cursor:pointer; }
@media (max-width:640px){ .form-row, .form-checks{ grid-template-columns:1fr; } }

.download-card{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; border:1px solid var(--line-on-paper); border-radius:2px; padding:26px 28px; max-width:620px; }
.download-card__icon{ flex-shrink:0; color:var(--gold); width:48px; height:48px; border-radius:50%; background:var(--paper-dim); display:flex; align-items:center; justify-content:center; }
.download-card__text{ flex:1 1 240px; }
.download-card__title{ font-weight:700; font-size:16px; color:var(--text-on-paper); margin-bottom:4px; }
.download-card__desc{ font-size:14px; color:var(--text-on-paper-soft); line-height:1.5; }
.download-card__button{ flex-shrink:0; font-family:var(--font-body); font-weight:600; font-size:14px; color:var(--paper); background:var(--ink); border-radius:100px; padding:12px 24px; white-space:nowrap; transition:background .25s var(--ease); }
.download-card__button:hover{ background:var(--gold); color:var(--ink); }
.how-to-list{ margin:28px 0 0; padding:0 0 0 22px; max-width:560px; }
.how-to-list li{ font-size:15px; color:var(--text-on-paper-soft); line-height:1.6; margin-bottom:8px; padding-left:6px; list-style:decimal; }
.how-to-list a{ color:var(--text-on-paper); font-weight:600; border-bottom:1px solid var(--line-on-paper); }
@media (max-width:480px){ .download-card{ flex-direction:column; align-items:flex-start; padding:22px; } .download-card__button{ width:100%; text-align:center; } }

/* ============================================================
   Footer
   ============================================================ */
.footer{ background:var(--ink); color:var(--text-on-ink); padding:60px var(--gutter) 34px; }
.footer__grid{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid var(--line-on-ink); }
.footer__label{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-on-ink-soft); margin-bottom:12px; }
.footer__text{ font-size:15px; color:#fff; line-height:1.6; }
.footer__text a{ color:#fff; border-bottom:1px solid var(--line-on-ink); }
.footer__bottom{ max-width:var(--container); margin:22px auto 0; font-size:12.5px; color:var(--text-on-ink-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.footer__bottom a{ color:inherit; border-bottom:1px solid var(--text-on-ink-soft); }
.footer__bottom a:hover{ color:#fff; border-color:#fff; }
.footer__credit{ text-align:right; }
@media (max-width:640px){ .footer__grid{ grid-template-columns:1fr; gap:30px; } .footer__bottom{ flex-direction:column; } .footer__credit{ text-align:left; } }

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-armed{ opacity:1; transform:translateY(0); }
