/* Rotary Club of Koronadal — v3 design tokens (premium redesign)
   Colours: Rotary Brand Center values only, used pure. No tints, no gradients.
   Only exception: a semi-transparent black scrim behind text on a photo (--scrim). */
:root {
  --rc-royal-blue: #17458F;
  --rc-gold: #F7A81B;
  --rc-azure: #0067C8;
  --rc-sky-blue: #00A2E0;
  --rc-cranberry: #D41367;
  --rc-cardinal: #E02927;
  --rc-turquoise: #00ADBB;
  --rc-violet: #901F93;
  --rc-orange: #FF7600;
  --rc-grass: #009739;
  --rc-charcoal: #54565A;
  --rc-slate: #657F99;
  --rc-pewter: #898A8D;
  --rc-silver: #D0CFCD;
  --rc-cloud: #D6D1CA;
  --rc-white: #FFFFFF;
  --brand-facebook: #1877F2;
  --brand-x: #000000;
  --brand-messenger: #0866FF;
  --brand-whatsapp: #25D366;
  --brand-linkedin: #0A66C2;
  --rc-black: #000000;
  --scrim: rgb(0 0 0 / .6);

  /* Roles — AA-checked pairs */
  --color-text: var(--rc-charcoal);        /* 7.4:1 on white — UI, meta */
  --color-text-long: var(--rc-black);      /* Georgia long text */
  --color-heading: var(--rc-royal-blue);   /* 9.2:1 on white */
  --color-link: var(--rc-azure);           /* 5.6:1 on white */
  --band-primary: var(--rc-royal-blue);    /* hero / page headers / footer, white text */
  --band-events: var(--rc-azure);          /* white text 5.6:1 */
  --band-quiet: var(--rc-cloud);           /* club life, gallery, facts — black / royal blue text */
  --panel-cta: var(--rc-gold);             /* Visit a meeting — royal blue 4.6:1, black 10.6:1 */
  --on-blue-accent: var(--rc-gold);        /* eyebrows on royal blue, 4.6:1 */

  /* Areas of focus: fill + the text colour that passes AA on it */
  --aof-peace: var(--rc-azure);           --aof-peace-on: #FFFFFF;     /* 5.6:1 */
  --aof-disease: var(--rc-cranberry);     --aof-disease-on: #FFFFFF;   /* 5.2:1 */
  --aof-water: var(--rc-sky-blue);        --aof-water-on: #000000;     /* 7.2:1 (white fails, 2.9) */
  --aof-mothers: var(--rc-violet);        --aof-mothers-on: #FFFFFF;   /* 7.6:1 */
  --aof-education: var(--rc-orange);      --aof-education-on: #000000; /* 7.8:1 (white fails, 2.7) */
  --aof-economy: var(--rc-turquoise);     --aof-economy-on: #000000;   /* 7.7:1 (white fails, 2.7) */
  --aof-environment: var(--rc-grass);     --aof-environment-on: #000000; /* 5.5:1 (white 3.8 fails at small sizes) */

  /* Type */
  --font-primary: "Open Sans", sans-serif;   /* self-host 400/600/700/800 woff2 */
  --font-long: Georgia, serif;
  --fs-eyebrow: 0.8125rem;                   /* 13px, 700, uppercase, .1em */
  --fs-chip: 0.75rem;                        /* 12px, 700, uppercase */
  --fs-meta: 0.875rem;
  --fs-ui: 1rem;
  --fs-body: 1.0625rem;
  --fs-long: clamp(1.1875rem, .4vw + 1.0625rem, 1.3125rem);   /* 19–21px Georgia */
  --fs-lead: clamp(1.125rem, .6vw + .9375rem, 1.375rem);
  --fs-card-title: 1.1875rem;
  --fs-h3: clamp(1.25rem, .8vw + .9375rem, 1.625rem);
  --fs-h2: clamp(2rem, 2.6vw + 1rem, 3.625rem);                /* 32–58px */
  --fs-h1-article: clamp(2.125rem, 3.4vw + .875rem, 4.25rem);
  --fs-display: clamp(2.875rem, 5.4vw + .875rem, 6.25rem);     /* 46–100px */
  --fs-date: clamp(3.5rem, 4vw + 1.25rem, 5rem);
  --fw-display: 800;
  --lh-display: .96;
  --lh-h2: 1.02;
  --lh-long: 1.7;
  --tracking-display: -.035em;
  --tracking-h2: -.03em;
  --measure-display: 10ch;
  --measure-long: 660px;
  --measure-post: 880px;

  /* Space */
  --gutter: clamp(20px, 4vw, 48px);
  --container: 1280px;
  --section-y: clamp(56px, 8vw, 120px);
  --gap-card: 24px;
  --lead-max: 880px;                          /* lead photos never wider (720px sources) */

  /* Shape */
  --radius-chip: 999px;
  --radius-pill: 999px;
  --radius-card: 24px;
  --radius-card-photo: 16px;
  --radius-frame: 32px;                       /* large photo frames */
  --radius-panel: 40px;                       /* hero photo, Visit panel */
  --circle-sm: 120px;
  --circle-md: 280px;
  --circle-lg: 380px;

  /* Controls */
  --tap-min: 44px;
  --control-h: 48px;
  --control-h-lg: 52px;
  --focus-ring: 0 0 0 3px var(--rc-gold), 0 0 0 6px var(--rc-royal-blue);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-reveal: .8s;
  --dur-zoom: .5s;
  --zoom: 1.05;
}

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-group(*) { animation: none !important; }
}
@view-transition { navigation: auto; }

