/* ==========================================================================
   Atelier — "signature" skin (brand.json "skins" → "signature"), the MOORPROD Signature look
   Bold sport-poster look from the PULSE model: near-black stage, condensed
   uppercase display type (Anton), accent glow buttons, tilted marquee band,
   numbered bento, big stats, slanted accent CTA, giant outline footer word.
   Colors still come from the brand (accent = the "lime"); applies site-wide,
   shop and product pages included. Only loaded while the skin is active.
   ========================================================================== */
.skin-signature {
  --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --line: rgba(255, 255, 255, .1);
  --r-tile: 22px;
  --wrap: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --gnav-h: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --accent-glow: color-mix(in srgb, var(--accent) 55%, transparent);
  letter-spacing: 0;
}
.skin-signature ::selection { background: var(--accent); color: var(--accent-ink); }
.skin-signature :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* condensed uppercase display type for the big titles */
.skin-signature h1, .skin-signature h2,
.skin-signature .display-xl, .skin-signature .display-l, .skin-signature .display-m, .skin-signature .display-s,
.skin-signature .product_title, .skin-signature .at-title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; line-height: .95;
}
.skin-signature .display-xl { font-size: clamp(52px, 9vw, 128px); }
.skin-signature .display-l { font-size: clamp(44px, 7vw, 96px); }
.skin-signature .eyebrow, .skin-signature .hero-label {
  font: 700 13px/1.2 var(--font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
}
.skin-signature .lede { color: var(--ash); }
.fit-line { white-space: nowrap; }

/* buttons: uppercase pills with an accent glow */
.skin-signature .pill {
  min-height: 52px; padding: 0 26px; font: 700 14px/1 var(--font-text); letter-spacing: .04em; text-transform: uppercase;
  transition: transform .25s var(--ease), background-color .25s, color .25s, box-shadow .25s;
}
.skin-signature .pill .ic { transition: transform .25s var(--ease); }
.skin-signature .pill:hover { transform: translateY(-2px); }
.skin-signature .pill:hover .ic { transform: translateX(4px); }
.skin-signature .pill-accent { box-shadow: 0 10px 30px -10px var(--accent-glow); }
.skin-signature .pill-accent:hover { box-shadow: 0 16px 40px -10px var(--accent-glow); }
.skin-signature .pill-outline { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28); }
.skin-signature .pill-outline:hover { box-shadow: inset 0 0 0 2px var(--text); background: transparent; }
.skin-signature .pill-sm { min-height: 38px; padding: 0 16px; font-size: 12px; }

/* global nav: dark glass bar, numbered uppercase links, accent button */
.skin-signature .gnav { background: color-mix(in srgb, var(--stage) 82%, transparent); border-bottom: 1px solid var(--line); }
.skin-signature .gnav-inner { max-width: var(--wrap); }
.skin-signature .gnav-logo .logo { height: 24px; }
.skin-signature .gnav-links { counter-reset: gnav; gap: clamp(18px, 2.6vw, 34px); }
.skin-signature .gnav-links a {
  counter-increment: gnav; display: inline-flex; align-items: baseline; gap: 6px;
  font: 600 13px/1 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--text); opacity: .9;
}
.skin-signature .gnav-links a::before { content: counter(gnav, decimal-leading-zero); font-size: 10px; letter-spacing: 0; color: var(--accent); }
.skin-signature .gnav-links a:hover { color: var(--accent); opacity: 1; }
.skin-signature .gnav-links a::after { display: none; }
.gnav-cta { display: none; }
.skin-signature .gnav-cta { display: inline-flex; min-height: 40px; padding: 0 18px; margin-left: 8px; font-size: 12px; }
.skin-signature .mnav a { font: 400 44px/1.05 var(--font-display); text-transform: uppercase; }
.skin-signature .mnav a.mnav-sub { font: 600 15px/1 var(--font-text); letter-spacing: .08em; }

