/* LFFO home, Upcoming events & seminars, desktop (25 Oct 2026, live on his word "proceed"; source chats/2026-10-25-c5-scroll-polish/polish/events2.*). See events2.js for the research.
   House rules kept: white ground, pearly black and navy ink, leaf colours with intent, LFFO Grotesk for the
   large titles, no boxed cards, no pills, no shadows or hover lifting, thin framed buttons, corners 5 px. */
@media (min-width: 1100px) {
  html body.home #events.ev2-on .head-row,
  html body.home #events.ev2-on .up2,
  html body.home #events.ev2-on .hx-past { display: none !important; }

  html body.home #events .ev2 { --ev2-ink: #0f2038; --ev2-soft: #55627a; --ev2-mute: #7b8597; --ev2-hair: rgba(15, 32, 56, .14); width: 100%; }

  /* the head */
  html body.home #events .ev2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin: 0 0 64px; }
  html body.home #events .ev2-head h2 { font-family: "LFFO Grotesk", "LFFO Sans", sans-serif !important; font-style: normal !important; font-weight: 400 !important; font-size: clamp(48px, 4.7vw, 80px) !important; line-height: 1 !important; letter-spacing: -.03em !important; color: var(--ev2-ink) !important; -webkit-text-fill-color: var(--ev2-ink) !important; margin: 0 !important; padding-bottom: .22em !important; max-width: 13em; text-wrap: balance; }
  html body.home #events .ev2-head .link-cta { flex: none; margin: 0 0 calc(.22em + 14px) !important; }

  /* the featured event */
  html body.home #events .ev2-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
  html body.home #events .ev2-ftext { padding-top: 4px; }
  html body.home #events .ev2-when { margin: 0 0 28px !important; line-height: .9 !important; }
  html body.home #events .ev2-when time { display: flex; align-items: baseline; gap: .22em; font-family: "LFFO Grotesk", "LFFO Sans", sans-serif; font-weight: 400; font-size: clamp(64px, 6vw, 104px); letter-spacing: -.04em; color: var(--ev2-ink); }
  html body.home #events .ev2-when .up2-d { font: inherit !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; }
  html body.home #events .ev2-when .up2-m { font: inherit !important; color: var(--ev2-mute) !important; -webkit-text-fill-color: var(--ev2-mute) !important; text-transform: none !important; letter-spacing: inherit !important; }
  html body.home #events .ev2 .up2-k { display: block !important; margin: 0 0 12px !important; font-family: "LFFO Grotesk", "LFFO Sans", sans-serif !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--ev2-soft) !important; -webkit-text-fill-color: var(--ev2-soft) !important; }
  html body.home #events .ev2 h3 { font-family: "LFFO Grotesk", "LFFO Sans", sans-serif !important; font-style: normal !important; font-weight: 400 !important; letter-spacing: -.02em !important; color: var(--ev2-ink) !important; -webkit-text-fill-color: var(--ev2-ink) !important; margin: 0 0 14px !important; text-wrap: balance; }
  html body.home #events .ev2-feature h3 { font-size: clamp(34px, 3vw, 44px) !important; line-height: 1.06 !important; }
  html body.home #events .ev2 .up2-meta { display: flex; align-items: center; gap: 8px; margin: 0 0 18px !important; font-size: 15px !important; color: var(--ev2-mute) !important; }
  html body.home #events .ev2 .up2-meta svg { width: 16px; height: 16px; flex: none; }
  html body.home #events .ev2 .up2-desc { margin: 0 0 28px !important; max-width: 34em; font-size: 17px !important; line-height: 1.6 !important; color: var(--ev2-soft) !important; -webkit-text-fill-color: var(--ev2-soft) !important; display: block !important; -webkit-line-clamp: unset !important; }

  /* the Art Talk: one ruled block, its time in the leaf green */
  html body.home #events .ev2 .lffo-talk { display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 2px; align-items: baseline; margin: 0 0 32px !important; padding: 18px 0 !important; border: 0 !important; border-top: 1px solid var(--ev2-hair) !important; border-bottom: 1px solid var(--ev2-hair) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
  html body.home #events .ev2 .lffo-talk .k { flex: 0 0 100%; margin: 0 0 6px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #4f7d33 !important; -webkit-text-fill-color: #4f7d33 !important; }
  html body.home #events .ev2 .lffo-talk .n { margin: 0 !important; font-family: "LFFO Grotesk", "LFFO Sans", sans-serif !important; font-size: 22px !important; font-weight: 400 !important; letter-spacing: -.01em !important; color: var(--ev2-ink) !important; -webkit-text-fill-color: var(--ev2-ink) !important; }
  html body.home #events .ev2 .lffo-talk .d { white-space: nowrap; margin: 0 !important; font-size: 15px !important; color: var(--ev2-mute) !important; -webkit-text-fill-color: var(--ev2-mute) !important; }

  /* actions: the first is a thin framed button, the others quiet links with an arrow */
  html body.home #events .ev2 .up2-acts { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center !important; justify-content: flex-start !important; gap: 14px 28px; margin: 0 !important; padding: 0 !important; border: 0 !important; text-align: left !important; }
  html body.home #events .ev2 .up2-acts > a { order: 1 !important; flex: 0 0 auto !important; width: auto !important; margin-left: 0 !important; }
  html body.home #events .ev2 .up2-acts > a.up2-signin, html body.home #events .ev2 .up2-acts > a.up2-signedin { order: 0 !important; }
  /* signed out: Sign in + Join; signed in (body.lffo-member): the programme only - the live rules decide, as before */
  html body.home #events .ev2 .up2-acts > a:not(.up2-signedin), html body.lffo-member.home #events .ev2 .up2-acts > a.up2-signedin { display: inline-flex; }
  html body.home #events .ev2 .up2-acts > a { align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important; font-size: 15px !important; font-weight: 500 !important; color: var(--ev2-ink) !important; -webkit-text-fill-color: var(--ev2-ink) !important; text-decoration: none !important; border: 0 !important; background: none !important; box-shadow: none !important; }
  html body.home #events .ev2 .up2-acts > a:first-child,
  html body.home #events .ev2 .up2-acts > a.up2-signin { height: 48px; padding: 0 22px !important; background: #fff !important; border: 1px solid rgba(29, 31, 36, .22) !important; border-radius: 5px !important; transition: border-color .2s ease; }
  html body.home #events .ev2 .up2-acts > a svg { width: 16px; height: 16px; flex: none; transition: transform .25s cubic-bezier(.23, 1, .32, 1); }
  html body.home #events .ev2 .up2-acts > a::after, html body.home #events .ev2 .up2-acts > a::before { display: none !important; }
  html body.home #events .ev2 .up2-acts > a.up2-join { font-weight: 400 !important; color: var(--ev2-soft) !important; -webkit-text-fill-color: var(--ev2-soft) !important; }

  /* pictures: open, corners 5 px, no frame and no shadow */
  html body.home #events .ev2-pic { position: relative; overflow: hidden; border-radius: 5px; background: #0f2038 var(--plate) 50% 50% / cover no-repeat; isolation: isolate; }
  html body.home #events .ev2-pic-art { aspect-ratio: 16 / 10; }
  html body.home #events .ev2-pair .ev2-pic { aspect-ratio: 16 / 9; margin: 0 0 22px; }

  /* the members' picture: their own textured ground with what membership includes */
  html body.home #events .ev2-pic-mem { background: #0f2038; color: #fff; }
  html body.home #events .ev2-pic-mem > svg, html body.home #events .ev2-pic-mem > .mf-fibre, html body.home #events .ev2-pic-mem > .mf-sheen, html body.home #events .ev2-pic-mem > .mf-veil { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
  html body.home #events .ev2-pic-mem > .mf-sheen { display: none !important; }
  html body.home #events .ev2-pic-mem .up2-gate { position: absolute !important; top: 22px; right: 24px; left: auto !important; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 0 !important; border: 0 !important; background: none !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #e6c47a !important; -webkit-text-fill-color: #e6c47a !important; }
  html body.home #events .ev2-pic-mem .up2-gate svg { width: 14px; height: 14px; }
  html body.home #events .ev2-pic-mem .mw-inc { position: absolute !important; left: 32px; right: 32px; bottom: 28px; top: auto !important; z-index: 2; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
  html body.home #events .ev2-pic-mem .mw-inc-k { display: block; margin: 0 0 12px; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, .72) !important; -webkit-text-fill-color: rgba(255, 255, 255, .72) !important; }
  html body.home #events .ev2-pic-mem .mw-inc ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
  html body.home #events .ev2-pic-mem .mw-inc li { margin: 0 !important; padding: 11px 0 !important; border-top: 1px solid rgba(255, 255, 255, .16) !important; font-family: "LFFO Grotesk", "LFFO Sans", sans-serif !important; font-size: 19px !important; line-height: 1.3 !important; letter-spacing: -.005em !important; color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; }
  html body.home #events .ev2-pic-mem .mw-inc li::before, html body.home #events .ev2-pic-mem .mw-inc li::marker { content: none !important; display: none !important; }

  /* the two that follow */
  html body.home #events .ev2-pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; margin: 112px 0 0; }
  html body.home #events .ev2-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 12px !important; }
  html body.home #events .ev2-line .up2-k, html body.home #events .ev2-line .up2-meta { margin: 0 !important; }
  html body.home #events .ev2-pair h3 { font-size: clamp(28px, 2.3vw, 34px) !important; line-height: 1.1 !important; }
  html body.home #events .ev2-pair .up2-desc { font-size: 16px !important; margin-bottom: 24px !important; }

  /* looking back: a ruled list */
  html body.home #events .ev2-back { margin: 112px 0 0; }
  html body.home #events .ev2-back-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 0 18px; border-bottom: 1px solid var(--ev2-hair); }
  html body.home #events .ev2-back-head .hx-label { margin: 0 !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--ev2-soft) !important; -webkit-text-fill-color: var(--ev2-soft) !important; }
  /* the row sits on the featured event's grid: the title starts where the Art Week picture starts */
  html body.home #events .ev2-row { display: grid !important; grid-template-columns: 168px minmax(0, calc((100% - 64px) * 5 / 12 - 168px)) minmax(0, 1fr) 28px; column-gap: 32px; align-items: center; padding: 20px 0 !important; margin: 0 !important; border-bottom: 1px solid var(--ev2-hair); text-decoration: none !important; color: var(--ev2-ink) !important; background: none !important; box-shadow: none !important; transform: none !important; width: auto !important; }
  html body.home #events .ev2-row img { width: 168px !important; height: 104px !important; object-fit: cover; border-radius: 5px; display: block; margin: 0 !important; box-shadow: none !important; filter: none !important; transition: transform .6s cubic-bezier(.23, 1, .32, 1); }
  html body.home #events .ev2-row .hx-pt { display: contents !important; }
  html body.home #events .ev2-row .hx-pm { font-size: 14px !important; letter-spacing: .02em !important; color: var(--ev2-mute) !important; -webkit-text-fill-color: var(--ev2-mute) !important; margin: 0 !important; text-transform: none !important; }
  html body.home #events .ev2-row .hx-pn { font-family: "LFFO Grotesk", "LFFO Sans", sans-serif !important; font-style: normal !important; font-size: 22px !important; line-height: 1.25 !important; letter-spacing: -.01em !important; color: var(--ev2-ink) !important; -webkit-text-fill-color: var(--ev2-ink) !important; margin: 0 !important; }
  html body.home #events .ev2-row-arrow svg { width: 20px; height: 20px; fill: none; stroke: var(--ev2-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  html body.home #events .ev2-row::before, html body.home #events .ev2-row::after { display: none !important; }

  /* entrances: a short rise, never left hidden (events2.js) */
  html body.home #events .ev2-wait { opacity: 0; transform: translateY(16px); }
  html body.home #events .ev2-head, html body.home #events .ev2-ftext, html body.home #events .ev2-pic-art, html body.home #events .ev2-item, html body.home #events .ev2-back { transition: opacity .7s cubic-bezier(.22, 1, .36, 1) var(--ev2-d, 0ms), transform .9s cubic-bezier(.22, 1, .36, 1) var(--ev2-d, 0ms); }
}
/* Interaction: one quiet, precise motion per kind of control. Website rule: no lifting, no shadows.
   framed button  - stays white; the frame turns ink and the arrow nudges right (his word: no fill)
   text link      - the words darken to ink, the arrow nudges right; the Art Week arrow turns from up-right to right
   past-event row - the cover eases in its frame, the row's rule darkens to ink, the arrow nudges right
   arrows never leave and come back (his word)
   every control  - presses in to 98 % (buttons), gold focus ring from the keyboard */