/* Lift on hover (devices that hover) and on keyboard focus. Transform only. */
.news-card, .project-card, .tile, .rss-card, .btn { transition-property: transform, border-color, background-color, color; transition-duration: .25s; transition-timing-function: var(--ease); }
@media (hover: hover) {
  .news-card:hover, .project-card:hover, .tile:hover, .rss-card:hover { transform: translateY(-4px); }
  .btn:hover { transform: translateY(-2px); }
}
.news-card:focus-visible, .project-card:focus-visible, .tile:focus-visible, .rss-card:focus-visible { transform: translateY(-4px); }
.btn:focus-visible { transform: translateY(-2px); }

/* ===================================================================== base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh; margin: 0; display: flex; flex-direction: column;
  background: var(--rc-white); color: var(--color-text);
  font-family: var(--font-primary); font-size: var(--fs-body); line-height: 1.6;
}
main { flex: 1 0 auto; }
img { max-width: 100%; }
button { font: inherit; }
a { color: var(--color-link); }
a:hover { color: var(--color-heading); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 99;
  background: var(--rc-royal-blue); color: var(--rc-white);
  padding: 12px 16px; font-weight: 700; border-radius: var(--radius-pill); text-decoration: none;
}
.skip-link:focus { left: 8px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--flush-top { padding-top: 0; }
.section--tight { padding-block: clamp(32px, 4vw, 56px); }
.section--quiet { background: var(--band-quiet); }
.section--blue { background: var(--band-primary); color: var(--rc-white); }
.section--azure { background: var(--band-events); color: var(--rc-white); }
.section--dot { position: relative; overflow: hidden; }
.section--dot > .container { position: relative; }
.dot--next { right: -90px; bottom: -120px; width: 300px; height: 300px; background: var(--rc-royal-blue); animation: rck-bob 10s ease-in-out infinite both; }
.stack { display: flex; flex-direction: column; gap: 32px; }

.eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text); }
.section--blue .eyebrow, .page-head .eyebrow { color: var(--on-blue-accent); }
.h2 { font-size: var(--fs-h2); font-weight: 800; line-height: var(--lh-h2); letter-spacing: var(--tracking-h2); color: var(--color-heading); text-wrap: balance; }
.section--blue .h2, .section--azure .h2 { color: var(--rc-white); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; }
.long { font-family: var(--font-long); font-size: var(--fs-long); line-height: var(--lh-long); color: var(--color-text-long); text-wrap: pretty; }

/* ================================================================== buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-h); padding: 0 24px; border: 2px solid transparent; border-radius: var(--radius-pill);
  font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color .25s, color .25s, transform .25s, border-color .25s;
}
.btn--lg { min-height: var(--control-h-lg); padding: 0 28px; font-size: 1.0625rem; }
.btn--gold { background: var(--rc-gold); color: var(--rc-royal-blue); font-weight: 800; }
.btn--gold:hover { background: var(--rc-royal-blue); color: var(--rc-white); }
.section--blue .btn--gold:hover, .hero .btn--gold:hover { background: var(--rc-white); color: var(--rc-royal-blue); }
.btn--blue { background: var(--rc-royal-blue); color: var(--rc-white); }
.btn--blue:hover { background: var(--rc-azure); color: var(--rc-white); }
.btn--line { border-color: var(--rc-royal-blue); color: var(--rc-royal-blue); background: transparent; }
.btn--line:hover { background: var(--rc-royal-blue); color: var(--rc-white); }
.btn--line-white { border-color: var(--rc-white); color: var(--rc-white); }
.btn--line-white:hover { background: var(--rc-white); color: var(--rc-royal-blue); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ===================================================================== chips */
.aof--peace { --aof: var(--aof-peace); --aof-on: var(--aof-peace-on); }
.aof--disease { --aof: var(--aof-disease); --aof-on: var(--aof-disease-on); }
.aof--water { --aof: var(--aof-water); --aof-on: var(--aof-water-on); }
.aof--mothers { --aof: var(--aof-mothers); --aof-on: var(--aof-mothers-on); }
.aof--education { --aof: var(--aof-education); --aof-on: var(--aof-education-on); }
.aof--economy { --aof: var(--aof-economy); --aof-on: var(--aof-economy-on); }
.aof--environment { --aof: var(--aof-environment); --aof-on: var(--aof-environment-on); }
.aof--club { --aof: var(--rc-royal-blue); --aof-on: var(--rc-white); }