/* ---- home: boxhero ---------------------------------------------------- */
.bx-hero { position: relative; overflow: hidden; padding: clamp(18px, 2.4vw, 36px) 0 clamp(26px, 3vw, 40px); }
.bx-glow {
  position: absolute; left: 50%; top: 58%; width: 980px; height: 760px; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), var(--navy, color-mix(in srgb, var(--accent) 25%, transparent)) 55%, transparent 78%);
}
.bx-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}
.bx-hero .wrap { position: relative; z-index: 1; }
.bx-title { font-size: clamp(54px, 11.4vw, 176px); line-height: .86; text-align: center; margin: 0 0 clamp(10px, 1.4vw, 20px); }
.bx-title .outline { color: transparent; -webkit-text-stroke: 2px var(--text); }
.bx-title .dot { color: var(--accent); }
.bx-grid { display: grid; grid-template-columns: 1.2fr auto .8fr; align-items: center; gap: clamp(24px, 3vw, 48px); }
.bx-copy { min-width: 0; }
.bx-sub { margin: 0 0 26px; max-width: 22em; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--ash); }
.bx-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bx-box { display: flex; flex-direction: column; align-items: center; }
.bx-box .glassbox {
  position: relative; width: min(520px, 90vw, calc(100svh - 400px)); min-width: 260px; aspect-ratio: 1;
  background:
    radial-gradient(45% 40% at 50% 46%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(55% 14% at 50% 90%, rgba(0, 0, 0, .7), transparent 70%);
}
.bx-box .glassbox canvas { position: absolute; inset: 0; }
.bx-tag {
  margin-top: -14px; font: 700 11px/1.4 var(--font-text); letter-spacing: .28em; text-transform: uppercase; color: var(--ash);
  text-decoration: none !important; padding: 10px 4px;
}
.bx-tag span { color: var(--accent); }
.bx-tag:hover { color: var(--text); }
.bx-stats { margin: 0; display: grid; justify-self: end; min-width: 200px; }
.bx-stats div { padding: 16px 0; border-top: 1px solid var(--line); text-align: right; }
.bx-stats div:last-child { border-bottom: 1px solid var(--line); }
.bx-stats dt { font: 600 12px/1.3 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ash); }
.bx-stats dd { margin: 2px 0 0; font: 400 46px/1 var(--font-display); color: var(--accent); }
.bx-stats dd small, .big-stats dd small { font-size: .45em; margin-left: 4px; }

/* ---- home: marquee band ----------------------------------------------- */
.mq-wrap { overflow: hidden; padding: 14px 0; margin-top: -8px; position: relative; z-index: 2; }
.mq {
  overflow: hidden; margin: 0 -20px; transform: rotate(-1.6deg);
  background: var(--accent); color: var(--accent-ink); border-block: 2px solid #000;
}
.mq-track { display: flex; width: max-content; animation: mq 34s linear infinite; }
.mq:hover .mq-track { animation-play-state: paused; }
.mq-group { display: flex; align-items: center; gap: 34px; padding: 16px 17px; }
.mq span { font: 400 clamp(30px, 4vw, 52px)/1 var(--font-display); text-transform: uppercase; white-space: nowrap; }
.mq svg { width: 30px; height: 30px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---- shared section heads ---------------------------------------------- */
.skin-signature .section { position: relative; padding-block: clamp(80px, 10vw, 140px); }
.sx-head { margin-bottom: clamp(36px, 5vw, 60px); }
.sx-title { font-size: clamp(48px, 7.4vw, 112px); line-height: .92; margin: 0; }
.sx-title .outline { color: transparent; -webkit-text-stroke: 2px var(--text); }
.bt h3, .gold-cta .sx-title { color: inherit; }
.sx-title .dot { color: var(--accent); }
.sx-sub { margin: 18px 0 0; max-width: 32em; font-size: 18px; color: var(--ash); }
.kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 700 13px/1.2 var(--font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--ash); }
.kicker span { color: var(--accent); }