@media (min-width: 1100px) {
  html body.home #events .ev2 .up2-acts > a:first-child, html body.home #events .ev2 .up2-acts > a.up2-signin { background: #fff !important; transition: border-color .25s ease, transform .16s ease !important; }
  html body.home #events .ev2 .up2-acts > a:first-child:active, html body.home #events .ev2 .up2-acts > a.up2-signin:active { transform: scale(.98); }
  html body.home #events .ev2 .up2-acts > a, html body.home #events .ev2-head .link-cta, html body.home #events .ev2-back-head .link-cta { transition: color .25s ease, -webkit-text-fill-color .25s ease; }
  /* arrows only nudge in their direction and stay visible (his word) */
  html body.home #events .ev2 .up2-acts > a > svg:last-child, html body.home #events .ev2-head .link-cta i, html body.home #events .ev2-back-head .link-cta i, html body.home #events .ev2-row-arrow svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
  /* the Art Week arrow alone: on hover it turns a quarter of the way clockwise, from up-right to right, with a slight spring */
  html body.home #events .ev2 .up2-acts > a[target="_blank"] > svg:last-child { transform-origin: 50% 50%; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
  html body.home #events .ev2-row { transition: border-color .35s ease; }
  html body.home #events .ev2 a:focus-visible { outline: 2px solid #c9a34e !important; outline-offset: 4px; border-radius: 5px; }
  html body.home #events .ev2 a:focus:not(:focus-visible) { outline: none; }
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  html body.home #events .ev2 .up2-acts > a:first-child:hover, html body.home #events .ev2 .up2-acts > a.up2-signin:hover { border-color: #0f2038 !important; }
  html body.home #events .ev2 .up2-acts > a:hover > svg:last-child, html body.home #events .ev2-head .link-cta:hover i, html body.home #events .ev2-back-head .link-cta:hover i { transform: translateX(4px); }
  html body.home #events .ev2 .up2-acts > a[target="_blank"]:hover > svg:last-child { transform: rotate(45deg); }
  html body.home #events .ev2 .up2-acts > a.up2-join:hover { color: var(--ev2-ink) !important; -webkit-text-fill-color: var(--ev2-ink) !important; }
  html body.home #events .ev2-head .link-cta i, html body.home #events .ev2-back-head .link-cta i { display: inline-block; }
  html body.home #events .ev2-row:hover { border-bottom-color: #0f2038; }
  html body.home #events .ev2-row:hover img { transform: scale(1.04); }
  html body.home #events .ev2-row:hover .ev2-row-arrow svg { transform: translateX(4px); }
}
/* See all events: a thin chevron (only the arrow's head), his pick 4 on the arrow board, 25 Oct. Drawn from the board's own
   path (m9 6 6 6-6 6, stroke 1.8 on 24) as a mask in the link's colour, so it turns gold with the words; slides 3 px on hover.
   The gold underline is untouched. */