.chip {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: var(--radius-chip);
  background: var(--aof); color: var(--aof-on);
  font-size: var(--fs-chip); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.chip--plain { background: var(--rc-royal-blue); color: var(--rc-white); }

/* ================================================================== header */
.site-header { position: relative; z-index: 20; background: var(--rc-white); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: clamp(76px, 7vw, 96px);
}
.site-header__logo { flex: none; display: block; border-radius: 8px; }
.site-header__logo img { display: block; height: clamp(58px, 5.4vw, 76px); width: auto; }
.site-nav { display: none; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.site-nav ul { list-style: none; display: flex; gap: clamp(18px, 2vw, 32px); }
.site-nav a:not(.btn) {
  display: flex; align-items: center; min-height: var(--tap-min); border-bottom: 3px solid transparent;
  font-size: 1rem; font-weight: 700; color: var(--rc-royal-blue); text-decoration: none;
}
.site-nav a:not(.btn):hover { color: var(--rc-azure); }
.site-nav a[aria-current] { border-bottom-color: var(--rc-gold); }
.menu { display: block; }
.menu > summary {
  list-style: none; display: flex; align-items: center; gap: 8px; min-height: var(--control-h); padding: 0 18px;
  border: 2px solid var(--rc-royal-blue); border-radius: var(--radius-pill);
  color: var(--rc-royal-blue); font-size: .9375rem; font-weight: 700; cursor: pointer;
}
.menu__bars { display: flex; flex-direction: column; gap: 4px; }
.menu__bars i { display: block; width: 18px; height: 2px; background: var(--rc-royal-blue); }
.menu__panel {
  position: absolute; left: 12px; right: 12px; top: calc(100% - 4px); z-index: 30;
  background: var(--rc-royal-blue); border-radius: var(--radius-card); padding: 12px 24px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.menu__panel ul { list-style: none; }
.menu__panel li { border-bottom: 1px solid var(--rc-slate); }
.menu__panel li a {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; color: var(--rc-white); text-decoration: none;
}
.menu__panel li a::after { content: "\2192"; color: var(--rc-gold); }
.menu__panel .btn { min-height: var(--control-h-lg); }
@media (min-width: 760px) {
  .site-nav { display: flex; }
  .menu { display: none; }
}

/* ============================================================== visit panel */
.visit { background: var(--rc-white); padding-block: var(--section-y); }
.visit__panel {
  background: var(--panel-cta); border-radius: var(--radius-panel); position: relative; overflow: hidden;
  padding: clamp(32px, 5vw, 72px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(28px, 4vw, 64px); align-items: center;
}
.visit__title {
  font-size: var(--fs-display); font-weight: 800; line-height: var(--lh-display); letter-spacing: var(--tracking-display);
  color: var(--rc-royal-blue); max-width: 8ch;
}
.visit__card { background: var(--rc-white); border-radius: var(--radius-frame); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.visit__card dl { display: grid; gap: 16px; }
.visit__card dt { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text); }
.visit__card dd { font-size: 1.375rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--rc-royal-blue); }
.visit__note { font-size: var(--fs-meta); color: var(--color-text); }

/* ================================================================== footer */
.site-footer { background: var(--band-primary); color: var(--rc-white); }
.site-footer a { color: var(--rc-white); }
.site-footer a:hover { color: var(--rc-gold); }
.site-footer__inner {
  padding-block: clamp(48px, 6vw, 80px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 40px;
}
.site-footer__brand img { display: block; height: 96px; width: auto; }
.site-footer__heading { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-blue-accent); margin-bottom: 12px; }
.site-footer__links { list-style: none; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: var(--tap-min); font-weight: 600; text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__bottom {
  border-top: 1px solid var(--rc-slate); padding-block: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px;
  justify-content: space-between; font-size: var(--fs-meta);
}

/* =============================================================== page head */
.page-head { background: var(--band-primary); color: var(--rc-white); position: relative; overflow: hidden; }
.page-head__inner { position: relative; padding-block: clamp(40px, 6vw, 88px); display: flex; flex-direction: column; gap: 20px; }
.page-head h1 { animation: rck-rise .7s var(--ease) both; font-size: var(--fs-display); font-weight: 800; line-height: var(--lh-display); letter-spacing: var(--tracking-display); max-width: 14ch; text-wrap: balance; }
.page-head__lead { animation: rck-rise .7s .1s var(--ease) both; font-family: var(--font-long); font-size: var(--fs-lead); line-height: 1.55; max-width: 52ch; text-wrap: pretty; }
.dot { position: absolute; border-radius: 50%; pointer-events: none; }
.page-head .dot { right: -90px; top: -110px; width: var(--circle-md); height: var(--circle-md); background: var(--rc-gold); animation: rck-pop .9s .2s var(--ease) both, rck-bob 11s 1.1s ease-in-out infinite; }

/* =============================================================== hero (home) */
.hero { position: relative; overflow: hidden; background: var(--band-primary); }
.hero .dot--gold { right: -120px; top: -140px; width: var(--circle-lg); height: var(--circle-lg); background: var(--rc-gold); animation: rck-pop .9s .2s var(--ease) both, rck-bob 9s 1.1s ease-in-out infinite; }
.hero .dot--azure { left: -70px; bottom: -90px; width: 200px; height: 200px; background: var(--rc-azure); animation: rck-bob2 6s .4s ease-in-out infinite both; }
.hero__grid {
  position: relative; padding-block: clamp(40px, 6vw, 96px) clamp(56px, 7vw, 112px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(36px, 5vw, 80px); align-items: center;
}
.hero__text { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; animation: rck-rise .8s var(--ease) both; }
.hero__text .eyebrow { color: var(--on-blue-accent); }
.hero h1 { font-size: var(--fs-display); font-weight: 800; line-height: var(--lh-display); letter-spacing: var(--tracking-display); color: var(--rc-white); max-width: 9.5ch; }
.hero__lead { font-family: var(--font-long); font-size: var(--fs-lead); line-height: 1.55; color: var(--rc-white); max-width: 40ch; text-wrap: pretty; }
.hero__photo { position: relative; justify-self: center; width: 100%; max-width: 540px; aspect-ratio: 4 / 5; border-radius: var(--radius-panel); overflow: hidden; background: var(--rc-silver); animation: rck-rise .9s .12s var(--ease) both; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes rck-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes rck-bob { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(10px, -16px) scale(1.06); } 66% { transform: translate(-8px, 8px) scale(.96); } }
@keyframes rck-bob2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-14px, -10px) scale(1.1); } }
@keyframes rck-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rck-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* ============================================================ featured project */
.feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(32px, 5vw, 80px); align-items: center; }
.feature__media { position: relative; }
.feature__photo { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-frame); overflow: hidden; background: var(--rc-silver); }
.feature__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature .dot { left: -28px; bottom: -28px; width: 140px; height: 140px; background: var(--aof); animation: rck-bob2 5.5s ease-in-out infinite both; }
.feature__text { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.feature__tags { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.feature h2 { max-width: 16ch; }
.feature .long { max-width: 46ch; }
.facts-inline { display: flex; flex-wrap: wrap; gap: 12px 36px; }
.facts-inline dt { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text); }
.facts-inline dd { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; color: var(--rc-royal-blue); }

/* ================================================================= impact band */
.impact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px; }
.impact > div { display: flex; flex-direction: column; gap: 6px; padding-top: 20px; border-top: 4px solid var(--rc-gold); }
.impact dd { font-size: clamp(3rem, 4vw + 1.25rem, 5.5rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--rc-gold); order: -1; }
.impact dt { font-size: var(--fs-body); font-weight: 600; color: var(--rc-white); }
.impact-caption { font-size: var(--fs-meta); color: var(--rc-white); }

