/*
 * Strange World Tattoo — Global Design System
 * Source of truth: "Strange World Tattoo — Elementor Implementation Handoff".
 *
 * SCOPE: primitives and styling behaviours only. No page compositions.
 * Anything Elementor's Global Classes can express lives in Elementor
 * (Site Settings > Global Classes). This file holds only what the v4 style
 * schema cannot express: the page ground texture, link/focus defaults, the
 * hand-drawn underline system, list resets and the optional accents.
 *
 * TOKENS: mirrored from Elementor Global Variables so custom CSS and the theme
 * share one set of values. If a token changes, change it in Elementor FIRST
 * (Site Settings > Variables), then mirror it here.
 */

:root {
  /* ---- colour ---- */
  --sw-ink: #0C0C0C;
  --sw-cream: #F3EFE7;
  --sw-red: #D62828;
  --sw-turquoise: #3FA9B0;
  --sw-turquoise-light: #55C0C6;
  --sw-body: #2A2A2A;
  --sw-body-alt: #1B1B1B;
  --sw-teal: #1F8B94;
  --sw-teal-script: #2E848C;
  --sw-teal-eyebrow: #1F6B72;
  --sw-focus: #14636F;
  --sw-on-turquoise: #14343A;
  --sw-red-link: #C41C1C;
  --sw-red-link-hover: #A31C1C;
  --sw-rule-quiet: #D8D2C6;
  --sw-rule-divider: #C1BBAE;
  --sw-frame: #FDFCF8;
  /* footer greys — PROVISIONAL, revisited at Homepage refresh */
  --sw-footer-muted: #9AA0A8;
  --sw-footer-link: #C4C9CE;
  --sw-footer-legal: #7E848C;
  --sw-footer-divider: #262B33;
  --sw-footer-border: #3A3F47;

  /* ---- font stacks ---- */
  --sw-font-display: "Alfa Slab One", Georgia, serif;
  --sw-font-mono: "DM Mono", ui-monospace, monospace;
  --sw-font-script: "Pacifico", cursive;
  --sw-font-base: "Karla", system-ui, sans-serif;
  /* PROVISIONAL — mobile navigation only. Do not use elsewhere. */
  --sw-font-nav: "Hepta Slab", Georgia, serif;

  /* ---- layout ---- */
  --sw-container: 1360px;
  --sw-container-wide: 1440px;
  --sw-gutter: 24px;
  --sw-page-inline: max(24px, calc((100vw - 1360px) / 2 + 24px));
  --sw-page-inline-wide: max(24px, calc((100vw - 1440px) / 2 + 24px));

  /* ---- spacing scale ---- */
  --sw-space-2xs: clamp(8px, 1vw, 14px);
  --sw-space-xs: clamp(12px, 1.4vw, 18px);
  --sw-space-sm: clamp(16px, 2vw, 26px);
  --sw-space-md: clamp(20px, 2.4vw, 32px);
  --sw-space-lg: clamp(26px, 3vw, 44px);
  --sw-space-xl: clamp(34px, 4vw, 62px);
  --sw-space-2xl: clamp(44px, 5vw, 80px);
  --sw-space-3xl: clamp(50px, 6vw, 90px);
  --sw-section-pad-top: clamp(34px, 4vw, 62px);
  --sw-section-pad-bottom: clamp(40px, 5vw, 76px);

  /* ---- type scale ---- */
  --sw-h1: clamp(4rem, 8.4vw, 7.4rem);
  --sw-h1-compact: clamp(3.1rem, 8.2vw, 7rem);
  --sw-h2-page: clamp(2.1rem, 5.2vw, 4.4rem);
  --sw-h2-centred: clamp(1.9rem, 4.6vw, 4rem);
  --sw-h2: clamp(1.7rem, 3.2vw, 2.7rem);
  --sw-h2-narrow: clamp(1.6rem, 3vw, 2.5rem);
  --sw-h3: clamp(1.9rem, 3vw, 2.8rem);
  --sw-h3-card: clamp(1.5rem, 2.4vw, 2.2rem);
  --sw-h3-small: clamp(1.05rem, 1.4vw, 1.3rem);
  --sw-h4: clamp(1.2rem, 1.6vw, 1.5rem);
  --sw-h4-compact: clamp(0.95rem, 1.15vw, 1.1rem);
  --sw-body-size: clamp(0.92rem, 1.05vw, 1.02rem);
  --sw-lead-size: clamp(0.95rem, 1.15vw, 1.1rem);
  --sw-step-size: clamp(0.9rem, 1vw, 1rem);
  --sw-small-size: clamp(0.82rem, 0.95vw, 0.92rem);
  --sw-eyebrow-size: clamp(11.5px, 0.95vw, 13.5px);
  --sw-numeral-hero: clamp(4.2rem, 13vw, 11.5rem);
  --sw-numeral-inline: clamp(3rem, 7.4vw, 5.6rem);
  --sw-numeral-statement: clamp(2.4rem, 6.6vw, 5.4rem);
  --sw-script-num: clamp(2.6rem, 3.6vw, 3.4rem);
  --sw-script-num-sm: clamp(1.9rem, 2.6vw, 2.6rem);

  /* ---- hand-drawn assets (single source, recoloured via mask) ---- */
  --sw-underline-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M3 11 C64 4, 152 16, 297 6' stroke='%23000' stroke-width='7' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  --sw-underline-fine-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C70 3, 160 12, 297 6' stroke='%23000' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  --sw-underline-num-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M4 7 C30 3, 66 10, 96 5' stroke='%23000' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

/* =================================================================
   1. BASE
   ================================================================= */

body.sw-site {
  background-color: var(--sw-cream);
  background-image: radial-gradient(rgba(12, 12, 12, 0.05) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
  color: var(--sw-body);
  font-family: var(--sw-font-base);
}

.sw-site a { color: var(--sw-ink); text-decoration: none; }
.sw-site a:hover { color: var(--sw-focus); }

.sw-site :focus-visible {
  outline: 3px solid var(--sw-focus);
  outline-offset: 3px;
}

/* Images are square, always. */
.sw-site img,
.sw-site .elementor-widget-image img { border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  .sw-site *,
  .sw-site *::before,
  .sw-site *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* =================================================================
   2. HAND-DRAWN UNDERLINE SYSTEM
   One SVG, masked, so any colour works without a new asset.
   Apply .sw-underline to the element whose text should be underlined.
   ================================================================= */

.sw-underline {
  position: relative;
  display: inline-block;
}

.sw-underline::after {
  content: "";
  position: absolute;
  left: var(--sw-underline-x, 0);
  bottom: var(--sw-underline-y, -0.34em);
  width: var(--sw-underline-w, 100%);
  height: var(--sw-underline-h, 0.26em);
  background-color: var(--sw-underline-color, var(--sw-red));
  -webkit-mask: var(--sw-underline-asset, var(--sw-underline-svg)) center / 100% 100% no-repeat;
  mask: var(--sw-underline-asset, var(--sw-underline-svg)) center / 100% 100% no-repeat;
  pointer-events: none;
}

.sw-underline--turquoise { --sw-underline-color: var(--sw-turquoise); }
.sw-underline--turquoise-light { --sw-underline-color: var(--sw-turquoise-light); }
.sw-underline--ink { --sw-underline-color: var(--sw-ink); }
.sw-underline--teal { --sw-underline-color: var(--sw-teal); }

.sw-underline--fine { --sw-underline-asset: var(--sw-underline-fine-svg); --sw-underline-h: 0.2em; }
.sw-underline--thick { --sw-underline-h: 0.34em; }
.sw-underline--tight { --sw-underline-y: -0.18em; }
.sw-underline--half { --sw-underline-w: min(58%, 260px); }

/* section-number squiggle: slightly wider than the numeral, sits close */
.sw-underline--num {
  --sw-underline-asset: var(--sw-underline-num-svg);
  --sw-underline-w: 108%;
  --sw-underline-x: -4px;
  --sw-underline-y: -0.16em;
  --sw-underline-h: 0.18em;
}

/* =================================================================
   3. RULES
   ================================================================= */

/* tricolour divider — ink / turquoise / ink */
.sw-rule-tri {
  display: flex;
  width: 100%;
  height: 3px;
}
.sw-rule-tri::before {
  content: "";
  flex: 1;
  background: var(--sw-ink);
}
.sw-rule-tri::after {
  content: "";
  width: clamp(34px, 4vw, 62px);
  background: var(--sw-turquoise);
  border-right: clamp(20px, 2.4vw, 34px) solid var(--sw-ink);
  box-sizing: content-box;
}

/* =================================================================
   4. PHOTO FRAME SUPPORT
   Frame geometry lives in the Elementor global classes (sw-photo*).
   These rules only handle the inner image and the tape shape.
   ================================================================= */

.sw-photo > img,
.sw-photo .elementor-widget-image img {
  display: block;
  width: 100%;
  border-radius: 0;
}

/* torn-edge tape — optional variant of .sw-tape */
.sw-tape--torn {
  clip-path: polygon(2% 8%, 22% 0%, 46% 6%, 72% 0%, 98% 7%, 100% 92%, 76% 100%, 50% 93%, 24% 100%, 4% 94%);
}

/* =================================================================
   5. STEP LIST
   ================================================================= */

.sw-steplist { list-style: none; }
.sw-steplist > li:last-child { border-bottom: 2px dotted rgba(12, 12, 12, 0.3); }

/* =================================================================
   6. INTRINSIC LAYOUT HELPERS
   Prefer these over three hand-built breakpoint layouts.
   ================================================================= */

.sw-autofit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sw-autofit-min, 400px)), 1fr));
  gap: var(--sw-autofit-gap, var(--sw-space-lg));
}
.sw-autofit--sm { --sw-autofit-min: 260px; }
.sw-autofit--lg { --sw-autofit-min: 460px; }

