/* Beloved Welds Jewelry rebuild: shared styles. Geometry per page lives in css/<page>.css. */
@font-face { font-family: 'Very Vogue Display'; src: url('fonts/veryvogue-display-webfont.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Very Vogue Display Italic'; src: url('fonts/veryvogue-display-italic-webfont.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'La Luxes Script'; src: url('fonts/laluxesscript.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --pink: #ff99ac; --blush: #ffc7d3; --cream: #f8f7f1; --stone: #f2f1ed; --sage: #b3c99c; --forest: #16470a;
  --ink: #000; --white: #fff;
  --font-display: 'Very Vogue Display', Georgia, serif;
  --font-display-italic: 'Very Vogue Display Italic', Georgia, serif;
  --font-script: 'La Luxes Script', cursive;
  --font-sans: 'Public Sans', Helvetica, Arial, sans-serif;
  --font-button: 'Jost', Helvetica, Arial, sans-serif;
  --gutter: max(0px, calc((100vw - 1200px) / 2));
  --s: 1;            /* the canvas scale: set from clientWidth by the inline script in <head> */
  --cw: 1200px;      /* the canvas width for the current layer */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--cream); color: var(--ink); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
/* Empty canvas space passes clicks through, as Showit's does (2026-11-14): on the home page the pinned intro's
   BOOK NOW showed through the see-through sections scrolling over it but every click landed on their empty .cv
   wrapper, while live it worked. Only the wrappers (.cv and a state .view) let go; every element in them still
   takes clicks. :where() keeps all of this at zero specificity, so any rule that already sets pointer-events
   (.ln, the ::before photo layers) still wins. */
:where(.cv) { pointer-events: none; }
:where(.cv > *) { pointer-events: auto; }
:where(.cv .view) { pointer-events: none; }
:where(.cv .view > *) { pointer-events: auto; }
/* the canvases overhang the viewport (the 4494px ticker, polaroids past the edge); clipping them here keeps the
   document 100% wide, or a phone zooms the whole page out to fit the overflow. `clip` makes no scroll container,
   so the sticky blocks keep working; the live site clips the same way on its page wrapper. */
main { position: relative; overflow: clip; }
@supports not (overflow: clip) { main { overflow-x: hidden; } }
/* a parallax block (bgScroll "f") pins its photo to the viewport and clips it to its own box: Safari on iPhone and
   iPad does not honour background-attachment: fixed (it scrolls, or paints a viewport-sized blur), and Showit pins
   the photo itself; the block is never transformed, so the fixed layer is positioned against the viewport */
.sec.parallax { clip-path: inset(0); }
.sec.parallax::before { position: fixed !important; }
a { color: inherit; }

/* ---- blocks: a fixed canvas scaled by --s (see the generator's docstring) ---------------- */
.sec { position: relative; width: 100%; --E: 0px; height: calc(var(--h) * var(--s)); }
.sec[hidden] { display: none !important; }
.cv { position: absolute; left: 50%; top: 0; width: var(--cw); height: calc(var(--h) + var(--E));
  transform: translateX(-50%) scale(var(--s)); transform-origin: 50% 0; }
.cv > *, .view > * { position: absolute; margin: 0; }
.view { position: absolute; inset: 0; display: none; }
.view.on { display: block; }
.sec.overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.sec.overlay.showing { animation: fadeIn .4s ease-out both; }
.sec.overlay.hiding { animation: fadeOut .3s ease-in both; }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@media (min-width: 768px) {
  .sec.wh { --E: max(0px, calc(100vh / var(--s) - var(--h))); height: calc((var(--h) + var(--E)) * var(--s)); }
  .sec.sticky-d { position: sticky; top: 0; }
}
@media (max-width: 767.98px) {
  :root { --cw: 320px; --gutter: 0px; }
  .sec.sticky-m { position: sticky; top: 0; }
}

/* ---- text (engine base classes .st-d-* / .st-m-*) ------------------------------------- */
.t-title { color: var(--ink); line-height: 0.901; letter-spacing: 0em; font-size: 100px; text-align: left; font-family: var(--font-display); font-weight: 400; font-style: normal; }
.t-heading { color: var(--ink); line-height: 1.101; letter-spacing: 0em; font-size: 45px; text-align: left; font-family: var(--font-display-italic); font-weight: 400; font-style: normal; }
.t-subheading { color: var(--ink); line-height: 1.201; letter-spacing: 0em; font-size: 26px; text-align: left; font-family: var(--font-sans); font-weight: 400; font-style: normal; }
.t-paragraph { color: var(--ink); line-height: 1.601; letter-spacing: 0.03em; font-size: 20px; text-align: left; font-family: var(--font-sans); font-weight: 400; font-style: normal; }
h1, h2, h3 { font-weight: 400; }
p a, h1 a, h2 a, h3 a { color: inherit; text-decoration: none; transition: color .5s; cursor: pointer; }
@media (max-width: 767.98px) {
  .tm-title { color: var(--ink); line-height: 1; letter-spacing: 0em; font-size: 45px; text-align: left; font-family: var(--font-display); font-weight: 400; font-style: normal; }
  .tm-heading { color: var(--ink); line-height: 1.1; letter-spacing: 0em; font-size: 29px; text-align: left; font-family: var(--font-display-italic); font-weight: 400; font-style: normal; }
  .tm-subheading { color: var(--ink); line-height: 1.2; letter-spacing: 0em; font-size: 18px; text-align: left; font-family: var(--font-sans); font-weight: 400; font-style: normal; }
  .tm-paragraph { color: var(--ink); line-height: 1.6; letter-spacing: 0.03em; font-size: 16px; text-align: left; font-family: var(--font-sans); font-weight: 400; font-style: normal; }
}

/* ---- buttons (engine st-primary / st-secondary) ------------------------------------------ */
.btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 10px 14px;
  border: 0 solid var(--ink); border-radius: 51px; overflow: hidden; background: var(--sage); color: var(--white); text-decoration: none;
  cursor: pointer; font: inherit; transition: border-color .5s, background-color .5s, color .5s; }
.btn span { font-family: var(--font-button); font-size: 15px; text-align: center; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.8; white-space: nowrap; transition: color .5s; }
.btn:hover { background: var(--blush); }
.btn-secondary { border-radius: 10px; border-width: 2px; border-color: var(--forest); background: transparent; color: var(--forest); }
.btn-secondary:hover { border-color: var(--white); background: transparent; color: var(--white); }
@media (max-width: 767.98px) { .btn span { font-size: 12px; } }

/* ---- media -------------------------------------------------------------------------------- */
.ph { background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; display: block; transition: opacity .5s; }
a.ph { text-decoration: none; }
.box { display: block; }
.ico { display: block; transition: color .5s, opacity .5s; cursor: pointer; }
.ico svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.ln { pointer-events: none; }
.embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* carousel (flickity-style, centred, neighbours scaled) */
.carousel { overflow: hidden; }
.car-track { position: absolute; left: 0; top: 0; height: 100%; display: flex; gap: var(--gap, 0px); will-change: transform; transition: transform .5s ease; }
.carousel .cell { flex: none; height: 100%; background: center / cover no-repeat; transform: scale(var(--k, 1)); transition: transform .3s; }
.carousel .cell.sel { transform: scale(1); }
.carousel.jump .car-track, .carousel.jump .cell { transition: none; }

/* instagram-style grid (241px tiles on desktop, 155px on phones, as the engine's rules) */
.social { overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, 241px); gap: 5px; justify-content: center; align-content: start; }
.social .ph { width: 241px; height: 241px; }
@media (max-width: 767.98px) { .social { grid-template-columns: repeat(auto-fit, 155px); } .social .ph { width: 155px; height: 155px; } }

/* contact form fields (sit over the white .box panels) */
.field { background: transparent; border: 0; outline: 0; resize: none; padding: 0; color: var(--ink); font-family: var(--font-sans); font-size: 15px; text-transform: uppercase; line-height: 1.4; letter-spacing: 0.03em; }
.field::placeholder { color: var(--ink); opacity: .7; text-transform: uppercase; }
.field:focus::placeholder { opacity: .3; }
.field.bad { box-shadow: 0 2px 0 var(--pink); }
textarea.field { padding-top: 1px; }

/* entrance animations (Showit trIn): ease-out, the element's own duration; slideInRight travels one canvas width
   (measured on the live ticker: 1200px on desktop, 320px on the phone canvas, 60 s, ease-out) and rides the
   `translate` property so it composes with an element's own rotate() */
[data-fx] { visibility: hidden; }
[data-fx].in { visibility: visible; animation: fadeIn var(--d, .5s) ease-out var(--dl, 0s) both; }
[data-fx="slideInRight"].in { animation-name: slideInRight; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { translate: var(--cw) 0; } to { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  [data-fx].in, .sec.overlay.showing, .sec.overlay.hiding { animation: none !important; }
  .car-track, .carousel .cell { transition: none; }
}