/* Wedding and event venues DRAFT, section 2b: "five documents" (2 October 2026, owner-approved concept).
   Each of the five changes is shown through a document a venue coordinator already works with (the venue's web page,
   its estate plan, a function sheet, a regional map, the venue's year); the document is the illustration, it is
   interactive the way that document naturally is, and its shape decides the block's layout. Every sample belongs to
   one fictional venue, Hollowfield Estate (our demo venue), and is labelled illustrative.
   This file is the shell and the shared kit: the green panel, the tokens, the type, the paper card and its parts.
   Each block has its own file (world-venue-doc1.css, world-venue-doc2.css, ...). Rule of voice: the venue speaks serif
   (Libre Caslon, Hollowfield's faces), Superstrate speaks sans (DM Sans, the site's face).
   Contrast: ink #1e2922 on the ground #8fa58b 6.4:1; ink on paper #f6f1e6 15.3:1; --dc-ink-3 #56625a on paper 6.0:1;
   --dc-gold-ink #7a5a0a on paper 5.9:1. Paper text is never placed straight on the green below 18.7px bold. */
@font-face{font-family:"Libre Caslon Display";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/libre-caslon-display-400.woff2") format("woff2")}
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/libre-caslon-text-400.woff2") format("woff2")}
@font-face{font-family:"Libre Caslon Text";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/libre-caslon-text-400-italic.woff2") format("woff2")}

.venue-page .vd-docs{
 --dc-ground:#8fa58b;      /* gum leaf: the section's one ground */
 --dc-plate:#4a6350;       /* deeper eucalyptus, for the map block later */
 --dc-paper:#f6f1e6;       /* paper: documents and cards */
 --dc-paper-2:#ede5d3;     /* deeper paper: insets, fields */
 --dc-ink:#1e2922;         /* ink: all text on paper and on the green */
 --dc-ink-2:#34413a;       /* secondary ink */
 --dc-ink-3:#56625a;       /* muted ink on paper (labels, meta) */
 --dc-line:rgba(30,41,34,.14);
 --dc-line-2:rgba(30,41,34,.26);
 --dc-gold:#ffd24a;        /* fill gold: the one accent (markers, filled pins, primary buttons) */
 --dc-gold-ink:#7a5a0a;    /* gold as text on paper */
 --dc-sage:#c9d5bf;        /* drawing fill */
 --dc-straw:#e6d8a6;       /* drawing fill */
 --dc-ok:#2c6a43;          /* outlined status: verified, cited, published */
 --dc-warn:#8a5300;        /* outlined status: needs input, spoof suspected */
 --dc-miss:#5f655f;        /* outlined status: absent */
 --dc-radius:16px;
 --dc-shadow:0 24px 60px rgba(30,41,34,.18),0 2px 6px rgba(30,41,34,.08);
 --dc-ease:cubic-bezier(.16,1,.3,1);
 --dc-serif:"Libre Caslon Display","Libre Caslon Text",Georgia,serif;
 --dc-serif-text:"Libre Caslon Text",Georgia,serif;
 position:relative;margin:var(--frame-inset);border-radius:var(--frame-radius);overflow:clip;
 background:var(--dc-ground);color:var(--dc-ink);
 padding-bottom:clamp(48px,6svh,80px);
}
.venue-page .vd-docs ::selection{background:var(--dc-gold);color:var(--dc-ink)}

/* A block: one change, one viewport at desktop, its own composition (set in the block's own file). */
.venue-page .vd-doc{position:relative;padding-inline:var(--vd-pad);min-height:100svh;box-sizing:border-box}
.venue-page .vd-doc ~ .vd-doc{margin-top:clamp(48px,7svh,80px)}
/* Zero-height scroll sentinels the shell puts in front of each document (its entry and exit are measured from them, never from the moving document). */
.venue-page .dc-sentinel{display:block;height:0;overflow:hidden;pointer-events:none}

/* The turn line, on the first block's screen: "five things change." on the gold marker (the stats' highlighter in
   section 2), ink on the green. */
.venue-page .dc-turn{margin:0 auto;max-width:none;font-size:clamp(32px,3.3vw,60px);line-height:1.05;font-weight:700;letter-spacing:-.04em;color:var(--dc-ink);text-align:center;text-wrap:balance}
/* "change." is split into letters by the shell for its one flip (the delight); each letter turns on its own axis. */
.venue-page .dc-flip-word{display:inline-block;white-space:nowrap}
.venue-page .dc-flip{display:inline-block;backface-visibility:visible;will-change:auto}
.venue-page .dc-turn-key{white-space:nowrap;text-decoration:underline;text-decoration-color:var(--dc-gold);text-decoration-thickness:.38em;text-underline-offset:-.22em;text-decoration-skip-ink:none}

/* A change's own copy: a hairline numeral, the title, the paragraph. */
.venue-page .dc-num{display:block;margin:0 0 14px;font-size:13px;line-height:1;font-weight:600;letter-spacing:.14em;font-variant-numeric:tabular-nums;color:var(--dc-ink-2)}
.venue-page .dc-num::after{content:"";display:inline-block;width:42px;height:1px;margin-left:12px;vertical-align:middle;background:currentColor;opacity:.45}
.venue-page .dc-title{margin:0;font-size:clamp(32px,3.1vw,56px);line-height:1.04;font-weight:700;letter-spacing:-.036em;color:var(--dc-ink);text-wrap:balance}
.venue-page .dc-copy{margin:20px 0 0;max-width:44ch;font-size:clamp(17px,1.3vw,21px);line-height:1.55;color:var(--dc-ink)}

/* The paper card: every Superstrate sample lives on one. Record-style header line, one focal value, outlined pills. */
.venue-page .dc-card{position:relative;box-sizing:border-box;border-radius:var(--dc-radius);background:var(--dc-paper);color:var(--dc-ink);
 border:1px solid rgba(30,41,34,.1);box-shadow:var(--dc-shadow);font-size:14.5px;line-height:1.45}
.venue-page .dc-card-pad{padding:16px 18px 18px}
.venue-page .dc-record{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--dc-line);
 font-size:12.5px;line-height:1.3;font-weight:500;color:var(--dc-ink-3)}
.venue-page .dc-record b{font-weight:700;color:var(--dc-ink)}
.venue-page .dc-record i{font-style:normal;opacity:.6}

.venue-page .dc-label{font-size:12px;line-height:1.3;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dc-ink-3)}