.sw-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sw-cluster-gap, var(--sw-space-sm));
  align-items: var(--sw-cluster-align, center);
}

.sw-stack { display: flex; flex-direction: column; gap: var(--sw-stack-gap, var(--sw-space-sm)); }

/* =================================================================
   7. OPTIONAL ACCENTS
   Never attached automatically. Add by hand, sparingly.
   ================================================================= */

.sw-accent {
  display: inline-block;
  width: var(--sw-accent-size, 20px);
  height: var(--sw-accent-size, 20px);
  background-color: var(--sw-accent-color, var(--sw-red));
  -webkit-mask: var(--sw-accent-asset) center / contain no-repeat;
  mask: var(--sw-accent-asset) center / contain no-repeat;
  flex-shrink: 0;
}
.sw-accent--sparkle {
  --sw-accent-asset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3 L20 37 M3 20 L37 20 M8 8 L32 32 M32 8 L8 32' stroke='%23000' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}
.sw-accent--star {
  --sw-accent-asset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1 L12 8 L19 10 L12 12 L10 19 L8 12 L1 10 L8 8 Z' fill='%23000'/%3E%3C/svg%3E");
}
.sw-accent--star8 {
  --sw-accent-asset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 L11.8 6.8 L17 3 L13.2 8.2 L20 10 L13.2 11.8 L17 17 L11.8 13.2 L10 20 L8.2 13.2 L3 17 L6.8 11.8 L0 10 L6.8 8.2 L3 3 L8.2 6.8 Z' fill='%23000'/%3E%3C/svg%3E");
}
.sw-accent--speedlines {
  --sw-accent-asset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Cpath d='M2 4 L14 8 M1 13 L15 13 M2 22 L14 18' stroke='%23000' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  --sw-accent-color: var(--sw-ink);
  width: 15px;
  height: 18px;
}
.sw-accent--flip { transform: scaleX(-1); }
.sw-accent--turquoise { --sw-accent-color: var(--sw-turquoise); }
.sw-accent--teal { --sw-accent-color: var(--sw-teal-script); }
.sw-accent--ink { --sw-accent-color: var(--sw-ink); }

/* torn card edge — optional */
.sw-torn {
  clip-path: polygon(0.4% 5%, 8% 0.5%, 30% 4%, 55% 0%, 78% 4.5%, 99.6% 1.5%, 100% 90%, 86% 100%, 60% 95%, 34% 100%, 10% 95.5%, 0% 99%);
}

/* hard-offset shadow used by the turquoise block CTA */
.sw-shadow-hard { box-shadow: 4px 5px 0 rgba(12, 12, 12, 0.9); }

/* =================================================================
   8. ELEMENTOR CONTAINER WIDTH VARIANT
   The kit default is 1360px. Add .sw-container-wide to a boxed
   container to opt into the 1440px variant.
   ================================================================= */

.sw-site .e-con.sw-container-wide,
.sw-site .elementor-section.sw-container-wide > .elementor-container {
  --container-max-width: var(--sw-container-wide);
  max-width: var(--sw-container-wide);
}