/*
 * Strange World — collection widget components.
 *
 * Artists grid, Recent Work track and Photo Wall are rendered by custom
 * Elementor widgets (inc/widgets.php), because Elementor Core has no loop
 * widget without Pro. Their card internals live here rather than as hundreds
 * of per-element Elementor styles — which is also what keeps the page inside
 * the editor's style budget.
 *
 * Content for all three is edited on the Artists / Recent Work / Shop Photos
 * post types, not in the page.
 */

/* ============================ ARTISTS ============================ */
.sw-artists-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(34px, 4vw, 58px) clamp(22px, 2.6vw, 38px);
}
@media (max-width: 1039px) { .sw-artists-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .sw-artists-grid { grid-template-columns: 1fr; } }

.sw-artist-card { display: flex; flex-direction: column; min-width: 0; }

.sw-artist-slot {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sw-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sw-artist-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 36%;
}
.sw-artist-placeholder {
  font-family: var(--sw-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-muted);
  text-align: center;
  padding: 0 16px;
}
.sw-artist-guest {
  position: absolute;
  top: -10px;
  right: -8px;
  background: var(--sw-red-chip);
  color: var(--sw-cream);
  font-family: var(--sw-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 10px;
  transform: rotate(4deg);
  z-index: 3;
}

.sw-artist-id {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: clamp(14px, 1.6vw, 20px);
}
.sw-artist-avatar {
  flex: 0 0 auto;
  width: clamp(58px, 5.4vw, 74px);
  height: clamp(58px, 5.4vw, 74px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--sw-placeholder);
  border: 2px solid var(--sw-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sw-artist-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sw-artist-nophoto {
  font-family: var(--sw-font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-muted);
}
.sw-artist-meta { min-width: 0; flex: 1; }
.sw-artist-name {
  margin: 0;
  font-family: var(--sw-font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.06;
  color: var(--sw-ink);
}
.sw-artist-tags {
  font-family: var(--sw-font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--sw-muted);
  margin-top: 7px;
}
.sw-artist-link {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  font-family: var(--sw-font-mono);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-bottom: 3px solid var(--sw-turquoise);
  padding-bottom: 3px;
  min-height: 32px;
  text-decoration: none;
}
.sw-artist-link:hover { color: var(--sw-focus); border-bottom-color: var(--sw-focus); }

/* ========================== RECENT WORK ========================== */
.sw-work-track {
  display: flex;
  gap: clamp(18px, 2vw, 28px);
  overflow-x: auto;
  padding: clamp(30px, 3.4vw, 48px) var(--sw-page-inline) 8px;
}
.sw-work-card {
  margin: 0;
  flex: 0 0 calc((100% - 56px) / 3);
  display: flex;
  flex-direction: column;
}
@media (max-width: 999px) { .sw-work-card { flex: 0 0 calc((100% - 24px) / 2); } }
@media (max-width: 719px) { .sw-work-card { flex: 0 0 78%; } }

.sw-work-card .sw-frame-base { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); }
.sw-work-shot {
  display: block;
  overflow: hidden;
  background: var(--sw-placeholder);
  cursor: zoom-in;
}
.sw-work-shot.is-tall  { height: clamp(300px, 30vw, 420px); }
.sw-work-shot.is-short { height: clamp(230px, 23vw, 320px); }
@media (max-width: 719px) {
  .sw-work-shot.is-tall  { height: 300px; }
  .sw-work-shot.is-short { height: 230px; }
}
.sw-work-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.sw-work-cap { padding-top: 11px; }
.sw-work-artist {
  display: inline-block;
  font-family: var(--sw-font-display);
  text-transform: uppercase;
  font-size: 0.98rem;
  line-height: 1.15;
  color: var(--sw-ink);
  border-bottom: 2px solid var(--sw-turquoise);
  padding-bottom: 2px;
  text-decoration: none;
}
.sw-work-artist:hover { color: var(--sw-focus); }
.sw-work-artist.is-unknown { color: var(--sw-muted-soft); border: 0; }
.sw-work-style {
  font-family: var(--sw-font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sw-muted);
  margin-top: 7px;
}

/* ====================== PEOPLE ROSTER (About) ====================== */
/* A 12-column grid where each person carries their own span and crop, so the
   row rhythm stays irregular the way the design intends. Span and aspect are
   per-person meta on the Artist post. */
.sw-roster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(28px, 3.2vw, 46px) clamp(18px, 2.2vw, 32px);
  align-items: start;
}
.sw-roster-item {
  grid-column: span var(--sw-span, 4);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1039px) { .sw-roster-item { grid-column: span 6; } }
/* Tablet only: 2-up would strand the 7th person alone on a row, so the last
 * three share a row of 3 — 2 + 2 + 3. Bounded below 620px so the single-column
 * mobile rule still wins. Tuned for the current seven-person roster; revisit
 * if the number of people changes. */
@media (min-width: 620px) and (max-width: 1039px) {
  .sw-roster-item:nth-last-child(-n+3) { grid-column: span 4; }
}
@media (max-width: 619px)  { .sw-roster-item { grid-column: span 12; } }

.sw-roster-frame { margin: 0; padding: 10px 10px 13px; }
.sw-roster-slot {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--sw-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 619px) { .sw-roster-slot { aspect-ratio: 4 / 5 !important; } }
.sw-roster-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.sw-roster-placeholder {
  font-family: var(--sw-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-muted);
  text-align: center;
  padding: 0 14px;
}
.sw-roster-name {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font-family: var(--sw-font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.06;
  color: var(--sw-ink);
}
.sw-roster-name.is-big { font-size: clamp(1.25rem, 1.7vw, 1.6rem); }
.sw-roster-role {
  font-family: var(--sw-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-muted);
  margin-top: 8px;
}
.sw-roster-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 11px;
  font-family: var(--sw-font-mono);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-bottom: 3px solid var(--sw-turquoise);
  padding-bottom: 3px;
  min-height: 32px;
  text-decoration: none;
  color: var(--sw-ink);
}
.sw-roster-link:hover { color: var(--sw-focus); border-bottom-color: var(--sw-focus); }

/* =========================== PHOTO WALL =========================== */
.sw-wall-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}
@media (max-width: 1039px) { .sw-wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px)  { .sw-wall-grid { grid-template-columns: 1fr; } }
.sw-wall-item { margin: 0; }
.sw-wall-item img {
  width: 100%;
  height: clamp(200px, 20vw, 290px);
  object-fit: cover;
  object-position: 50% 42%;
}
.sw-wall-item.is-wide { grid-column: span 2; }
.sw-wall-item.is-wide img { height: clamp(240px, 25vw, 360px); }
@media (max-width: 699px) {
  .sw-wall-item.is-wide { grid-column: auto; }
  .sw-wall-item img,
  .sw-wall-item.is-wide img { height: 190px; }
}
.sw-wall-cap {
  font-family: var(--sw-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-muted);
  padding-top: 10px;
}

/* Wider first tile in the About crew strip (design: span 2 of the 3-column grid). */
.swn-crew-wide { grid-column: span 2; }
@media (max-width: 767px) { .swn-crew-wide { grid-column: auto; } }

/* ======================= ARTIST DIRECTORY =======================
 * Approved: Artists Directory V2. Two module patterns only —
 * A: dominant artwork across the top. B: tall artwork beside the detail column.
 * Pattern alternates by position, so the page keeps a rhythm rather than
 * repeating one card six times.
 * ============================================================== */
.sw-dir-index {
  display: flex; flex-wrap: wrap; gap: 0 clamp(16px, 2.4vw, 38px);
  border-top: 2px solid var(--sw-ink);
  border-bottom: 2px dotted rgba(12,12,12,0.35);
}
.sw-dir-index a {
  display: inline-flex; align-items: baseline; gap: 9px; padding: 13px 0; min-height: 44px;
  font-family: var(--sw-font-display); text-transform: uppercase;
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  border-bottom: 3px solid transparent; color: var(--sw-ink); text-decoration: none;
}
.sw-dir-index a:hover { color: var(--sw-focus); border-bottom-color: var(--sw-turquoise); }
.sw-dir-index-n { font-family: var(--sw-font-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--sw-muted); }

.sw-dir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 76px) clamp(30px, 3.6vw, 56px); }
@media (max-width: 1119px) { .sw-dir { grid-template-columns: 1fr; } }

