:root{
  --cream:#f4efe6;
  --paper:#ffffff;
  --ink:#111111;
  --muted:#666666;
  --line:rgba(17,17,17,.18);
  --line2:rgba(17,17,17,.10);
  --radius:18px;
  --blue:#2f57ff;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  letter-spacing: .3px;
  font-size: 13px;
  text-transform: none;
}



.page{
  max-width:860px;
  margin:0 auto;
  padding:18px 16px 80px;
}

/* ===== TIPOGRAFIA “CANVA” ===== */
p{
  margin: 12px 0 0;
  line-height: 1.9;
  font-size: 13px;
  letter-spacing: 1.8px;
}


.small,
.tag{
  font-size: 11px;
  letter-spacing: 2px;
  opacity: .7;
}




/* Títols en majúscules tipus “poster” */
.weekendTitle,
.placeTitle,
.sectionTitle,
h2{
  font-family: "Playfair Display", serif;
  text-transform: uppercase;
  letter-spacing: 2.4px;
  font-size: 32px;
  margin-bottom: 24px;
}

/* ===== NAV ===== */
.topnav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(244,239,230,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line2);
  display:flex;
  justify-content:center;
  gap:18px;
  padding:12px 14px;
}

.topnav a{
  color:var(--ink);
  text-decoration:none;
  font-size:12px;
  letter-spacing:2.6px;
  text-transform:uppercase;
  padding:8px 10px;
  border-radius:999px;
}
.topnav a:hover{ background:rgba(17,17,17,.06); }

/* ===== HERO (com la 1a imatge) ===== */
.hero{
  margin-top:18px;
  background: transparent;
  border-top: 2px solid var(--ink);     /* línia contínua dalt */
  border-bottom: 2px solid var(--ink);  /* línia contínua baix */
  border-radius: 0;
  padding: 34px 16px 26px;
  text-align:center;
}

/* Tipos hero “antigues” */
.kicker{
  margin:0 0 10px;
  font-family:"Caveat", cursive;
  font-size:38px;
  line-height:1;
  text-transform:none;      /* IMPORTANT: no en majúscules */
  letter-spacing:0;
}

.names{
  margin: 0;
  font-family: "Playfair Display", serif;
  font-weight: 400;              /* clau: no massa negre */
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.dateplace{
  margin:14px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
  letter-spacing:.55px;
}

.hairline{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(17,17,17,.45), transparent);
  margin:18px auto;
  width:min(520px, 90%);
}

.lead{
  margin:0 auto;
  max-width:62ch;
  font-size:15.5px;
  line-height:1.9;
  letter-spacing:.45px;
}

.ctaRow{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:18px;
}

/* Buttons */
.btn, button{
  display:inline-block;
  border:1px solid rgba(17,17,17,.25);
  background:var(--ink);
  color:#fff;
  text-decoration:none;
  border-radius:14px;
  padding:12px 16px;
  font-size:15px;
  letter-spacing:.35px;
  cursor:pointer;
}
.btn:hover, button:hover{ filter:brightness(.92); }
.btn.ghost{
  background:transparent;
  color:var(--ink);
}

/* ===== FULL BLEED IMAGES ===== */
.fullbleed{
  margin-top:22px;
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}

.fullbleed img{
  width:100%;
  display:block;
  object-fit:cover;
}

.fullbleed.heroPhoto img{
  height: 680px;
  object-position: 50% 20%;
}
.fullbleed.partyPhoto img{
  height: 520px;
  object-position: 50% 40%;
}

@media (max-width: 720px){
  .fullbleed.heroPhoto img{ height: 420px; }
  .fullbleed.partyPhoto img{ height: 360px; }
}

/* Doodles com a imatge (no sprite) */
.doodleImg{
  width: 200px;
  height: auto;
  display: block;
  filter: contrast(1.08);
}

@media (max-width: 760px){
  .doodleImg{ width: 150px; }
}

/* ===== PROGRAMA (poster) ===== */
.weekend{
  margin-top:28px;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: transparent;
}

.weekendInner{
  max-width: 980px;
  margin: 0 auto;
  padding: 46px 18px;
}

.weekendTitle{
  margin:0 0 30px;
  text-align:left;           /* com la mostra */
  text-transform:uppercase;
  font-size: 22px;
  letter-spacing:3px;
}

.dayRow{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: center;
  padding: 26px 0;
}

.dayRow.alt{
  grid-template-columns: 1fr 220px;
}
.dayRow.alt .dayText{ order: 1; }
.dayRow.alt .ill{ order: 2; }