/* ================================================================= card grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--gap-card); list-style: none; }
.grid > li { display: flex; }

.news-card {
  position: relative; display: flex; flex-direction: column; width: 100%;
  background: var(--rc-white); border: 1px solid var(--rc-silver); border-radius: var(--radius-card);
  overflow: hidden; color: inherit; text-decoration: none;
  transition: transform var(--dur-zoom) var(--ease), border-color .25s;
}
.news-card:hover { border-color: var(--rc-royal-blue); color: inherit; }
.news-card__media { position: relative; display: block; margin: 10px 10px 0; aspect-ratio: 3 / 2; border-radius: var(--radius-card-photo); overflow: hidden; background: var(--rc-silver); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-zoom) var(--ease); }
.news-card:hover .news-card__media img { transform: scale(var(--zoom)); }
.news-card--flyer .news-card__media { background: var(--rc-cloud); }
.news-card--flyer .news-card__media img { object-fit: contain; }
.news-card--flyer:hover .news-card__media img { transform: none; }
.news-card__badge {
  position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px;
  border-radius: var(--radius-pill); background: var(--rc-black); color: var(--rc-white); font-size: .8125rem; font-weight: 700;
}
.news-card__body { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 24px; flex: 1; }
.news-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.news-card__date { font-size: var(--fs-meta); color: var(--color-text); }
.news-card__title { font-size: var(--fs-card-title); font-weight: 700; line-height: 1.3; color: var(--rc-royal-blue); text-wrap: balance; }
.news-card__more { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 20px; border: 2px solid var(--rc-royal-blue); border-radius: var(--radius-pill); color: var(--rc-royal-blue); font-weight: 700; font-size: .9375rem; transition: background-color .25s, color .25s; }
.news-card:hover .news-card__more { background: var(--rc-royal-blue); color: var(--rc-white); }
.news-card--text { background: var(--rc-royal-blue); border-color: var(--rc-royal-blue); color: var(--rc-white); }
.news-card--text:hover { border-color: var(--rc-gold); }
.news-card--text .news-card__body { padding: 28px; position: relative; overflow: hidden; }
.news-card--text .news-card__title { font-size: 1.25rem; font-weight: 700; color: var(--rc-white); line-height: 1.4; position: relative; }
.news-card--text .news-card__date { color: var(--rc-white); position: relative; }
.news-card--text .news-card__meta { position: relative; }
.news-card--text .news-card__more { border-color: var(--rc-white); color: var(--rc-white); position: relative; }
.news-card--text:hover .news-card__more { background: var(--rc-white); color: var(--rc-royal-blue); }
.news-card--text .dot { right: -40px; top: -40px; width: 120px; height: 120px; background: var(--rc-gold); animation: rck-bob2 7s -2s ease-in-out infinite; }

.project-card {
  display: flex; flex-direction: column; width: 100%; background: var(--rc-white); border: 1px solid var(--rc-silver); border-radius: var(--radius-card);
  overflow: hidden; color: inherit; text-decoration: none; transition: transform var(--dur-zoom) var(--ease), border-color .25s;
}
.project-card:hover { border-color: var(--rc-royal-blue); color: inherit; }
.project-card__media { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--rc-silver); overflow: hidden; border-bottom: 8px solid var(--aof); }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-zoom) var(--ease); }
.project-card:hover .project-card__media img { transform: scale(var(--zoom)); }
.project-card__body { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 24px; flex: 1; align-items: flex-start; }
.project-card__title { font-size: 1.3125rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--rc-royal-blue); }
.project-card__where { font-size: var(--fs-meta); color: var(--color-text); }
.project-card__more { margin-top: auto; display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 20px; border: 2px solid var(--rc-royal-blue); border-radius: var(--radius-pill); font-weight: 700; color: var(--rc-royal-blue); transition: background-color .25s, color .25s; }
.project-card:hover .project-card__more { background: var(--rc-royal-blue); color: var(--rc-white); }

/* ============================================================= club life strip */
.club-life { background: var(--band-quiet); padding-block: clamp(40px, 5vw, 72px); overflow: hidden; }
.club-life__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.club-life__track { overflow: hidden; }
.club-life__list { list-style: none; display: flex; gap: 20px; width: max-content; animation: rck-marquee var(--life-dur, 96s) linear infinite; }
.club-life[data-paused] .club-life__list, .club-life:hover .club-life__list, .club-life:focus-within .club-life__list { animation-play-state: paused; }
.club-life__list li { flex: none; width: clamp(240px, 22vw, 300px); }
.club-life__item { display: flex; flex-direction: column; gap: 14px; padding: 12px 12px 18px; background: var(--rc-white); border-radius: 28px; color: inherit; text-decoration: none; height: 100%; }
.club-life__item img.is-whole { object-fit: contain; background: var(--rc-cloud); }
.club-life__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; display: block; background: var(--rc-silver); }
.club-life__label { padding-inline: 8px; font-size: .9375rem; font-weight: 700; line-height: 1.3; color: var(--rc-royal-blue); }
.club-life__meta { display: block; padding-inline: 8px; margin-top: 2px; font-size: .8125rem; font-weight: 600; color: var(--color-text); }
.club-life--static .club-life__track { overflow-x: auto; }
.club-life--static .club-life__list { animation: none; }
.club-life--static li[aria-hidden="true"] { display: none; }
.pause-btn { display: none; align-items: center; min-height: var(--tap-min); padding: 0 20px; border: 2px solid var(--rc-royal-blue); border-radius: var(--radius-pill); background: transparent; color: var(--rc-royal-blue); font-weight: 700; cursor: pointer; }
.pause-btn:hover { background: var(--rc-royal-blue); color: var(--rc-white); }
.js .pause-btn { display: inline-flex; }