.sw-dir-mod { min-width: 0; display: flex; flex-direction: column; scroll-margin-top: 110px; }
.sw-dir-head { border-top: 2px solid var(--sw-ink); padding-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.sw-dir-n { font-family: var(--sw-font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--sw-muted); }
.sw-dir-name { margin: 0; font-family: var(--sw-font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.3rem, 1.9vw, 1.75rem); line-height: 1.04; color: var(--sw-ink); }
.sw-dir-guest { background: var(--sw-red-chip); color: var(--sw-cream); font-family: var(--sw-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 9px; }
.sw-dir-spacer { flex: 1; }
.sw-dir-role { font-family: var(--sw-font-mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--sw-muted); }

.sw-dir-body { display: grid; gap: clamp(16px, 2vw, 26px) clamp(16px, 2vw, 24px); margin-top: clamp(18px, 2.2vw, 26px); align-items: start; flex: 1; }
.sw-dir-mod--a .sw-dir-body { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'hero hero' 'meta meta' 's1 s2' 'cta cta'; }
.sw-dir-mod--b .sw-dir-body { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: 'hero meta' 'hero s1' 'hero s2' 'cta cta'; }

.sw-dir-slot { position: relative; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: var(--sw-placeholder); }
.sw-dir-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

.sw-dir-hero { grid-area: hero; margin: 0; position: relative; display: flex; flex-direction: column; padding: clamp(9px, 1vw, 13px) clamp(9px, 1vw, 13px) clamp(12px, 1.2vw, 16px); box-shadow: 0 14px 32px rgba(12,12,12,0.22); }
.sw-dir-mod--a .sw-dir-hero { align-self: start; }
.sw-dir-mod--b .sw-dir-hero { align-self: stretch; }
.sw-dir-hero .sw-dir-slot { flex: 1; }
.sw-dir-mod--a .sw-dir-hero .sw-dir-slot { aspect-ratio: 3 / 2; }
.sw-dir-mod--b .sw-dir-hero .sw-dir-slot { min-height: clamp(320px, 34vw, 560px); }

.sw-dir-meta { grid-area: meta; min-width: 0; display: grid; grid-template-columns: clamp(88px, 7vw, 116px) minmax(0, 1fr); gap: clamp(12px, 1.4vw, 18px); align-items: start; }
.sw-dir-portrait { margin: 0; position: relative; padding: 7px 7px 9px; box-shadow: 0 8px 18px rgba(12,12,12,0.18); }
.sw-dir-portrait .sw-dir-slot { aspect-ratio: 4 / 5; }

.sw-dir-tags-h { font-family: var(--sw-font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sw-muted); padding-bottom: 8px; border-bottom: 2px dotted rgba(12,12,12,0.35); }
.sw-dir-tags-list { display: flex; flex-direction: column; }
.sw-dir-tags-list span { font-family: var(--sw-font-display); text-transform: uppercase; font-size: clamp(0.8rem, 0.95vw, 0.92rem); line-height: 1.2; padding: 8px 0 7px; border-bottom: 2px dotted rgba(12,12,12,0.22); color: var(--sw-ink); }

.sw-dir-sup { margin: 0; position: relative; padding: 8px 8px 11px; box-shadow: 0 10px 22px rgba(12,12,12,0.18); }
.sw-dir-sup--1 { grid-area: s1; }
.sw-dir-sup--2 { grid-area: s2; }
.sw-dir-mod--a .sw-dir-sup .sw-dir-slot { aspect-ratio: 3 / 2; }
.sw-dir-mod--b .sw-dir-sup .sw-dir-slot { aspect-ratio: 4 / 3; }

.sw-dir-cap { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; justify-content: space-between; font-family: var(--sw-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sw-muted); padding-top: 10px; }
.sw-dir-cap-note { color: var(--sw-muted-soft); }
.sw-dir-cap-sm { font-family: var(--sw-font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sw-muted); padding-top: 9px; }

.sw-dir-cta { grid-area: cta; border-top: 2px solid var(--sw-ink); padding-top: 14px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.sw-dir-cta a { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sw-font-mono); font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase; padding-bottom: 3px; min-height: 34px; color: var(--sw-ink); text-decoration: none; }
.sw-dir-cta a.is-primary { border-bottom: 3px solid var(--sw-ink); }
.sw-dir-cta a.is-secondary { border-bottom: 3px solid var(--sw-turquoise); }
.sw-dir-cta a:hover { color: var(--sw-focus); }
.sw-dir-cta a.is-primary:hover { border-bottom-color: var(--sw-focus); }

/* Stacked: one column, portrait-shaped artwork. */
@media (max-width: 639px) {
  .sw-dir-mod--a .sw-dir-body,
  .sw-dir-mod--b .sw-dir-body { grid-template-columns: 1fr; grid-template-areas: 'hero' 'meta' 's1' 's2' 'cta'; }
  .sw-dir-mod--b .sw-dir-hero { align-self: start; }
  .sw-dir-mod--a .sw-dir-hero .sw-dir-slot,
  .sw-dir-mod--b .sw-dir-hero .sw-dir-slot { aspect-ratio: 4 / 5; min-height: 0; }
  .sw-dir-mod--a .sw-dir-sup .sw-dir-slot,
  .sw-dir-mod--b .sw-dir-sup .sw-dir-slot { aspect-ratio: 4 / 3; }
  .sw-dir-meta { grid-template-columns: 104px minmax(0, 1fr); }
}

/* The approved CTA keeps its 34px visual height. This overlay lifts the tap
 * target to 44px without moving anything on screen — it sits inside the
 * 50px CTA row, so it cannot overlap a neighbouring control. */
.sw-dir-cta a { position: relative; }
.sw-dir-cta a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 44px;
}


/* ===================== ARTIST PROFILE V2 =====================
 * Approved: Artist Profile V2. Rendered by single-sw_artist.php from the
 * Artists + Work CPTs. Unconfirmed content is omitted upstream, so every
 * rule here assumes the element may simply not be present.
 * ============================================================ */
.sw-ap-hero { padding-top: clamp(20px, 2.6vw, 36px); padding-bottom: clamp(30px, 3.6vw, 52px); }
.sw-ap-crumb { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; justify-content: space-between; font-family: var(--sw-font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 2px dotted rgba(12,12,12,0.35); padding-bottom: 12px; }
.sw-ap-crumb__path { display: flex; align-items: center; gap: 11px; }
.sw-ap-crumb__path a { color: var(--sw-muted); display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.sw-ap-crumb__path a:hover { color: var(--sw-focus); }
.sw-ap-crumb__sep { color: var(--sw-muted); }
.sw-ap-crumb__pos { color: var(--sw-muted); }

.sw-ap-name { display: flex; flex-wrap: wrap; gap: 8px clamp(16px, 2.2vw, 30px); align-items: flex-end; padding: clamp(18px, 2.4vw, 30px) 0 clamp(16px, 2vw, 24px); }
.sw-ap-name__h { flex: 1 1 min(100%, 400px); margin: 0; font-weight: 400; font-family: var(--sw-font-display); text-transform: uppercase; font-size: clamp(2.2rem, 6vw, 5rem); line-height: 0.9; letter-spacing: -0.012em; color: var(--sw-ink); }
.sw-ap-name__meta { flex: 0 1 260px; display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; align-items: flex-start; }
.sw-ap-role { font-family: var(--sw-font-mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--sw-turquoise); color: var(--sw-ink); padding: 6px 10px; }
.sw-ap-tenure { font-family: var(--sw-font-mono); font-size: 12.5px; line-height: 1.7; color: var(--sw-muted); }

.sw-ap-lead { display: flex; flex-wrap: wrap; gap: clamp(22px, 2.8vw, 46px); align-items: flex-start; }
.sw-ap-sig { flex: 3 1 min(100%, 460px); margin: 0; min-width: 0; position: relative; padding: clamp(10px, 1.1vw, 15px) clamp(10px, 1.1vw, 15px) clamp(13px, 1.3vw, 18px); transform: rotate(-1.1deg); box-shadow: 0 16px 36px rgba(12,12,12,0.24); }
.sw-ap-aside { flex: 2 1 min(100%, 300px); min-width: 0; display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 30px); }
.sw-ap-idcard { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.6vw, 20px); align-items: flex-start; }
.sw-ap-idcard .sw-dir-portrait { flex: 0 1 clamp(116px, 30%, 168px); transform: rotate(2deg); }
.sw-ap-idcard .sw-dir-tags { flex: 1 1 200px; min-width: 0; }

.sw-ap-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sw-ap-cta { background: var(--sw-ink); color: var(--sw-cream); border: 2px solid var(--sw-ink); padding: 18px 24px; display: flex; align-items: center; gap: 10px; justify-content: center; width: 100%; font-family: var(--sw-font-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 5px 6px 0 rgba(63,169,176,0.9); text-decoration: none; }
.sw-ap-cta:hover { background: #1F6B72; color: var(--sw-cream); }
.sw-ap-note { font-family: var(--sw-font-mono); font-size: 12.5px; line-height: 1.7; color: var(--sw-muted); max-width: 40ch; }
.sw-ap-skip { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sw-font-mono); font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase; border-bottom: 3px solid var(--sw-turquoise); padding-bottom: 3px; min-height: 34px; color: var(--sw-ink); text-decoration: none; }
.sw-ap-skip:hover { color: var(--sw-focus); }

.sw-ap-tape { position: absolute; top: -13px; left: 44px; width: clamp(88px, 9vw, 128px); height: 29px; transform: rotate(-3deg); background: rgba(63,169,176,0.72); box-shadow: 0 2px 5px rgba(12,12,12,0.16); z-index: 2; }
.sw-ap-tape--kraft { left: auto; right: 40px; width: 78px; height: 26px; transform: rotate(3deg); background: rgba(196,168,124,0.75); }

.sw-ap-eyebrow { font-family: var(--sw-font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sw-muted); }

.sw-ap-bio { border-top: 2px solid var(--sw-ink); padding-top: clamp(36px, 4.2vw, 62px); padding-bottom: clamp(32px, 3.8vw, 54px); }
.sw-ap-bio__grid { display: flex; flex-wrap: wrap; gap: clamp(26px, 3.2vw, 54px); align-items: flex-start; margin-top: clamp(14px, 1.8vw, 22px); }
.sw-ap-bio__text { flex: 1 1 min(100%, 400px); min-width: 0; }
.sw-ap-bio__text h2 { margin: 0; font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.04; max-width: 22ch; }
.sw-ap-bio__text p { font-family: var(--sw-font-mono); font-size: clamp(0.9rem, 1.02vw, 1.02rem); line-height: 1.8; color: var(--sw-body); margin: clamp(16px, 1.8vw, 22px) 0 0; max-width: 52ch; }
.sw-ap-recog { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(16px, 2vw, 24px); align-items: center; border-top: 2px solid var(--sw-ink); border-bottom: 2px dotted rgba(12,12,12,0.35); margin-top: clamp(24px, 2.8vw, 34px); padding: 16px 0; }
.sw-ap-recog__n { font-family: var(--sw-font-display); font-size: clamp(2.2rem, 3.6vw, 3.1rem); line-height: 0.86; color: var(--sw-teal); }
.sw-ap-recog__t { font-family: var(--sw-font-mono); font-size: 12.5px; line-height: 1.7; color: var(--sw-body); max-width: 44ch; }
.sw-ap-studio { flex: 1 1 min(100%, 300px); margin: 0; min-width: 0; position: relative; padding: clamp(9px, 1vw, 13px) clamp(9px, 1vw, 13px) clamp(12px, 1.2vw, 16px); transform: rotate(1.4deg); box-shadow: 0 14px 32px rgba(12,12,12,0.22); }
.sw-ap-work { border-top: 2px solid var(--sw-ink); padding-top: clamp(36px, 4.2vw, 62px); padding-bottom: clamp(36px, 4.2vw, 58px); }
.sw-ap-work__head { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: flex-end; justify-content: space-between; }
.sw-ap-work__head h2 { margin: clamp(12px, 1.4vw, 18px) 0 0; font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.02; }
.sw-ap-work__hint { font-family: var(--sw-font-mono); font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--sw-muted); padding-bottom: 6px; }

.sw-ap-feat { margin-top: clamp(22px, 2.6vw, 34px); position: relative; background: var(--sw-frame); padding: clamp(10px, 1.1vw, 15px) clamp(10px, 1.1vw, 15px) clamp(12px, 1.2vw, 16px); box-shadow: 0 16px 36px rgba(12,12,12,0.22); }
.sw-ap-feat__stage { overflow: hidden; height: clamp(340px, 54vh, 620px); background: var(--sw-ink); }
.sw-ap-feat__slide { height: 100%; }
.sw-ap-feat__slide[hidden] { display: none; }
.sw-ap-feat__slide .sw-zoom { height: 100%; aspect-ratio: auto !important; }
.sw-ap-feat__bar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding-top: 12px; }
.sw-ap-feat__meta { min-width: 0; flex: 1 1 240px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-family: var(--sw-font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sw-muted); }
.sw-ap-feat__count { color: var(--sw-ink); }
.sw-ap-feat__nav { display: flex; gap: 8px; }
.sw-ap-feat__nav button { width: 48px; height: 48px; border: 2px solid var(--sw-ink); background: transparent; color: var(--sw-ink); font-size: 16px; cursor: pointer; }
.sw-ap-feat__nav button.is-solid { background: var(--sw-ink); color: var(--sw-cream); }
.sw-ap-feat__nav button:hover { background: var(--sw-ink); color: var(--sw-cream); }
.sw-ap-feat__nav button.is-solid:hover { background: #1F6B72; }

/* Zoomable image button: the frame is the button, the image fills it. */
.sw-zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; margin: 0; overflow: hidden; cursor: zoom-in; background: var(--sw-placeholder); background-image: repeating-linear-gradient(135deg, #E4E0D6 0 14px, #EDE9E0 14px 28px); }
.sw-zoom:hover { opacity: 0.96; }
.sw-zoom img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sw-ap-feat__slide .sw-zoom { background: var(--sw-ink); background-image: none; }

.sw-ap-more { margin-top: clamp(32px, 3.8vw, 54px); }
.sw-ap-more__head { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; justify-content: space-between; border-top: 2px solid var(--sw-ink); padding-top: 14px; }
.sw-ap-more__head h3 { margin: 0; font-weight: 400; font-family: var(--sw-font-display); text-transform: uppercase; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.05; color: var(--sw-ink); }
.sw-ap-more__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, 30%)), 1fr)); gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(18px, 2.2vw, 28px); }
.sw-ap-more__item { margin: 0; min-width: 0; position: relative; padding: 8px 8px 11px; box-shadow: 0 10px 22px rgba(12,12,12,0.18); }

