/* Wedding and event venues: industries/wedding-event-venues.html (the owner's v3 copy). Built as a draft beside the earlier
   page from 30 September 2026 and made the page itself on 2 October 2026 (owner). Loaded after world-interior.css; every
   rule is scoped to body.venue-page.

   This file owns the hero (a reel of the owner's event footage, world/venue-reel.js), section 2 (the changes and their
   sources), section 3 (feature by feature, on Headline Gold) and the close. Section 2b, "five documents", has its own
   files: world-venue-docs.css (the shell and kit) and world-venue-doc1.css to doc5.css (one per document).

   Motion states are gated on html.vd-motion (set by world/venue.js only when motion is allowed): without JavaScript,
   under reduced motion and in print everything is at rest and complete. */
.venue-page{
 --vd-gold:#ffd64e;
 --vd-signal:#ffd700;
 --vd-ink:#1c1b1f;
 --vd-muted:#45473f;
 --vd-cream:#f9f6f0;
 --vd-ease:cubic-bezier(.16,1,.3,1);
 --vd-gap:24px;
 --vd-pad:max(calc(var(--wi-gutter) - var(--frame-inset)),calc((100% - var(--wi-max)) / 2),20px);
 background:#fff;
}
.venue-page .vd-main{position:relative}
.venue-page ::selection{background:var(--vd-signal);color:var(--vd-ink)}

/* Text stays above the grounds' grain layers (section 2's ::before). */
.venue-page :is(.vd-changes-intro,.vd-features-intro,.vd-group-head,.vd-table,.vd-features-close,.vd-close-grid){position:relative;z-index:6}

/* ----------------------------------------------------------- the hero */
.venue-page .vd-hero{
 isolation:auto;
 justify-content:center;
 min-height:calc(100svh - 2 * var(--frame-inset));
 padding-block:calc(var(--wi-header) - var(--frame-inset) + 12px) clamp(40px,6vh,64px);
}
.venue-page .vd-hero-grid{
 display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--vd-gap);align-items:center;
 padding-inline:var(--vd-pad);
}
.venue-page .vd-hero-copy{grid-column:1 / 7;padding-right:clamp(0px,1.4vw,28px)}
.venue-page .vd-sector{margin:0 0 clamp(16px,1.6vw,26px);font-size:clamp(15px,1.05vw,18px);line-height:1.35;letter-spacing:-.005em;color:var(--vd-gold)}
.venue-page .vd-sector strong{font-weight:700}
.venue-page .vd-hero .vd-h1{
 margin:0 0 clamp(18px,1.7vw,30px);max-width:none;
 font-size:clamp(40px,3.9vw,74px);line-height:1.03;letter-spacing:-.045em;text-wrap:balance;color:#fff;
}
.venue-page .vd-hero-lead{margin:0;max-width:34em;font-size:clamp(17px,1.2vw,21px);line-height:1.55;color:rgba(255,255,255,.8)}
.venue-page .vd-hero-action{margin:clamp(24px,2.2vw,38px) 0 0}
.venue-page .vd-demo{min-height:48px;font-size:15px;font-weight:500;gap:28px;padding:14px 22px}
.venue-page .vd-hero .vd-demo:focus-visible,.venue-page .vd-close .vd-demo:focus-visible{outline:2px solid var(--vd-signal);outline-offset:5px}

/* The reel (1 October 2026, owners): event footage fills the hero (world/venue-reel.js) behind the copy, with a light white
   grain over it (the "veil"), the type straight on it and no card. The footage keeps its subject in the middle, so the copy
   keeps to the lower corners. The reel's own Pause video pill sits at the bottom right. */