/* ---- home: bento of real products --------------------------------------- */
.bento { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; }
.bt {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 320px; padding: 28px; border-radius: 22px; color: var(--text); text-decoration: none !important;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.bt:hover { transform: translateY(-4px); }
.bt.is-tall { grid-row: span 2; }
.bt.is-wide { grid-column: span 2; }
.bt-num { font: 400 18px/1 var(--font-display); letter-spacing: .1em; color: var(--accent-deep, var(--accent)); }
.bt h3 { margin: 6px 0 8px; font: 400 clamp(34px, 3.4vw, 54px)/.95 var(--font-display); text-transform: uppercase; }
.bt p { margin: 0 0 14px; max-width: 26em; font-size: 15px; line-height: 1.5; opacity: .8; }
.chips { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 12px; border-radius: 999px; border: 1px solid currentColor; font: 700 11px/1.2 var(--font-text); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.chips .chip-price { opacity: 1; }
.bt-go { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 var(--font-text); letter-spacing: .08em; text-transform: uppercase; }
.bt-go .ic { transition: transform .25s var(--ease); }
.bt:hover .bt-go .ic { transform: translateX(4px); }

/* product tiles: the studio photo on a warm light panel (the apple-tile half of the mix) */
.bt-product { background: #f3f1ec; color: #0a0f1a; padding-top: 0; }
.bt-product .bt-media { flex: 1; display: grid; place-items: center; min-height: 180px; padding: 22px 0 6px; }
.bt-product .bt-media img { width: 100%; height: 100%; max-height: 280px; object-fit: contain; mix-blend-mode: multiply; transition: transform 1s var(--ease); }
.bt-product.is-tall .bt-media img { max-height: 520px; }
.bt-product:hover .bt-media img { transform: scale(1.05); }
.bt-product .bt-num { color: color-mix(in srgb, var(--accent) 80%, #000); }
.bt-product .chip-price { background: #0a0f1a; color: #fff; border-color: #0a0f1a; }
.bt-product.is-wide { flex-direction: row; align-items: center; gap: 24px; padding-top: 28px; }
.bt-product.is-wide .bt-media { order: 2; flex: 1 1 50%; padding: 0; }
.bt-product.is-wide .bt-body { flex: 1 1 50%; }
.bt-light { background: #f3f1ec; color: #0a0f1a; }
.bt-light .bt-num { color: var(--accent-deep, #6b5a2a); }
.bt-shot { flex: 1; display: grid; place-items: center; margin-bottom: 18px; }
.bt-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 12px; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55); transition: transform 1s var(--ease); }
.bt:hover .bt-shot img { transform: scale(1.03); }
.bt-light.is-wide { flex-direction: row; align-items: center; gap: 24px; }
.bt-light.is-wide .bt-shot { order: 2; flex: 1 1 55%; margin: 0; }
.bt-light.is-wide .bt-body { flex: 1 1 45%; }
.bt-accent { background: var(--accent); color: var(--accent-ink); }
.bt-accent p { opacity: .85; }
.bt-dark { background: var(--panel); border: 1px solid var(--line); }
.bt-icon { position: absolute; top: 26px; right: 26px; }
.bt-icon .ic { width: 56px; height: 56px; stroke-width: 1.6; }

/* ---- home: big stats ---------------------------------------------------- */
.stats-band {
  overflow: hidden; border-block: 1px solid var(--line);
  background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
              radial-gradient(70% 90% at 0% 100%, var(--navy, color-mix(in srgb, var(--accent) 30%, transparent)), transparent 65%), var(--stage);
}
.big-stats { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.big-stats > div { padding: 28px 24px 8px 0; border-top: 2px solid var(--accent); }
.big-stats > div + div { padding-left: 24px; }
.big-stats dd { margin: 0; font: 400 clamp(64px, 8vw, 116px)/1 var(--font-display); color: var(--text); }
.big-stats dd small { color: var(--accent); }
.big-stats dt { margin-top: 14px; max-width: 16em; font-size: 15px; line-height: 1.5; color: var(--ash); }

/* ---- home: slanted accent CTA ------------------------------------------- */
.gold-cta {
  position: relative; margin-top: -2vw; padding: clamp(110px, 12vw, 170px) 0 clamp(80px, 10vw, 130px);
  background: var(--accent); color: var(--accent-ink); clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
}
.gold-cta .kicker, .gold-cta .kicker span { color: var(--accent-ink); }
.gold-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.gold-copy { min-width: 0; }
.gold-copy .sx-title { font-size: clamp(54px, 8.4vw, 120px); margin-bottom: 22px; }
.gold-copy > p { max-width: 26em; font-size: 19px; opacity: .85; }
.gold-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.gold-list li { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.gold-list .ic { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--accent-ink); color: var(--accent); stroke-width: 3; flex: none; }
.gold-card { padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: var(--stage); color: var(--text); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.gold-card h3 { margin: 0 0 14px; font: 400 clamp(40px, 4.4vw, 60px)/.95 var(--font-display); text-transform: uppercase; }
.gold-card p { margin: 0 0 26px; color: var(--ash); font-size: 17px; }
.gold-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- footer: giant outline word --------------------------------------- */
.skin-signature .site-footer { background: var(--stage); border-top: 1px solid var(--line); overflow: hidden; padding-top: clamp(60px, 8vw, 100px); }
.footer-word {
  margin: 0 0 clamp(40px, 5vw, 70px); text-align: center; white-space: nowrap;
  font: 400 19.5vw/.8 var(--font-display); letter-spacing: .02em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent) 60%, transparent);
}
.skin-signature .footer-col h4 { font: 800 12px/1.4 var(--font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.skin-signature .footer-col a:hover { color: var(--accent); }
.skin-signature .footer-top { border-color: var(--line); }

/* ---- inner pages built from apple-style tiles (template-parts/home/tiles.php) ---- */
.skin-signature .ats { background: var(--stage); gap: 16px; padding: 16px var(--gutter) 40px; max-width: var(--wrap); margin-inline: auto; }
.skin-signature .at { border-radius: 22px; }
.skin-signature .at-gray, .skin-signature .at-white, .skin-signature .at-warm, .skin-signature .at-cool {
  --text: #0a0f1a; --ash: #4a5160; --keyline-2: inset 0 0 0 2px rgba(10, 15, 26, .3); background: #f3f1ec;
}
.skin-signature .at-gray .pill-outline, .skin-signature .at-white .pill-outline, .skin-signature .at-warm .pill-outline, .skin-signature .at-cool .pill-outline { box-shadow: inset 0 0 0 2px rgba(10, 15, 26, .3); color: #0a0f1a; }
.skin-signature .at-dark, .skin-signature .at-navy, .skin-signature .at-black { --text: #f3f1ea; --ash: #9aa3b2; background: var(--panel); border: 1px solid var(--line); }
.skin-signature .at-navy .pill-accent { --accent: inherit; }
.skin-signature .at-title { font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: .95; text-wrap: nowrap; }
.skin-signature .at-half .at-title { font-size: clamp(34px, 3.6vw, 52px); }
.skin-signature .at-sub { font: 400 clamp(16px, 1.5vw, 19px)/1.45 var(--font-text); letter-spacing: 0; }
.skin-signature .at-eyebrow { font: 700 12px/1.2 var(--font-text); letter-spacing: .2em; text-transform: uppercase; }
.skin-signature .at-stats b { font-family: var(--font-display); font-weight: 400; }
.skin-signature .page-hero, .skin-signature .at-intro { position: relative; }

/* ---- shop & product pages -------------------------------------------- */
.skin-signature .page-hero h1 { font-size: clamp(56px, 10vw, 140px); }
.skin-signature .pcard, .skin-signature .band-stage .pcard, .skin-signature .pgrid .pcard { border-radius: 22px; }
.skin-signature .contact-fab { font: 700 13px/1 var(--font-text); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 10px 30px -10px var(--accent-glow); }

.skin-signature .cmp-head a.cmp-name { font: 700 16px/1.3 var(--font-text); text-transform: none; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1068px) {
  .bx-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 26px; }
  .bx-box { order: -1; }
  .bx-copy { display: flex; flex-direction: column; align-items: center; }
  .bx-actions { justify-content: center; }
  .bx-stats { justify-self: stretch; grid-template-columns: repeat(3, 1fr); min-width: 0; }
  .bx-stats div { text-align: center; border-bottom: 1px solid var(--line); padding: 14px 6px; }
  .bx-stats div + div { border-left: 1px solid var(--line); }
  .bento { grid-template-columns: 1fr 1fr; }
  .bt.is-tall { grid-row: auto; }
  .big-stats { grid-template-columns: 1fr 1fr; }
  .big-stats > div:nth-child(3) { padding-left: 0; }
  .gold-grid { grid-template-columns: 1fr; }
}
@media (max-width: 833px) {
  .skin-signature .gnav-cta { display: none; }
}
@media (max-width: 734px) {
  .bx-title .outline, .sx-title .outline { -webkit-text-stroke-width: 1.2px; }
  .bx-box .glassbox { width: min(92vw, 420px); min-width: 0; }
  .bx-stats dd { font-size: 36px; }
  .bx-stats dt { font-size: 10px; letter-spacing: .1em; }
  .bx-actions .pill { flex: 1 1 auto; }
  .bento { grid-template-columns: 1fr; }
  .bt.is-wide { grid-column: auto; }
  .bt-product.is-wide { flex-direction: column; align-items: stretch; padding-top: 0; }
  .bt-product.is-wide .bt-media { order: 0; padding: 22px 0 6px; }
  .bt-product.is-wide .bt-media, .bt-product.is-wide .bt-body, .bt-light.is-wide .bt-shot, .bt-light.is-wide .bt-body { flex: none; }
  .bt-light.is-wide { flex-direction: column; align-items: stretch; }
  .bt-light.is-wide .bt-shot { order: 0; margin-bottom: 18px; }
  .big-stats { grid-template-columns: 1fr; }
  .big-stats > div, .big-stats > div + div { padding-left: 0; }
  .gold-cta { clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; }
}