/* Plot Photography: base. Element defaults, the container, buttons and links shared by every section.
   Ported from the BASE block of homepage/_src-v6.html (lines 22-53), with the review-only .ask style dropped.
   Section design goes in blocks/sections.css, never here. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--plot-night);color:var(--text);font-family:var(--font-text);font-size:var(--fs-body);
  line-height:var(--lh-text);font-weight:var(--wt-text);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:var(--wt-display);text-wrap:balance}
/* no widows: balance short copy, pretty-wrap long copy */
p,li,figcaption,blockquote,.btn,summary{text-wrap:pretty}
.bal{text-wrap:balance}
.wrap{max-width:calc(var(--grid-max) + 2*var(--grid-margin));margin:0 auto;padding:0 var(--grid-margin)}
.h1{font-size:var(--fs-h1);letter-spacing:var(--track-display);line-height:var(--lh-heading)}
.muted{color:var(--text-muted)}
.ground-dusk{background:var(--plot-dusk);--text-muted:#C9C2DE;--rule:#3B3552}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:var(--radius-button);
  background:var(--btn-bg);color:var(--btn-text);border:1px solid var(--btn-bg);font-family:var(--font-display);font-weight:600;font-size:17px;
  text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform var(--dur-press) var(--ease-press),background-color var(--dur-press) var(--ease-press)}
.btn:hover{transform:translateY(-1px);background:#fff;border-color:#fff}
[data-ground="bone"] .btn:hover{background:#000;border-color:#000;color:var(--plot-bone)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--text);background:transparent}
.link{font-family:var(--font-display);font-weight:600;font-size:18px;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size var(--dur-ui) var(--ease-settle)}
.link:hover{background-size:0 1px;background-position:100% 100%}
.stars{display:flex;gap:6px}
.stars svg{width:26px;height:26px;fill:var(--plot-glow)}

/* Store-bound values inside prose (<span class="price price--packages-basic">). No styling of their own:
   they read as part of the sentence. The class is what the plugin rewrites from the Prices screen. */
.price,.fact{white-space:nowrap}
/* A price that is a whole list (the travel rings: "$10 for 15 to 25 miles, ...") wraps like the sentence it is. */
.price.price--travel-rings{white-space:normal}

/* ---------- Not in the mockup: WordPress plumbing ---------- */

/* Skip link: off screen until focused. */
.skip-link{position:absolute;left:var(--grid-margin);top:-100px;z-index:100;padding:12px 18px;border-radius:var(--radius-photo);
  background:var(--plot-bone);color:var(--plot-night);font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Plain pages (privacy, terms, accessibility, 404): the fixed header overlays the top, so clear it. */
.plain{padding:calc(var(--space-2xl) + 60px) 0 var(--space-2xl)}
.plain h1{font-size:var(--fs-h1);letter-spacing:var(--track-display);line-height:var(--lh-heading);margin-bottom:var(--space-l)}
.prose{max-width:calc(var(--measure) + 2*var(--grid-margin))}
.prose p,.prose ul,.prose ol{margin:0 0 1.1em}
.prose h2{font-size:var(--fs-h3);letter-spacing:var(--track-heading);margin:1.6em 0 .6em}
/* 404: tall enough that the footer does not ride up; the one sentence in the lead size, then the button home. */
.plain.nf{min-height:min(72svh,720px)}
.plain.nf h1{margin-bottom:var(--space-m)}
.plain.nf p{font-size:var(--fs-lead);color:var(--text-muted);text-wrap:balance}
.plain.nf .nf-act{margin:var(--space-l) 0 0}
@media (max-width:760px){.plain.nf{min-height:0}}

/* ---------- Motion: the pre-paint flag (GSAP runbook; PLUGIN-FIT §4) ----------
   inc/motion.php adds html.motion-on in <head> before first paint, unless the visitor asks for
   reduced motion. Anything a view script animates IN is pre-hidden only under that class, so with
   no JavaScript, reduced motion, or a script that fails (it removes the flag), the content shows. */
.motion-on [data-motion="in"]{opacity:0}