/* ============================================================== events band + cards */
.event-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--gap-card); }
.event-card { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 28px; background: var(--rc-white); border-radius: var(--radius-card); color: var(--color-text); }
.event-card__date { display: flex; align-items: baseline; gap: 12px; color: var(--rc-royal-blue); }
.event-card__day { font-size: 3.75rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.event-card__month { font-size: 1rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; }
.event-card__month small { display: block; font-size: var(--fs-chip); font-weight: 700; color: var(--color-text); }
.event-card__title { font-size: 1.3125rem; font-weight: 800; line-height: 1.25; color: var(--rc-royal-blue); }
.event-card__line { font-size: var(--fs-meta); color: var(--color-text); }
.event-card .btn { margin-top: auto; align-self: flex-start; }
.empty-band { max-width: 60ch; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
@media (max-width: 759px) {
  .event-cards--snap { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .event-cards--snap > li { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ================================================================= focus tiles */
.tiles { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--gap-card); }
.tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; height: 100%;
  min-height: clamp(170px, 15vw, 220px); padding: 24px; border-radius: var(--radius-card); background: var(--aof); color: var(--aof-on); text-decoration: none;
  transition: transform var(--dur-zoom) var(--ease);
}
.tile:hover { color: var(--aof-on); }
.tile { --tile-dot: var(--rc-white); }
.tile.aof--peace, .tile.aof--disease, .tile.aof--mothers { --tile-dot: var(--rc-royal-blue); }
.tile::after { content: ""; position: absolute; right: -36px; top: -36px; width: 110px; height: 110px; border-radius: 50%; background: var(--tile-dot); }
/* Each circle bobs on its own clock, as in the v3 design: 4.5s plus .7s per step, cycling every four tiles. */
.tile::after { animation: rck-bob2 var(--bob, 4.5s) var(--bob-delay, 0s) ease-in-out infinite both; }
.tiles > :nth-child(4n+2) .tile { --bob: 5.2s; }
.tiles > :nth-child(4n+3) .tile { --bob: 5.9s; }
.tiles > :nth-child(4n+4) .tile { --bob: 6.6s; }
.tiles > :nth-child(2) .tile { --bob-delay: -.6s; }
.tiles > :nth-child(3) .tile { --bob-delay: -1.2s; }
.tiles > :nth-child(4) .tile { --bob-delay: -1.8s; }
.tiles > :nth-child(5) .tile { --bob-delay: -2.4s; }
.tiles > :nth-child(6) .tile { --bob-delay: -3s; }
.tiles > :nth-child(7) .tile { --bob-delay: -3.6s; }
.tiles > :nth-child(8) .tile { --bob: 5.2s; --bob-delay: -1s; }
.tile__count { font-size: clamp(2.75rem, 2vw + 2rem, 4rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; position: relative; z-index: 1; }
.tile__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.tile__name { font-size: 1.25rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.tile__sub { font-size: .875rem; font-weight: 600; }
.tile--all { background: var(--rc-white); color: var(--rc-royal-blue); border: 2px solid var(--rc-royal-blue); }
.tile--all:hover { background: var(--rc-royal-blue); color: var(--rc-white); }
.tile--all { --tile-dot: var(--rc-gold); }
.tile--empty { opacity: 1; }

/* ============================================================= filter chips */
.filters { display: flex; flex-direction: column; gap: 16px; }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filter-group__label { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text); margin-right: 6px; }
.filter-group ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.fchip {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap-min); padding: 0 18px;
  border: 2px solid var(--rc-silver); border-radius: var(--radius-pill);
  color: var(--rc-royal-blue); background: var(--rc-white); font-size: .9375rem; font-weight: 700; text-decoration: none;
  transition: background-color .25s, color .25s;
}
.fchip__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--aof, var(--rc-royal-blue)); }
.fchip:hover { color: var(--rc-royal-blue); background: var(--rc-cloud); }
.fchip[aria-current="true"] { border-color: var(--aof, var(--rc-royal-blue)); background: var(--aof, var(--rc-royal-blue)); color: var(--aof-on, var(--rc-white)); }
.fchip[aria-current="true"] .fchip__dot { background: var(--aof-on, var(--rc-white)); }
.result-count { font-size: var(--fs-meta); color: var(--color-text); }
.empty { padding: clamp(28px, 4vw, 56px); border: 2px solid var(--rc-silver); border-radius: var(--radius-card); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 720px; }
.empty h2, .empty h3 { font-size: var(--fs-h3); font-weight: 800; color: var(--rc-royal-blue); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.pager__num, .pager__step { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rc-silver); border-radius: 8px; color: var(--rc-royal-blue); font-weight: 700; text-decoration: none; }
.pager__num[aria-current="page"] { background: var(--rc-royal-blue); border-color: var(--rc-royal-blue); color: var(--rc-white); }
@media (hover: hover) { .pager__num:hover, .pager__step:hover { border-color: var(--rc-royal-blue); } }
.pager__num:focus-visible, .pager__step:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.notice { padding: 14px 20px; border: 2px solid var(--rc-gold); border-radius: var(--radius-card-photo); color: var(--color-text-long); font-size: var(--fs-meta); }

/* ================================================================ post */
.progress { position: fixed; left: 0; top: 0; z-index: 50; height: 4px; width: 100%; background: var(--rc-gold); transform: scaleX(0); transform-origin: left; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .progress { animation: rck-grow linear both; animation-timeline: scroll(root); }
  @keyframes rck-grow { to { transform: scaleX(1); } }
}
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap-min); font-weight: 700; color: var(--rc-azure); text-decoration: none; }
.back-link::before { content: "\2190"; }
.back-link:hover { text-decoration: underline; }
.article-head { display: flex; flex-direction: column; gap: 20px; padding-top: clamp(16px, 3vw, 40px); align-items: flex-start; }
.article-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.article-head h1, .detail-head h1 { font-size: var(--fs-h1-article); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; color: var(--rc-royal-blue); max-width: 20ch; text-wrap: balance; }
.listen-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.read-time { font-size: var(--fs-meta); color: var(--color-text); }
.lead-frame { width: 100%; max-width: var(--lead-max); aspect-ratio: 3 / 2; border-radius: var(--radius-frame); overflow: hidden; background: var(--rc-silver); margin-top: 8px; }
.lead-frame a { display: block; height: 100%; }
.lead-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lead-frame--flyer { background: var(--rc-cloud); }
.lead-frame--flyer img { object-fit: contain; }
.lead-panel { max-width: var(--lead-max); background: var(--rc-royal-blue); color: var(--rc-white); border-radius: var(--radius-frame); padding: clamp(28px, 4vw, 56px); position: relative; overflow: hidden; margin-top: 8px; }
.lead-panel p { position: relative; font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem); font-weight: 700; line-height: 1.35; }
.lead-panel .dot { right: -60px; top: -60px; width: 180px; height: 180px; background: var(--rc-gold); }
.post-body-wrap { padding-top: 32px; }
#post-body { max-width: var(--measure-post); margin-inline: auto; }
.post-body { font-family: var(--font-long); font-size: clamp(1.125rem, .3vw + 1.05rem, 1.25rem); line-height: 1.65; color: var(--color-text-long); margin-bottom: 1.2em; text-wrap: pretty; overflow-wrap: anywhere; }
.post-body.tags, .tags { font-family: var(--font-primary); font-size: var(--fs-meta); color: var(--color-text); }
.post-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 24px; }
.gallery { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 340px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; overscroll-behavior-x: contain; }
.gallery:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.gallery li { scroll-snap-align: start; }
.gallery a { display: block; border-radius: 20px; overflow: hidden; background: var(--rc-silver); aspect-ratio: 3 / 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-zoom) var(--ease); }
.gallery a:hover img { transform: scale(var(--zoom)); }
.gallery__more { margin-top: 24px; }

