@import url("webfonts.css");

/* ============================================================================
   Santa Cruz Passages — design system extracted from the live Wix site
   Source: https://planetweaver.wixsite.com/santa-cruz-passages
   Captured: 2026-09-01

   Every value below was read from the rendered page (computed styles), not
   guessed. Wix's own token names are preserved as `scp-font-*` / `scp-color-*`
   so the migrated markup keeps a 1:1 relationship with the original.

   The original is a fixed 980px Wix canvas; this reproduces its typography,
   colour and chrome exactly, and makes the canvas fluid below 980px so the
   result is usable on phones (the Wix original merely scales down).
   ========================================================================= */

:root {
  /* -- type stacks (Wix's CJK fallbacks dropped; both are system fonts) -- */
  --scp-serif: georgia, palatino, "book antiqua", "palatino linotype", serif;
  --scp-sans:  arial, helvetica, sans-serif;

  /* -- palette, verbatim from the Wix theme -- */
  --scp-color-0:  rgb(255, 255, 255);
  --scp-color-1:  rgb(0, 0, 0);
  --scp-color-3:  rgb(253, 254, 253);
  --scp-color-5:  rgb(0, 136, 203);   /* button blue            */
  --scp-color-6:  rgb(255, 255, 255);
  --scp-color-16: rgb(50, 50, 50);
  --scp-color-17: rgb(101, 101, 101);
  --scp-color-28: rgb(214, 134, 36);  /* home CTA amber         */
  --scp-color-31: rgb(60, 52, 30);
  --scp-color-32: rgb(121, 105, 60);
  --scp-color-36: rgb(61, 44, 42);
  --scp-color-39: rgb(185, 133, 128);
  --scp-color-42: rgb(137, 92, 60);   /* warm brown, body accent*/
  --scp-color-44: rgb(71, 44, 12);
  --scp-color-45: rgb(254, 253, 253); /* near-white body text   */
  --scp-color-46: rgb(254, 253, 253);

  --scp-canvas: 980px;                /* original Wix canvas width */
}

/* ---------------------------------------------------------------- canvas */
.scp-page {
  position: relative;
  font-family: var(--scp-serif);
  font-size: 15px;
  line-height: 1.4em;
  color: var(--scp-color-45);
  background-color: #2b2b2b;          /* shows through while the photo loads */
}
.scp-page__bg {                        /* full-bleed section photograph */
  position: absolute;
  inset: 0;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}
.scp-page__inner {
  position: relative;
  z-index: 1;
  max-width: var(--scp-canvas);
  margin: 0 auto;
  padding: 40px 20px 60px;
}

/* per-section background photographs (see media-manifest.csv) */
.scp-bg--weddings     { background-image: url("../media/wp-uploads/section-bg-weddings-beach-stones.jpg"); }
.scp-bg--spirit-songs { background-image: url("../media/wp-uploads/section-bg-spirit-songs-corrina.jpg"); }
.scp-bg--breakthrough { background-image: url("../media/wp-uploads/section-bg-breakthrough-sunlit-water.jpg"); }
.scp-bg--home         { background-image: url("../media/wp-uploads/home-01.jpg"); }

/* ------------------------------------------------------------ typography */
.scp-page p { margin: 0 0 1em; }   /* flow variant keeps normal document rhythm */

/* Each Wix font token also carries a default colour. Text that needs a
   different colour wears an additional scp-color-* class, which wins. */