.weekend .ill{
  min-width: 220px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.dayName.script,
.handTitle{
  font-family: "Caveat", cursive;
  text-transform: none;
  letter-spacing: .3px;
  font-size: 36px;
  margin-bottom: 6px;
}


.dayBody p{
  margin: 12px 0 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: 1.9;
  text-transform: inherit;
}


/* mòbil */
@media (max-width: 760px){
  .dayRow, .dayRow.alt{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 0;
  }
  .weekend .ill{
    min-width: 0;
    justify-content:flex-start;
  }
  .doodleSprite{ width: 150px; height: 150px; }
}

/* ===== EL LLOC (2 col) ===== */
.place{
  margin-top: 28px;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: transparent;
}

.placeInner{
  max-width: 980px;
  margin: 0 auto;
  padding: 46px 18px;
}

.place2col{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: start;
}

.placeImg{ margin:0; }

.placeImg img{
  width:100%;
  height: 520px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(17,17,17,.12);
  display:block;
  filter: saturate(.92) contrast(1.02);
}

.placeTitle{
  margin: 0 0 10px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2.6px;
}

.placeText p{
  margin: 12px 0 0;
}

@media (max-width: 900px){
  .place2col{ grid-template-columns: 1fr; }
  .placeImg img{ height: 380px; }
}

/* ===== RSVP (opció 5) ===== */
.rsvpClean{
  margin-top: 28px;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: transparent;
}

.rsvpInner{
  max-width: 980px;
  margin: 0 auto;
  padding: 46px 18px;
}

.rsvpTop{
  display:grid;
  grid-template-columns: 1fr; /* ja no hi ha doodle */
  gap: 16px;
  margin: 6px 0 18px;
}

/* Formulari “paper” */
#rsvpForm{
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 18px;
  padding: 22px 18px;
}

/* Form basics */
.formTitle{
  margin:22px 0 8px;
  font-size:12px;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:var(--muted);
}

label{
  display:block;
  margin:12px 0;
  font-size:13.5px;
  letter-spacing:.35px;
}

input, select, textarea{
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  border:1px solid var(--line2);
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  font: inherit;
}

input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:rgba(17,17,17,.35);
  box-shadow:0 0 0 3px rgba(17,17,17,.08);
}

.check{
  display:flex;
  gap:12px;
  align-items:center;
  margin:10px 0;
}
.check input{ width:auto; margin:0; }

.radioRow{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:6px;
  padding:10px 12px;
  border:1px solid var(--line2);
  border-radius:14px;
  background:rgba(17,17,17,.02);
}

.tag{
  color:var(--muted);
  font-size:12px;
  margin-left:6px;
}

.grid2{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media (min-width: 720px){
  .grid2{ grid-template-columns: 1fr 1fr; }
}

button.secondary{
  background:transparent;
  color:var(--ink);
}

button.link{
  background:transparent;
  border:none;
  color:var(--muted);
  padding:0;
  text-decoration:underline;
  margin-top:8px;
}
button.link.danger{ color:#7a2a2a; }

.status{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
  text-align:center;
  letter-spacing:.45px;
}

/* Footer */
.footer{
  margin-top:26px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  letter-spacing:.55px;
}

/* Enllaç estil “a mà” */
.linkHand{
  font-family: "Caveat", cursive;
  font-size: 22px;
  margin-left: 6px;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  letter-spacing: .2px;
}
.linkHand::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:2px;
  background: var(--ink);
  opacity:.6;
}
.linkHand:hover{ opacity:.7; }

/* Separador irregular entre seccions */
.sectionDivider{
  height: 2px;
  max-width: 980px;
  margin: 42px auto;
  background: repeating-linear-gradient(
    90deg,
    var(--ink),
    var(--ink) 14px,
    transparent 14px,
    transparent 22px
  );
  opacity: .9;
}

/* Frase humana */
.humanLine{
  margin-top: 18px;
  font-family: "Caveat", cursive;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing:.2px;
}
@media (max-width:760px){
  .humanLine{ font-size: 22px; }
}
.weekend,
.place,
.rsvpClean,
.hero{
  border-top: none;
  border-bottom: none;
}
.humanLineCenter{
  text-align: center;
  margin: 26px auto 0;
  max-width: 900px;
}
/* === FIX: frase manuscrita centrada (fora de les columnes) === */
.humanLine{
  width: 100%;
  display: block;
  text-align: center;
  margin: 22px auto 0;
  font-family: "Caveat", cursive;
  font-size: 30px;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.sectionDivider{
  max-width: 980px;
  margin: 44px auto;
}
/* ===== RSVP: recupera el formulari ===== */
/* RSVP: SENSE línies contínues */
.rsvpClean{
  border-top: 0 !important;
  border-bottom: 0 !important;
}


.rsvpInner{
  max-width: 980px;
  margin: 0 auto;
  padding: 46px 18px;
}

#rsvpForm{
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 18px;
  padding: 22px 18px;
}

label{ display:block; margin:12px 0; font-size:14px; }

input, select, textarea{
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  border:1px solid var(--line2);
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  font: inherit;
}

.check{ display:flex; gap:12px; align-items:center; margin:10px 0; }
.check input{ width:auto; margin:0; }

.grid2{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:720px){ .grid2{ grid-template-columns:1fr 1fr; } }
.footer a{
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* ===== RSVP: recuperació robusta del formulari ===== */

.rsvpInner{
  max-width: 980px;
  margin: 0 auto;
  padding: 46px 18px;
}

#rsvpForm{
  margin-top: 18px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 18px;
  padding: 22px 18px;
}

/* Estructura del form */
#rsvpForm h3.formTitle{
  margin:22px 0 8px;
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:12px;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color: var(--muted);
}