/* Listen pill: the read-aloud package injects its own single-class styles, so these win by specificity. */
read-aloud { display: inline-block; }
read-aloud .read-aloud-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--control-h); padding: 0 22px;
  border: 2px solid var(--rc-royal-blue); border-radius: var(--radius-pill); background: var(--rc-white); color: var(--rc-royal-blue);
  font-family: var(--font-primary); font-size: 1rem; font-weight: 700; cursor: pointer; box-shadow: none;
}
read-aloud .read-aloud-btn:hover { background: var(--rc-royal-blue); color: var(--rc-white); }
read-aloud .read-aloud-btn[data-state="playing"], read-aloud .read-aloud-btn[data-state="loading"] { background: var(--rc-royal-blue); color: var(--rc-white); }
read-aloud .read-aloud-btn:focus-visible { box-shadow: var(--focus-ring); }
#post-body .read-aloud-word--active { background: var(--rc-gold); color: var(--rc-black); border-radius: 4px; }

/* ================================================================ projects */
.detail-head { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; padding-top: clamp(16px, 3vw, 40px); }
.detail-head .long { max-width: 52ch; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); }
@media (min-width: 960px) { .detail { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }
.detail__photo { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-frame); overflow: hidden; background: var(--rc-silver); }
.detail__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail__photo-wrap { position: relative; }
.detail__photo-wrap .dot { right: -24px; bottom: -24px; width: 120px; height: 120px; background: var(--aof); animation: rck-bob2 5s ease-in-out infinite both; }
.facts { background: var(--band-quiet); border-radius: var(--radius-frame); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.facts dt { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rc-royal-blue); }
.facts dd { font-size: 1.125rem; font-weight: 700; color: var(--color-text-long); }
.story { max-width: var(--measure-long); }
.story p, .story li { font-family: var(--font-long); font-size: var(--fs-long); line-height: var(--lh-long); color: var(--color-text-long); margin-bottom: 1.2em; }
.story .post-body { margin-bottom: 1.2em; }

