/* next generation v9 (17 Oct night): check-in once, the five Ocean Kids classes as rows, Youth told once, the camp as a photograph */
.ng-intro .inner { width: min(80%, 1200px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-l); align-items: start; }
.ng-intro .t-big { color: #3F3F3F; }
.ng-intro .checkin2 { display: grid; gap: var(--s-xs); padding-left: var(--s-s); border-left: 2px solid var(--gold-500); }
.ng-intro .checkin2 b { font-weight: 500; }
.krows { border-top: 1px solid var(--border); }
.krow { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap); align-items: center; padding-block: var(--s-m); border-bottom: 1px solid var(--border); }
.krow figure { aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; }
.krow figure img, .krow figure video { width: 100%; height: 100%; object-fit: cover; }
.krow h3 { font-size: var(--t-xl); font-weight: 500; text-transform: uppercase; letter-spacing: -.03em; line-height: 1; }
.krow .ages { margin-top: .5em; font-weight: 500; color: var(--gold-800); }
.krow .d { margin-top: var(--s-xs); color: #2E2E2E; max-width: 38em; }
/* 18 Oct: the leader as a portrait, matching Ministries: the photo large, the name Medium, the role Light */
.lead-ng { display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 1fr); gap: var(--s-m); align-items: end; margin-top: var(--s-l); padding-top: var(--s-m); border-top: 1px solid var(--border); max-width: 44em; }
.lead-ng figure { aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; }
.lead-ng img { width: 100%; height: 100%; object-fit: cover; }
.lead-ng .name { font-size: var(--t-l); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.lead-ng .role { color: var(--muted, #3F3F3F); font-size: var(--t-base); font-weight: 400; }
.youth2 .side p.t-big { color: #C9CDD1; }
.camp2 { position: relative; min-height: min(70svh, 720px); display: grid; align-items: end; color: var(--white); overflow: hidden; isolation: isolate; }
.camp2 > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.camp2::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 16, 19, 0) 30%, rgba(14, 16, 19, .86)); }
.camp2 .txt { display: grid; gap: var(--s-s); justify-items: start; padding-block: var(--s-xl); max-width: 36em; }
.camp2 .txt p { color: var(--white); text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }
@media (max-width: 1024px) { .ng-intro .inner { width: var(--shell); grid-template-columns: 1fr; } .krow { grid-template-columns: 1fr; } }
.kgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); border-top: 1px solid var(--border); padding-top: var(--s-m); }
.kgrid .krow { display: grid; grid-template-columns: 1fr; gap: var(--s-xs); align-content: start; padding: 0; border: 0; }
.kgrid .krow figure { aspect-ratio: 4 / 5; }
.kgrid .krow h3 { font-size: var(--t-l); }
.kgrid .krow .d { font-size: var(--t-small); margin-top: 0; }
.campline { margin-top: var(--s-l); padding-top: var(--s-s); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xs) var(--s-s); color: #3F3F3F; }
.campline b { font-weight: 500; color: #121212; }
@media (max-width: 1024px) { .kgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .kgrid { grid-template-columns: 1fr; } }
/* 18 Oct round 2: six rooms as photo cards, two rows of three; the age on a gold chip, the words rise on hover */
.kcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); list-style: none; padding: 0; margin: var(--s-l) 0 0; }
.kcard { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-panel); overflow: hidden; isolation: isolate; color: var(--white); }
.kcard figure { position: absolute; inset: 0; margin: 0; z-index: -2; }
.kcard figure img, .kcard figure video { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease); }
.kcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 16, 19, .15) 0%, rgba(14, 16, 19, 0) 30%, rgba(14, 16, 19, .55) 58%, rgba(14, 16, 19, .94)); transition: background 600ms var(--ease); }
.kcard .kc { position: absolute; inset: auto 0 0; padding: var(--s-m); display: grid; gap: .5em; transform: translateY(calc(100% - 9.5em)); transition: transform 700ms var(--ease); }
.kcard .age { justify-self: start; padding: .35em .8em; border-radius: var(--r-control); background: #B89356; color: var(--ink); font-size: var(--t-xsmall); font-weight: 500; }
.kcard h3 { font-size: clamp(30px, 3vw, 60px); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; line-height: .95; }
.kcard .when { display: inline-flex; align-items: center; gap: .5em; font-size: var(--t-small); color: rgba(255, 255, 255, .92); }
.kcard .when svg { width: 1.1em; height: 1.1em; color: var(--gold-300); }
.kcard .d { font-size: var(--t-small); color: var(--white); opacity: 0; transition: opacity 500ms var(--ease) 100ms; }
.kcard:hover .kc, .kcard:focus-within .kc { transform: none; }
.kcard:hover .d, .kcard:focus-within .d { opacity: 1; }
.kcard:hover figure img { transform: scale(1.06); }
@media (hover: none), (max-width: 1024px) { .kcard .kc { transform: none; } .kcard .d { opacity: 1; } .kcard { aspect-ratio: 3 / 4; } }
@media (max-width: 1024px) { .kcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .kcards { grid-template-columns: 1fr; } }
.ng-intro .side2 { display: grid; gap: var(--s-m); }
.lead-ng { grid-template-columns: clamp(110px, 8vw, 150px) minmax(0, 1fr) !important; margin-top: 0 !important; max-width: none !important; }
.lead-ng .studio { position: relative; aspect-ratio: 4 / 5; margin: 0; border-radius: var(--r-panel); overflow: hidden; isolation: isolate; display: grid; align-items: end; justify-items: center;
  background-color: #DCDCDC; background-image: var(--tex-light), radial-gradient(ellipse 80% 70% at 50% 34%, #F6F6F6 0%, #E4E4E4 42%, #C9C9C9 85%, #BDBDBD 100%); background-size: 256px, 100% 100%; background-blend-mode: multiply, normal; }
.lead-ng .studio .watermark { width: 120%; left: -10%; top: 4%; color: rgba(255, 255, 255, .5); z-index: 0; }
.lead-ng .studio img { position: relative; z-index: 1; width: 96%; height: 94%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 18px 22px rgba(18, 18, 18, .22)); }
/* 19 Oct round 3: the intro balances: one centred statement, then check-in and the leader side by side at equal weight */
.ng-intro .inner { width: var(--shell) !important; grid-template-columns: 1fr 1fr !important; column-gap: var(--s-xl) !important; row-gap: var(--s-l) !important; align-items: center !important; }
.ng-intro .intro-line { grid-column: 1 / -1; justify-self: center; text-align: center; max-width: 24em; color: var(--ink); }
.ng-intro .side2 { display: contents; }
.ng-intro .checkin2 { align-self: center; padding: var(--s-m) var(--s-m) var(--s-m) var(--s-s); }
.ng-intro .checkin2 b { font-size: var(--t-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-800); }
.ng-intro .checkin2 p { font-size: var(--t-big); color: #2E2E2E; }
.ng-intro .lead-ng { border-top: 0 !important; padding-top: 0 !important; }
@media (max-width: 1024px) { .ng-intro .inner { grid-template-columns: 1fr !important; } }