#rsvpForm label{
  display:block;
  margin:12px 0;
  font-size:14px;
}

#rsvpForm input,
#rsvpForm select,
#rsvpForm textarea{
  display:block;
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  border:1px solid var(--line2);
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  font: inherit;
}

#rsvpForm .check{
  display:flex;
  gap:12px;
  align-items:center;
  margin:10px 0;
}

#rsvpForm .check input{
  width:auto;
  margin:0;
}

#rsvpForm .grid2{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}

@media (min-width: 720px){
  #rsvpForm .grid2{
    grid-template-columns: 1fr 1fr;
  }
}

/* Botons dins RSVP */
#rsvpForm button{
  margin-top: 14px;
}

#rsvpForm button.secondary{
  background: transparent;
  color: var(--ink);
}

/* =========================
   RSVP — HARD RESET (a prova de bombes)
   Posa-ho al FINAL del CSS
   ========================= */

#rsvp, #rsvp *{
  box-sizing: border-box;
}

/* torna el form i els contenidors a layout normal */
#rsvp form,
#rsvp #rsvpForm,
#rsvp .rsvpInner,
#rsvp .rsvpTop,
#rsvp .grid2,
#rsvp #persones{
  display: block !important;
}

/* re-activa la graella només per grid2 */
#rsvp .grid2{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
@media (min-width: 720px){
  #rsvp .grid2{
    grid-template-columns: 1fr 1fr !important;
  }
}

/* camps */
#rsvp label{
  display: block !important;
  margin: 12px 0 !important;
  font-size: 14px !important;
  letter-spacing: .3px !important;
}

#rsvp input,
#rsvp select,
#rsvp textarea{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 6px 0 0 !important;
  padding: 12px 12px !important;
  border: 1px solid rgba(17,17,17,.10) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.9) !important;
  color: var(--ink) !important;
}

/* checkboxes */
#rsvp label.check{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 10px 0 !important;
}
#rsvp label.check input{
  width: auto !important;
  margin: 0 !important;
}

/* radiobutton row (personaTpl) */
#rsvp .radioRow{
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-top: 6px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(17,17,17,.10) !important;
  border-radius: 14px !important;
  background: rgba(17,17,17,.02) !important;
}

/* targeta del form */
#rsvp #rsvpForm{
  background: rgba(255,255,255,.45) !important;
  border: 1px solid rgba(17,17,17,.12) !important;
  border-radius: 18px !important;
  padding: 22px 18px !important;
  margin-top: 18px !important;
}

/* títols del form */
#rsvp .formTitle{
  margin: 22px 0 8px !important;
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 2.2px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

/* botons */
#rsvp button{
  display: inline-block !important;
  width: auto !important;
}
#rsvp button.secondary{
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid rgba(17,17,17,.25) !important;
}
/* === RSVP: camps condicionals (FORÇA AMAGATS per defecte) === */
#rsvp .p-edat-wrap,
#rsvp .p-dieta-altres-wrap{
  display: none !important;
}

/* quan toca mostrar-los */
#rsvp .p-edat-wrap.is-open,
#rsvp .p-dieta-altres-wrap.is-open{
  display: block !important;
}
/* Honeypot anti-spam: no ha d'aparèixer mai */
#rsvpForm .hp{
  display: none !important;
}
.kicker{
  font-family:"Caveat", cursive;
  font-size:38px;
  text-transform:none;
  letter-spacing:0;
}
.hero{
  border-top: 2px solid var(--ink) !important;
  border-bottom: 2px solid var(--ink) !important;
}
.names .amp{
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "liga" 0, "calt" 0, "salt" 0;
  font-variant-ligatures: none;
}
.names .amp{
  font-family: "Source Serif 4", serif !important;
  font-weight: 600; /* prova 400 si el vols més fi */
  font-style: normal;
  font-feature-settings: normal;
}

/* 2) TITOLS PRINCIPALS DE SECCIÓ: grans, centrats, cursiva, més aire */
.weekendTitle{
  text-align: center !important;
  font-family: "Playfair Display", serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;

  font-size: clamp(42px, 6vw, 72px) !important;
  line-height: 1.05 !important;
  letter-spacing: 1.2px !important;

  margin: 18px 0 38px !important;
}

/* (opcional però recomanat) que la intro no quedi tan “apretada” respecte el títol */
.introText{
  margin-top: 10px;
}

/* =========================================================
   UNIFICAR TIPOGRAFIA DEL TEXT DEL PROGRAMA
   ========================================================= */

/* Text del programa = mateix estil que el body */
.dayBody p{
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  line-height: 1.9 !important;
}

