/*
 * Website Studio foundation: shared mechanics only.
 * Each template supplies its own look through these custom properties:
 *   --f-gutter  --f-max  --f-ease  --f-focus  --f-bg  --f-ink
 *   --f-lb-bg  --f-lb-ink  --f-lb-muted  --f-lb-font  (lightbox skin)
 * Nothing here sets a typeface, colour palette or brand shape.
 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--f-scroll-pad, 88px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }
:where(h1, h2, h3, h4) { text-wrap: balance; overflow-wrap: break-word; }
:where(p, li, dd) { text-wrap: pretty; }
[hidden] { display: none !important; }

.f-wrap { width: min(100% - 2 * var(--f-gutter, 20px), var(--f-max, 1320px)); margin-inline: auto; }
.f-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.f-skip { position: absolute; left: 12px; top: -200px; z-index: 1000; padding: 12px 18px; background: var(--f-ink, #111); color: var(--f-bg, #fff); text-decoration: none; font-weight: 600; }
.f-skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--f-focus, currentColor); outline-offset: 3px; }
html.f-lock, html.f-lock body { overflow: hidden; }

/* Reveal: content is only hidden once JavaScript has confirmed it can show it again. */
.f-js [data-reveal] { opacity: 0; transform: translate3d(0, var(--f-reveal-y, 26px), 0); transition: opacity .9s var(--f-ease, ease), transform 1s var(--f-ease, ease); transition-delay: var(--f-delay, 0ms); }
.f-js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Parallax: the image is slightly oversized so its edges never show. */
.f-parallax [data-parallax] { transform: translate3d(0, var(--f-py, 0px), 0) scale(var(--f-pscale, 1.12)); will-change: transform; }

/* Filter, tab and carousel feedback */
@keyframes f-fade-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
.f-fade-in { animation: f-fade-in .55s var(--f-ease, ease) both; }

/* Lightbox structure; the template skins it with --f-lb-* variables. */
.f-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--f-lb-bg, #111); color: var(--f-lb-ink, #fff); font-family: var(--f-lb-font, inherit); }
.f-lightbox::backdrop { background: var(--f-lb-bg, #111); }
.f-lightbox[open] { display: grid; }
.f-lb { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; height: 100%; padding: clamp(14px, 3vw, 32px); }
.f-lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.f-lb-count { font-size: 13px; letter-spacing: .08em; color: var(--f-lb-muted, #bbb); }
.f-lb-figure { display: grid; grid-template-rows: 1fr auto; gap: 14px; min-height: 0; }
.f-lb-frame { display: grid; place-items: center; min-height: 0; }
.f-lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; opacity: 0; transition: opacity .35s var(--f-ease, ease); }
.f-lightbox.is-loaded .f-lb-img { opacity: 1; }
.f-lb-caption { font-size: 14px; line-height: 1.55; color: var(--f-lb-muted, #bbb); max-width: 70ch; }
.f-lb-nav { display: flex; gap: 10px; justify-content: flex-end; }
.f-lb button { min-width: 48px; min-height: 48px; padding: 0 18px; border: 1px solid currentColor; border-radius: var(--f-lb-radius, 0); background: transparent; color: inherit; font-size: 14px; }
.f-lb button:hover { background: var(--f-lb-ink, #fff); color: var(--f-lb-bg, #111); }

/* Demo form feedback */
.f-error { margin-top: 6px; font-size: 13px; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .f-js [data-reveal] { opacity: 1; transform: none; }
}
@media print {
  .f-js [data-reveal] { opacity: 1 !important; transform: none !important; }
}