.sw-ap-start { background: var(--sw-ink); color: var(--sw-cream); border-top: 2px solid var(--sw-ink); padding-top: clamp(40px, 4.8vw, 70px); padding-bottom: clamp(40px, 4.8vw, 70px); }
.sw-ap-start__grid { display: flex; flex-wrap: wrap; gap: clamp(26px, 3.2vw, 54px); align-items: center; }
.sw-ap-start__grid > div { flex: 1 1 min(100%, 360px); min-width: 0; }
.sw-ap-chip { display: inline-block; background: var(--sw-turquoise); color: var(--sw-ink); padding: 5px 9px; font-family: var(--sw-font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.sw-ap-start__h { margin: clamp(16px, 2vw, 24px) 0 0; font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1; max-width: 18ch; color: var(--sw-cream); }
.sw-ap-start__p { font-family: var(--sw-font-mono); font-size: clamp(0.88rem, 1vw, 1rem); line-height: 1.75; color: #C9CCCC; margin: clamp(18px, 2.2vw, 26px) 0 0; max-width: 48ch; }
.sw-ap-start__card { flex: 1 1 min(100%, 300px); background: var(--sw-turquoise); color: var(--sw-ink); border: 2px solid var(--sw-ink); padding: clamp(24px, 2.8vw, 34px); display: flex; flex-direction: column; gap: 11px; box-shadow: 6px 7px 0 rgba(243,239,231,0.9); transition: transform 220ms cubic-bezier(.2,.7,.2,1); text-decoration: none; }
.sw-ap-start__card:hover { transform: translate(-4px, -4px); color: var(--sw-ink); }
.sw-ap-start__kicker { font-family: var(--sw-font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.sw-ap-start__big { font-family: var(--sw-font-display); text-transform: uppercase; font-size: clamp(1.35rem, 2.2vw, 1.95rem); line-height: 1.06; }
.sw-ap-start__note { font-family: var(--sw-font-mono); font-size: clamp(0.85rem, 0.98vw, 0.96rem); line-height: 1.65; max-width: 38ch; }

.sw-ap-nav { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid var(--sw-ink); padding: 0 var(--sw-page-inline); }
.sw-ap-nav__side { flex: 1 1 240px; display: flex; flex-direction: column; gap: 7px; padding: clamp(18px, 2.2vw, 28px) clamp(4px, 1vw, 18px); border-right: 2px solid var(--sw-ink); color: var(--sw-ink); text-decoration: none; }
.sw-ap-nav__side--end { align-items: flex-end; text-align: right; border-right: 0; }
.sw-ap-nav__side:hover, .sw-ap-nav__all:hover { background: #EAE5DA; }
.sw-ap-nav__k { font-family: var(--sw-font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sw-muted); }
.sw-ap-nav__n { font-family: var(--sw-font-display); text-transform: uppercase; font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.1; }
.sw-ap-nav__all { flex: 0 1 160px; display: flex; align-items: center; justify-content: center; padding: clamp(18px, 2.2vw, 28px) clamp(4px, 1vw, 18px); font-family: var(--sw-font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; border-right: 2px solid var(--sw-ink); color: var(--sw-ink); text-decoration: none; }
@media (max-width: 639px) { .sw-ap-nav__all { order: 3; flex-basis: 100%; border-right: 0; border-top: 2px solid var(--sw-ink); } }
/* Display headings inside PHP templates.
 * `sw-display` is an Elementor Global Class, so it resolves only inside
 * Elementor-rendered pages. Templates rendered by PHP (the artist profile)
 * need the display face declared here. */
.sw-ap h1, .sw-ap h2, .sw-ap h3,
.sw-ap .sw-display {
  font-family: var(--sw-font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--sw-ink);
}
/* Only the section heading goes cream; the turquoise CTA card keeps ink. */
.sw-ap-start > .sw-ap-start__grid > div h2 { color: var(--sw-cream); }
.sw-ap-bio__text h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.04; max-width: 22ch; display: inline-block; }
.sw-ap-work__head h2 { display: inline-block; }
/* Artist profile featured carousel. The frame is light, so the arrows use the
 * light treatment: outlined prev, solid next. */
.sw-pf-feat .swn-next { background: var(--sw-ink); color: var(--sw-cream); }
.sw-pf-feat .swn-next:hover { background: #1F6B72; border-color: #1F6B72; color: var(--sw-cream); }
.sw-pf-slide[hidden] { display: none; }
.sw-zoombtn { border: 0; padding: 0; background: transparent; cursor: zoom-in; display: block; width: 100%; }
.sw-zoombtn:hover { opacity: 0.96; }
.sw-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Featured slider stage: a fixed, page-balanced height that shows the whole
 * tattoo (contain) instead of cropping it, on the design's dark ground. */
.sw-pf-stage {
  height: clamp(320px, 48vh, 560px);
  background: var(--sw-ink);
  background-image: none;
  display: block;
  overflow: hidden;
}
.sw-pf-stage .sw-pf-img,
.sw-pf-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 639px) { .sw-pf-stage { height: clamp(260px, 42vh, 380px); } }

/* Tattoo photography is mostly portrait, so a full-bleed stage would sit in a
 * wide field of black. Holding the viewer to a comfortable reading width keeps
 * the work dominant and the section balanced against the rest of the page. */
.sw-pf-feat { max-width: min(100%, 900px); margin-left: auto; margin-right: auto; }

/* ======================= CONTACT INQUIRY FORMS =======================
 * Approved: Contact V1. Three routes share one layout; the piercing route
 * runs on the dark section and inverts its colours.
 * ==================================================================== */
.sw-inq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(240px, 45%)), 1fr));
  gap: clamp(20px, 2.4vw, 30px) clamp(24px, 2.8vw, 42px);
  align-content: start;
  width: 100%;
}
.sw-inq-field { min-width: 0; }
.sw-inq-field--wide { grid-column: 1 / -1; }
.sw-inq-kicker { grid-column: 1 / -1; font-family: var(--sw-font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sw-turquoise-light); }

.sw-inq-label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-family: var(--sw-font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sw-muted);
}
.sw-inq-label span { color: var(--sw-muted-soft); }

.sw-inq-input {
  width: 100%; background: transparent; border: 0;
  border-bottom: 2px solid rgba(12,12,12,0.35);
  padding: 12px 2px; font-size: 16px; color: var(--sw-ink); min-height: 46px;
  font-family: var(--sw-font-mono);
}
.sw-inq-textarea {
  width: 100%; background: var(--sw-frame);
  border: 2px solid rgba(12,12,12,0.35); margin-top: 12px; padding: 14px;
  font-size: 16px; line-height: 1.6; color: var(--sw-ink); resize: vertical;
  font-family: var(--sw-font-mono);
}
.sw-inq-input:focus, .sw-inq-textarea:focus {
  outline: none; border-color: var(--sw-teal); border-bottom-color: var(--sw-teal);
  box-shadow: 0 3px 0 var(--sw-teal);
}
.sw-inq-selectwrap { position: relative; }
.sw-inq-selectwrap select { appearance: none; padding-right: 28px; cursor: pointer; }
.sw-inq-caret { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 9px; pointer-events: none; color: var(--sw-muted); }

.sw-inq-fieldset { border: 0; padding: 0; margin: 0; }
.sw-inq-fieldset legend { font-family: var(--sw-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sw-muted); padding: 0; }
.sw-inq-radios { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.sw-inq-radio {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 14px; border: 2px solid rgba(12,12,12,0.3); background: transparent;
  font-family: var(--sw-font-mono); font-size: 12.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sw-ink); min-height: 46px;
}
.sw-inq-radio input {
  appearance: none; width: 16px; height: 16px; margin: 0; flex-shrink: 0;
  border: 2px solid var(--sw-ink); background: transparent; cursor: pointer;
}
.sw-inq-radio:has(input:checked) { border-color: var(--sw-ink); background: var(--sw-turquoise); }
.sw-inq-radio input:checked { background: var(--sw-ink); box-shadow: inset 0 0 0 2px var(--sw-turquoise); }

.sw-inq-hint { font-family: var(--sw-font-mono); font-size: 12px; line-height: 1.6; color: var(--sw-muted-soft); margin: 8px 0 0; }
.sw-inq-error { font-family: var(--sw-font-mono); font-size: 12px; line-height: 1.6; color: var(--sw-red-link); margin: 8px 0 0; font-weight: 500; }
.sw-inq-field.has-error .sw-inq-input,
.sw-inq-field.has-error .sw-inq-textarea { border-color: var(--sw-red-link); border-bottom-color: var(--sw-red-link); }
.sw-inq-status {
  grid-column: 1 / -1; border-left: 4px solid var(--sw-turquoise);
  padding: 6px 0 6px 14px; font-family: var(--sw-font-mono);
  font-size: 13px; line-height: 1.6; color: var(--sw-body); max-width: 46ch;
}
.sw-inq-status--error { border-left-color: var(--sw-red-link); color: var(--sw-red-link); }
.sw-inq-status:focus { outline: 3px solid var(--sw-focus); outline-offset: 3px; }

.sw-inq-refs { border-top: 2px dotted rgba(12,12,12,0.35); padding-top: 18px; }
.sw-inq-refrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 12px; }
.sw-inq-file {
  position: relative; border: 2px solid var(--sw-ink); padding: 12px 18px;
  font-family: var(--sw-font-mono); font-size: 12.5px; letter-spacing: 0.12em;
  text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center;
  gap: 8px; min-height: 46px; color: var(--sw-ink);
}
.sw-inq-file:hover { background: var(--sw-turquoise); }
.sw-inq-file:focus-within { outline: 3px solid var(--sw-focus); outline-offset: 3px; background: var(--sw-turquoise); }
.sw-inq-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.sw-inq-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; border-top: 2px solid var(--sw-ink); padding-top: 20px; }
.sw-inq-submit {
  background: var(--sw-ink); color: var(--sw-cream); border: 2px solid var(--sw-ink);
  padding: 18px 28px; font-family: var(--sw-font-mono); font-weight: 500;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  min-height: 46px; box-shadow: 5px 6px 0 rgba(63,169,176,0.9);
}
.sw-inq-submit:hover { background: #1F6B72; }
.sw-inq--general .sw-inq-actions { border-top: 0; padding-top: 0; }
.sw-inq--general .sw-inq-submit { background: transparent; color: var(--sw-ink); box-shadow: none; padding: 15px 24px; font-size: 12.5px; font-weight: 400; }
.sw-inq--general .sw-inq-submit:hover { background: var(--sw-ink); color: var(--sw-cream); }

/* Piercing route sits on the dark section. */
.sw-inq--piercing { border: 2px solid var(--sw-footer-border); padding: clamp(20px, 2.4vw, 30px); }
.sw-inq--piercing .sw-inq-label { color: #C9CCCC; }
.sw-inq--piercing .sw-inq-label span { color: var(--sw-footer-muted); }
.sw-inq--piercing .sw-inq-input { color: var(--sw-cream); border-bottom-color: #4A5050; }
.sw-inq--piercing .sw-inq-textarea { background: #141616; border-color: #4A5050; color: var(--sw-cream); }
.sw-inq--piercing .sw-inq-input:focus, .sw-inq--piercing .sw-inq-textarea:focus { border-color: var(--sw-turquoise); border-bottom-color: var(--sw-turquoise); box-shadow: 0 3px 0 var(--sw-turquoise); }
.sw-inq--piercing .sw-inq-hint { color: var(--sw-footer-muted); }
.sw-inq--piercing .sw-inq-status { color: #C9CCCC; }
.sw-inq--piercing .sw-inq-actions { border-top: 2px dotted rgba(243,239,231,0.28); }
.sw-inq--piercing .sw-inq-submit { background: var(--sw-turquoise); color: var(--sw-ink); border-color: var(--sw-turquoise); box-shadow: none; }
.sw-inq--piercing .sw-inq-submit:hover { background: var(--sw-cream); border-color: var(--sw-cream); }