/* Manté només una mica d’aire vertical */
.dayBody p + p{
  margin-top: 12px;
}
/* ===== FIX MÒBIL: doodle sempre a sobre del dia (també a .alt) ===== */
@media (max-width: 760px){
  .dayRow,
  .dayRow.alt{
    display: grid;
    grid-template-columns: 1fr;
  }

  /* Sempre: doodle a dalt, text a sota */
  .dayRow .ill{ order: 1; }
  .dayRow .dayText{ order: 2; }

  /* Aire extra perquè no “s’enganxin” doodles entre dies */
  .dayRow .ill{ margin-bottom: 14px; }
}
/* ===== POPUP CONFIRMACIÓ RSVP ===== */

.successPopup{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.successPopup.show{
  opacity: 1;
  pointer-events: auto;
}

.successCard{
  background: rgba(255,255,255,.95);
  border: 2px solid var(--ink);
  border-radius: 22px;
  padding: 34px 32px;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* Tipografia */
.successTitle{
  font-family: "Caveat", cursive;
  font-size: 34px;
  margin: 0 0 10px;
  text-transform: none;
  letter-spacing: 0;
}

.successText{
  font-size: 14px;
  letter-spacing: 1.6px;
  margin: 0;
}

/* Mòbil */
@media (max-width:760px){
  .successCard{
    margin: 0 18px;
    padding: 28px 22px;
  }
}
/* ===== TOAST / POPUP RSVP ===== */

.toast{
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: center;

  background: rgba(0,0,0,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.toast.show{
  opacity: 1;
  pointer-events: auto;
}

.toastCard{
  position: relative;
  width: min(520px, calc(100vw - 36px));
  padding: 34px 28px 26px;
  border-radius: 22px;

  background: rgba(255,255,255,.94);
  border: 2px solid var(--ink);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);

  text-align: center;
}

.toastClose{
  position: absolute;
  top: 10px;
  right: 14px;

  width: 38px;
  height: 38px;
  border-radius: 999px;

  background: transparent;
  border: 1px solid rgba(17,17,17,.22);
  color: var(--ink);

  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.toastClose:hover{ background: rgba(17,17,17,.06); }

.toastTitle{
  margin: 0 0 10px;
  font-family: "Caveat", cursive;
  font-size: 36px;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.toastText{
  margin: 0;
  font-size: 13px;
  letter-spacing: 1.6px;
  line-height: 1.9;
}

/* mòbil */
@media (max-width:760px){
  .toastCard{ padding: 28px 20px 22px; }
  .toastTitle{ font-size: 32px; }
}
.toast:not(.show){ display:none !important; }
.toast{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 9999;
}

.toast.show{
  opacity: 1;
  pointer-events: auto;
}

.toastCard{
  width: min(520px, 92vw);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,17,17,.18);
  border-radius: 18px;
  padding: 18px 18px 16px;
}

.toastClose{
  position: absolute;
  margin-left: auto;
  right: 18px;
  top: 14px;
  background: transparent;
  border: 0;
  color: #111;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.toastTitle{
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: 1px;
}

.toastText{
  margin: 0;
  opacity: .85;
}
.toastCard{ position: relative; }
/* === RSVP conditional fields (Nen / Altres) === */
#rsvp .p-edat-wrap,
#rsvp .p-dieta-altres-wrap{
  display: none !important;
}

#rsvp .p-edat-wrap.is-open,
#rsvp .p-dieta-altres-wrap.is-open{
  display: block !important;
}
#rsvp .p-edat-wrap,
#rsvp .p-dieta-altres-wrap{ display:none !important; }
#rsvp .p-edat-wrap.is-open,
#rsvp .p-dieta-altres-wrap.is-open{ display:block !important; }
#rsvpForm .hp{ display:none !important; }
/* Botó Afegir persona – integrat amb el formulari */
.addPersonaHand{
  display: inline-block;
  margin: 4px 0 18px;
  padding: 8px 16px;

  font-family: "Caveat", cursive;
  font-size: 22px;
  letter-spacing: 0;
  text-transform: none;

  background: rgba(17,17,17,.04);
  border: 1px dashed rgba(17,17,17,.35);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
}

.addPersonaHand:hover{
  background: rgba(17,17,17,.08);
}


.formSideBySide{
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 22px;
  align-items: start;
  margin-top: 8px;
}

.formSideArt{
  display: flex;
  justify-content: center;
  position: sticky;
  top: 110px; /* perquè a desktop quedi “a mà” mentre baixes */
}

@media (max-width: 760px){
  .formSideBySide{
    grid-template-columns: 1fr;
  }
  .formSideArt{
    position: static;
    justify-content: flex-start;
    margin-top: 12px;
  }
}
.doodleImg{
  width: 200px;
  height: auto;
  display: block;
}
@media (max-width:760px){
  .doodleImg{ width: 150px; }
}
.weekend .ill{
  display:flex;
  justify-content:center;
  align-items:center;
}

/* === FORCE DOODLES VISIBLE === */
.ill { display:flex !important; justify-content:center; align-items:center; }
.doodleImg{
  display:block !important;
  width: 200px !important;
  height: auto !important;
  max-width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.intro .ill{ margin-top: 26px; }
@media (max-width:760px){
  .doodleImg{ width:150px !important; }
}
.intro .doodleImg{
  transform: scale(1.5);
}
.toast-message {
  white-space: pre-line;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
}
.doodleWide{
  width: 320px;
}
.doodleLlums{
  width: 400px; /* si abans eren 200px → doble */
}

@media (max-width: 760px){
  .doodleLlums{
    width: 300px; /* també una mica més grans a mòbil */
  }
}
.doodleestenedor{
  width: 400px; /* si abans eren 200px → doble */
}

@media (max-width: 760px){
  .doodleestenedor{
    width: 300px; /* també una mica més grans a mòbil */
  }
}
.doodleCasa{
  width: 300px; /* 200px + 50% */
}

@media (max-width: 760px){
  .doodleCasa{
    width: 225px;
  }
}
/* OVERRIDE FINAL — mida específica per doodles concrets */
#lloc .doodleImg.doodleLlums{ width: 400px !important; }
#lloc .doodleImg.doodleestenedor{ width: 400px !important; }
#lloc .doodleImg.doodleCasa{  width: 300px !important; }

/* mòbil */
@media (max-width: 760px){
  #lloc .doodleImg.doodleLlums{ width: 300px !important; }
  #lloc .doodleImg.doodleestenedor{ width: 300px !important; }
  #lloc .doodleImg.doodleCasa{  width: 225px !important; }
}

/* ===== FIX MÒBIL: Dissabte — doodle a sobre del títol ===== */
@media (max-width: 760px){
  .dayRow.alt .ill{
    order: 1 !important;
    margin-bottom: 12px;
  }

  .dayRow.alt .dayText{
    order: 2 !important;
  }
}
/* ===== HERO: enllaç a Google Maps ===== */
.placeLink{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .55px;
}

.placeLink:hover{
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.placeIcon{
  font-size: 15px;
  line-height: 1;
}
/* === FIX DEFINITIU: text del programa igual que la resta === */
.dayBody p{
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 1.8px !important;
  line-height: 1.9 !important;
  text-transform: none !important;
}
/* ===== DESKTOP: IMPORTANT sota la imatge del lloc ===== */
@media (min-width: 901px){
  .place2col{
    grid-template-areas:
      "text image"
      "important image";
  }

  .placeText{
    grid-area: text;
  }

  .placeImg{
    grid-area: image;
  }

  .importantNote{
    grid-area: important;
    margin-top: 18px;
  }
}
.place2col{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: start;

  grid-template-areas:
    "text image"
    "important image";
}

.placeText{ 
  grid-area: text; 
}

.placeImg{ 
  grid-area: image; 
}

.place2col > .importantNote{
  grid-area: important;
  margin-top: 18px;
}

/* mòbil: torna a flux normal */
@media (max-width: 900px){
  .place2col{
    display: block;
  }
}
/* Desktop: text esquerra, foto dreta, IMPORTANT sota la foto */
@media (min-width: 901px){
  .place2col{
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 28px;
    align-items: start;

    grid-template-areas:
      "text image"
      ".    important";
  }

  .placeText{ grid-area: text; }
  .placeImg{ grid-area: image; }

  .place2col > .importantNote{
    grid-area: important;
    margin: 0;              /* opcional */
    margin-top: 10px;       /* ajusta si vols més aire */
  }
}

/* Mòbil: torna a layout normal (ja el tens així) */
@media (max-width: 900px){
  .place2col{ display: block; }
}
/* EL LLOC – elimina espais morts sota la foto */
.place2col > .importantNote{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ajust fi del doodle de la casa */
.doodleCasa{
  margin-bottom: 6px; /* o 0 si el vols enganxat del tot */
}
.placeText p:last-of-type{
  margin-bottom: 8px;
}
/* IMPORTANT sota la foto – sense espai mort */
.placeText .importantNote{
  margin-top: 4px;
}

/* doodle casa enganxat a IMPORTANT */
.doodleCasa{
  margin-bottom: 4px;
}

/* elimina aire extra del paràgraf anterior */
.placeText p{
  margin-bottom: 10px;
}
/* =========================
   FIX FINAL — LLOC (espai mort + IMPORTANT)
   ========================= */

/* 1) Asegura que els wrappers d'imatge no afegeixin marge raro */
#lloc .placeText .ill{
  margin: 8px 0 !important;     /* ajusta si vols més/menys aire general */
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 2) El doodle de la casa enganxat a IMPORTANT */
#lloc img.doodleCasa{
  display: block !important;
  margin: 0 0 4px 0 !important;  /* posa 0 si el vols totalment enganxat */
}

/* 3) IMPORTANT: sense espai a sobre */
#lloc p.importantNote{
  margin: 0 !important;          /* clau */
  padding: 0 !important;
}

/* 4) Si hi ha algun marge “de paràgraf” que s’interposa abans del doodle casa */
#lloc .placeText p{
  margin-bottom: 0 !important;   /* evita forats entre paràgrafs i doodles */
}

/* però recupera una mica d'aire normal entre paràgrafs del text (excepte abans dels doodles) */
#lloc .placeText p + p{
  margin-top: 12px !important;
}