/* Outlined status pills (never pastel blobs). */
.venue-page .dc-pill{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 9px;border-radius:999px;border:1.25px solid currentColor;
 font-size:12px;line-height:1;font-weight:700;letter-spacing:.04em;white-space:nowrap;color:var(--dc-ink-2);background:transparent}
.venue-page .dc-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.venue-page .dc-pill--ok{color:var(--dc-ok)}
.venue-page .dc-pill--warn{color:var(--dc-warn)}
.venue-page .dc-pill--miss{color:var(--dc-miss)}
.venue-page .dc-pill--gold{color:var(--dc-gold-ink)}
.venue-page .dc-pill--gold::before{background:var(--dc-gold);box-shadow:0 0 0 1px var(--dc-gold-ink)}

/* Controls inside samples. Chips are toggles (aria-pressed); buttons act. */
.venue-page .dc-chip{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 13px;border-radius:999px;border:1px solid var(--dc-line-2);background:var(--dc-paper);
 font:inherit;font-size:13.5px;font-weight:500;line-height:1.2;color:var(--dc-ink);text-align:left;cursor:pointer;transition:background-color .2s,border-color .2s,box-shadow .2s}
.venue-page .dc-chip:hover{border-color:var(--dc-ink-2)}
.venue-page .dc-chip[aria-pressed="true"]{background:var(--dc-ink);border-color:var(--dc-ink);color:var(--dc-paper)}
.venue-page .dc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:7px 15px;border-radius:8px;border:1px solid var(--dc-ink);
 font:inherit;font-size:13.5px;font-weight:600;line-height:1.2;color:var(--dc-ink);background:transparent;cursor:pointer;transition:background-color .2s,transform .15s}
