/* Venue draft, "five documents", block 04 "See where your interest comes from": a regional map (2 October 2026).
   The section's one deeper moment: a rounded eucalyptus plate (--dc-plate) inset in the green panel, holding the region
   in the estate plan's hand, inked in paper. Superstrate's sample sits on it in sans: gold lights, the sources, what
   they searched, the website checks.
   Layout at 1524x718 (content box about 1375px; plate 646px tall, 36px of green above and below):
     the copy card, 30vw (about 457px), over the western ranges, vertically centred (about 583px tall);
     the map cell between it and the side column (about 512px): the chart box, 400 x 600 map units, meets the cell at
       a scale of about 1.0 (height-bound), and the world is drawn on past its edges (overflow visible) under the cards
       to the plate's rounded edge, which clips it;
     the side column, 21vw (320px; 304px floor) in the Tasman Sea: the sources card at 92px from the top of the screen
       (clear of the fixed Menu pill), what they searched under it, the website checks pinned to the plate's foot.
   Kept clear: the top-right 90px (the Menu pill) and the bottom 60px corners (Pause, back to top); the checks card's
   controls sit well above its foot.
   Below 1280px the copy card goes above the plate (title beside the paragraph from 880px); from 880 to 1279 the plate
   keeps map | side; from 601 to 879 it stacks sources / map / searched + checks. Phones (600px and below): one column,
   the plate gives way to the map window alone (cropped to the Hunter, 360 x 500 units) with its own label set and
   Sydney as an off-map note; 44px targets, body 16px and up, UI text 14px and up.
   The map's colours are classes on the SVG: k1 / k2 / k3 paper strokes (weight and opacity are attributes), fw the sea
   and lake fill, fp / fk paper fills, tc / ti / td / t2 / tw / ts type (spaced caps, italic, display, dimmer, region
   caps, and a sea-toned halo for labels on the water). Labels knock the lines out with a halo in the ground's own tone
   (paint-order: stroke), never a blur.
   Contrast: paper #f6f1e6 on the plate #4a6350 5.9:1; the dimmer labels (paper at .88) 5.0:1; gold #ffd24a on the
   plate 4.6:1 (graphics); card text as the kit's.
   Hidden starting states are never set here: the entrance's are inline styles set by world/venue-docs-4.js only when
   it plays, so without JavaScript the block is complete. */

.venue-page .vd-doc4{
 --dc4-gap:clamp(24px,5svh,40px);
 --dc4-pad:clamp(18px,1.5vw,26px);
 --dc4-copy-w:clamp(360px,30vw,540px);
 --dc4-side-w:clamp(304px,21vw,340px);
 --dc4-sea:#435a49;          /* the sea and the lakes: the plate, a shade deeper */
 --dc4-paper-dim:rgba(246,241,230,.88);
 display:grid;grid-template-columns:minmax(0,1fr);align-content:center;padding-block:var(--dc4-gap);
}
.venue-page .vd-doc4 [hidden]{display:none!important}

/* ------------------------------------------------------------------ the copy card (over the western ranges) */
.venue-page .vd-doc4 .dc4-copy{grid-area:1 / 1;z-index:2;align-self:center;justify-self:start;box-sizing:border-box;
 width:var(--dc4-copy-w);margin:var(--dc4-pad);padding:clamp(24px,2.1vw,36px)}
.venue-page .vd-doc4 .dc4-copy .dc-copy{max-width:44ch}
.venue-page .vd-doc4 .dc4-stamp{margin:22px 0 0;max-width:none}

/* ------------------------------------------------------------------ the plate */
.venue-page .vd-doc4 .dc4-plate{grid-area:1 / 1;z-index:1;position:relative;box-sizing:border-box;display:grid;
 grid-template-columns:var(--dc4-copy-w) minmax(0,1fr) var(--dc4-side-w);
 grid-template-rows:auto auto minmax(0,1fr) auto;
 grid-template-areas:". map sources" ". map searched" ". map ." ". map checks";
 column-gap:20px;row-gap:12px;padding:var(--dc4-pad);
 min-height:min(calc(100svh - 2 * var(--dc4-gap)),840px);
 border-radius:20px;background:var(--dc-plate);overflow:clip}
