:root{
    --bg:#ffffff;
    --bg-raised:#ffffff;
    --bg-tint:#f2fafc;
    --bg-sunken:#e9f6fa;
    --ink:#1c1b1f;
    --ink-soft:#57555c;
    --ink-faint:#8c8a92;
    --sky:#1c86ab;
    --terracotta:#c1601f;
    --magenta:#c23d78;
    --gold:#a97a24;
    --purple:#5c1f52;
    --line:rgba(28,134,171,.35);
    --line-strong:rgba(28,27,31,.22);
    --shadow: 0 18px 40px -24px rgba(28,20,35,.28);
    /* fixed tones for pages reproduced as-is from the print piece, independent of viewer theme */
    --sky-script:#8cd0e5;
    --eyebrow-navy:#455991;
    --fixed-navy:#232a4d;
    --fixed-footer-bg:#414d82;
    --fixed-cream:#f5eef7;
    --fixed-cream-soft:#c8bcce;
    --fixed-gold-onnavy:#e2b568;
    --fixed-sky-onnavy:#7ad2ef;
    --fixed-safety-bg:#d97f4d;
    --fixed-safety-ink:#1a1410;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#1c1226;
      --bg-raised:#271932;
      --bg-tint:#271932;
      --bg-sunken:#150d1c;
      --ink:#f6eef7;
      --ink-soft:#cdb9d1;
      --ink-faint:#93829c;
      --sky:#6fd0ef;
      --terracotta:#f0955c;
      --magenta:#f091bb;
      --gold:#e2c07a;
      --purple:#caa0e0;
      --line:rgba(246,238,247,.18);
      --line-strong:rgba(246,238,247,.3);
      --shadow: 0 18px 44px -20px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="dark"]{
    --bg:#1c1226;
    --bg-raised:#271932;
    --bg-tint:#271932;
    --bg-sunken:#150d1c;
    --ink:#f6eef7;
    --ink-soft:#cdb9d1;
    --ink-faint:#93829c;
    --sky:#6fd0ef;
    --terracotta:#f0955c;
    --magenta:#f091bb;
    --gold:#e2c07a;
    --purple:#caa0e0;
    --line:rgba(246,238,247,.18);
    --line-strong:rgba(246,238,247,.3);
    --shadow: 0 18px 44px -20px rgba(0,0,0,.6);
  }

  *, *::before, *::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  }

  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Work Sans', 'Segoe UI', Arial, sans-serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,h4{ font-family:'Big Shoulders Display', 'Arial Narrow', sans-serif; margin:0; text-wrap:balance; }
  .mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }
  .script{ font-family:'Caveat', 'Segoe Script', cursive; }

  a{ color:inherit; }

  .wrap{ max-width:920px; margin:0 auto; padding:0 24px; }

  /* ---------- decorative grape motif ---------- */

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(120% 90% at 15% -10%, color-mix(in srgb, var(--sky) 20%, transparent), transparent 60%),
      radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--terracotta) 16%, transparent), transparent 55%),
      radial-gradient(80% 60% at 60% 120%, color-mix(in srgb, var(--purple) 14%, transparent), transparent 60%),
      var(--bg-sunken);
    border-bottom:1px solid var(--line);
    padding:56px 0 40px;
  }
  .hero-inner{
    position:relative; z-index:2;
    display:flex; flex-direction:column; gap:32px;
  }
  .hero-text{ min-width:0; }
  .hero-photo{
    flex-shrink:0; width:auto; height:auto; max-width:220px;
    border-radius:8px; box-shadow:var(--shadow); align-self:flex-start;
  }
  @media (min-width:880px){
    .hero-inner{ flex-direction:row; align-items:stretch; justify-content:space-between; gap:48px; }
    .hero-text{ flex:1 1 auto; }
    .hero-title{ font-size:clamp(2.6rem, 5.5vw, 5rem); }
    .hero-photo{ max-width:380px; height:340px; width:auto; align-self:flex-start; }
  }
  .hero-eyebrow{
    display:flex; align-items:center; gap:10px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--terracotta); font-weight:700;
    margin-bottom:22px;
  }
  .hero-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--sky); }
  .hero-title{
    font-weight:900;
    text-transform:uppercase;
    color:var(--ink);
    font-size:clamp(3.4rem, 13vw, 8.2rem);
    line-height:.86;
    letter-spacing:.005em;
  }
  .hero-title span{ display:block; }
  .hero-title .accent{ color:var(--sky); }
  .hero-sub{
    margin-top:22px;
    display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 26px;
  }
  .hero-sub .tagline{
    font-family:'Caveat', 'Segoe Script', cursive; font-weight:600;
    font-size:2.1rem; color:var(--magenta); line-height:1;
  }
  .hero-facts{
    margin-top:30px;
    display:grid; grid-template-columns:repeat(4, auto); gap:28px 40px; align-items:start;
  }
  @media (max-width:480px){ .hero-facts{ grid-template-columns:repeat(2, auto); } }
  .hero-fact{ text-align:center; }
  .hero-fact .num{
    font-family:'Big Shoulders Display'; font-weight:800; font-size:2.1rem; color:var(--terracotta); line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .hero-fact .label{
    font-family:'IBM Plex Mono'; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-faint); margin-top:6px;
  }
  .hero-download{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; color:var(--terracotta); text-decoration:none;
    border:1px solid color-mix(in srgb, var(--terracotta) 50%, var(--line-strong)); border-radius:50%;
    transition:background .15s, color .15s;
  }
  .hero-download svg{ width:16px; height:16px; }
  .hero-download:hover{ background:var(--terracotta); color:var(--bg); }
  .hero-grapes{
    position:absolute; right:-20px; top:-20px; width:200px; height:200px;
    opacity:.55; z-index:1;
  }
  @media (max-width:640px){ .hero-grapes{ width:120px; height:120px; right:-10px; top:0; opacity:.4; } }

  /* ---------- NAV ---------- */
  .navbar{
    position:sticky; top:0; z-index:40;
    background:color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .navbar-inner{ display:flex; align-items:center; gap:22px; padding:12px 24px; max-width:920px; margin:0 auto; }
  .navbar-brand{
    font-family:'Big Shoulders Display'; font-weight:800; font-size:1rem; letter-spacing:.03em;
    text-transform:uppercase; color:var(--sky); white-space:nowrap; text-decoration:none;
    flex-shrink:0;
  }
  .navlinks{ display:flex; gap:18px; overflow-x:auto; scrollbar-width:none; }
  .navlinks::-webkit-scrollbar{ display:none; }
  .navlinks a{
    text-decoration:none; white-space:nowrap; font-family:'IBM Plex Mono'; font-size:12px;
    letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); padding:6px 2px;
    border-bottom:2px solid transparent;
  }
  .navlinks a:hover{ color:var(--sky); border-color:var(--terracotta); }

  .datestrip{
    display:grid; grid-template-columns:repeat(21, 1fr); gap:6px; padding:14px 16px 16px; max-width:920px; margin:0 auto;
  }
  .datestrip a{
    width:100%; aspect-ratio:1/1; min-width:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line-strong);
    font-family:'IBM Plex Mono'; font-size:clamp(9px, 2.6vw, 13px); font-weight:600;
    text-decoration:none; color:var(--ink-soft);
    transition:background .15s, color .15s, border-color .15s;
  }
  .datestrip a:hover, .datestrip a.active{ background:var(--sky); color:var(--bg); border-color:var(--sky); }

  /* ---------- SECTION SCAFFOLDING ---------- */
  section{ padding:64px 0; scroll-margin-top:120px; }
  section + section{ border-top:1px solid var(--line); }
  .section-head{ margin-bottom:34px; display:flex; flex-direction:column; }
  .eyebrow{
    font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--eyebrow-navy); font-weight:700; margin-top:10px; padding-bottom:14px;
    border-bottom:1px solid var(--sky-script); order:2; display:block;
  }
  .section-title{
    font-family:'Caveat', 'Segoe Script', cursive; order:1;
    font-size:clamp(2.4rem, 6vw, 3.8rem); font-weight:700; text-transform:none; color:var(--sky-script); line-height:1;
  }
  .section-dek{ margin-top:12px; max-width:60ch; color:var(--ink); font-style:italic; font-size:.95rem; order:3; }

  .person-head{ display:flex; align-items:flex-end; gap:22px; margin-bottom:34px; }
  .person-head .section-head{ flex:1 1 auto; margin-bottom:0; }
  .person-photo{
    width:110px; height:130px; object-fit:cover; border-radius:8px; box-shadow:var(--shadow); flex-shrink:0;
  }
  @media (max-width:560px){
    .person-head{ align-items:flex-start; }
    .person-photo{ width:76px; height:90px; }
  }

  /* ---------- INTRO / SALUTACIO ---------- */
  .quote-card{
    background:var(--bg-raised); border:1px solid var(--line); border-radius:4px;
    padding:32px 34px; box-shadow:var(--shadow);
  }
  .quote-card + .quote-card{ margin-top:20px; }
  blockquote{ margin:0; font-style:italic; font-size:1.18rem; color:var(--ink); line-height:1.55; }
  blockquote p + p{ margin-top:14px; }
  .quote-attr{
    margin-top:16px; font-family:'IBM Plex Mono'; font-size:12.5px; letter-spacing:.04em;
    text-transform:uppercase; color:var(--sky); font-style:normal; font-weight:700;
  }
  .quote-attr .role{ display:block; color:var(--ink-faint); text-transform:none; margin-top:2px; font-size:12px; letter-spacing:0; }

  .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
  @media (max-width:720px){ .two-col{ grid-template-columns:1fr; } }

  /* ---------- FULL-TEXT ARTICLES (salutació / pregó) ---------- */
  .article{ max-width:72ch; }
  .article + .article{ margin-top:56px; padding-top:56px; border-top:1px solid var(--line); }
  .article-head{ margin-bottom:22px; }
  .article-kicker{ font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); font-weight:700; }
  .article-title{ font-family:'Caveat','Segoe Script',cursive; font-size:clamp(2.2rem,5vw,3rem); font-weight:700; text-transform:none; color:var(--sky-script); margin-top:6px; line-height:1; }
  .article-meta{ font-family:'Alegreya',serif; font-weight:700; font-size:1.05rem; text-transform:uppercase; letter-spacing:.02em; color:var(--terracotta); margin-top:8px; line-height:1.4; }
  .article p{ margin:0 0 18px; color:var(--ink); }
  .article p:last-of-type{ margin-bottom:0; }
  .article-dialogue{ font-style:italic; }
  .article-poem{
    margin:28px 0; padding:22px 28px; border-left:3px solid var(--sky);
    background:var(--bg-tint);
  }
  .article-poem p{ font-style:italic; margin:0; color:var(--ink); white-space:pre-line; }
  .article-signoff{ margin-top:24px; font-family:'IBM Plex Mono'; font-weight:700; color:var(--sky); text-transform:uppercase; font-size:.95rem; }
  .article-signoff .role{ display:block; font-family:'Alegreya',serif; font-weight:400; font-style:normal; text-transform:none; color:var(--ink); font-size:1rem; margin-top:4px; }

  /* ---------- PROSE (bases de concursos, normatives) ---------- */
  .prose{ color:var(--ink); font-size:.96rem; }
  .prose p{ margin:0 0 12px; }
  .prose p:last-child{ margin-bottom:0; }
  .prose ul, .prose ol{ margin:0 0 12px; padding-left:22px; }
  .prose ul:last-child, .prose ol:last-child{ margin-bottom:0; }
  .prose li{ margin-bottom:6px; }
  .prose strong{ color:var(--ink); }
  .prose h4{ font-family:'IBM Plex Mono'; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--terracotta); font-weight:700; margin:18px 0 8px; }
  .prose h4:first-child{ margin-top:0; }
  details.prose-more{ margin-top:14px; }
  details.prose-more > summary{
    cursor:pointer; font-family:'IBM Plex Mono'; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--sky); font-weight:700; list-style:none;
  }
  details.prose-more > summary::-webkit-details-marker{ display:none; }
  details.prose-more > summary::before{ content:"+ "; }
  details.prose-more[open] > summary::before{ content:"– "; }
  details.prose-more .prose{ margin-top:14px; }

  /* ---------- POEM ---------- */
  .poem-card{
    background:linear-gradient(180deg, color-mix(in srgb, var(--sky) 6%, var(--bg-raised)), var(--bg-raised));
    border:1px solid var(--line); border-radius:4px; padding:36px 40px; box-shadow:var(--shadow);
  }
  .poem-title{ font-size:1.5rem; font-weight:700; color:var(--terracotta); text-transform:uppercase; margin-bottom:4px; }
  .poem-kicker{ font-family:'IBM Plex Mono'; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); font-weight:700; }
  .poem-body{ margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:0 40px; }
  @media (max-width:640px){ .poem-body{ grid-template-columns:1fr; } }
  .poem-body p{ font-style:italic; margin:0 0 20px; color:var(--ink); }
  .poem-author{ margin-top:6px; font-family:'Alegreya',serif; font-size:1rem; color:var(--ink); font-weight:700; font-style:normal; }

  /* ---------- DAY TIMELINE ---------- */
  .timeline{ position:relative; padding-left:34px; }
  .timeline::before{
    content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px;
    background:var(--sky);
    opacity:.4;
  }
  .day{ position:relative; margin-bottom:52px; scroll-margin-top:148px; }
  .day:last-child{ margin-bottom:0; }
  .day::before{
    content:""; position:absolute; left:-34px; top:4px; width:20px; height:20px; border-radius:50%;
    background:var(--bg); border:3px solid var(--sky);
  }
  .day.is-peak::before{ border-color:var(--terracotta); background:var(--terracotta); }
  .day:target::after{
    content:""; position:absolute; left:-25px; top:-26px; bottom:-26px; width:2px; background:var(--sky);
  }
  .day:target::before{
    top:12px; background:var(--sky); border-color:var(--sky);
    box-shadow:0 0 0 5px color-mix(in srgb, var(--sky) 25%, transparent);
  }
  .day:target .day-head{
    background:var(--sky); border-radius:10px; padding:8px 14px; margin:-8px -14px 8px -14px;
  }
  .day:target .day-head *{ color:var(--bg); }
  .day-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
  .day-name{ font-family:'Caveat', 'Segoe Script', cursive; font-size:2.6rem; font-weight:700; text-transform:none; color:var(--sky-script); line-height:1; }
  .day-date{ font-family:'IBM Plex Mono'; font-size:13px; color:var(--terracotta); font-weight:700; }
  .day-note{ font-family:'IBM Plex Mono'; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }

  .event{ display:grid; grid-template-columns:96px 1fr; gap:18px; padding:16px 0; border-top:1px solid var(--line); }
  .day > .event:first-of-type{ border-top:none; padding-top:0; }
  .event-time{ font-family:'IBM Plex Mono'; font-size:13px; color:var(--terracotta); font-weight:700; padding-top:3px; font-variant-numeric:tabular-nums; }
  .event-title{ font-size:1.12rem; font-weight:700; color:var(--ink); }
  .event-loc{ font-size:.92rem; color:var(--ink); margin-top:2px; font-weight:600; font-style:italic; }
  .event-desc{ margin-top:6px; color:var(--ink); font-size:.98rem; }
  .event-desc + .event-desc{ margin-top:8px; }
  .subevents{ margin-top:10px; display:grid; gap:5px; }
  .subevents div{ display:grid; grid-template-columns:76px 1fr; gap:12px; font-size:.92rem; color:var(--ink); }
  .subevents .t{ font-family:'IBM Plex Mono'; color:var(--terracotta); font-weight:600; font-variant-numeric:tabular-nums; }
  .tags{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
  .tag{
    font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.03em; padding:3px 9px; border-radius:20px;
    border:1px solid var(--line-strong); color:var(--ink-soft);
  }
  .tag.free{ color:var(--sky); border-color:color-mix(in srgb, var(--sky) 50%, var(--line-strong)); }
  .tag.price{ color:var(--terracotta); border-color:color-mix(in srgb, var(--terracotta) 50%, var(--line-strong)); }
  .tag.book{ color:var(--sky); border-color:color-mix(in srgb, var(--sky) 50%, var(--line-strong)); }

  @media (max-width:560px){
    .event{ grid-template-columns:1fr; gap:4px; }
    .event-time{ order:-1; }
  }

  /* ---------- CARDS GRID (esport / concursos) ---------- */
  .card-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
  @media (max-width:720px){ .card-grid{ grid-template-columns:1fr; } }
  .card{
    background:var(--bg-tint); border:1px solid var(--line); border-radius:4px; padding:24px 26px;
  }
  .card h3{ font-size:1.25rem; font-weight:700; text-transform:uppercase; color:var(--ink); }
  .card .meta{ font-family:'IBM Plex Mono'; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--terracotta); font-weight:700; margin-top:2px; }
  .card > ul{ margin:14px 0 0; padding-left:0; list-style:none; display:grid; gap:8px; }
  .card > ul > li{ font-size:.94rem; color:var(--ink-soft); display:grid; grid-template-columns:auto 1fr; gap:10px; }
  .card > ul > li b{ color:var(--ink); font-weight:700; }
  .card > ul > li .k{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--ink-faint); white-space:nowrap; }

  /* ---------- EXPO ---------- */
  .expo-hours{ display:flex; gap:40px; flex-wrap:wrap; margin-top:8px; }
  .expo-hours div b{ display:block; color:var(--ink); }

  /* ---------- SAFETY ---------- */
  .safety-card{
    background:var(--fixed-safety-bg); border-radius:16px; padding:36px 36px 30px; position:relative; overflow:hidden; text-align:center;
  }
  .safety-shell{ position:absolute; top:22px; right:26px; width:64px; height:auto; }
  .safety-heart{ display:block; margin:0 auto; width:100%; max-width:260px; height:auto; }
  @media (max-width:480px){ .safety-shell{ width:44px; top:16px; right:16px; } }
  .safety-panel{ margin-top:26px; background:#fdfaf6; border-radius:14px; padding:28px 32px; text-align:left; }
  .safety-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 30px; }
  @media (max-width:640px){ .safety-grid{ grid-template-columns:1fr; } }
  .safety-item{ display:flex; align-items:flex-start; gap:12px; }
  .safety-item img{ width:34px; height:34px; flex-shrink:0; }
  .safety-item p{ margin:0; font-size:.95rem; line-height:1.5; color:var(--fixed-safety-ink); }
  .safety-item b{ font-weight:700; }

  /* ---------- HOMENATGE ---------- */
  .homenatge{
    display:grid; grid-template-columns:1fr 1.4fr; gap:36px; align-items:start;
    background:var(--fixed-navy); border-radius:6px; padding:40px; color:var(--fixed-cream);
  }
  @media (max-width:720px){ .homenatge{ grid-template-columns:1fr; padding:30px 24px; } }
  .homenatge p{ color:var(--fixed-cream); }
  .homenatge b{ color:var(--fixed-cream); font-weight:700; }
  .fideus-mark{ margin:0; }
  .fideus-mark img{
    display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px;
  }
  .fideus-mark figcaption{
    margin-top:14px; text-align:center;
    font-family:'Big Shoulders Display'; font-weight:800; font-size:1.3rem; text-transform:uppercase;
    color:var(--fixed-cream); line-height:1.15;
  }
  .cook-list{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; }
  .cook-list .tag{ color:var(--fixed-cream); border-color:color-mix(in srgb, var(--fixed-cream) 35%, transparent); }

  /* ---------- AGRAIMENTS ---------- */
  .thanks-cols{ columns:3 180px; column-gap:28px; font-size:.9rem; color:var(--ink-soft); }
  @media (max-width:640px){ .thanks-cols{ columns:2 140px; } }
  .thanks-cols div{ break-inside:avoid; padding:3px 0; border-bottom:1px dotted var(--line); }
  .thanks-note{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
  .thanks-note > div{ flex:1 1 320px; min-width:0; }
  .no-siguis-ase{ width:160px; height:auto; flex-shrink:0; }
  .agraiments-banner{ display:block; margin:24px auto 0; width:100%; max-width:780px; height:auto; }
  @media (max-width:480px){ .no-siguis-ase{ width:130px; } }

  /* ---------- FOOTER ---------- */
  footer{ padding:0; text-align:center; background:var(--eyebrow-navy); }
  .footer-image{ display:block; margin:0 auto; width:100%; max-width:420px; height:auto; }

  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
  .reveal.in{ opacity:1; transform:none; }

  ::selection{ background:var(--sky); color:#fff; }