.scp-font-0  { font-family: var(--scp-sans);  font-size: 30px; line-height: 1.4em; color: var(--scp-color-45); }
.scp-font-1  { font-family: var(--scp-serif); font-size: 13px; line-height: 1.4em; color: rgb(247, 178, 170); }
.scp-font-2  { font-family: var(--scp-serif); font-size: 33px; line-height: 1.4em; color: var(--scp-color-45); }
.scp-font-3  { font-family: var(--scp-serif); font-size: 40px; line-height: 1.4em; color: var(--scp-color-45); }
.scp-font-4  { font-family: var(--scp-serif); font-size: 35px; line-height: 1.4em; color: var(--scp-color-45); }
.scp-font-5  { font-family: var(--scp-sans);  font-size: 30px; line-height: 1.4em; color: var(--scp-color-45); }
.scp-font-6  { font-family: var(--scp-sans);  font-size: 21px; line-height: 1.4em; color: var(--scp-color-45); }
.scp-font-7  { font-family: var(--scp-serif); font-size: 16px; line-height: 1.4em; color: var(--scp-color-45); }
.scp-font-8  { font-family: var(--scp-serif); font-size: 15px; line-height: 1.4em; color: var(--scp-color-45); }
.scp-font-9  { font-family: var(--scp-serif); font-size: 11px; line-height: 1.4em; color: var(--scp-color-0); }
.scp-font-10 { font-family: var(--scp-sans);  font-size:  9px; line-height: 1.4em; color: var(--scp-color-45); }

.scp-color-1  { color: var(--scp-color-1); }
.scp-color-3  { color: var(--scp-color-3); }
.scp-color-5  { color: var(--scp-color-5); }
.scp-color-6  { color: var(--scp-color-6); }
.scp-color-16 { color: var(--scp-color-16); }
.scp-color-17 { color: var(--scp-color-17); }
.scp-color-28 { color: var(--scp-color-28); }
.scp-color-31 { color: var(--scp-color-31); }
.scp-color-32 { color: var(--scp-color-32); }
.scp-color-36 { color: var(--scp-color-36); }
.scp-color-39 { color: var(--scp-color-39); }
.scp-color-42 { color: var(--scp-color-42); }
.scp-color-44 { color: var(--scp-color-44); }
.scp-color-45 { color: var(--scp-color-45); }
.scp-color-46 { color: var(--scp-color-46); }

/* Wix's .bold / .italic / .underline classes are inert on the original site
   (measured: font-weight 400, font-style normal). Emphasis there comes from
   real <strong>/<em> tags and inline styles, which the markup keeps.
   Deliberately not re-implemented. */

/* Wix's align* classes are inert on the original site (they all compute to
   text-align:start); real alignment arrives as an inline style, which the
   converted markup preserves. Deliberately not re-implemented here. */

/* --------------------------------------------------------------- buttons */
.scp-button {
  display: inline-block;
  min-width: 165px;
  padding: 3px 10px;
  font-family: var(--scp-serif);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  text-decoration: none;
  color: var(--scp-color-3);
  background-color: rgba(0, 136, 203, .77);
  border: 1px solid var(--scp-color-3);
  border-radius: 0;
  margin: 0 6px 10px 0;
  transition: background-color .15s ease;
}
.scp-button:hover,
.scp-button:focus-visible { background-color: rgba(0, 136, 203, .92); color: var(--scp-color-3); }

/* the homepage splash uses the amber CTA instead of the blue one */
.scp-page--home .scp-button {
  background-color: rgba(214, 134, 36, .9);
  border: 0;
  min-width: 259px;
  padding: 7px 10px;
}
.scp-page--home .scp-button:hover { background-color: rgba(214, 134, 36, 1); }

/* ---------------------------------------------------------------- images */
.scp-image { margin: 0 0 16px; }
.scp-image img { display: block; max-width: 100%; height: auto; }
.scp-image figcaption {
  font-family: var(--scp-serif);
  font-size: 11px;
  color: var(--scp-color-45);
  padding-top: 6px;
}

.scp-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: 0 0 24px;
}
.scp-gallery__item { margin: 0; }
.scp-gallery__item img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
}

/* ----------------------------------------------------------------- rules */
.scp-rule {
  border: 0;
  border-top: 1px solid var(--scp-color-45);
  opacity: .6;
  margin: 18px 0;
}