/* The map's neatline: a double hairline just inside the plate, over the drawing, under the cards. */
.venue-page .vd-doc4 .dc4-plate::before,.venue-page .vd-doc4 .dc4-plate::after{content:"";position:absolute;z-index:1;pointer-events:none;box-sizing:border-box}
.venue-page .vd-doc4 .dc4-plate::before{inset:9px;border:1px solid rgba(246,241,230,.3);border-radius:12px}
.venue-page .vd-doc4 .dc4-plate::after{inset:14px;border:.75px solid rgba(246,241,230,.15);border-radius:8px}

/* The side column, in the sea. The sources card starts 92px from the top of the screen at least (the Menu pill). */
.venue-page .vd-doc4 .dc4-sources{grid-area:sources;z-index:2;margin-top:max(0px,calc(92px - max(var(--dc4-gap),(100svh - 840px) / 2) - var(--dc4-pad)))}
.venue-page .vd-doc4 .dc4-searched{grid-area:searched;z-index:2}
.venue-page .vd-doc4 .dc4-checks{grid-area:checks;z-index:2}

/* ------------------------------------------------------------------ the map */
/* The cell is a size container; the chart box (the map's 400 x 600 units) meets it, centred, and the drawing runs on
   past the box on every side (the world), so the plate shows map from edge to edge. */
.venue-page .vd-doc4 .dc4-map{grid-area:map;position:relative;margin:0;min-width:0;min-height:0;container-type:size}
.venue-page .vd-doc4 .dc4-chart{position:absolute;left:50%;top:50%;width:min(100cqw,100cqh * 2 / 3);aspect-ratio:2 / 3;translate:-50% -50%}
.venue-page .vd-doc4 .dc4-svg{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none;
 fill:none;stroke-linecap:round;stroke-linejoin:round}
.venue-page .vd-doc4 .dc4-svg :is(.k1,.k2,.k3){stroke:var(--dc-paper)}
.venue-page .vd-doc4 .dc4-svg .fw{fill:var(--dc4-sea)}
.venue-page .vd-doc4 .dc4-svg :is(.fp,.fk){fill:var(--dc-paper)}
.venue-page .vd-doc4 .dc4-svg .dc4-case{stroke:var(--dc-plate)}
.venue-page .vd-doc4 .dc4-svg .dc4-vines{stroke:var(--dc-paper);stroke-width:1.5;opacity:.5}
.venue-page .vd-doc4 .dc4-svg .dc4-dots{stroke:var(--dc-paper);stroke-width:3.6}
.venue-page .vd-doc4 .dc4-svg text{font-family:var(--dc-serif-text);font-weight:400;fill:var(--dc-paper);
 stroke:var(--dc-plate);stroke-width:3.2px;stroke-linejoin:round;paint-order:stroke fill}
.venue-page .vd-doc4 .dc4-svg .ti{font-style:italic}
.venue-page .vd-doc4 .dc4-svg .td{font-family:var(--dc-serif)}
.venue-page .vd-doc4 .dc4-svg :is(.t2,.tw){fill:var(--dc4-paper-dim)}
.venue-page .vd-doc4 .dc4-svg .ts{stroke:var(--dc4-sea)}
.venue-page .vd-doc4 .dc4-svg .dc4-words--phone{display:none}
/* Hollowfield: its mark on a paper medallion. */
.venue-page .vd-doc4 .dc4-svg .dc4-home-ring{stroke:var(--dc-paper);stroke-width:.8;opacity:.7}
.venue-page .vd-doc4 .dc4-svg .dc4-mark{stroke:var(--dc-ink);stroke-width:2.6;fill:none}
.venue-page .vd-doc4 .dc4-svg .dc4-home-in{transform:scale(var(--dc4-k,1))}
.venue-page .vd-doc4 .dc4-svg .dc4-rose-in{transform:rotate(var(--dc4-rot,0deg))}

/* The lights: crisp gold dots with fine rings; a cluster's scale is its weight (--s, set inline: its area follows the
   weight). Rings keep a 1px line at any scale. The ripple ring runs once, on arrival and when a cluster grows. */