.venue-page .vd-hero--reel{position:relative;overflow:hidden;background:#1e1e1a;min-height:calc(100svh - 2 * var(--frame-inset));padding:0}
.venue-page .vd-hero--reel > .world-noise{display:none}
.venue-page .vd-reel{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit}
.venue-page .vd-reel :is(.vd-reel-poster,.vd-reel-video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0}
.venue-page .vd-reel-video{opacity:0;transition:opacity .9s var(--vd-ease)}
.venue-page .vd-reel-video.is-on{opacity:1}
.venue-page .vd-reel-scrim{
 position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
 background:linear-gradient(rgba(12,11,9,.45),rgba(12,11,9,0) 22%),linear-gradient(to top,rgba(12,11,9,.66),rgba(12,11,9,0) 52%);
}
.venue-page .vd-hero-decor{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;overflow:hidden}
.venue-page .vd-grain{
 display:block;position:absolute;inset:0;opacity:.2;mix-blend-mode:screen;
 background:url("../imgs/superstrate-world/decor/noise.gif") repeat;background-size:220px;
}

/* The stage the copy is placed on: the hero below the header, above the Pause video pill. */
.venue-page .vd-hero--reel .vd-hero-grid{
 position:absolute;z-index:3;inset:calc(var(--wi-header) + 8px) var(--vd-pad) clamp(64px,8vh,84px);
 display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;column-gap:var(--vd-gap);padding:0;
}
.venue-page .vd-hero--reel .vd-hero-copy{display:contents}
.venue-page .vd-hero--reel .vd-sector{grid-column:1 / 9;grid-row:3;align-self:start;margin:0;font-size:clamp(14px,.95vw,17px);letter-spacing:.14em;text-transform:uppercase;color:#ffd64e}
.venue-page .vd-hero--reel .vd-h1{grid-column:1 / 9;grid-row:3;align-self:end;margin:34px 0 0;font-size:clamp(56px,5.6vw,108px);line-height:.94;letter-spacing:-.05em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.25)}
/* The paragraph: a touch heavier and larger, white, on a feathered mist (a soft darkening and blur with no edge, fading
   into the footage) so it reads over bright footage. */
.venue-page .vd-hero--reel .vd-hero-lead{
 position:relative;isolation:isolate;grid-column:9 / 13;grid-row:3;align-self:end;margin:0 0 76px;
 font-size:clamp(16px,1.05vw,18.5px);font-weight:500;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.venue-page .vd-hero--reel .vd-hero-lead::before{
 content:"";position:absolute;z-index:-1;inset:-46px -60px -40px -60px;pointer-events:none;
 background:radial-gradient(closest-side,rgba(10,9,8,.5),rgba(10,9,8,.28) 55%,rgba(10,9,8,0));
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
 -webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent);mask-image:radial-gradient(closest-side,#000 45%,transparent);
}
.venue-page .vd-hero--reel .vd-hero-action{grid-column:9 / 13;grid-row:3;align-self:end;margin:0}
/* The two calls to action side by side (owner, 3 October 2026): the yellow Request a demo, then Explore the demo site as a
   ghost button on the footage (white type and a crisp white border over a light frost), filling white on hover. */
.venue-page .vd-hero-action{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.venue-page .vd-demo-site{gap:28px}
body.venue-page .vd-hero .vd-hero-action .vd-demo-site{
 min-height:48px;font-size:15px;font-weight:500;padding:14px 22px;border-radius:3px;
 background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1.5px #fff;
 -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:0 1px 2px rgba(0,0,0,.25);
 transition:background-color .2s,color .2s,text-shadow .2s;
}
body.venue-page .vd-hero .vd-hero-action .vd-demo-site:hover{background:#fff;color:var(--vd-ink);text-shadow:none;text-decoration:none}
body.venue-page .vd-hero .vd-hero-action .vd-demo-site:focus-visible{outline:2px solid var(--vd-signal);outline-offset:5px}
/* Labels never break inside a button. On wide screens the buttons' inner gap (label to arrow) narrows a little so both fit
   one row in the paragraph's column (1524 x 718: 20px); where the column is narrower still, the second button wraps. */
.venue-page .vd-hero--reel .vd-hero-action > a{white-space:nowrap}
@media (min-width:1101px){.venue-page .vd-hero--reel .vd-hero-action > a{gap:clamp(14px,1.3vw,28px)}}

/* The reel's Pause video pill. */
.venue-page .vd-reel-toggle{
 position:absolute;right:clamp(16px,1.6vw,26px);bottom:clamp(14px,1.5vw,22px);z-index:5;
 display:inline-flex;align-items:center;gap:8px;margin:0;padding:9px 14px;border:0;border-radius:999px;
 background:rgba(16,15,13,.42);color:#fff;font:500 13px/1 var(--ff-body);cursor:pointer;
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:background-color .2s;
}
.venue-page .vd-reel-toggle:hover{background:rgba(16,15,13,.62)}
.venue-page .vd-reel-toggle:focus-visible{outline:2px solid var(--vd-signal);outline-offset:3px}
.venue-page .vd-reel-icon-play,.venue-page .is-reel-paused .vd-reel-icon-pause{display:none}
.venue-page .is-reel-paused .vd-reel-icon-play{display:block}

/* ------------------------------------------------------ section 2: changes */
/* The sunlit look (1 October 2026): warm light and the hero's moving grain (never frozen). */
.venue-page .vd-changes{
 position:relative;margin:var(--frame-inset);border-radius:var(--frame-radius);
 background:radial-gradient(60% 70% at 0% 0%,rgba(255,226,170,.35),rgba(255,226,170,0) 70%),radial-gradient(50% 60% at 100% 100%,rgba(232,178,166,.22),rgba(232,178,166,0) 70%),#faf4ea;
 padding-block:clamp(80px,6.6vw,128px) clamp(80px,7vw,128px);
}
html.vd-motion .venue-page .vd-changes::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:url("../imgs/superstrate-world/decor/noise.gif") repeat;background-size:220px;mix-blend-mode:multiply;opacity:.06}
.venue-page .vd-wrap{padding-inline:var(--vd-pad)}
.venue-page .vd-changes-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--vd-gap);align-items:end}
.venue-page .vd-h2{margin:0;font-size:clamp(34px,3.35vw,64px);line-height:1.04;letter-spacing:-.042em;text-wrap:balance}
.venue-page .vd-changes-intro .vd-h2{grid-column:1 / 6;max-width:13ch;align-self:start}
/* The proof: the page's two statistics, at body-large in full ink, the figures on the gold highlighter marker (the
   Features landing marker: a thick Headline Gold underline painted behind the glyphs; no bold, no words changed). */
.venue-page .vd-changes-stats{grid-column:6 / 13;margin:.2em 0 0;max-width:none;font-size:clamp(20px,1.5vw,26px);line-height:1.5;letter-spacing:-.008em;color:var(--vd-ink)}
.venue-page .vd-mark{text-decoration:underline;text-decoration-color:var(--vd-gold);text-decoration-thickness:.42em;text-underline-offset:-.26em;text-decoration-skip-ink:none;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* The sources sit in small type straight under the paragraph they support (owners, 1 October 2026). */
.venue-page .vd-changes-intro .vd-sources{grid-column:6 / 13;margin:18px 0 0;max-width:none;font-size:11.5px;line-height:1.5;font-style:italic;color:#5c5d55}

/* -------------------------------------------- section 3: feature by feature */
.venue-page .vd-features{
 position:relative;margin:var(--frame-inset);border-radius:var(--frame-radius);background:var(--vd-gold);color:var(--vd-ink);
 padding-block:clamp(96px,8.5vw,160px) clamp(88px,7.5vw,140px);
}
.venue-page .vd-features-intro{max-width:none}
.venue-page .vd-features-intro .vd-h2{max-width:16ch}
.venue-page .vd-features-lead{margin:clamp(16px,1.4vw,24px) 0 0;font-size:clamp(18px,1.3vw,24px);line-height:1.4;font-weight:500;color:var(--vd-ink)}
.venue-page .vd-group{
 position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--vd-gap);
 margin-top:clamp(56px,5vw,96px);padding-top:clamp(20px,1.8vw,30px);border-top:2px solid var(--vd-ink);
}
.venue-page .vd-group-head{grid-column:1 / 4;grid-row:1;align-self:start;padding-top:10px}
.venue-page .vd-group-title{margin:0;font-size:clamp(24px,1.9vw,36px);line-height:1.08;letter-spacing:-.035em}
.venue-page .vd-table{grid-column:5 / 13;grid-row:1;width:100%;border-collapse:collapse;font-size:clamp(16.5px,1.08vw,19px);line-height:1.5}
.venue-page .vd-table thead th{
 padding:0 0 10px;text-align:left;border-bottom:1px solid rgba(28,27,31,.35);
 font-size:12px;line-height:1.3;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--vd-muted);
}
.venue-page .vd-table tbody tr{border-bottom:1px solid rgba(28,27,31,.2)}
.venue-page .vd-table tbody tr:last-child{border-bottom:0}
.venue-page .vd-table tbody th{width:34%;padding:16px 28px 16px 0;text-align:left;vertical-align:top;font-weight:700}
.venue-page .vd-table td{padding:16px 0;vertical-align:top;color:#2c2b27}
.venue-page .vd-feat{
 display:inline;color:var(--vd-ink);font-size:clamp(17px,1.14vw,20px);letter-spacing:-.012em;
 text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;text-decoration-color:rgba(28,27,31,.4);
 transition:text-decoration-color .2s,text-decoration-thickness .2s;
}
.venue-page .vd-feat::after{
 content:"";display:inline-block;width:.72em;height:.72em;margin-left:.35em;vertical-align:-.02em;background:currentColor;opacity:.55;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 16 16 4M5 4h11v11'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 16 16 4M5 4h11v11'/%3E%3C/svg%3E") center/contain no-repeat;
 transition:transform .2s,opacity .2s;
}
.venue-page .vd-feat:hover{text-decoration-color:var(--vd-ink);text-decoration-thickness:2px}
.venue-page .vd-feat:hover::after{opacity:1;transform:translate(2px,-2px)}
.venue-page .vd-features :focus-visible{outline:2px solid var(--vd-ink);outline-offset:4px;border-radius:2px}
.venue-page .vd-features-close{
 margin:clamp(72px,6vw,112px) 0 0 calc((100% - 11 * var(--vd-gap)) / 12 * 4 + var(--vd-gap) * 4);
 max-width:44em;font-size:clamp(18px,1.3vw,23px);line-height:1.55;font-weight:500;
}
.venue-page .vd-inline-link{
 display:inline-flex;align-items:center;gap:.4em;font-weight:700;color:var(--vd-ink);white-space:nowrap;
 text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em;
}
.venue-page .vd-inline-link:hover{text-decoration-thickness:3px}

/* ------------------------------------------------------------- the close */
.venue-page .vd-close{
 isolation:auto;justify-content:center;min-height:0;
 padding-block:clamp(104px,9vw,176px);
}
.venue-page .vd-close-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--vd-gap);padding-inline:var(--vd-pad)}
.venue-page .vd-close-grid > *{grid-column:1 / 8}
/* The action cluster on the right. */
.venue-page .vd-close-grid > .vd-close-title{grid-row:1}
.venue-page .vd-close-grid > .vd-close-lead{grid-row:2}
.venue-page .vd-close-grid > .vd-close-actions{grid-column:9 / 13;grid-row:1 / 3;align-self:end;margin:0}
.venue-page .vd-close-grid > .vd-close-links{grid-column:9 / 13;grid-row:3}
.venue-page .vd-close .vd-close-title{margin:0;max-width:14ch;font-size:clamp(42px,4.3vw,82px);line-height:1.02;letter-spacing:-.045em;color:#fff;text-wrap:balance}
.venue-page .vd-close-lead{margin:clamp(22px,2vw,34px) 0 0;max-width:36em;font-size:clamp(17px,1.2vw,21px);line-height:1.55;color:rgba(255,255,255,.8)}
.venue-page .vd-close-actions{display:flex;flex-wrap:wrap;gap:14px 16px;margin-top:clamp(28px,2.6vw,44px)}
.venue-page .vd-close-action{margin:0}
.venue-page .vd-try{min-height:48px;font-size:15px;font-weight:500;gap:28px;padding:14px 22px}
.venue-page .vd-close .vd-try:focus-visible{outline:2px solid #f9f6f0;outline-offset:5px}
.venue-page .vd-close-links{margin:clamp(24px,2.2vw,36px) 0 0;font-size:15px;color:rgba(255,255,255,.62)}
.venue-page .vd-close-links a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:rgba(255,255,255,.45)}
.venue-page .vd-close-links a:hover{text-decoration-color:var(--vd-signal);text-decoration-thickness:2px}
.venue-page .vd-close-links a:focus-visible{outline:2px solid #f9f6f0;outline-offset:4px}

/* ------------------------------------------------------------ breakpoints */
@media (max-width:1100px){
 .venue-page{--vd-gap:20px}
 .venue-page .vd-changes-intro .vd-h2,.venue-page .vd-changes-stats{grid-column:1 / -1}
 .venue-page .vd-changes-stats{margin-top:24px}
 .venue-page .vd-group-head{grid-column:2 / -1;margin-bottom:16px}
 .venue-page .vd-table{grid-column:2 / -1;grid-row:2}
 .venue-page .vd-features-close{margin-left:0}
 .venue-page .vd-close-grid > :is(.vd-close-title,.vd-close-lead,.vd-close-actions,.vd-close-links){grid-column:1 / -1;grid-row:auto}
 .venue-page .vd-close-grid > .vd-close-actions{margin-top:28px}
}
@media (max-width:900px){
 .venue-page .vd-hero--reel .vd-hero-grid{grid-template-columns:minmax(0,1fr)}
 .venue-page .vd-hero--reel :is(.vd-hero-copy,.vd-sector,.vd-h1,.vd-hero-lead,.vd-hero-action){grid-column:1 / -1!important}
}
@media (max-width:600px){
 .venue-page .vd-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .venue-page .vd-table,.venue-page .vd-table tbody,.venue-page .vd-table tr,.venue-page .vd-table th,.venue-page .vd-table td{display:block;width:auto}
 .venue-page .vd-table tbody th{padding:16px 0 4px}
 .venue-page .vd-table td{padding:0 0 16px}
}

/* Reduced motion: the reel never attaches a video (world/venue-reel.js); its first poster is the picture. */
@media (prefers-reduced-motion:reduce){.venue-page .vd-reel-video{transition:none}}