/* ==================== public homepage — GCNY Marketing design ====================
   A copy of the Wix landing page GCNY built for Veyora (Oct 2026), rendered by
   pages_home.js. Everything is scoped to `.vx`, which only the homepage
   renders, plus the `hm-nav--hero` header variant it asks editorialHeader()
   for. Colours are the brand guide's (BrandyHQ "veyora-r"): Ignition Orange
   #ed6e2a on black; the Wix page uses pure black, not Command Black, and so
   does this one.

   The Wix page is a fixed 1920px canvas that clips on narrower screens. This
   one keeps its proportions on a wide screen and reflows, centred, below it.

   Type is the brand font (store.css: 'Veyora Brand', the stand-in for the
   guide's Chromatic Pro), as on every other page and in the admin: its wide
   cut for headings, normal width for text. Inter stays only for Cyrillic.
   Self-hosted, SIL OFL 1.1; licence notice: assets/fonts/FONTS.md. */

.vx{
  --vx-orange:#ed6e2a;
  --vx-orange-hover:#f2864c;
  --vx-gutter:clamp(16px,5vw,96px);
  --vx-display:var(--brand-font);
  --vx-text:var(--brand-font);
  /* Sam: the wide (125%) cut and heavy weights read as aggressive and out of
     proportion. The homepage sets its headings at the font's normal width and
     a lighter weight, for a quieter, classic look. */
  --brand-wide:100%;
  background:#000;color:#fff;font-family:var(--vx-text);overflow-x:clip
}
.vx p{margin:0}
.vx h1,.vx h2,.vx h3{margin:0;overflow-wrap:break-word}
.vx figure{margin:0}
.vx-orange{color:var(--vx-orange)}

/* ---------- header: white wordmark centred on black (the hero variant; the
   compact dark header every other page uses is in brand-frame.css) ---------- */
