/* Creator Network · page-scoped styles (loaded after pages.css). Every selector starts with .page-creator-network.
   Tokens only, sharp corners, no shadows. Revamp 2026-10-14 (docs/REVAMP-PLAN.md §5): hero H, the gallery rise (the page's
   signature moment: five photographs drifting up at five speeds, js/pages/creator-network.js), the collage held still,
   the community split and the destinations rail on the crest navy with clean edges, the creative process hairline. */

/* ───────────── hero · the .vhero family (REVAMP-PLAN §2), treatment H: words on the white page, the gallery under them ───────────── */
.page-creator-network .vhero { position: relative; isolation: isolate; overflow: clip; background-color: var(--page); color: var(--text-2); }
.page-creator-network .vhero__inner { display: grid; justify-items: center; gap: var(--space-head); text-align: center;
  padding: calc(var(--nav-h) + clamp(2.75rem, 1.5rem + 3.5vw, 5rem)) var(--margin) clamp(2.5rem, 1.5rem + 2.6vw, 4rem); }
.page-creator-network .vhero__head, .page-creator-network .vhero__aside { display: grid; justify-items: center; }
.page-creator-network .vhero__head { gap: 1.1rem; }
.page-creator-network .vhero__aside { gap: var(--space-head); }
.page-creator-network .vhero__crest { width: 2.25rem; height: calc(2.25rem * 1210 / 1092); color: var(--gold); }
.page-creator-network .vhero__label { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-1); }
.page-creator-network .vhero__title { max-width: 18ch; margin-top: 0.15rem; font-size: clamp(2.6rem, 1.5rem + 3.4vw, 5rem); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; }
@media (max-width: 767px) { .page-creator-network .vhero__title { font-weight: 400; } }
.page-creator-network .vhero__lede { max-width: 46ch; font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.page-creator-network .vhero__action { justify-self: center; margin-top: calc(var(--space-action) - var(--space-head)); }

/* the gallery: five photographs of different heights in a staggered row (widths 1 : 1.15 : 1.45 : 1.15 : 1), the middle one
   highest; the row runs a little wider than the screen, so the outer two are cut by its edges (they leave the frame
   first). The script lifts each at its own speed. The frame clips the picture; the figure carries the drift */
.page-creator-network .vhero__gallery { display: grid; grid-template-columns: 1fr 1.15fr 1.45fr 1.15fr 1fr; column-gap: var(--col-gap); align-items: start;
  width: calc(100% + 8vw); margin-inline: -4vw; padding-bottom: clamp(2rem, 1rem + 2.5vw, 3.5rem); }
.page-creator-network .vhero__shot { display: flex; flex-direction: column; margin: 0; }
/* each photograph keeps its subject's name from the collage, as the collage's captions do */
.page-creator-network .vhero__caption { margin-top: 0.75rem; font-size: var(--fs-small); line-height: 1.5; color: var(--text-3); animation: vhero-rise 1000ms cubic-bezier(0, 0, 0.2, 1) 900ms both; }
.page-creator-network .vhero__shot--1 .vhero__caption { text-align: right; } /* the row runs past the screen's left edge */
.page-creator-network .vhero__frame { position: relative; overflow: hidden; aspect-ratio: var(--ar, 4 / 5); background-color: var(--raised); }
.page-creator-network .vhero__pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); filter: saturate(0.9); }
.page-creator-network .vhero__shot--1 { --ar: 2 / 3; margin-top: clamp(3.5rem, 1rem + 6vw, 7.5rem); }
.page-creator-network .vhero__shot--2 { --ar: 3 / 4; margin-top: clamp(1.25rem, 0.5rem + 2vw, 2.75rem); }
.page-creator-network .vhero__shot--3 { --ar: 4 / 5; }
.page-creator-network .vhero__shot--4 { --ar: 4 / 5; margin-top: clamp(2.5rem, 1rem + 4vw, 5.5rem); }
.page-creator-network .vhero__shot--5 { --ar: 2 / 3; margin-top: clamp(4.5rem, 1.5rem + 8vw, 9.5rem); }
.page-creator-network [data-slot="creator-network/hero-1"] { --focus: 30% 50%; }
.page-creator-network [data-slot="creator-network/hero-3"] { --focus: 50% 50%; }
.page-creator-network [data-slot="creator-network/hero-5"] { --focus: 50% 60%; }
.page-creator-network .vhero.is-drifting .vhero__shot { will-change: transform; }
/* phones (mobile parity pass, 2026-10-15): the desktop row in miniature. The middle three (hotel, marina, networking) in a
   staggered row a little wider than the screen, the marina highest, the outer two cut by the screen's edges as the
   desktop's outer pair are, so they drift up at three speeds while the hero leaves (js/pages/creator-network.js). Five
   across would leave the drone and the nature photographs as slivers, so they stay off phones. The cut photographs'
   captions keep to the part on screen */