.venue-page .dc-btn--primary{background:var(--dc-gold);border-color:var(--dc-ink)}
.venue-page .dc-btn--primary:hover{background:#ffdc6e}
.venue-page .dc-btn:active{transform:scale(.97)}
.venue-page :is(.dc-chip,.dc-btn):focus-visible{outline:2px solid var(--dc-ink);outline-offset:3px}

/* The one "Illustrative sample" stamp per block: a small outlined label in the block's own corner. */
.venue-page .dc-stamp{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:6px;border:1px dashed var(--dc-line-2);background:rgba(246,241,230,.72);
 font-size:12px;line-height:1.25;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dc-ink-2)}
.venue-page .dc-stamp::before{content:"";width:7px;height:7px;background:var(--dc-gold);box-shadow:0 0 0 1px var(--dc-ink-2)}

/* The venue's own voice (diegetic material inside documents only). */
.venue-page .dc-serif{font-family:var(--dc-serif);font-weight:400;letter-spacing:-.01em}
.venue-page .dc-serif-text{font-family:var(--dc-serif-text);font-weight:400}

/* The invitation to the live demo, at the end of the section: the demo's homepage in a window, and one call. */
.venue-page .dc-demo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:clamp(28px,3.4vw,64px);
 margin:clamp(56px,8svh,96px) var(--vd-pad) 0;padding:clamp(22px,2.2vw,34px);border-radius:22px;background:var(--dc-paper);color:var(--dc-ink);box-shadow:var(--dc-shadow)}
.venue-page .dc-demo-shot{position:relative;display:block;overflow:hidden;border-radius:12px;border:1px solid var(--dc-line-2);background:#1c2420;
 box-shadow:0 18px 40px -18px rgba(30,41,34,.45);transition:transform .5s var(--dc-ease),box-shadow .5s var(--dc-ease)}
.venue-page .dc-demo-shot img{display:block;width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover;object-position:top}
.venue-page .dc-demo-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--dc-paper-2);border-bottom:1px solid var(--dc-line);font-size:12px;color:var(--dc-ink-3)}
.venue-page .dc-demo-bar i{width:8px;height:8px;border-radius:50%;background:rgba(30,41,34,.2)}
.venue-page .dc-demo-bar span{margin-left:10px;padding:2px 10px;border-radius:999px;background:var(--dc-paper)}
@media (hover:hover){.venue-page .dc-demo:hover .dc-demo-shot{transform:translateY(-4px);box-shadow:0 28px 52px -20px rgba(30,41,34,.5)}}
.venue-page .dc-demo-title{margin:0;max-width:18ch;font-size:clamp(26px,2.2vw,38px);line-height:1.08;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.venue-page .dc-demo-copy{margin:14px 0 0;max-width:34ch;font-size:clamp(16px,1.12vw,18px);line-height:1.55;color:var(--dc-ink-2)}
.venue-page .dc-demo-action{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:24px 0 0}
.venue-page .dc-demo-btn{min-height:46px;padding:11px 18px;font-size:15px;text-decoration:none}
.venue-page .dc-demo-note{font-size:13px;color:var(--dc-ink-3)}

/* The demo card stacks on tablets and phones: the demo's window first, then the call, full width on phones. */
@media (max-width:900px){
 .venue-page .dc-demo{grid-template-columns:1fr;gap:24px}
 .venue-page .dc-demo-title{max-width:22ch}
}
@media (max-width:600px){
 .venue-page .dc-demo{padding:16px 16px 22px;border-radius:18px;gap:20px}
 .venue-page .dc-demo-title{font-size:26px}
 .venue-page .dc-demo-copy{font-size:17px}
 .venue-page .dc-demo-btn{width:100%}
 .venue-page .dc-demo-note{width:100%;text-align:center}
}

/* Smaller screens: each block adapts in its own file (world-venue-doc1 to 5.css). */
@media (max-width:1100px){.venue-page .vd-doc{min-height:0;padding-block:48px}}
@media (prefers-reduced-motion:reduce){.venue-page .vd-docs *{transition:none!important;animation:none!important}}