@media (min-width: 1100px) {
  html body.home #events .ev2-head .link-cta i { display: inline-block !important; width: 14px; height: 14px; font-size: 0 !important; line-height: 0 !important; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 14px 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 14px 14px no-repeat; transform: translateX(0); transition: transform .3s cubic-bezier(.22, 1, .36, 1) !important; }
  html body.home #events .ev2-head .link-cta i::before, html body.home #events .ev2-head .link-cta i::after { content: none !important; display: none !important; }
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  html body.home #events .ev2-head .link-cta:hover i { transform: translateX(3px) !important; }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  html body.home #events .ev2-head .link-cta i { transition: none !important; }
  html body.home #events .ev2-head .link-cta:hover i { transform: none !important; }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  html body.home #events .ev2-wait { opacity: 1; transform: none; }
  html body.home #events .ev2 *, html body.home #events .ev2-head, html body.home #events .ev2-ftext, html body.home #events .ev2-item, html body.home #events .ev2-back { transition: none !important; animation: none !important; }
  html body.home #events .ev2 .up2-acts > a:active { transform: none !important; }
  html body.home #events .ev2 .up2-acts > a:first-child, html body.home #events .ev2 .up2-acts > a.up2-signin { transition: none !important; }
  html body.home #events .ev2-row:hover img { transform: none !important; }
}