/* ------------------------------------------------------------ form stub  */
.scp-form-placeholder {
  border: 1px dashed var(--scp-color-45);
  padding: 14px;
  font-family: var(--scp-sans);
  font-size: 12px;
  opacity: .85;
}

/* a link Wix rendered without an href — target lost, see migration-notes.md */
.scp-link-missing { text-decoration: underline dotted; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1020px) {
  .scp-page__inner { padding: 28px 16px 48px; }
}
@media (max-width: 600px) {
  .scp-page { font-size: 16px; }        /* 15px is below comfortable on phones */
  .scp-font-8 { font-size: 16px; }
  .scp-font-7 { font-size: 17px; }
  .scp-button { display: block; min-width: 0; width: 100%; margin-right: 0; }
  .scp-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ============================================================================
   FIXED-CANVAS LAYOUT  (pages only — blog posts use the flow styles above)

   Wix positions every element absolutely on a 980px canvas. These rules
   reproduce that canvas exactly, so desktop rendering is pixel-for-pixel.
   The canvas never shrinks: in a window narrower than 980px the page scrolls
   sideways and keeps its full height, exactly as the original Wix site does
   (measured at 900px and 600px: document width 980, height unchanged).
   ========================================================================= */
.scp-canvas-wrap {
  position: relative;
  width: 100%;
  min-width: 980px;                   /* narrower windows scroll, never scale */
  overflow: hidden;
  background: #2b2b2b;
  height: var(--scp-h, 1000px);       /* set inline, per page */
}
.scp-canvas-bg {
  position: absolute; inset: 0;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}
.scp-canvas {
  position: relative;
  width: 980px;
  height: var(--scp-h, auto);
  /* Centred in wide windows; in narrow ones the wrapper is min-width 980px,
     so the canvas sits at x=0 and the browser scrolls -- as on Wix. */
  margin: 0 auto;
  z-index: 1;
}
.scp-c { position: absolute; box-sizing: border-box; margin: 0; }
.scp-c--panel  { pointer-events: none; }
.scp-c--text   { font-family: var(--scp-serif); font-size: 15px; line-height: 1.4em; }
/* Wix renders every paragraph with margin:0 - vertical rhythm comes from
   deliberately empty paragraphs in the copy, which are preserved. Adding a
   margin here would push text out of its measured box. */
.scp-c--text p,
.scp-c--text h1, .scp-c--text h2, .scp-c--text h3,
.scp-c--text h4, .scp-c--text h5, .scp-c--text h6 { margin: 0; }
.scp-c--image img { display: block; }
.scp-c--btn {
  display: block; text-align: center; text-decoration: none;
  box-sizing: border-box; transition: filter .15s ease;
}
.scp-c--btn:hover { filter: brightness(1.12); }
.scp-c--line   { height: 0; }
.scp-c--gitem  { position: absolute; margin: 0; }
.scp-c--form   { display: flex; flex-direction: column; gap: 6px; font-family: var(--scp-sans); font-size: 12px; }
.scp-c--form label { display: flex; flex-direction: column; gap: 2px; color: var(--scp-color-45); }
.scp-c--form input { padding: 4px 6px; border: 1px solid rgba(0,0,0,.25); font: inherit; }
.scp-c--form button { align-self: flex-start; padding: 5px 14px; font: inherit; cursor: pointer; }

/* embedded players (YouTube / SoundCloud) */
.scp-c--embed { overflow: hidden; background: #000; }
.scp-c--embed iframe { display: block; }

/* ============================================================================
   Corrections — measured against the live site, 3 September 2026

   Four rendering defects found by comparing computed styles and rendered box
   geometry, element by element, against the original. All four are scoped to
   `.scp-canvas` / `.scp-c--*`, so the flowing `content/` variant is untouched.
   ========================================================================= */

/* 1. Headings rendered bold. The .scp-font-* classes set family, size,
      line-height and colour but never font-weight, so the browser's default
      `h1-h6 { bold }` came through. Every heading on the original computes
      400 / line-height normal (checked: all 4 that exist site-wide). Real
      emphasis still comes from <strong>/<em>/inline styles -- the same
      reasoning as note 12 about Wix's inert .bold class. */
.scp-canvas :is(h1, h2, h3, h4, h5, h6) { font-weight: 400; line-height: normal; }

/* 2. .scp-font-* bakes in line-height:1.4em, but the original only applies
      that where the markup carries it as an inline style (9 of 16 elements on
      wedding-home); elsewhere it computes `normal`. The class-level value
      inflated the rest -- one testimonial paragraph rendered 264px against the
      original's 197px. Inline line-height still wins where it is preserved. */
.scp-canvas [class*="scp-font-"] { line-height: normal; }

/* 3. Line-box strut. .scp-c--text sets 15px/1.4em, which paragraphs inherit as
      a fixed 21px. Where an inner span sets something smaller (.scp-font-9 at
      11px/15.4px) the 21px strut wins and every line box inflates: testimonial
      blocks came out 75px against the original's 58px, a 29% overrun that
      pushes text past its measured box. The original gives the paragraph a
      neutral 10px/normal strut so the inline spans always govern. Applied only
      where the paragraph carries its own sizing -- the 92 span-less
      paragraphs still need the 15px default. */
.scp-c--text p:has([class*="scp-font-"]) { font-size: 10px; line-height: normal; }

/* 4. The contact form placeholder used the sans stack at 12px. Measured on the
      original: labels Georgia 15px black, submit Georgia 16px near-white on the
      site blue. (The form still needs a real form plugin -- see note 4.) */
.scp-c--form        { font-family: var(--scp-serif); font-size: 15px; }
.scp-c--form label  { color: var(--scp-color-1); }
.scp-c--form button { font-family: var(--scp-serif); font-size: 16px;
                      color: var(--scp-color-45); background: rgba(0, 136, 203, .77);
                      border: 1px solid var(--scp-color-3); }

/* ============================================================================
   Mobile canvas — ported from the Wix mobile site, 3 September 2026

   Wix serves phones a completely separate design: a fixed 320px canvas with
   content stacked vertically and phone-sized type, not the desktop canvas
   scaled down. Both canvases ship in the page; this stylesheet picks one.

   Two departures from the original, deliberately:
     - the ~300px empty band under the Wix banner is gone (content is
       re-origined to the first real component)
     - components that Wix's auto-layout dropped on top of each other are
       separated -- on the home page the CTA buttons sat over the photographs
       and truncated
   ========================================================================= */

.scp-mcanvas-wrap { display: none; }

.scp-mcanvas-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* The mobile pages have a plain white page background -- measured on all
     four sampled pages. The desktop canvas sits on #2b2b2b because a
     full-bleed photograph covers it; mobile has no such photograph. */
  background: #fff;
  height: calc(var(--scp-mh, 1000px) * var(--scp-mscale, 1));
}
.scp-mcanvas-bg {
  position: absolute; inset: 0;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}
.scp-mcanvas {
  position: relative;
  width: 320px;
  height: var(--scp-mh, auto);
  left: 50%;
  margin-left: -160px;
  transform-origin: top center;
  transform: scale(var(--scp-mscale, 1));
  z-index: 1;
}

.scp-mc          { position: absolute; box-sizing: border-box; margin: 0; }
.scp-mc--image   { overflow: hidden; }
.scp-mc--panel   { pointer-events: none; }
.scp-mc--embed   { overflow: hidden; background: #000; }
.scp-mc--embed iframe { display: block; }
.scp-mc--btn     { display: flex; align-items: center; justify-content: center;
                   text-align: center; text-decoration: none;
                   font-family: var(--scp-serif); font-size: 13px;
                   transition: filter .15s ease; }
.scp-mc--btn:hover { filter: brightness(1.12); }
.scp-mc--text    { font-family: var(--scp-serif); }
.scp-mc--text p, .scp-mc--text h1, .scp-mc--text h2, .scp-mc--text h3,
.scp-mc--text h4, .scp-mc--text h5, .scp-mc--text h6 {
  margin: 0; font-weight: inherit; font-size: inherit;
  line-height: inherit; color: inherit;
}

/* Below the breakpoint: hide the 980px canvas, show the 320px one and scale it
   up to the viewport. Capped at 1.5 so a small tablet does not get a comically
   magnified phone layout. */
:root { --scp-mscale: 1; }
@media (max-width: 767px) {
  .scp-canvas-wrap  { display: none; }
  .scp-mcanvas-wrap { display: block; }
}
/* Stepped rather than fluid: `calc(100vw / 320)` yields a length, which cannot
   be compared against a unitless cap in min(), so the whole declaration is
   invalid and silently falls back to 1. Steps approximate viewport/320,
   capped at 1.5 so a small tablet does not get a magnified phone layout.
   Narrowest last so it wins. */
@media (max-width: 767px) { :root { --scp-mscale: 1.50; } }  /* 480..767 */
@media (max-width: 479px) { :root { --scp-mscale: 1.34; } }  /* 431..479 */
@media (max-width: 430px) { :root { --scp-mscale: 1.29; } }  /* 414..430 */
@media (max-width: 413px) { :root { --scp-mscale: 1.25; } }  /* 401..413 */
@media (max-width: 400px) { :root { --scp-mscale: 1.21; } }  /* 390..400 */
@media (max-width: 389px) { :root { --scp-mscale: 1.17; } }  /* 375..389 */
@media (max-width: 374px) { :root { --scp-mscale: 1.12; } }  /* 360..374 */
@media (max-width: 359px) { :root { --scp-mscale: 1.00; } }  /* ..359     */

/* ============================================================================
   Page title (H1) — added 2 October 2026

   Every page carries one <h1 class="scp-page-title"> immediately before its
   canvas wrapper. On desktop it renders inside the main content panel, above
   the section buttons: the logo and tab nav stay where they are, the panel's
   top edge stays where it is, and everything inside the panel moves down by
   --scp-title-shift to make room. The shift depends on the title's height
   (one line, or two with a subtitle), so the gap under the title is the same
   on every page even though the section buttons land at different heights.

   Done with margins only, so the measured canvas geometry is untouched:
     - the whole canvas moves down by the shift;
     - the logo (the one component at top:0) and the panel are pulled back up
       by the same amount, and the panel is extended by padding so its bottom
       edge still covers the shifted content;
     - the band itself is a sibling of the wrapper, pulled over it with a
       negative margin and offset to sit just inside the panel's top edge.
   The theme's tab nav is injected into the canvas; chrome.css pulls it up too.

   The main panel's top edge differs by page in the measured canvases (140,
   150, 152, 155 or 205px). It is normalised to 140 on every page: the box,
   the tab nav and the title then sit at the same place site-wide, and each
   page's content below the edge moves up by the difference (--scp-panel-d,
   set per page by the :has() rules below the home modifier).

   On phones the canvas is white and has no photograph, so the band sits in
   normal flow above it in the mobile text colours.

   A long title can carry a subtitle:
     <h1 class="scp-page-title">Main line
       <span class="scp-page-title__sub">smaller italic line</span></h1>
   The home page's title takes the --home modifier: home has no panel, so the
   band sits centred under the 235px frame logo, white on the photograph.
   ========================================================================= */
:root {
  --scp-title-top:   172px;   /* title offset from the canvas top: 32px inside the panel */
  --scp-title-shift: 40px;    /* how far the panel contents move down (one-line title)  */
}

.scp-page-title {
  position: relative;
  top: var(--scp-title-top);
  /* Stacks between the main panel (z 11) and the tab nav (z 40): the canvas
     below gives up its own stacking context so its children share this one,
     which lets the nav dropdown paint over the title. */
  z-index: 35;
  box-sizing: border-box;
  width: var(--scp-canvas);
  /* Zero height in flow, text overflowing downwards: the title takes no room
     of its own, so the wrapper below starts where it always did and the
     title's real height never has to be known. */
  height: 0;
  overflow: visible;
  margin: 0 auto;
  padding: 0 24px;                             /* flush with the section buttons */
  display: block;
  text-align: left;
  font-family: var(--scp-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: normal;
  color: var(--scp-color-44);                  /* deep brown: heaviest warm tone in the palette */
}
.scp-page-title__sub {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  font-style: italic;
  color: var(--scp-color-42);                  /* the panels' accent brown, one step lighter */
}
.scp-page-title--home {
  --scp-title-top: 240px;                      /* under the 235px frame */
  text-align: center;
  color: var(--scp-color-45);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);   /* same shadow as the panels */
}
/* A title with a subtitle is two lines tall and needs more room. */
.scp-page-title:has(.scp-page-title__sub) + .scp-canvas-wrap { --scp-title-shift: 60px; }

.scp-page-title--home .scp-page-title__sub { color: inherit; opacity: .92; }   /* both lines white over the photo */
.scp-page-title.scp-page-title--home + .scp-canvas-wrap { --scp-title-shift: 100px; }

/* How far each page's main panel sits below the common 140px edge. The
   wrapper reads the panel's inline top through :has(); the canvas and its
   children inherit the value. Pages whose panel is already at 140 get 0. */
.scp-canvas-wrap:has(> .scp-canvas > :nth-child(1 of .scp-c--panel)[style*="top:150px"]) { --scp-panel-d: 10px; }
.scp-canvas-wrap:has(> .scp-canvas > :nth-child(1 of .scp-c--panel)[style*="top:152px"]) { --scp-panel-d: 12px; }
.scp-canvas-wrap:has(> .scp-canvas > :nth-child(1 of .scp-c--panel)[style*="top:155px"]) { --scp-panel-d: 15px; }
.scp-canvas-wrap:has(> .scp-canvas > :nth-child(1 of .scp-c--panel)[style*="top:205px"]) { --scp-panel-d: 65px; }

/* The height rule is kept at single-class specificity so a theme rule that
   later sets the wrapper to height:auto (tablet zoom) still wins. The offsets
   are margin longhands, which survive a later `margin:` shorthand on
   .scp-canvas as long as their specificity is higher. */
:where(.scp-page-title) + .scp-canvas-wrap { height: calc(var(--scp-h, 1000px) + var(--scp-title-shift) - var(--scp-panel-d, 0px)); }
.scp-page-title + .scp-canvas-wrap > .scp-canvas { margin-top: calc(var(--scp-title-shift) - var(--scp-panel-d, 0px)); z-index: auto; }
/* The logo stays at the top... */
.scp-page-title + .scp-canvas-wrap > .scp-canvas > .scp-c--image[style*="top:0px"] {
  margin-top: calc(var(--scp-panel-d, 0px) - var(--scp-title-shift));
}
/* ...and the main panel lands on the common 140px edge (the first panel on
   the canvas; every one of them carries the 2px border, hence the -4px),
   grown by the shift. */
.scp-page-title + .scp-canvas-wrap > .scp-canvas > :nth-child(1 of .scp-c--panel) {
  margin-top: calc(-1 * var(--scp-title-shift));
  box-sizing: content-box;
  padding-bottom: calc(var(--scp-title-shift) - 4px);
}

/* flow variant (content/pages): the H1 is already inside the photo area */
.scp-page__inner > .scp-page-title { top: 0; width: auto; height: auto; margin: 0 0 24px; padding: 0; }

@media (max-width: 767px) {
  .scp-page-title,
  .scp-page-title--home {
    top: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 18px 16px 8px;
    text-align: center;
    font-size: 22px;
    color: var(--scp-color-44);
    text-shadow: none;
    background: #fff;
  }
  .scp-page-title__sub { font-size: 15px; color: var(--scp-color-42); }
}