/* ================================================================== events */
.event-rows { list-style: none; display: flex; flex-direction: column; }
.event-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px 32px; padding-block: 32px; border-top: 2px solid var(--rc-silver); }
.event-row:first-child { border-top-color: var(--rc-royal-blue); }
@media (min-width: 760px) { .event-row { grid-template-columns: 140px minmax(0, 1fr) auto; } }
.event-row__date { display: flex; flex-direction: column; color: var(--rc-royal-blue); line-height: 1; }
.event-row__day { font-size: var(--fs-date); font-weight: 800; letter-spacing: -.04em; }
.event-row__mon { font-size: 1rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; }
.event-row__body { display: flex; flex-direction: column; gap: 10px; }
.event-row__title { font-size: clamp(1.375rem, 1vw + 1.125rem, 2rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--rc-royal-blue); }
.event-row__title a { color: inherit; text-decoration: none; }
.event-row__title a:hover { text-decoration: underline; }
.event-row__line { color: var(--color-text); font-size: 1rem; font-weight: 600; }
.event-row__desc { max-width: 60ch; }
.event-row__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; grid-column: 2; }
@media (min-width: 760px) { .event-row__actions { grid-column: auto; flex-direction: column; } }
.past { background: var(--band-quiet); }
.past-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; padding-block: 20px; border-top: 1px solid var(--rc-pewter); }
.past-row:first-child { border-top: 0; }
.past-row__date { display: flex; flex-direction: column; align-items: center; color: var(--rc-royal-blue); line-height: 1; font-weight: 800; }
.past-row__date span:first-child { font-size: 1.75rem; }
.past-row__date span:last-child { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.past-row__title { font-size: 1.1875rem; font-weight: 800; color: var(--rc-royal-blue); line-height: 1.25; }
.past-row__line { font-size: var(--fs-meta); color: var(--color-text); }
.past-row .btn { min-height: var(--tap-min); }
@media (max-width: 639px) { .past-row { grid-template-columns: 56px minmax(0, 1fr); } .past-row .btn { grid-column: 2; justify-self: start; } }
.flyer { max-width: 280px; display: flex; flex-direction: column; gap: 8px; }
.flyer a:first-child { display: block; border-radius: 20px; overflow: hidden; background: var(--rc-cloud); }
.flyer img { display: block; width: 100%; height: auto; }
.flyer figcaption a { display: inline-flex; align-items: center; min-height: var(--tap-min); font-weight: 700; color: var(--rc-royal-blue); }
.event-description .post-body { max-width: var(--measure-long); }
.event-description a { color: var(--rc-royal-blue); text-decoration: underline; overflow-wrap: anywhere; }
.event-detail-date { display: flex; align-items: baseline; gap: 14px; color: var(--rc-royal-blue); font-weight: 800; }
.event-detail-date strong { font-size: var(--fs-date); line-height: 1; letter-spacing: -.04em; }

/* ================================================================== about */
.about-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 5vw, 80px); align-items: center; }
.about-row__photo { border-radius: var(--radius-frame); overflow: hidden; background: var(--rc-silver); aspect-ratio: 4 / 3; }
.about-row__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-row__text { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.about-row__text .rich p { font-family: var(--font-long); font-size: var(--fs-long); line-height: var(--lh-long); color: var(--color-text-long); margin-bottom: 1em; max-width: var(--measure-long); }
.test-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--gap-card); counter-reset: t; }
.test-list li { background: var(--rc-white); color: var(--rc-royal-blue); border-radius: var(--radius-card); padding: 28px; font-size: 1.25rem; font-weight: 800; line-height: 1.25; counter-increment: t; display: flex; flex-direction: column; gap: 16px; }
.test-list li::before { content: counter(t); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--rc-gold); color: var(--rc-royal-blue); font-size: 1.375rem; font-weight: 800; }
.timeline { list-style: none; display: grid; gap: 0; max-width: 820px; }
.timeline li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 24px; padding-block: 20px; border-top: 2px solid var(--rc-pewter); }
.timeline__year { font-size: 1.5rem; font-weight: 800; color: var(--rc-royal-blue); }
.presidents { display: grid; gap: 48px; }
.presidents h3 { font-size: 1.5rem; font-weight: 800; color: var(--rc-royal-blue); margin-bottom: 16px; }
.presidents ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.presidents li { background: var(--rc-white); border: 1px solid var(--rc-silver); border-radius: var(--radius-card-photo); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.presidents li strong { color: var(--rc-royal-blue); font-size: 1.0625rem; }
.presidents li span { font-size: var(--fs-meta); color: var(--color-text); }
.presidents li[data-current="true"] { background: var(--rc-royal-blue); border-color: var(--rc-royal-blue); }
.presidents li[data-current="true"] strong, .presidents li[data-current="true"] span { color: var(--rc-white); }
.fellows ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.fellows li { padding: 12px 16px; }

/* ================================================================ reveal */
/* Hidden only once site.js has set .js on the page; the script animates each block in. */
.js [data-reveal]:not(.is-in), .js [data-reveal="stagger"]:not(.is-in) > * { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .club-life__track { overflow-x: auto; }
  .club-life__list { animation: none; }
  .club-life li[aria-hidden="true"] { display: none; }
  .js [data-reveal], .js [data-reveal] > * { opacity: 1 !important; }
  .club-life__track { overflow-x: auto; scroll-snap-type: x mandatory; }
  .club-life__list li { scroll-snap-align: start; }
}
.article { padding-bottom: var(--section-y); }

/* Share row */
.share { margin-top: var(--space-8, 32px); padding-top: 20px; border-top: 1px solid var(--rc-silver); }
.share__label { margin: 0 0 12px; font-family: inherit; font-size: .875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rc-royal-blue); }
.share__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.share__list li[hidden] { display: none; }
.share__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rc-silver); border-radius: 8px; background: var(--rc-white); color: var(--rc-black); font-family: inherit; font-size: .875rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: border-color .2s, transform .2s; }
.share__btn svg { flex: none; color: var(--rc-charcoal); }
.share__btn--facebook svg { color: var(--brand-facebook); }
.share__btn--x svg { color: var(--brand-x); }
.share__btn--messenger svg { color: var(--brand-messenger); }
.share__btn--whatsapp svg { color: var(--brand-whatsapp); }
.share__btn--linkedin svg { color: var(--brand-linkedin); }
@media (hover: hover) { .share__btn:hover { border-color: var(--rc-royal-blue); transform: translateY(-2px); } }
.share__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media print { .share, .progress { display: none; } }