/* The Art Week cover: his pick C3 on the cover board (25 Oct), without its thin white rectangle (his word) - art-week-law-8.svg, from the live art-week-law-4.svg: the Luxembourg Art
   Week mark 20 % larger and centred on the height, no dark band, an outline echo of the "2026" in white set off the green like a print
   registration, a fine white hairline frame inside the edge, and the sky deepening gently from top to bottom. Colours, mark and "2026"
   are Art Week's own. */
@media (min-width: 1100px) {
  html body.home #events .ev2-pic-art { background-image: url("/wp-content/uploads/lffo/site/images/up/art-week-law-8.svg") !important; }
}

/* The Art Week box (his word: "not the image but the box itself, everything looks so pale; complex, shadow etc, not only shadows,
   be more creative"; then "No frame"): the cover casts a layered shadow over a soft pool of wall light; the gallery frame and mount
   that were tried first are set aside (polish/_rejected-seeall/events2.gallery-frame.css). Earlier note, kept for the record:
   a slim dark frame with a fine bevel highlight, a layered cast shadow (a tight contact shadow at the foot and a long soft drop,
   as a framed work casts on a wall) and a soft pool of light on the wall around it. His word overrides the website's no-shadow
   rule for this box only. The cover itself is unchanged (art-week-law-7, his pick C3). */