/* 5) Evita que l'últim paràgraf abans del doodle casa deixi un forat extra */
#lloc .placeText .ill + p.importantNote{
  margin-top: 0 !important;
}
/* IMPORTANT sota la foto (columna dreta) */
#lloc .placeImg .importantNote{
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: 1.4px;
  line-height: 1.8;
  text-transform: none;
}

/* si vols que “IMPORTANT” destaqui una mica */
#lloc .placeImg .importantNote strong{
  letter-spacing: 2px;
}
/* EL LLOC: columna dreta = foto + IMPORTANT */
.place2col{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: start;
}

.placeRight{
  display: flex;
  flex-direction: column;
  gap: 10px;         /* controla el “no espai mort” */
}

.placeRight .importantNote{
  margin: 0;         /* clau: elimina marges per defecte */
  font-size: 12px;
  letter-spacing: 1.4px;
  line-height: 1.8;
  text-transform: none;
}

/* Mòbil: tot en una columna */
@media (max-width: 900px){
  .place2col{
    grid-template-columns: 1fr;
  }
}
/* =========================
   EL LLOC — LAYOUT
   ========================= */

/* Desktop: 2 columnes */
.place2col{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: start;
}

/* la columna dreta conté foto + important */
.placeRight{
  display: block;
}

/* IMPORTANT sota la foto */
.placeRight .importantNote{
  margin-top: 12px;
}