.venue-page .vd-doc4 .dc4-svg .dc4-glow{transform:scale(var(--s,1));transition:transform .9s var(--dc-ease)}
.venue-page .vd-doc4 .dc4-svg .dc4-on{transform:scale(var(--dc4-on,1))}
.venue-page .vd-doc4 .dc4-svg .d{fill:var(--dc-gold);stroke:var(--dc-plate);stroke-width:.7}
.venue-page .vd-doc4 .dc4-svg .dc4-ring{stroke:var(--dc-gold);stroke-width:1px;opacity:.42;vector-effect:non-scaling-stroke}
.venue-page .vd-doc4 .dc4-svg .dc4-ring--in{opacity:.78}
.venue-page .vd-doc4 .dc4-svg .dc4-ripple{stroke:var(--dc-gold);stroke-width:1.25px;opacity:0;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}
.venue-page .vd-doc4 .dc4-svg .dc4-ripple.is-on{animation:dc4-ripple 1.25s var(--dc-ease) 1}
@keyframes dc4-ripple{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(1.95)}}

/* A light's button: a 44px target on its cluster (placed in % of the chart box, so it tracks the map), and its note:
   the place and its share in the chosen source. Hover or focus shows the note; a press pins it (touch); Escape hides
   it. Notes open above, or below near the top edge (.dc4-light--low). */