/* Photo viewer. Built by site.js over the plain image links. */
.lightbox { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; background: var(--rc-black); border: 0; color: var(--rc-white); }
.lightbox::backdrop { background: var(--scrim); }
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.lightbox__count { margin: 0; font-weight: 700; }
.lightbox__stage { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 0; padding: 0 8px 16px; touch-action: pan-y; }
.lightbox__figure { flex: 1; display: flex; justify-content: center; min-width: 0; min-height: 0; margin: 0; }
.lightbox__image { max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; }
.lightbox__button { flex: none; min-width: var(--tap-min); min-height: var(--tap-min); background: var(--rc-white); border: 2px solid var(--rc-white); border-radius: var(--radius-pill); color: var(--rc-royal-blue); font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; }
.lightbox__button:hover { border-color: var(--rc-azure); color: var(--rc-azure); }
.lightbox__button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lightbox__button[hidden] { display: none; }
body.has-lightbox { overflow: hidden; }

/* ===================================================== review round 1 */
.article-col { display: flex; flex-direction: column; align-items: center; }
.article-col > * { width: 100%; max-width: var(--lead-max); }
.article-col .post-actions, .article-col .share { max-width: var(--measure-long); }
.about-row--reverse > .about-row__photo { order: 2; }
.gallery-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.gallery-head__link { display: inline-flex; align-items: center; min-height: var(--tap-min); font-weight: 700; color: var(--rc-royal-blue); }
.section--azure .empty { background: var(--rc-white); border-color: var(--rc-white); }
.visit__panel::before, .visit__panel::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.visit__panel::before { left: -90px; bottom: -110px; width: 260px; height: 260px; background: var(--rc-royal-blue); animation: rck-bob 12s -3s ease-in-out infinite; }
.visit__panel::after { right: -40px; top: -40px; width: 120px; height: 120px; background: var(--rc-white); animation: rck-bob2 8s -5s ease-in-out infinite; }
.visit__panel > * { position: relative; z-index: 1; }
@media (max-width: 639px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tile { padding: 16px; min-height: 150px; gap: 20px; }
  .tile__name { font-size: 1rem; }
}

/* ======================================================= Rotary around the world */
.rss-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--gap-card); }
.rss-grid > li { display: flex; }
.rss-card { flex: 1; display: flex; flex-direction: column; gap: 14px; border-radius: 20px; color: var(--rc-black); text-decoration: none; }
.rss-card:hover { color: var(--rc-black); }
.rss-card__media { display: block; aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; background: var(--rc-cloud); }
.rss-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rss-card__date { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text); }
.rss-card__title { font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: var(--rc-royal-blue); text-wrap: balance; }
.rss-card__text { font-size: .9375rem; line-height: 1.5; text-wrap: pretty; }

/* ======================================================= type and paint */
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
/* Sections far down the page skip layout and paint until they near the screen. */
.defer { content-visibility: auto; contain-intrinsic-size: auto 800px; }