/* IMPORTANT — mateix estil que el text normal */
.importantNote{
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 1.8px;
  line-height: 1.9;
  color: var(--ink);
}
 (max-width: 900px){
  .placeRight .importantNote{
    margin-top: 18px;   /* aire respecte la foto */
  }
}
/* IMPORTANT — tipografia correcta i consistent */
.importantNote{
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 1.8px !important;
  line-height: 1.9 !important;
  color: var(--ink);
}
@media (min-width: 901px){
  .place2col > .importantNote{
    margin-top: 24px;   /* separació clara de la foto */
  }
}

/* DESKTOP (2 columnes): centra els doodles dins del text */
@media (min-width: 901px){
  #lloc .placeText .ill{
    display: flex;
    justify-content: center !important;
  }

  #lloc .placeText .doodleCasa{
    margin: 0 auto !important;
    display: block;
  }
}
#lloc .importantNote{
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 1.8px !important;
  line-height: 1.9 !important;
}
/* ===== EL LLOC: GRID robust (desktop 2 col) ===== */
#lloc .place2col{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: start;

  grid-template-areas:
    "text image"
    "center center"
    "important important";
}

#lloc .placeText{ grid-area: text; }
#lloc .placeImg{ grid-area: image; }
#lloc .placeCenterArt{ grid-area: center; }
#lloc .importantNote{ grid-area: important; }

/* Centrar doodle casa “entre columnes” */
#lloc .placeCenterArt{
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

/* IMPORTANT amb aire i tipografia consistent */
#lloc .importantNote{
  margin-top: 10px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 1.8px;
  line-height: 1.9;
}

/* ===== STACK (1 columna): foto SEMPRE primer ===== */
@media (max-width: 900px){
  #lloc .place2col{
    grid-template-columns: 1fr;
    gap: 18px;

    grid-template-areas:
      "image"
      "text"
      "center"
      "important";
  }

  /* la foto 100% i amb aire abans del text */
  #lloc .placeImg img{
    width: 100%;
    height: auto;
  }

  #lloc .importantNote{
    margin-top: 14px;
  }
}

/* ================================
   EL LLOC — LAYOUT DEFINITIU
   (posa-ho al FINAL del CSS)
   ================================ */



/* Desktop: 2 columnes
   - text a l'esquerra
   - foto a la dreta
   - IMPORTANT sota la foto (mateixa columna dreta)
*/
#lloc .place2col{
  display: grid !important;
  grid-template-columns: 1.05fr .95fr !important;
  gap: 28px !important;
  align-items: start !important;

  grid-template-areas:
    "text img"
    "text imp" !important;
}

#lloc .placeText{ grid-area: text !important; }
#lloc .placeImg{ grid-area: img !important; }
#lloc .importantNote{
  grid-area: imp !important;
  margin-top: 14px !important;

  /* perquè no canviï la font/mida */
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 1.8px !important;
  line-height: 1.9 !important;
  text-transform: none !important;
}

/* evita “aire mort” entre foto i IMPORTANT */
#lloc .placeImg img{ display:block !important; }
#lloc .placeImg{ margin: 0 !important; }

/* Centrat del doodle de la casa (dins la columna de text) */
#lloc .placeText .ill{ justify-content: center !important; }
#lloc .doodleCasa{ display:block !important; margin: 0 auto !important; }

/* Mòbil: 1 columna (ordre: foto → text → IMPORTANT) */
@media (max-width: 900px){
  #lloc .place2col{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "img"
      "text"
      "imp" !important;
  }

  #lloc .importantNote{
    margin-top: 16px !important; /* separació respecte la foto */
  }