/* body.hm-dark .hm-nav (store.css) paints the light canvas; this outranks it. */
body.hm-dark .hm-nav.hm-nav--hero{position:relative;background:#000;border-bottom:0}
.hm-nav--hero .hm-nav-in{max-width:1760px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding:clamp(18px,1.6vw,24px) var(--vx-gutter) 0}
.hm-nav--hero .hm-nav-logo{grid-column:2}
.hm-nav--hero .hm-nav-logo img{height:auto;width:clamp(170px,24.5vw,470px)}
.hm-nav--hero .hm-nav-end{grid-column:3;justify-self:end}

/* ---------- shared controls ---------- */
.vx-pill{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 34px;border-radius:0;background:transparent;border:1px solid rgba(255,255,255,.7);color:#fff;font-family:var(--vx-text);font-size:14px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;text-align:center;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.vx-pill:hover,.vx-pill:active{background:var(--vx-orange);border-color:var(--vx-orange);color:#fff}
.vx-pill:focus-visible{outline:2px solid #fff;outline-offset:3px}
.vx-pill--line{background:transparent;border-color:#fff;min-height:44px;font-size:16px}
.vx-pill--line:hover{background:#fff;color:#000}
.vx-h-inter{font-family:var(--vx-display);font-stretch:var(--brand-wide);font-weight:600;letter-spacing:-.02em;line-height:1.04;text-transform:uppercase}
.vx-h-syne{font-family:var(--vx-display);font-stretch:var(--brand-wide);font-weight:600;letter-spacing:-.02em;line-height:1.1;text-transform:uppercase}

/* ---------- 1. hero ---------- */
.vx-hero{max-width:1760px;margin:0 auto;padding:clamp(28px,3.4vw,64px) var(--vx-gutter) 0;text-align:center}
.vx-hero-title{font-family:var(--vx-display);font-stretch:var(--brand-wide);font-weight:600;font-size:clamp(34px,5.4vw,92px);line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.vx-hero-row{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;max-width:1532px;margin:clamp(24px,2.4vw,40px) auto 0;text-align:start}
.vx-hero-lead{flex:0 1 900px;font-family:var(--vx-text);font-weight:400;font-size:clamp(16px,1.05vw,20px);line-height:1.5;letter-spacing:0}
.vx-hero-row .vx-pill{flex:0 0 auto}
.vx-hero-img{display:block;width:100%;max-width:1532px;aspect-ratio:1532/341;object-fit:cover;margin:clamp(32px,3.4vw,64px) auto 0}

/* ---------- 2. premium frames ---------- */
.vx-mission{max-width:1600px;margin:0 auto;padding:clamp(72px,8.4vw,160px) var(--vx-gutter) 0;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:clamp(24px,4vw,64px);align-items:start}
.vx-mission-v{display:block;width:clamp(110px,13vw,254px);height:auto}
.vx-mission-copy h2{font-size:clamp(32px,2.95vw,56px)}
.vx-mission-copy p{max-width:880px;margin-top:clamp(28px,3.8vw,72px);font-size:clamp(16px,.95vw,18px);line-height:1.5}

/* ---------- 3. collections + video ---------- */
.vx-collect{max-width:1640px;margin:0 auto;padding:clamp(72px,6.6vw,120px) var(--vx-gutter) 0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,8vw,240px);align-items:center}
.vx-collect-media{aspect-ratio:866/598;overflow:hidden;background:#111}
.vx-collect-media video{display:block;width:100%;height:100%;object-fit:cover}
.vx-collect-copy{max-width:420px}
.vx-collect-copy p{font-size:clamp(16px,.95vw,18px);font-weight:400;line-height:1.7}
.vx-collect-copy .vx-pill{margin-top:clamp(28px,2.4vw,44px)}

/* ---------- 4. the Veyora Framework ---------- */
.vx-frame{max-width:1600px;margin:0 auto;padding:clamp(80px,7.4vw,140px) var(--vx-gutter) clamp(72px,7vw,130px)}
.vx-frame-title{font-size:clamp(34px,4.45vw,85px);line-height:1}
.vx-frame-sub{max-width:640px;margin-top:clamp(16px,1.2vw,24px) !important;font-size:16px;line-height:1.6}
.vx-pillars{list-style:none;margin:clamp(48px,4.8vw,90px) 0 0;padding:0}
.vx-pillar{display:grid;grid-template-columns:minmax(0,600fr) minmax(0,560fr) minmax(0,340fr);align-items:start}
.vx-pillar-no{font-family:var(--vx-display);font-stretch:var(--brand-wide);font-weight:600;font-size:clamp(34px,2.95vw,56px);letter-spacing:-.02em;line-height:1;padding-top:clamp(34px,2.6vw,48px)}
.vx-pillar-text{border-top:1px solid rgba(255,255,255,.9);padding:clamp(22px,1.5vw,28px) 12px clamp(24px,1.6vw,30px)}
.vx-pillar-text h3{font-family:var(--vx-display);font-stretch:var(--brand-wide);font-weight:600;font-size:clamp(26px,2.3vw,44px);line-height:1;letter-spacing:-.02em}
.vx-pillar-text p{margin-top:clamp(14px,1.1vw,20px);font-size:16px;line-height:1.5}

/* ---------- 5. driven by craft + brands (white) ---------- */
.vx-craft{background:#fff;color:#000;padding:clamp(64px,4.7vw,90px) var(--vx-gutter) clamp(80px,9vw,170px)}
.vx-craft-head{max-width:1760px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:32px clamp(32px,6vw,120px);align-items:start}
.vx-craft-head h2{font-size:clamp(30px,3.35vw,64px)}
.vx-craft-story p{max-width:560px;font-size:clamp(16px,.95vw,18px);line-height:1.5}
.vx-craft-story .vx-craft-heritage{max-width:none;margin-top:clamp(40px,4.4vw,84px);color:var(--vx-orange);font-size:16px;font-weight:700;text-align:end;text-wrap:balance}
.vx-brands{list-style:none;margin:clamp(64px,6.8vw,130px) auto 0;padding:0;max-width:1000px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,3.2vw,60px) clamp(16px,2vw,40px)}
.vx-brand{display:flex;flex-direction:column;align-items:center;text-align:center}
.vx-brand img{display:block;width:100%;max-width:250px;height:clamp(80px,6.2vw,118px);object-fit:contain}
.vx-brand p{max-width:300px;margin-top:clamp(16px,1.6vw,30px);font-size:clamp(14px,.85vw,16px);line-height:1.5}

/* ---------- 6. gallery ---------- */
.vx-gallery{display:flex;justify-content:center;align-items:flex-end;gap:clamp(20px,11.8vw,227px);padding:clamp(56px,6.6vw,126px) var(--vx-gutter) clamp(72px,7vw,140px);
  background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.94) 30%,#000 50%),url('../assets/home/gcny/gallery-bg.webp') center bottom/cover no-repeat #000}
.vx-gallery figure{flex:0 1 auto;overflow:hidden}
.vx-gallery img{display:block;width:100%;height:100%;object-fit:cover}
.vx-gallery-a{width:clamp(140px,20vw,387px);aspect-ratio:387/418}
.vx-gallery-b{width:clamp(132px,19vw,366px);aspect-ratio:366/424}
.vx-gallery-b img{object-position:58% 50%}

/* ---------- 6b. Vision Expo moments ---------- */
/* Sam: the photo must not fill the screen. Copy and photo share one row,
   so the whole proof (line, shows, team) reads at a glance on a laptop. */
.vx-shows{max-width:1532px;margin:0 auto;padding:clamp(72px,7.4vw,140px) var(--vx-gutter) 0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,96px);align-items:center}
.vx-shows-kicker{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--vx-orange)}
.vx-shows .vx-shows-title,.vx-world .vx-shows-title{margin-top:12px;font-family:var(--vx-display);font-weight:500;font-size:clamp(28px,2.6vw,48px);line-height:1.08;letter-spacing:-.01em}
.vx-fairs{list-style:none;margin:clamp(28px,2.8vw,48px) 0 0;padding:0;border-bottom:1px solid rgba(255,255,255,.22)}
.vx-fair{display:grid;grid-template-columns:clamp(110px,10vw,150px) minmax(0,1fr);grid-template-rows:auto auto;column-gap:clamp(20px,2vw,36px);align-items:center;border-top:1px solid rgba(255,255,255,.22);padding:clamp(16px,1.4vw,24px) 0}
.vx-fair-logo{grid-row:1/3;width:100%;height:clamp(40px,3.4vw,56px);object-fit:contain;object-position:left center}
.vx-fair-logo--mono{filter:brightness(0) invert(1)}
.vx-fair-when{font-family:var(--vx-display);font-weight:500;font-size:clamp(18px,1.5vw,26px);line-height:1.1;letter-spacing:-.005em}
.vx-fair-where{margin-top:6px!important;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.vx-world{max-width:1532px;margin:0 auto;padding:clamp(72px,7.4vw,140px) var(--vx-gutter) 0}
/* The network artwork carries its own pins and labels (no overlay). */
.vx-world-art{display:block;margin-top:clamp(28px,3vw,52px)}
.vx-world-art img{display:block;width:100%;height:auto}
.vx-fair-logo--round{height:clamp(48px,4vw,64px)}
.vx-world-key{list-style:none;margin:clamp(24px,2.4vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.22)}
.vx-world-key li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:baseline;padding:clamp(18px,1.6vw,26px) clamp(12px,1.6vw,28px) 0 0}
.vx-world-key li+li{border-inline-start:1px solid rgba(255,255,255,.22);padding-inline-start:clamp(16px,1.8vw,32px)}
.vx-key{grid-row:1/3;display:inline-block;width:10px;height:10px;border-radius:50%}
.vx-key--wh{background:var(--vx-orange);border-radius:0;transform:rotate(45deg)}
.vx-key--fair{border:2px solid var(--vx-orange)}
.vx-key--market{background:#fff}
.vx-key-t{font-family:var(--vx-display);font-weight:500;font-size:clamp(17px,1.4vw,24px);line-height:1.15}
.vx-key-d{margin-top:8px!important;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);line-height:1.6}
.vx-shows-photo{margin:0;overflow:hidden;background:#111;aspect-ratio:16/10}
.vx-shows-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- 7. sell more / connect ---------- */
.vx-connect{max-width:1760px;margin:0 auto;padding:clamp(56px,4vw,80px) var(--vx-gutter) clamp(24px,2vw,40px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,563px);gap:48px clamp(32px,6vw,120px);align-items:start}
.vx-sell{width:min-content;max-width:100%;font-family:var(--vx-display);font-stretch:var(--brand-wide);font-weight:600;font-size:clamp(44px,4.7vw,90px);line-height:1.1;letter-spacing:-.02em;text-transform:uppercase}
.vx-connect-kicker{font-family:var(--vx-display);font-stretch:var(--brand-wide);font-weight:600;font-size:18px;letter-spacing:.05em;text-transform:uppercase;color:var(--vx-orange)}
.vx-connect-title{margin-top:6px !important;font-family:var(--vx-display);font-stretch:var(--brand-wide);font-weight:600;font-size:clamp(24px,1.72vw,33px);line-height:1.33;text-transform:uppercase}
.vx-connect-body{max-width:460px;margin-top:clamp(24px,2.4vw,44px) !important;font-size:14px;line-height:1.5}
.vx-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;margin-top:clamp(40px,3.6vw,70px)}
.vx-field{display:flex;flex-direction:column;gap:8px;font-size:16px}
.vx-field--wide{grid-column:1/-1}
.vx-field input{height:44px;padding:0;background:transparent;border:0;border-bottom:1px solid #fff;border-radius:0;color:#fff;font:inherit;font-size:16px}
.vx-field input:focus{outline:none;border-bottom-color:var(--vx-orange);box-shadow:0 1px 0 var(--vx-orange)}
.vx-field input:user-invalid{border-bottom-color:var(--vx-orange)}
.vx-check{display:flex;align-items:center;gap:12px;min-height:44px;font-size:16px;cursor:pointer}
.vx-check input{appearance:none;flex:0 0 auto;width:16px;height:16px;margin:0;border:1px solid #fff;background:transparent;cursor:pointer;display:grid;place-content:center}
.vx-check input:checked{background:var(--vx-orange);border-color:var(--vx-orange)}
.vx-check input:checked::after{content:'';width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.vx-check input:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vx-connect-mark{grid-column:2;justify-self:end;width:clamp(170px,22vw,425px);height:auto;margin-top:clamp(40px,6vw,120px)}

/* The footer is black on every page (brand-frame.css); here it continues the
   black canvas, so its top line is a quiet hairline instead of the orange. */
.vx .site-foot{border-top:1px solid rgba(255,255,255,.14)}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  /* Two columns leave the closing headline ~140px here, so it stacks first. */
  .vx-connect{grid-template-columns:minmax(0,1fr)}
  .vx-connect-mark{grid-column:1}
  .vx-pillar{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .vx-craft-head{grid-template-columns:minmax(0,1fr)}
  .vx-craft-story p{max-width:720px}
  .vx-brands{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
}

/* ---------- phone ---------- */
@media (max-width:760px){
  .hm-nav--hero .hm-nav-in{grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:10px}
  .hm-nav--hero .hm-nav-logo,.hm-nav--hero .hm-nav-end{grid-column:1;justify-self:center}
  .vx-hero-title{font-size:clamp(30px,10.4vw,64px)}
  .vx-frame-title{font-size:clamp(28px,10vw,85px)}
  .vx-hero-row{flex-direction:column;align-items:stretch}
  .vx-pill{min-height:48px;font-size:13px}
  .vx-hero-row .vx-pill{align-self:center}
  .vx-hero-lead{flex-basis:auto}
  .vx-hero-img{aspect-ratio:4/3}
  .vx-mission{grid-template-columns:minmax(0,1fr)}
  .vx-mission-v{width:96px}
  .vx-collect{grid-template-columns:minmax(0,1fr)}
  .vx-collect-copy{max-width:none}
  .vx-pillar{grid-template-columns:56px minmax(0,1fr)}
  .vx-pillar-no{font-size:30px;padding-top:28px}
  .vx-brands{gap:40px 16px}
  .vx-connect{grid-template-columns:minmax(0,1fr)}
  .vx-craft-head h2{font-size:clamp(20px,6.2vw,30px)}
  .vx-connect-mark{grid-column:1}
  /* Solid black over the top: the backdrop's own "FRAMING" lettering otherwise
     peeks out above the photos at phone width. */
  .vx-gallery{gap:16px;background-image:linear-gradient(to bottom,#000 0,#000 55%,rgba(0,0,0,.8)),url('../assets/home/gcny/gallery-bg.webp')}
  .vx-gallery-a{width:48%}
  .vx-gallery-b{width:46%}
  .vx-shows{grid-template-columns:minmax(0,1fr)}
  .vx-world-key{grid-template-columns:minmax(0,1fr)}
  .vx-world-key li+li{border-inline-start:0;padding-inline-start:0;border-top:1px solid rgba(255,255,255,.22);margin-top:18px}
}
@media (max-width:420px){
  /* Long single words (Handwerkskunst, Продавайте, complicaciones) must fit
     a 320px screen whole. */
  .vx-sell{font-size:clamp(32px,11vw,44px)}
  .vx-mission-copy h2{font-size:clamp(24px,8vw,32px)}
  .vx-pillar-text h3{font-size:clamp(20px,6.6vw,26px)}
  .vx-form{grid-template-columns:minmax(0,1fr)}
  .vx-form .vx-field{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .vx-pill{transition:none}
}