.venue-page .vd-doc4 .dc4-light{position:absolute;z-index:1;left:var(--x);top:var(--y);width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;
 border:0;border-radius:50%;background:transparent;color:var(--dc-ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.venue-page .vd-doc4 .dc4-light:focus-visible{outline:2px solid var(--dc-paper);outline-offset:-4px}
.venue-page .vd-doc4 :is(.dc4-light,.dc4-away):is(:hover,:focus-visible,.is-open){z-index:3}
.venue-page .vd-doc4 .dc4-tip{position:absolute;left:50%;bottom:calc(100% - 2px);z-index:3;display:grid;gap:1px;width:max-content;max-width:220px;padding:7px 11px 8px;
 border-radius:8px;border:1px solid rgba(30,41,34,.12);background:var(--dc-paper);color:var(--dc-ink);box-shadow:0 10px 24px rgba(20,28,23,.34);
 font:inherit;font-size:13px;line-height:1.3;font-weight:500;letter-spacing:0;text-align:left;text-transform:none;font-style:normal;white-space:nowrap;
 opacity:0;pointer-events:none;transform:translate(-50%,4px);transition:opacity .18s,transform .18s var(--dc-ease)}
.venue-page .vd-doc4 .dc4-tip b{font-weight:700}
.venue-page .vd-doc4 .dc4-tip [data-dc4-level]{color:var(--dc-ink-3)}
.venue-page .vd-doc4 .dc4-light--low .dc4-tip{bottom:auto;top:calc(100% - 2px);transform:translate(-50%,-4px)}
.venue-page .vd-doc4 :is(.dc4-light,.dc4-away):is(:hover,:focus-visible,.is-open) .dc4-tip{opacity:1;transform:translate(-50%,0)}
.venue-page .vd-doc4 :is(.dc4-light,.dc4-away).is-quiet .dc4-tip{opacity:0}

/* Sydney, off the map (phones only): a note at the window's foot, its light weighted like the others. */
.venue-page .vd-doc4 .dc4-away{display:none;position:absolute;left:12px;bottom:12px;z-index:2;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 16px 0 10px;
 border-radius:999px;border:1px solid rgba(246,241,230,.4);background:rgba(67,90,73,.94);color:var(--dc-paper);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.venue-page .vd-doc4 .dc4-away:focus-visible{outline:2px solid var(--dc-paper);outline-offset:3px}
.venue-page .vd-doc4 .dc4-away-dot{position:relative;flex:none;width:22px;height:22px}
.venue-page .vd-doc4 .dc4-away-dot::before,.venue-page .vd-doc4 .dc4-away-dot::after{content:"";position:absolute;inset:0;border-radius:50%;transform:scale(var(--s,1));transition:transform .9s var(--dc-ease)}
.venue-page .vd-doc4 .dc4-away-dot::before{border:1px solid rgba(255,210,74,.7)}
.venue-page .vd-doc4 .dc4-away-dot::after{inset:6px;background:var(--dc-gold)}
.venue-page .vd-doc4 .dc4-away-arrow{font-size:16px;line-height:1}
.venue-page .vd-doc4 .dc4-away-name{font-size:14px;line-height:1;letter-spacing:.14em;text-transform:uppercase}
.venue-page .vd-doc4 .dc4-away-note{font-size:14px;line-height:1;font-style:italic;color:var(--dc4-paper-dim)}
.venue-page .vd-doc4 .dc4-away .dc4-tip{left:0;transform:translate(0,4px)}
.venue-page .vd-doc4 .dc4-away:is(:hover,:focus-visible,.is-open) .dc4-tip{transform:none}

/* ------------------------------------------------------------------ the cards */
.venue-page .vd-doc4 .dc-record{max-width:none}
.venue-page .vd-doc4 .dc-record i{background:none}
.venue-page .vd-doc4 :is(.dc4-chips,.dc4-runs){display:flex;flex-wrap:wrap;gap:6px}
.venue-page .vd-doc4 .dc4-kind{opacity:.72}
.venue-page .vd-doc4 .dc4-for{display:none;font-weight:500}
.venue-page .vd-doc4 .dc4-for i{margin-right:6px}
.venue-page .vd-doc4 .dc4-terms{display:grid;gap:8px;margin:0;padding:0;max-width:none;list-style:none}
.venue-page .vd-doc4 .dc4-terms li{display:flex;align-items:center;gap:10px;margin:0;padding:0;font-size:14.5px;line-height:1.4;color:var(--dc-ink)}
.venue-page .vd-doc4 .dc4-q{display:block;flex:none;width:14px;height:14px;fill:none;stroke:var(--dc-ink-3);stroke-width:1.6;stroke-linecap:round}
.venue-page .vd-doc4 .dc4-run{gap:7px;padding-inline:11px}
.venue-page .vd-doc4 .dc4-dot{flex:none;width:7px;height:7px;border-radius:50%}
.venue-page .vd-doc4 .dc4-dot--warn{background:var(--dc-warn)}
.venue-page .vd-doc4 .dc4-dot--ok{background:var(--dc-ok)}
.venue-page .vd-doc4 .dc4-run[aria-pressed="true"] .dc4-dot{outline:1.5px solid var(--dc-paper);outline-offset:0}
.venue-page .vd-doc4 .dc4-finding{margin:12px 0 0;max-width:none;font-size:15px;line-height:1.3;font-weight:600;color:var(--dc-ink)}
.venue-page .vd-doc4 .dc4-result{display:flex;align-items:flex-start;gap:10px;margin:8px 0 0;max-width:none}
.venue-page .vd-doc4 .dc4-result .dc-pill{flex:none}
.venue-page .vd-doc4 .dc4-note{padding-top:3px;font-size:13.5px;line-height:1.35;color:var(--dc-ink-3);text-wrap:pretty}
.venue-page .vd-doc4 .dc-pill.is-flip{animation:dc4-flip .5s var(--dc-ease) 1}
@keyframes dc4-flip{0%{transform:scale(.86);opacity:.2}100%{transform:none;opacity:1}}

/* Pause (and any time motion is off): the module sets data-dc4-still and nothing in the block moves. Reduced motion is
   covered by the kit's own rule. */
.venue-page .vd-doc4[data-dc4-still] *,.venue-page .vd-doc4[data-dc4-still] *::before,.venue-page .vd-doc4[data-dc4-still] *::after{transition:none!important;animation:none!important}

/* Touch screens: 44px targets wherever the layout is. */
@media (pointer:coarse){.venue-page .vd-doc4 .dc-chip{min-height:44px;padding-block:8px}}

/* ------------------------------------------------------------------ below the desktop layout */
@media (max-width:1279px){
 .venue-page .vd-doc4{min-height:0;padding-block:48px;row-gap:16px;align-content:start}
 .venue-page .vd-doc4 .dc4-copy{grid-area:auto;width:auto;margin:0;align-self:auto;justify-self:stretch}
 .venue-page .vd-doc4 .dc4-plate{grid-area:auto;min-height:600px;padding:18px;column-gap:20px;row-gap:12px;
  grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"map sources" "map searched" "map ." "map checks"}
 .venue-page .vd-doc4 .dc4-sources{margin-top:0}
 .venue-page .vd-doc4 .dc4-for{display:inline}
}
/* The copy card: the title beside the paragraph while there is room. */
@media (min-width:880px) and (max-width:1279px){
 .venue-page .vd-doc4 .dc4-copy{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:auto 1fr auto;column-gap:32px;
  grid-template-areas:"num copy" "title copy" ". stamp"}
 .venue-page .vd-doc4 .dc4-copy .dc-num{grid-area:num}
 .venue-page .vd-doc4 .dc4-copy .dc-title{grid-area:title;align-self:start}
 .venue-page .vd-doc4 .dc4-copy .dc-copy{grid-area:copy;margin:0}
 .venue-page .vd-doc4 .dc4-copy .dc4-stamp{grid-area:stamp;justify-self:start}
}
/* Narrow tablets: the sources above the map, the two cards below it (side by side from 720px). */
@media (min-width:601px) and (max-width:879px){
 .venue-page .vd-doc4 .dc4-plate{min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px;row-gap:14px;
  grid-template-rows:auto auto auto;grid-template-areas:"sources sources" "map map" "searched checks"}
 .venue-page .vd-doc4 .dc4-map{height:clamp(540px,80vw,640px)}
 .venue-page .vd-doc4 :is(.dc4-searched,.dc4-checks){align-self:start}
}
@media (min-width:601px) and (max-width:719px){
 .venue-page .vd-doc4 .dc4-plate{grid-template-columns:minmax(0,1fr);grid-template-areas:"sources" "map" "searched" "checks"}
}

/* ------------------------------------------------------------------ phones */
/* One column on the green: copy, sources, the map window, what they searched, the checks. The plate gives way to the
   window alone, cropped to the Hunter (units 30 to 390 across, 0 to 500 down), with its own, larger labels. */
@media (max-width:600px){
 .venue-page .vd-doc4{padding-block:40px}
 .venue-page .vd-doc4 .dc4-copy{padding:22px}
 .venue-page .vd-doc4 .dc4-plate{display:contents}
 .venue-page .vd-doc4 .dc4-plate::before,.venue-page .vd-doc4 .dc4-plate::after{content:none}
 .venue-page .vd-doc4 :is(.dc4-sources,.dc4-searched,.dc4-checks){grid-area:auto;margin:0}
 .venue-page .vd-doc4 .dc4-map{grid-area:auto;height:auto;aspect-ratio:360 / 500;container-type:normal;overflow:clip;border-radius:16px;background:var(--dc-plate)}
 .venue-page .vd-doc4 .dc4-map::before,.venue-page .vd-doc4 .dc4-map::after{content:"";position:absolute;z-index:1;pointer-events:none;box-sizing:border-box}
 .venue-page .vd-doc4 .dc4-map::before{inset:8px;border:1px solid rgba(246,241,230,.3);border-radius:10px}
 .venue-page .vd-doc4 .dc4-map::after{inset:12px;border:.75px solid rgba(246,241,230,.15);border-radius:7px}
 .venue-page .vd-doc4 .dc4-chart{left:calc(-30 / 360 * 100%);top:0;width:calc(400 / 360 * 100%);translate:none}
 .venue-page .vd-doc4 .dc4-svg .dc4-words--wide{display:none}
 .venue-page .vd-doc4 .dc4-svg .dc4-words--phone{display:inline}
 .venue-page .vd-doc4 .dc4-light{z-index:2}
 .venue-page .vd-doc4 .dc4-light--sydney{display:none}
 .venue-page .vd-doc4 .dc4-away{display:flex}
 .venue-page .vd-doc4 .dc4-tip{font-size:14px}
 /* touch sizes: chips and toggles 44px, record and UI text 14px and up, the terms 16px */
 .venue-page .vd-doc4 .dc-chip{min-height:44px;padding:8px 16px;font-size:14.5px}
 .venue-page .vd-doc4 .dc4-run{padding-inline:14px}
 .venue-page .vd-doc4 :is(.dc4-chips,.dc4-runs){gap:8px}
 .venue-page .vd-doc4 .dc-record{font-size:14px}
 .venue-page .vd-doc4 .dc4-terms{gap:10px}
 .venue-page .vd-doc4 .dc4-terms li{font-size:16px}
 .venue-page .vd-doc4 .dc4-q{width:15px;height:15px}
 .venue-page .vd-doc4 .dc4-finding{font-size:16.5px}
 .venue-page .vd-doc4 .dc4-result .dc-pill{min-height:28px;font-size:13.5px}
 .venue-page .vd-doc4 .dc4-note{font-size:14.5px;padding-top:4px}
}