@media (min-width: 1100px) {
  html body.home #events .ev2-feature { position: relative; }
  /* the wall light: a soft pool around the frame, brightest just above it */
  html body.home #events .ev2-feature::before { content: ""; position: absolute; z-index: 0; pointer-events: none; top: -64px; bottom: -72px; left: calc((100% - 64px) * 5 / 12 + 64px - 72px); right: -72px;
    background: radial-gradient(70% 62% at 50% 34%, rgba(255, 255, 255, .95) 0%, rgba(232, 243, 255, .6) 42%, rgba(232, 243, 255, 0) 74%); }
  html body.home #events .ev2-feature > * { position: relative; z-index: 1; }
  /* no frame (his word). The box belongs to the section through the cover's own colours, the way a lit poster spills colour
     onto the wall: a soft sky-blue spill under the sky half, a soft green spill under the "2026" half, and only a light navy
     grounding where the box meets the wall (his word: "merge adapt refine better with section"). */
  html body.home #events .ev2-pic-art { border-radius: 5px; overflow: hidden;
    box-shadow:
      0 1px 2px rgba(15, 32, 56, .10),
      0 4px 10px -4px rgba(15, 32, 56, .12),
      -56px 36px 64px -34px rgba(120, 178, 236, .44),
      110px 36px 70px -34px rgba(105, 195, 35, .34),
      0 52px 80px -46px rgba(15, 32, 56, .16) !important; }
}