@media (max-width: 767px) {
  .page-creator-network .vhero__gallery { grid-template-columns: 1.15fr 1.45fr 1.15fr; column-gap: 12px; width: calc(100% + 20vw); margin-inline: -10vw; }
  .page-creator-network .vhero__shot--1, .page-creator-network .vhero__shot--5 { display: none; }
  .page-creator-network .vhero__shot--2 .vhero__caption { padding-left: 10vw; text-align: right; }
  .page-creator-network .vhero__shot--4 .vhero__caption { padding-right: 10vw; }
}
/* the arrival (CSS, first paint): the words rise in turn, then the photographs, left to right from the middle, each picture
   settling inside its frame */
.page-creator-network .vhero__crest, .page-creator-network .vhero__label, .page-creator-network .vhero__title, .page-creator-network .vhero__lede, .page-creator-network .vhero__action, .page-creator-network .vhero__frame { animation: vhero-rise 1000ms cubic-bezier(0, 0, 0.2, 1) both; }
.page-creator-network .vhero__crest { animation-delay: 60ms; } .page-creator-network .vhero__label { animation-delay: 160ms; } .page-creator-network .vhero__title { animation-delay: 280ms; }
.page-creator-network .vhero__lede { animation-delay: 460ms; } .page-creator-network .vhero__action { animation-delay: 600ms; }
.page-creator-network .vhero__frame { animation-duration: 1300ms; }
.page-creator-network .vhero__shot--3 .vhero__frame { animation-delay: 520ms; }
.page-creator-network .vhero__shot--2 .vhero__frame, .page-creator-network .vhero__shot--4 .vhero__frame { animation-delay: 640ms; }
.page-creator-network .vhero__shot--1 .vhero__frame, .page-creator-network .vhero__shot--5 .vhero__frame { animation-delay: 760ms; }
.page-creator-network .vhero__pic { animation: vhero-settle 2600ms var(--ease-out) 400ms both; }
@keyframes vhero-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes vhero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .page-creator-network .vhero__crest, .page-creator-network .vhero__label, .page-creator-network .vhero__title, .page-creator-network .vhero__lede, .page-creator-network .vhero__action, .page-creator-network .vhero__frame, .page-creator-network .vhero__pic, .page-creator-network .vhero__caption { animation: none; }
}
/* the first section after the hero opens a little below the gallery: the space the photographs leave as they rise is the
   rest of the air */
