/* ICS flip v2 (whole card). Structure: .ics-flip (wrapper: grid cell, perspective, hover underlay, torn look)
 *   > .ics-flip__inner (rotates rotateY 180deg, preserve-3d)
 *     > .ics-flip__front (photo .ics-flip__media + name block)
 *     > .ics-flip__back  (pre-rotated; .ics-flip__panel cream bio panel in the media area + name/role block). */
:root { --ics-flip-dur: 700ms; }
.ics-flip { position: relative; perspective: 1200px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ics-flip:focus { outline: none; }
.ics-flip:focus-visible { outline: 3px solid #ed1d85; outline-offset: 4px; }
.ics-flip > .ics-flip__inner { display: grid; grid-template-areas: 'f'; height: 100%; transform-style: preserve-3d; transition: transform var(--ics-flip-dur, 700ms) cubic-bezier(.22, .61, .36, 1); background: transparent !important; mask: none !important; -webkit-mask: none !important; }
.ics-flip.is-flipped > .ics-flip__inner { transform: rotateY(180deg); }
.ics-flip__front, .ics-flip__back { grid-area: f; min-width: 0; box-sizing: border-box; padding: 16px 16px 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ics-flip__front { background: transparent; }
.ics-flip__back { transform: rotateY(180deg); background: transparent; }
.ics-flip__media { position: relative; width: 100%; aspect-ratio: 4 / 5 !important; height: auto !important; border-radius: 8px; overflow: hidden; margin: 0; padding: 0; background: var(--yellow-200, #fff3a0); -webkit-mask: none !important; mask: none !important; }
.ics-flip__media > .ics-torn-photo, .ics-flip__media > .ics-flip__photo { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; aspect-ratio: auto !important; border-radius: 0 !important; }
.ics-flip__media img, .ics-flip__media picture, .ics-flip__media figure, .ics-flip__media .brxe-image { display: block; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; object-fit: cover; object-position: top center; }
.ics-flip__media .tm-photo img { object-position: top center; }
.ics-flip__panel { position: relative; width: 100%; aspect-ratio: 4 / 5 !important; height: auto !important; box-sizing: border-box; margin: 0; padding: 22px 22px 36px; border-radius: 8px; background: #FFFBE8; color: var(--text, #111); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d9cfa6 transparent; font-family: var(--font-body, 'IBM Plex Sans', system-ui, sans-serif); font-size: 16px; line-height: 1.6; text-align: left; -webkit-mask: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%); mask: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%); }
.ics-flip__text { font-family: inherit; font-size: inherit; line-height: inherit; }
.ics-flip__text > :first-child { margin-top: 0; }
.ics-flip__text p { margin: 0 0 0.8em; }
.ics-flip__panel::-webkit-scrollbar { width: 6px; }
.ics-flip__panel::-webkit-scrollbar-thumb { background: #d9cfa6; border-radius: 3px; }
.ics-flip .nw-cb { box-sizing: border-box; padding: 14px 16px 18px; background: var(--bg, #fff); }
.ics-flip .nw-tit { margin: 0; font-family: 'EB Garamond', Georgia, serif; font-size: 22px; font-weight: 500; line-height: 1.2; }
html body .ics-flip .ics-flip .nw-chip, html body .ics-flip .nw-cb .nw-chip.nw-chip, html body .ics-flip .nw-cb .tm-role.tm-role { display: block !important; width: auto !important; margin: 4px 0 0 !important; padding: 0 !important; background: none !important; border-radius: 0 !important; color: var(--text-muted, #6b6b6b) !important; font-family: 'IBM Plex Sans', system-ui, sans-serif !important; font-size: 14px !important; line-height: 1.4 !important; letter-spacing: normal !important; white-space: normal !important; }
@media (prefers-reduced-motion: reduce) {
  .ics-flip > .ics-flip__inner { transform: none !important; transition: none; }
  .ics-flip__front { transition: opacity 300ms ease; }
  .ics-flip__back { transform: none; opacity: 0; pointer-events: none; transition: opacity 300ms ease; }
  .ics-flip.is-flipped .ics-flip__front { opacity: 0; }
  .ics-flip.is-flipped .ics-flip__back { opacity: 1; pointer-events: auto; }
}
/* Grid: 4 / 3 / 2 / 1 columns (>=1200 / 992-1199 / 600-991 / <600). Team grids: About #ab-team-grid, /tieu-su/ #brxe-tbgrid. */
html body #ab-team-grid, html body #brxe-tbgrid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: var(--sp-m, 16px) !important; justify-content: stretch !important; align-items: stretch !important; width: 100% !important; max-width: var(--container-wide, 1312px) !important; margin-left: auto !important; margin-right: auto !important; overflow-x: clip; }
html body #ab-team-grid > .ics-flip, html body #brxe-tbgrid > .ics-flip { width: auto !important; max-width: none !important; min-width: 0 !important; }
html body .ics-flip .ics-flip__panel { font-size: 16px; line-height: 1.6; padding: 20px 20px 34px; }
@media (max-width: 1199px) { html body #ab-team-grid, html body #brxe-tbgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 991px) {
  html body #ab-team-grid, html body #brxe-tbgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body .ics-flip .ics-flip__panel { font-size: 17px; }
  html body .ics-flip .nw-tit { font-size: 21px; }
}
@media (max-width: 599px) {
  html body #ab-team-grid, html body #brxe-tbgrid { grid-template-columns: minmax(0, 1fr) !important; }
  html body .ics-flip .ics-flip__panel { font-size: 18px; }
  html body .ics-flip .nw-tit { font-size: 22px; }
}
/* v2.1: the card height follows its faces (the site sets a fixed aspect/height on the grid cell). */
html body #ab-team-grid > .ics-flip, html body #brxe-tbgrid > .ics-flip { height: auto !important; aspect-ratio: auto !important; min-height: 0 !important; }
.ics-flip > .ics-flip__inner { height: auto !important; }
/* v2.2: rows size to the cards (not 1fr of a fixed box); inner has no site aspect ratio. */
html body #ab-team-grid, html body #brxe-tbgrid { grid-auto-rows: auto !important; grid-template-rows: none !important; }
html body .ics-flip > .ics-flip__inner { aspect-ratio: auto !important; }
/* v2.3: both faces fill the card height; the name block is pinned to the bottom so the torn white block lines up on front and back. */
html body .ics-flip .ics-flip__front, html body .ics-flip .ics-flip__back { height: 100% !important; display: flex !important; flex-direction: column !important; }
html body .ics-flip .ics-flip__front > .nw-cb, html body .ics-flip .ics-flip__back > .ics-flip__nb { margin-top: auto !important; }
/* v2.4: identical name block on both faces (same padding, heading size/line box, chip). */
html body .ics-flip .nw-cb { padding: 16px !important; box-sizing: border-box !important; }
html body .ics-flip .nw-cb .nw-tit { margin: 0 !important; padding: 0 !important; font-size: 22px !important; line-height: 1.25 !important; font-weight: 500 !important; }
html body .ics-flip .nw-cb .nw-chip.nw-chip, html body .ics-flip .nw-cb .tm-role.tm-role { margin-top: 6px !important; }
@media (max-width: 991px) { html body .ics-flip .nw-cb .nw-tit { font-size: 21px !important; } }
@media (max-width: 599px) { html body .ics-flip .nw-cb .nw-tit { font-size: 22px !important; } }
/* v2.5: name block = one flex column on both faces, 12 px gap, no extra chip margin. */
html body .ics-flip .nw-cb { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 12px !important; }
html body .ics-flip .nw-cb .nw-chip.nw-chip, html body .ics-flip .nw-cb .tm-role.tm-role { margin-top: 0 !important; }
/* v4: the torn edge turns WITH the card. Wrapper: no paper, no page-coloured cut (its ::after stays for the hover underlay). Each face carries its own deckle: paper ::before + outside cut ::after (exclude mask). Variant by the wrapper's nth-child, same masks as ics-torn-card. */
html body .ics-flip.ics-torn-card { --torn-bg: transparent; }
html body .ics-flip.ics-torn-card::before { display: none; }
.ics-flip__front, .ics-flip__back { position: relative; isolation: isolate; }
.ics-flip__front::before, .ics-flip__back::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--yellow-0, #fffbe8); pointer-events: none; -webkit-mask: url(/wp-content/uploads/ics-torn/card-torn-mask-a-r2.svg) center / 100% 100% no-repeat; mask: url(/wp-content/uploads/ics-torn/card-torn-mask-a-r2.svg) center / 100% 100% no-repeat; }
.ics-flip__front::after, .ics-flip__back::after { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--torn-bg, var(--neutral-50, #f5f5f5)); pointer-events: none; -webkit-mask: linear-gradient(#000 0 0), url(/wp-content/uploads/ics-torn/card-torn-mask-a-r2.svg) center / 100% 100% no-repeat; mask: linear-gradient(#000 0 0), url(/wp-content/uploads/ics-torn/card-torn-mask-a-r2.svg) center / 100% 100% no-repeat; -webkit-mask-composite: xor; mask-composite: exclude; }
.ics-flip:nth-child(3n+2) > .ics-flip__inner > .ics-flip__front::before, .ics-flip:nth-child(3n+2) > .ics-flip__inner > .ics-flip__back::before { -webkit-mask: url(/wp-content/uploads/ics-torn/card-torn-mask-b-r2.svg) center / 100% 100% no-repeat; mask: url(/wp-content/uploads/ics-torn/card-torn-mask-b-r2.svg) center / 100% 100% no-repeat; }
.ics-flip:nth-child(3n+2) > .ics-flip__inner > .ics-flip__front::after, .ics-flip:nth-child(3n+2) > .ics-flip__inner > .ics-flip__back::after { -webkit-mask: linear-gradient(#000 0 0), url(/wp-content/uploads/ics-torn/card-torn-mask-b-r2.svg) center / 100% 100% no-repeat; mask: linear-gradient(#000 0 0), url(/wp-content/uploads/ics-torn/card-torn-mask-b-r2.svg) center / 100% 100% no-repeat; -webkit-mask-composite: xor; mask-composite: exclude; }
.ics-flip:nth-child(3n+3) > .ics-flip__inner > .ics-flip__front::before, .ics-flip:nth-child(3n+3) > .ics-flip__inner > .ics-flip__back::before { -webkit-mask: url(/wp-content/uploads/ics-torn/card-torn-mask-c-r2.svg) center / 100% 100% no-repeat; mask: url(/wp-content/uploads/ics-torn/card-torn-mask-c-r2.svg) center / 100% 100% no-repeat; }
.ics-flip:nth-child(3n+3) > .ics-flip__inner > .ics-flip__front::after, .ics-flip:nth-child(3n+3) > .ics-flip__inner > .ics-flip__back::after { -webkit-mask: linear-gradient(#000 0 0), url(/wp-content/uploads/ics-torn/card-torn-mask-c-r2.svg) center / 100% 100% no-repeat; mask: linear-gradient(#000 0 0), url(/wp-content/uploads/ics-torn/card-torn-mask-c-r2.svg) center / 100% 100% no-repeat; -webkit-mask-composite: xor; mask-composite: exclude; }
/* Advisory council (#ab-adv-grid, page 121): the same flip member card as the team grid, same 4/3/2/1 columns and card width; 2 items, left aligned. Placeholder monogram front (no photos yet). */
html body #ab-adv-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: var(--sp-m, 16px) !important; justify-content: start !important; align-items: stretch !important; width: 100% !important; max-width: var(--container-wide, 1312px) !important; margin-left: auto !important; margin-right: auto !important; overflow-x: clip; }
html body #ab-adv-grid > .ics-flip { width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; aspect-ratio: auto !important; }
@media (max-width: 1199px) { html body #ab-adv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 991px) { html body #ab-adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 599px) { html body #ab-adv-grid { grid-template-columns: minmax(0, 1fr) !important; } }
html body #adv-1-well { background: var(--pink-300, #ffc6e6) !important; }
html body #adv-2-well { background: var(--blue-300, #b8d4ff) !important; }
html body #adv-1-mono, html body #adv-2-mono { font-size: 120px !important; line-height: 1 !important; top: 50% !important; transform: translateY(-50%); }
@media (max-width: 599px) { html body #adv-1-mono, html body #adv-2-mono { font-size: 96px !important; } }
/* faces stretch to the tallest face in their cell (percent heights do not resolve on an auto-height inner). */
html body .ics-flip .ics-flip__front, html body .ics-flip .ics-flip__back { height: auto !important; align-self: stretch !important; }
/* the rotating inner fills the card cell (the cell is stretched by its grid row). */
html body .ics-flip > .ics-flip__inner { height: 100% !important; }

/* v5 (2026-11-04, D1 WebKit 390): WebKit ignores backface-visibility here, so the back (mirrored) paints over the portrait at rest. Fallback that does not rely on backface: each face is visibility:hidden on the far side of the turn, switching at the 90 deg midpoint (half of --ics-flip-dur). */
html body .ics-flip > .ics-flip__inner { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
html body .ics-flip .ics-flip__front { visibility: visible; transition: visibility 0s linear calc(var(--ics-flip-dur, 700ms) / 2); }
html body .ics-flip .ics-flip__back { visibility: hidden; transition: visibility 0s linear calc(var(--ics-flip-dur, 700ms) / 2); }
html body .ics-flip.is-flipped .ics-flip__front { visibility: hidden; transition: visibility 0s linear calc(var(--ics-flip-dur, 700ms) / 2); }
html body .ics-flip.is-flipped .ics-flip__back { visibility: visible; transition: visibility 0s linear calc(var(--ics-flip-dur, 700ms) / 2); }

/* a11y v1: real toggle button inside each flip card. Hidden until keyboard focus (visual design unchanged). */
.ics-flip__toggle:not(:focus-visible) { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; padding: 0 !important; background: none !important; }
.ics-flip__toggle:focus-visible { position: absolute; left: 8px; bottom: 8px; z-index: 5; max-width: calc(100% - 16px); padding: 6px 12px; font: inherit; font-size: 14px; line-height: 1.3; color: #111; background: #fff; border: 2px solid #111; border-radius: 999px; cursor: pointer; }