/* === EL LLOC: centrar el doodle de la casa (FORÇA TOTAL) === */
#lloc .placeText .ill{
  display: block !important;     /* millor que flex en aquest cas */
  width: 100% !important;        /* clau: que ocupi tota la columna */
  text-align: center !important; /* centra el contingut */
  margin: 16px 0 0 !important;   /* aire (ajusta si vols) */
}

#lloc .placeText img.doodleCasa{
  display: inline-block !important;
  margin: 0 auto !important;
}

/* === EL LLOC: doodle CASA centrat entre les dues columnes === */
#lloc .place2col{
  position: relative;
}

/* el contenidor del doodle */
#lloc .doodleCasa{
  display: block;
  margin: 0 auto;
}

/* ===== EL LLOC: centrar DOODLE CASA (sense :has, sense grid tricks) ===== */

/* assegura que els .ill del lloc no quedin enganxats a l’esquerra */
#lloc .placeText .ill{
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 18px 0 0 !important;
}

/* centra la imatge de la casa */
#lloc img.doodleCasa{
  display: inline-block !important;
  margin: 0 auto !important;
}

/* si tens algun altre CSS que força flex-start a .ill, això ho mata */
#lloc .placeText .ill{
  justify-content: initial !important;
  align-items: initial !important;
}
/* =========================================================
   EL LLOC – DOODLES (LLUMS + CASA)
   SOLUCIÓ DEFINITIVA I ESTABLE
   ========================================================= */

/* tots els doodles del lloc: bloc centrat */
#lloc .placeText .ill{
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 22px 0 !important;
}

/* imatges dels doodles sempre centrades */
#lloc .placeText .ill img{
  display: inline-block !important;
  margin: 0 auto !important;
}

/* mides específiques */
#lloc .doodleLlums{
  width: 400px;
}
#lloc .doodleestenedor{
  width: 400px;
}
#lloc .doodleCasa{
  width: 300px;
}

/* responsive */
@media (max-width: 760px){
  #lloc .doodleLlums{
    width: 300px;
  }
@media (max-width: 760px){
  #lloc .doodleestenedor{
    width: 300px;
  }
  #lloc .doodleCasa{
    width: 225px;
  }
}
/* === FIX FINAL: DOODLE CASA REALMENT CENTRAT === */
#lloc .placeText .ill img.doodleCasa{
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ========== EL LLOC: 1 columna a mòbil ========== */
@media (max-width: 760px){
  #lloc .place2col{
    display: block !important;
  }

  #lloc .placeImg,
  #lloc .placeText,
  #lloc .importantNote{
    width: 100% !important;
  }

  /* una mica d'aire entre foto i text */
  #lloc .placeImg{ margin-bottom: 14px !important; }
  #lloc .importantNote{ margin-top: 14px !important; }
}

/* ========== EL LLOC: MÒBIL 1 columna i ordre correcte (FOTO → TEXT → IMPORTANT) ========== */
@media (max-width: 760px){


  #lloc .place2col{
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* ordre */
  #lloc .placeImg{ order: 1 !important; margin: 0 0 14px !important; }
  #lloc .placeText{ order: 2 !important; }
  #lloc .importantNote{ order: 3 !important; margin: 14px 0 0 !important; }

  /* per assegurar que la foto és 100% */
  #lloc .placeImg img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}
/* ========== EL LLOC — MÒBIL: doodle CASA abans de IMPORTANT ========== */
@media (max-width: 760px){

  /* fem que el text sigui flex per poder reordenar elements interns */
  #lloc .placeText{
    display: flex;
    flex-direction: column;
  }

  /* assegurem ordre del doodle casa */
  #lloc .placeText .ill:has(.doodleCasa){
    order: 99;               /* al final del text */
    margin: 16px 0 0;
    display: flex;
    justify-content: center;
  }

  /* IMPORTANT sempre després */
  #lloc .importantNote{
    order: 100 !important;
    margin-top: 14px;
  }
}
/* EL LLOC: centra el doodle CASA quan està a la columna dreta */
#lloc .placeRight .ill{
  display: flex;
  justify-content: center;
  margin: 14px 0 10px;
}

#lloc .placeRight .doodleCasa{
  display: block;
  margin: 0 auto;
}
/* ===== EL LLOC — ORDRE CORRECTE EN MÒBIL ===== */
@media (max-width: 900px){

  /* convertim el grid en columna */
  #lloc .place2col{
    display: flex;
    flex-direction: column;
  }

  /* ordre base */
  #lloc .placeImg{ order: 1; }
  #lloc .placeText{ order: 2; }


