/* cards (riemer.fyi style): square boxes with thick black lines. The four rows line up across the cards.
   Sizes inside a card are in cqi (% of the card's width), so a card looks the same in any window size. */
.rc-grid { flex: 1; align-self: center; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
           grid-template-rows: auto auto auto auto; column-gap: 1.8vw; }
.rc { grid-row: span 4; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); min-width: 0;
      container-type: inline-size; border: var(--rule) solid var(--ink); }
.rc-label { display: flex; justify-content: space-between; gap: 3cqi; font-size: 4.6cqi; font-weight: 700; text-transform: uppercase;
            padding: 4.2cqi 7cqi; border-bottom: var(--rule) solid var(--ink); }
.rc-year { text-transform: none; }
.rc-who { font-size: 6.4cqi; font-weight: 700; text-transform: uppercase; padding: 13cqi 7cqi 0; }
.rc-front { font-size: 10.6cqi; font-weight: 700; line-height: 1.15; padding: 2.6cqi 7cqi 13cqi; }
.rc-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 4.6cqi; padding: 5.8cqi 7cqi; border-top: var(--rule) solid var(--ink); }
.rc-ai-label { font-size: 5.6cqi; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
/* the AI's word: a black box that wipes in from the left */
.rc-back { font-size: 9cqi; font-weight: 700; text-transform: uppercase; background: var(--ink); color: var(--bg); padding: .05em .3em;
           clip-path: inset(0 100% 0 0); transition: clip-path .45s cubic-bezier(.7,0,.2,1); }
.rc.on .rc-back { clip-path: inset(0 0 0 0); }
.no-anim .rc-back { transition: none; }
/* two rows of cards (e.g. six): same layout, less air, so both rows fit */
.rc-grid.rows-2 .rc-label { padding-top: 3cqi; padding-bottom: 3cqi; }
.rc-grid.rows-2 .rc-who { padding-top: 6cqi; }
.rc-grid.rows-2 .rc-front { font-size: 9.5cqi; padding-bottom: 6cqi; }
.rc-grid.rows-2 .rc-ai { padding-top: 4cqi; padding-bottom: 4cqi; }
.rc-grid.rows-2 .rc-back { font-size: 8cqi; }

/* flip cards: the card turns over; the back is black with white text (like the black boxes) */
.fc-grid { flex: 1; align-self: center; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: 1.8vw; }
.fc { aspect-ratio: 1.75; perspective: 1600px; container-type: inline-size; min-width: 0; }
.fc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,.7,.2,1); }
.fc.on .fc-inner { transform: rotateY(180deg); }
.no-anim .fc-inner { transition: none; }
.fc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
           display: flex; flex-direction: column; border: var(--rule) solid var(--ink); background: var(--bg); color: var(--ink); }
.fc-back { transform: rotateY(180deg); background: var(--ink); color: var(--bg); }
.fc-back .rc-label { border-bottom-color: var(--bg); }
/* "AI" on the back: a white box in the header */
.fc-back .rc-year { background: var(--bg); color: var(--ink); padding: 0 .4em; text-transform: uppercase; }
.fc .rc-label { padding-top: 3cqi; padding-bottom: 3cqi; }
/* capitals line + big words: centred in the space under the header */
.fc .rc-who { padding-top: 0; margin-top: auto; }
.fc .rc-front { font-size: 10.5cqi; padding-bottom: 3cqi; margin-bottom: auto; }