.page-creator-network .vhero + .section { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

/* ───────────── navy sections · clean hard edges, their own air (REVAMP-PLAN §3.2, until the shared rule exists) ───────────── */
.page-creator-network .section[data-tone="dark"], .page-creator-network .section + .section[data-tone="dark"], .page-creator-network .section[data-tone="dark"] + .section { padding-block: clamp(5rem, 3rem + 6vw, 9rem); }

/* 2 · why join: the sentence on the left, held while the five lines pass on the right; each line a gold icon beside it */
.page-creator-network .cn-why__intro { margin-bottom: 1rem; font-size: var(--fs-small); line-height: 1.6; color: var(--text-3); }
.page-creator-network .cn-why__list { grid-template-columns: minmax(0, 1fr); }
.page-creator-network .cn-why__list .index__item { align-items: center; padding: 1.4rem 0; }
.page-creator-network .cn-why__list .index__item:last-child { border-bottom: 1px solid var(--line-2); }
.page-creator-network .cn-why__list .index__icon { grid-row: auto; }
@media (min-width: 992px) {
  .page-creator-network .cn-why__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .page-creator-network .cn-why__head { grid-column: 1 / span 5; margin-bottom: 0; position: sticky; top: calc(var(--nav-h) + 2rem); }
  .page-creator-network .cn-why__body { grid-column: 7 / -1; padding-top: 0.6rem; }
  .page-creator-network .cn-why__list .index__item { padding: 1.75rem 0; }
}

/* 3 · who we're looking for: a crest rule opens it (the pause between two white sections, the same air either side), then
   the icon above each role, two to a row on phones, four from 992px */
.page-creator-network .cn-rule { margin-bottom: var(--section); }
.page-creator-network .cn-who__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-creator-network .cn-who__list .index__item { grid-template-columns: minmax(0, 1fr); row-gap: 1.1rem; padding: 1.5rem 0 2.25rem; }
.page-creator-network .cn-who__list .index__item > :not(.index__icon) { grid-column: auto; }
.page-creator-network .cn-who__list .index__icon { grid-row: auto; width: 36px; height: 36px; }
@media (min-width: 992px) {
  .page-creator-network .cn-who__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-creator-network .cn-who__list .index__item { row-gap: 1.6rem; padding: 2rem 1rem 3rem 0; }
}

/* 4 · what you'll create: the shared six-photograph editorial grid (pages.css), its photographs rising once as they arrive */
.page-creator-network [data-slot="creator-network/create-culinary"] { --focus: 50% 62%; }
.page-creator-network [data-slot="creator-network/create-architecture"] { --focus: 50% 40%; }
.page-creator-network [data-slot="creator-network/create-sunset"] { --focus: 50% 55%; }
.page-creator-network [data-slot="creator-network/create-waterfront"] { --focus: 38% 50%; }

/* 5 · creator experiences: a scroll film chapter (.sfilm, css/scroll-film.css), title only, so after the title lifts away
   the film plays on alone. The film ends full screen and meets the navy community section with a clean edge, as the
   photograph did (Josh, 2026-10-15). The two models stand top left and the photographer near the centre, so the title at
   the foot on the left falls on the hull under the veil */
.page-creator-network .cn-film { --focus: 50% 50%; }

/* 6 · community on the crest navy: the existing "Ideal creators include" list under the sentence, one column of hairlines */
.page-creator-network .cn-ideal__title { margin-top: var(--space-action); font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.page-creator-network .cn-ideal__list { grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
.page-creator-network .cn-ideal__list .index__item { padding: 0.95rem 0 1.05rem; }
.page-creator-network .cn-ideal__list .index__item:last-child { border-bottom: 1px solid var(--line-2); }

/* 7 · creator benefits: white plates with a hairline edge as icon cards. Phones: rows, the icon beside the words; from
   640px cards, the icon at the top and the title at the foot; three to a row from 992px */
.page-creator-network .cn-benefits__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--col-gap); }
.page-creator-network .cn-benefit { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem; border: 1px solid var(--line); background-color: var(--card); }
.page-creator-network .cn-benefit__icon { flex: none; width: 32px; height: 32px; color: var(--accent); }
.page-creator-network .cn-benefit__title { font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.25; letter-spacing: -0.005em; color: var(--text-1); text-wrap: balance; }
@media (min-width: 640px) {
  .page-creator-network .cn-benefits__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-creator-network .cn-benefit { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 3rem; min-height: 13.5rem; padding: clamp(1.5rem, 2.6vw, 2.5rem); }
  .page-creator-network .cn-benefit__title { font-size: var(--fs-subtitle); }
}
@media (min-width: 992px) {
  .page-creator-network .cn-benefits__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-creator-network .cn-benefit { min-height: 15.5rem; }
  .page-creator-network .cn-benefit__title { font-weight: 300; }
}

/* 8 · destinations: the homepage rail on the crest navy; the names at the lede size under the photographs */
.page-creator-network .cn-destinations .rail__name { margin-top: 8px; font-size: var(--fs-lede); font-weight: 400; line-height: 1.3; }

/* 9 · the creative process: titles only ("very clean"), at subtitle size, under a centred head */
.page-creator-network .cn-process .process__title { font-size: var(--fs-subtitle); line-height: 1.15; }
@media (min-width: 992px) { .page-creator-network .cn-process .process__title { font-weight: 300; } }

/* 10 · closing band: the villa holds the right of the frame at 4:3 and 3:2 */
.page-creator-network [data-slot="creator-network/closing"] { --focus: 74% 50%; }

/* the application: after the closing band it opens at --space-open (pages.css); the existing page's three steps as a
   numbered list in the intro column, one column at every width */
.page-creator-network .cn-apply__steps { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-head); }
.page-creator-network .cn-apply__steps .index__item { padding: 1.1rem 0 1.5rem; }
.page-creator-network .cn-apply__steps .index__line { max-width: 40ch; }
.page-creator-network .cn-apply .form-block__facts { margin-top: var(--space-action); }
/* two fields side by side keep their inputs level when only one of them has a hint underneath */
.page-creator-network .cn-apply .field { align-content: start; }
/* between 992 and 1199px the card is too narrow for two fields a row */
@media (min-width: 992px) and (max-width: 1199px) { .page-creator-network .cn-apply .form__row { grid-template-columns: minmax(0, 1fr); } }