/* ===== FIX FINAL: ordre exacte EL LLOC en mòbil ===== */
@media (max-width: 900px){

  #lloc .placeImg{ order: 1; }
  #lloc .placeText{ order: 2; }

  /* doodle CASA DESPRÉS del text */
  #lloc .doodleCasa{
    order: 3;
    display: block;
    margin: 18px auto;
  }

  /* IMPORTANT SEMPRE DESPRÉS del doodle */
  #lloc .importantNote{
    order: 4;
    margin-top: 14px;
  }

  /* frase final */
  #lloc .humanLine{
    order: 5;
  }
}
/* ===== EL LLOC: layout desktop ===== */
#lloc .place2col{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: start;
}

#lloc .placeRight .importantNote{
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 1.8px;
  line-height: 1.9;
}

/* doodle casa centrat (desktop) */
#lloc .placeCasa{
  display: none; /* en desktop el volem dins la columna esquerra? NO: el volem “entre” → el mostrem amb grid */
}

/* Mostrem el doodle casa entre columnes en desktop */
@media (min-width: 901px){
  #lloc .placeCasa{
    display: flex;
    grid-column: 1 / -1;
    justify-content: center;
    margin: 8px 0 0;
  }
}


/* ===== FIX FINAL: centrat real del doodle CASA en mòbil ===== */
@media (max-width: 900px){
  #lloc .placeCasa{
    width: 100%;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 14px 0 0 !important;
  }

  #lloc .placeCasa img{
    display: block !important;
    margin: 0 auto !important;
  }
}
/* === FIX A PROVA DE BOMBES: centrar DOODLE CASA en mòbil === */
@media (max-width: 900px){
  #lloc .placeCasa{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
  }

  #lloc .placeCasa img.doodleCasa{
    display: inline-block !important;
    margin: 0 auto !important;
    float: none !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important; /* per si algun style li està fent shift */
  }
}
.giftNote{
  margin: 28px auto 0;
  max-width: 620px;
  text-align: center;

  font-size: 13px;
  letter-spacing: 1.6px;
  line-height: 1.9;

  color: var(--muted);
}

.place2col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items:start;
}

.placeText,
.placeRight{
  min-width: 0;
}

.placeRight{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.placeImg{
  width:100%;
}

.placeImg img{
  display:block;
  width:100%;
  height:auto;
}

.placeCasa{
  width:100%;
  display:flex;
  justify-content:center;
  margin-top:12px;
}

.doodleCasa{
  max-width:180px;
  width:100%;
  height:auto;
}


/* ===== EL LLOC — FIX FINAL MÒBIL ===== */
@media (max-width: 768px){
  #lloc .place2col{
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* primer tota l'esquerra */

#lloc .placeImg{ order: 1 !important; }
  #lloc .placeText{
    order: 2 !important;
  }

  /* després tota la dreta */
  #lloc .placeRight{
    order: 4 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* ordre intern de la dreta */
  #lloc .importantNote{ order: 1 !important; }
  #lloc .roomNote{ order: 2 !important; }
  #lloc .placeLinkBlock{ order: 3!important; }
  #lloc .placeCasa{
    order: 4 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 4px !important;
  }
}
#lloc .importantNote + .roomNote{
  margin-top: 4px;

/* ===== NAV + IDIOMA ===== */
.topnav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244,239,230,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  flex-wrap: wrap;
}

.topnavLinks{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.topnavLinks a{
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
}

.topnavLinks a:hover{
  background: rgba(17,17,17,.06);
}

.langSwitch{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.45);
}

.langBtn{
  display: inline-block;
  min-width: 48px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.langBtn:hover{
  background: rgba(17,17,17,.06);
}

.langBtn.is-active{
  background: var(--ink);
  color: #fff;
}

@media (max-width: 760px){
  .topnav{
    justify-content: center;
  }

  .topnavLinks{
    width: 100%;
    justify-content: center;
  }

  .langSwitch{
    margin-top: 4px;
  }
}
}

/* ===== NAV ELEGANT + IDIOMA ===== */
.topnav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244,239,230,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line2);
  padding: 10px 16px;
}

.topnavInner{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.topnavLinks{
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.topnavLinks a{
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  padding: 8px 4px;
  position: relative;
}

.topnavLinks a::after{
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 2px;
  height: 1px;
  background: var(--ink);
  opacity: 0;
  transform: scaleX(.7);
  transition: opacity .2s ease, transform .2s ease;
}

.topnavLinks a:hover::after{
  opacity: .45;
  transform: scaleX(1);
}

.langSwitch{
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.55);
}

.langBtn{
  display: inline-block;
  min-width: 42px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 7px 10px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}

.langBtn:hover{
  background: rgba(17,17,17,.06);
}

.langBtn.is-active{
  background: var(--ink);
  color: #fff;
}

@media (max-width: 760px){
  .topnav{
    padding: 10px 12px;
  }

  .topnavInner{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .topnavLinks{
    grid-column: 1;
    justify-content: center;
    gap: 14px;
  }

  .topnavLinks a{
    font-size: 11px;
    letter-spacing: 2px;
    padding: 6px 2px;
  }

  .langSwitch{
    grid-column: 1;
    justify-self: center;
  }
}
.langBtn.is-active{
  background:var(--ink);
  color:#fff;
  pointer-events:none;
}