/* =============================================================================
   ARTISTECHAI — MAIN STYLESHEET
   =============================================================================
   All colors, fonts, spacing, and timing come from tokens.css custom
   properties. To restyle the site, edit tokens.css — not this file.

   Contents:
     00 Base & reset          07 About / manifesto
     01 Utilities & motifs    08 How it works
     02 Motion & reveals      09 Blog / studio notes
     03 Buttons               10 Email capture
     04 Preloader & header    11 Footer
     05 Hero                  12 Cart drawer
     06 Showcase & cards      13 WooCommerce pages, forms, misc
   ========================================================================== */


/* == 00 · BASE ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body.atx {
  margin: 0;
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0 0 var(--space-3); }
ul { list-style: none; margin: 0; padding: 0; }

::selection { background: var(--clr-red); color: var(--clr-on-red); }

:focus-visible {
  outline: var(--seam-w) solid var(--clr-red);
  outline-offset: 3px;
}

/* Thin engineered scrollbar */
body.atx::-webkit-scrollbar { width: 10px; }
body.atx::-webkit-scrollbar-track { background: var(--clr-canvas-deep); }
body.atx::-webkit-scrollbar-thumb { background: var(--clr-line-strong); }
body.atx::-webkit-scrollbar-thumb:hover { background: var(--clr-red); }


/* == 01 · UTILITIES & SIGNATURE MOTIFS ==================================== */

.atx-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.atx-wrap--narrow { max-width: var(--content-narrow); }

.atx-section { padding-block: var(--section-pad-y); position: relative; }

/* Angled section divider — the Seam as architecture */
.atx-section--seamed::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--hairline);
  background: linear-gradient(90deg,
    var(--clr-line) 0%, var(--clr-line) 62%,
    var(--clr-red) 62%, var(--clr-red) calc(62% + 90px),
    var(--clr-line) calc(62% + 90px));
  transform: skewY(calc(var(--cut-angle) * -0.08));
}

/* Index mark — the engineered label voice: ◤ IDX·01 / CATALOG */
.atx-index {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--clr-ink-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  margin: 0 0 var(--space-3);
}

.atx-index::before {
  content: "";
  width: 9px; height: 9px;
  background: var(--clr-red);
  clip-path: polygon(0 0, 100% 0, 0 100%);   /* the triangular tick */
  flex: none;
}

.atx-index em { font-style: normal; color: var(--clr-red); }

/* Eyebrow — quieter mono label */
.atx-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--clr-ink-faint);
  margin: 0 0 var(--space-3);
}

/* Display headings */
.atx-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--clr-ink);
}

.atx-h2 em { font-style: normal; color: var(--clr-red); }

/* Section header block */
.atx-sechead { max-width: 640px; margin-bottom: var(--space-6); }
.atx-sechead__sub { color: var(--clr-text-muted); margin-top: var(--space-3); max-width: 52ch; }

/* Notched surface — corner cut from the logo geometry */
.atx-notched {
  clip-path: var(--clip-notch-tr);
}

/* Red seam hairline (vertical accent bar) */
.atx-seam-left {
  border-left: var(--seam-w) solid var(--clr-red);
  padding-left: var(--space-4);
}

/* Hatched placeholder slot — marks any swappable image area */
.atx-ph {
  width: 100%; height: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(calc(90deg - var(--cut-angle)),
      var(--clr-elevated) 0, var(--clr-elevated) 6px,
      var(--clr-panel) 6px, var(--clr-panel) 12px);
  position: absolute;
  inset: 0;
}

.atx-ph span {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--clr-ink-faint);
  text-align: center;
  padding: var(--space-3);
}

.atx-ph::after {
  content: "";
  position: absolute;
  width: 34px; height: 34px;
  right: 0; bottom: 0;
  background: var(--clr-red-tint);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.atx-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--clr-red);
  color: var(--clr-on-red);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}
.atx-skip-link:focus { left: 0; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}


/* == 02 · MOTION — "Blade & settle" reveal system ========================= */
/* JS adds .is-in when an element scrolls into view. Elements enter as a
   blade wipe along the cut angle, then settle. Stagger via --stagger-i.   */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  /* left wedge with real area: opacity hides it, and IntersectionObserver
     (which honors the element's own clip-path) can still see the box */
  clip-path: polygon(0 0, 18% 0, calc(18% - 8vw) 100%, 0 100%);
  transition:
    opacity var(--dur-slow) var(--ease-blade),
    transform var(--dur-slow) var(--ease-blade),
    clip-path var(--dur-slow) var(--ease-cut);
  transition-delay: calc(var(--stagger-i, 0) * var(--reveal-stagger));
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
  clip-path: polygon(0 0, 108% 0, 100% 100%, calc(0% - 8vw) 100%);
}

/* Seam-draw: hairlines that draw themselves in */
.js [data-reveal-line] {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-cut)
              calc(var(--stagger-i, 0) * var(--reveal-stagger));
}
.js [data-reveal-line].is-in { transform: scaleX(1); }


/* == 03 · BUTTONS ========================================================= */

.atx-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--font-mono);
  font-size: var(--btn-fs);
  font-weight: var(--fw-body-medium);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  line-height: 1;
  clip-path: var(--clip-notch-btn);
  position: relative;
  isolation: isolate;
  transition: color var(--dur-fast) var(--ease-blade);
  white-space: nowrap;
}

.atx-btn .atx-btn__glyph { font-family: var(--font-body); transition: transform var(--dur-fast) var(--ease-blade); }
.atx-btn:hover .atx-btn__glyph { transform: translateX(4px); }

/* Primary — solid signal red; hover: a bone-white blade wipes through */
.atx-btn--primary { background: var(--clr-red); color: var(--clr-on-red); }

.atx-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--clr-ink);
  transform: translateX(-101%) skewX(calc(var(--cut-angle) * -1));
  transition: transform var(--dur-med) var(--ease-cut);
}

.atx-btn--primary:hover::after { transform: translateX(0) skewX(0); }
.atx-btn--primary:hover { color: var(--clr-canvas-deep); }
.atx-btn--primary:active { background: var(--clr-red-deep); }

/* Ghost — hairline frame; hover: red seam floods the border and text */
.atx-btn--ghost {
  box-shadow: inset 0 0 0 var(--hairline) var(--clr-line-strong);
  color: var(--clr-ink);
  background: transparent;
}

.atx-btn--ghost::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--clr-red-tint);
  transform: translateY(101%);
  transition: transform var(--dur-med) var(--ease-cut);
}

.atx-btn--ghost:hover { box-shadow: inset 0 0 0 var(--hairline) var(--clr-red); color: var(--clr-red-bright); }
.atx-btn--ghost:hover::after { transform: translateY(0); }


/* == 04 · PRELOADER & HEADER ============================================= */

.atx-preloader {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--clr-canvas-deep);
  display: grid;
  place-items: center;
  transition: opacity var(--dur-med) var(--ease-blade),
              visibility var(--dur-med) var(--ease-blade);
}

.atx-preloader.is-done { opacity: 0; visibility: hidden; }

.atx-preloader__logo img { height: var(--logo-h-preloader); width: auto; }

.atx-preloader__seam {
  width: min(220px, 40vw);
  height: var(--seam-w);
  background: var(--clr-line);
  margin-top: var(--space-4);
  overflow: hidden;
  position: relative;
}

.atx-preloader__seam::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--clr-red);
  transform: translateX(-100%);
  animation: atx-seam-load var(--dur-glacial) var(--ease-cut) infinite;
}

@keyframes atx-seam-load {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* --- Header ------------------------------------------------------------- */

.atx-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: var(--hairline) solid transparent;
  transition: background var(--dur-med) var(--ease-blade),
              border-color var(--dur-med) var(--ease-blade);
}

.atx-header.is-scrolled {
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(var(--header-blur));
  backdrop-filter: blur(var(--header-blur));
  border-bottom-color: var(--clr-line);
}

.atx-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition: height var(--dur-med) var(--ease-blade);
}

.atx-header.is-scrolled .atx-header__inner { height: var(--header-h-compact); }

/* Logo slot — swappable: renders Customizer logo, else styled wordmark */
.atx-logo-slot { display: inline-flex; align-items: center; }
.atx-logo-slot img { height: var(--logo-h-header); width: auto; }

.atx-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-display-heavy);
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--clr-ink);
}
.atx-wordmark em { font-style: normal; color: var(--clr-red); }

.atx-nav { display: flex; gap: var(--space-5); }

.atx-nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--clr-ink-dim);
  position: relative;
  padding-block: 0.4em;
  transition: color var(--dur-fast) var(--ease-blade);
}

/* Nav hover: a short red seam slides in under the label at the cut angle */
.atx-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: var(--seam-w);
  background: var(--clr-red);
  transform: scaleX(0) skewX(calc(var(--cut-angle) * -2));
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-blade);
}

.atx-nav a:hover { color: var(--clr-ink); }
.atx-nav a:hover::after { transform: scaleX(1) skewX(0); }

.atx-header__actions { display: flex; align-items: center; gap: var(--space-3); }

/* Cart button */
.atx-cartbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--clr-ink);
  padding: 0.6em 1em;
  box-shadow: inset 0 0 0 var(--hairline) var(--clr-line-strong);
  clip-path: var(--clip-notch-btn);
  transition: box-shadow var(--dur-fast) var(--ease-blade),
              color var(--dur-fast) var(--ease-blade);
}

.atx-cartbtn:hover { box-shadow: inset 0 0 0 var(--hairline) var(--clr-red); color: var(--clr-red-bright); }

.atx-cartbtn__count {
  font-family: var(--font-mono);
  background: var(--clr-red);
  color: var(--clr-on-red);
  min-width: 1.6em;
  text-align: center;
  padding: 0.15em 0.3em;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
}

/* Burger (mobile) */
.atx-burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.atx-burger span {
  display: block; width: 24px; height: 2px;
  background: var(--clr-ink);
  transition: transform var(--dur-med) var(--ease-blade), opacity var(--dur-fast);
}
.atx-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.atx-burger.is-open span:nth-child(2) { opacity: 0; }
.atx-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav overlay — full-screen gallery placard */
.atx-mobilenav {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--clr-canvas-deep);
  display: grid;
  place-content: center;
  gap: var(--space-3);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-blade),
              visibility var(--dur-med) var(--ease-blade);
}

.atx-mobilenav.is-open { opacity: 1; visibility: visible; }

.atx-mobilenav a {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(2rem, 9vw, 3.2rem);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  color: var(--clr-ink);
  line-height: 1.15;
}

.atx-mobilenav a:hover { color: var(--clr-red); }


/* == 05 · HERO — The Shattered Monolith =================================== */

.atx-hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: var(--clr-canvas-deep);
  padding-block: calc(var(--header-h) + var(--space-6)) var(--space-7);
}

/* The 3D canvas fills the hero; scene is composed right-of-center in JS */
.atx-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Static fallback (reduced motion / no WebGL / no JS) */
.atx-hero__fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8vw;
}
.atx-hero__fallback svg { height: min(70vh, 640px); width: auto; }

.no-js .atx-hero__fallback,
.atx-hero.is-fallback .atx-hero__fallback { display: flex; }
.no-js .atx-hero__canvas,
.atx-hero.is-fallback .atx-hero__canvas { display: none; }

/* Cinematic vignette over the scene */
.atx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vignette);
  pointer-events: none;
}

/* HUD — corner-mounted mono readouts, like gallery placards */
.atx-hero__hud {
  position: absolute;
  inset: calc(var(--header-h) + var(--space-3)) var(--gutter) var(--space-3);
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--clr-ink-faint);
  z-index: 2;
}

.atx-hero__hud span { position: absolute; }
.atx-hero__hud span:nth-child(1) { top: 0; left: 0; }
.atx-hero__hud span:nth-child(2) { top: 0; right: 0; color: var(--clr-red); }
.atx-hero__hud span:nth-child(3) { bottom: 0; right: 0; }

.atx-hero__content {
  position: relative;
  z-index: 3;
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.atx-hero__mark { margin-bottom: var(--space-5); }
.atx-hero__mark img { width: var(--logo-w-hero); height: auto; }

.atx-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-heavy);
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  max-width: 12ch;
}

.atx-hero__title em { font-style: normal; color: var(--clr-red); }

.atx-hero__sub {
  color: var(--clr-text-muted);
  max-width: 46ch;
  margin-top: var(--space-4);
  font-size: var(--fs-body);
}

.atx-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Scroll cue — vertical seam that pulses downward */
.atx-hero__cue {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--clr-ink-faint);
}

.atx-hero__cue i {
  width: var(--seam-w);
  height: 44px;
  background: var(--clr-line-strong);
  position: relative;
  overflow: hidden;
}

.atx-hero__cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--clr-red);
  transform: translateY(-100%);
  animation: atx-cue 2.2s var(--ease-cut) infinite;
}

@keyframes atx-cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}


/* == TICKER — exclusivity strip ========================================== */

.atx-ticker {
  border-block: var(--hairline) solid var(--clr-line);
  background: var(--clr-panel);
  overflow: hidden;
  padding-block: 0.85rem;
}

.atx-ticker__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: atx-ticker var(--ticker-speed) linear infinite;
}

.atx-ticker:hover .atx-ticker__track { animation-play-state: paused; }

.atx-ticker__item {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--clr-ink-dim);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}

.atx-ticker__item::after { content: "◢"; color: var(--clr-red); font-size: 0.8em; }

@keyframes atx-ticker {
  to { transform: translateX(-50%); }
}


/* == 06 · SHOWCASE — The Vault ============================================ */

.atx-showcase .atx-sechead { display: flex; flex-direction: column; }

/* Track toggle — gallery placard tabs */
.atx-tabs {
  display: inline-flex;
  border: var(--hairline) solid var(--clr-line-strong);
  clip-path: var(--clip-notch-btn);
  margin-bottom: var(--space-6);
  position: relative;
  background: var(--clr-panel);
}

.atx-tab {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--clr-ink-dim);
  padding: 1rem 1.75rem;
  position: relative;
  z-index: 1;
  transition: color var(--dur-med) var(--ease-blade);
}

.atx-tab[aria-selected="true"] { color: var(--clr-on-red); }

/* Sliding red indicator behind the active tab */
.atx-tabs__indicator {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  background: var(--clr-red);
  transition: transform var(--dur-med) var(--ease-cut),
              width var(--dur-med) var(--ease-cut);
  z-index: 0;
}

.atx-tabpanel[hidden] { display: none; }

.atx-grid--products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--grid-gap);
}

/* --- Product card -------------------------------------------------------- */

.atx-card {
  background: var(--clr-elevated);
  clip-path: var(--clip-notch-tr);
  position: relative;
  transform-style: preserve-3d;
  transition: background var(--dur-fast) var(--ease-blade);
  /* JS sets --tilt-x / --tilt-y on pointermove */
  transform: perspective(900px)
             rotateX(var(--tilt-x, 0deg))
             rotateY(var(--tilt-y, 0deg));
  will-change: transform;
}

.atx-card:hover { background: var(--clr-elevated-2); }

/* Red seam glow that follows the cursor across the card */
.atx-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
              var(--clr-red-tint), transparent 65%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-blade);
  pointer-events: none;
  z-index: 1;
}

.atx-card:hover::before { opacity: 1; }

/* Notch corner turns red on hover — the seam "ignites" */
.atx-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: var(--notch); height: var(--notch);
  background: var(--clr-red);
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-blade);
  z-index: 2;
}

.atx-card:hover::after { opacity: 1; }

.atx-card__media {
  aspect-ratio: var(--card-img-ratio);
  overflow: hidden;
  position: relative;
  background: var(--clr-panel);
}

.atx-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-blade),
              filter var(--dur-slow) var(--ease-blade);
  filter: saturate(0.85) contrast(1.05);
}

.atx-card:hover .atx-card__media img { transform: scale(1.045); filter: saturate(1) contrast(1.08); }

/* SKU-style mono tag pinned to the image */
.atx-card__sku {
  position: absolute;
  top: var(--space-3); left: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--clr-ink);
  background: var(--scrim);
  padding: 0.35em 0.7em;
  z-index: 2;
}

/* Track chip: DIGITAL / APPAREL */
.atx-card__track {
  position: absolute;
  bottom: var(--space-3); left: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--clr-red-bright);
  z-index: 2;
}

.atx-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  z-index: 2;
}

.atx-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.atx-card__title a:hover { color: var(--clr-red-bright); }

.atx-card__price {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-lg);
  color: var(--clr-ink-dim);
}

.atx-card__price ins { text-decoration: none; color: var(--clr-red-bright); }
.atx-card__price del { color: var(--clr-ink-faint); margin-right: 0.6em; }

/* Quick-add bar — slides up along the cut on hover */
.atx-card__add {
  margin-top: var(--space-2);
}

.atx-card__add .atx-btn,
.atx-card__add .add_to_cart_button {
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--font-mono);
  font-size: var(--btn-fs);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  line-height: 1;
  clip-path: var(--clip-notch-btn);
  background: transparent;
  box-shadow: inset 0 0 0 var(--hairline) var(--clr-line-strong);
  color: var(--clr-ink);
  text-align: center;
  transition: background var(--dur-fast) var(--ease-blade),
              color var(--dur-fast) var(--ease-blade),
              box-shadow var(--dur-fast) var(--ease-blade);
}

.atx-card__add .atx-btn:hover,
.atx-card__add .add_to_cart_button:hover {
  background: var(--clr-red);
  color: var(--clr-on-red);
  box-shadow: inset 0 0 0 var(--hairline) var(--clr-red);
}

/* Woo "added" state */
.atx-card__add .added_to_cart {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--clr-red-bright);
}

.atx-showcase__more { margin-top: var(--space-6); text-align: center; }

/* Empty-catalog notice (before products exist) */
.atx-empty {
  border: var(--hairline) dashed var(--clr-line-strong);
  padding: var(--space-6);
  text-align: center;
  color: var(--clr-ink-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-lg);
  letter-spacing: 0.05em;
}


/* == 07 · ABOUT / MANIFESTO =============================================== */

.atx-about { background: var(--clr-panel); }

.atx-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-7);
  align-items: start;
}

.atx-quote {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-quote);
  line-height: 1.12;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0 0 var(--space-5);
  position: relative;
  padding-left: var(--space-4);
}

/* The quote's seam: an angled red blade, not a straight border */
.atx-quote::before {
  content: "";
  position: absolute;
  left: 0; top: 0.1em; bottom: 0.1em;
  width: var(--seam-w);
  background: var(--clr-red);
  transform: skewX(calc(var(--cut-angle) * -1));
}

.atx-quote em { font-style: normal; color: var(--clr-red); }

.atx-about__body {
  columns: 2;
  column-gap: var(--space-5);
  color: var(--clr-text-muted);
}

.atx-about__body p { break-inside: avoid; }

/* Photography slot — dramatic portrait with notch mask + caption rail */
.atx-about__figure { position: relative; }

.atx-about__photo {
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(calc(90deg - var(--cut-angle)),
      var(--clr-elevated) 0, var(--clr-elevated) 6px,
      var(--clr-panel) 6px, var(--clr-panel) 12px);
  clip-path: var(--clip-notch-tr);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.atx-about__photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.15);
}

.atx-about__photo-hint {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--clr-ink-faint);
  text-align: center;
  padding: var(--space-3);
  position: relative;
  z-index: 1;
}

.atx-about__caption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--clr-ink-faint);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.atx-about__caption em { font-style: normal; color: var(--clr-red); }


/* == 08 · HOW IT WORKS — Protocol ========================================= */

.atx-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  position: relative;
}

/* Seam connector behind the three panels */
.atx-steps::before {
  content: "";
  position: absolute;
  top: 3.4rem;
  left: 4%; right: 4%;
  height: var(--hairline);
  background: linear-gradient(90deg, var(--clr-line-strong), var(--clr-red), var(--clr-line-strong));
  z-index: 0;
}

.atx-step {
  background: var(--clr-elevated);
  clip-path: var(--clip-notch-tr);
  padding: var(--space-5);
  position: relative;
  z-index: 1;
  border-top: var(--seam-w) solid var(--clr-red);
}

.atx-step__num {
  font-family: var(--font-display);
  font-weight: var(--fw-display-heavy);
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--clr-line-strong);
  display: block;
  margin-bottom: var(--space-4);
  transition: color var(--dur-med) var(--ease-blade),
              -webkit-text-stroke-color var(--dur-med) var(--ease-blade);
}

.atx-step:hover .atx-step__num { color: var(--clr-red); -webkit-text-stroke-color: var(--clr-red); }

.atx-step__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--clr-red);
  display: block;
  margin-bottom: var(--space-2);
}

.atx-step__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.atx-step__text { color: var(--clr-text-muted); margin: 0; font-size: var(--fs-small); }


/* == 09 · BLOG / STUDIO NOTES ============================================= */

.atx-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

.atx-post {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
}

.atx-post__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  clip-path: var(--clip-notch-tr);
  background:
    repeating-linear-gradient(calc(90deg - var(--cut-angle)),
      var(--clr-elevated) 0, var(--clr-elevated) 6px,
      var(--clr-panel) 6px, var(--clr-panel) 12px);
}

.atx-post__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.5) contrast(1.1);
  transition: transform var(--dur-slow) var(--ease-blade),
              filter var(--dur-slow) var(--ease-blade);
}

.atx-post:hover .atx-post__media img { transform: scale(1.04); filter: grayscale(0) contrast(1.08); }

.atx-post__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--clr-ink-faint);
  display: flex;
  gap: var(--space-3);
}

.atx-post__meta em { font-style: normal; color: var(--clr-red); }

.atx-post__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.atx-post__title a { transition: color var(--dur-fast) var(--ease-blade); }
.atx-post__title a:hover { color: var(--clr-red-bright); }

.atx-post__excerpt { color: var(--clr-text-muted); font-size: var(--fs-small); margin: 0; }

.atx-blog__more { margin-top: var(--space-6); }


/* == 10 · EMAIL CAPTURE — The Signal ====================================== */

.atx-capture {
  background: var(--clr-panel);
  position: relative;
  overflow: hidden;
}

/* Giant ghost glyph — the triangular tick at architectural scale */
.atx-capture::before {
  content: "";
  position: absolute;
  right: -6vw; bottom: -14vh;
  width: 38vw; height: 38vw;
  background: var(--clr-red-tint);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}

.atx-capture__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-6);
  align-items: center;
  position: relative;
}

.atx-capture__form form,
.atx-capture__form .atx-capture-native {
  display: flex;
  gap: var(--space-2);
}

.atx-capture input[type="email"],
.atx-capture input[type="text"] {
  flex: 1;
  background: var(--input-bg);
  border: var(--hairline) solid var(--input-border);
  color: var(--clr-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-lg);
  letter-spacing: 0.05em;
  padding: var(--input-pad);
  clip-path: var(--clip-notch-btn);
  min-width: 0;
}

.atx-capture input::placeholder { color: var(--clr-ink-faint); }

.atx-capture input:focus {
  outline: none;
  border-color: var(--clr-red);
  box-shadow: 0 0 0 3px var(--clr-focus-ring);
}

.atx-capture__note {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  color: var(--clr-ink-faint);
}


/* == 11 · FOOTER ========================================================== */

.atx-footer {
  border-top: var(--hairline) solid var(--clr-line);
  background: var(--clr-canvas-deep);
  padding-block: var(--space-7) var(--space-4);
}

.atx-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 3fr)) minmax(0, 3fr);
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

.atx-footer .atx-logo-slot img { height: var(--logo-h-footer); }

.atx-footer__tag {
  color: var(--clr-ink-faint);
  font-size: var(--fs-small);
  margin-top: var(--space-3);
  max-width: 34ch;
}

.atx-footer__heading {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--clr-red);
  margin-bottom: var(--space-3);
  display: block;
}

.atx-footer__nav li { margin-bottom: var(--space-2); }

.atx-footer__nav a {
  color: var(--clr-ink-dim);
  font-size: var(--fs-small);
  transition: color var(--dur-fast) var(--ease-blade);
}

.atx-footer__nav a:hover { color: var(--clr-ink); }

/* Social icons — notch-cut plates with the motif */
.atx-social { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.atx-social a {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  background: var(--clr-elevated);
  clip-path: polygon(0 0, calc(100% - var(--notch-sm)) 0, 100% var(--notch-sm),
                     100% 100%, 0 100%);
  color: var(--clr-ink-dim);
  transition: background var(--dur-fast) var(--ease-blade),
              color var(--dur-fast) var(--ease-blade);
}

.atx-social a:hover { background: var(--clr-red); color: var(--clr-on-red); }
.atx-social svg { width: 17px; height: 17px; fill: currentColor; }

.atx-footer__base {
  border-top: var(--hairline) solid var(--clr-line);
  padding-top: var(--space-4);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  color: var(--clr-ink-faint);
  text-transform: uppercase;
}

.atx-footer__base em { font-style: normal; color: var(--clr-red); }


/* == 12 · CART DRAWER ===================================================== */

.atx-drawer { position: fixed; inset: 0; z-index: 110; pointer-events: none; }

.atx-drawer__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-blade);
}

.atx-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: var(--drawer-w);
  background: var(--clr-elevated);
  border-left: var(--seam-w) solid var(--clr-red);
  box-shadow: var(--shadow-drawer);
  transform: translateX(102%);
  transition: transform var(--dur-med) var(--ease-cut);
  display: flex;
  flex-direction: column;
}

.atx-drawer.is-open { pointer-events: auto; }
.atx-drawer.is-open .atx-drawer__scrim { opacity: 1; }
.atx-drawer.is-open .atx-drawer__panel { transform: translateX(0); }

.atx-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: var(--hairline) solid var(--clr-line);
}

.atx-drawer__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 1.3rem;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.atx-drawer__close {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--clr-ink-dim);
  padding: 0.3em 0.55em;
  transition: color var(--dur-fast) var(--ease-blade), transform var(--dur-fast) var(--ease-blade);
}

.atx-drawer__close:hover { color: var(--clr-red-bright); transform: rotate(90deg); }

.atx-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-4); }

/* Mini-cart items (WooCommerce mini-cart override + preview shim) */
.atx-minicart__list { display: flex; flex-direction: column; gap: var(--space-4); }

.atx-minicart__item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: var(--hairline) solid var(--clr-line);
  position: relative;
}

.atx-minicart__thumb {
  width: 72px; height: 90px;
  object-fit: cover;
  clip-path: polygon(0 0, calc(100% - var(--notch-sm)) 0, 100% var(--notch-sm),
                     100% 100%, 0 100%);
  background: var(--clr-panel);
}

.atx-minicart__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 1rem;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  line-height: 1.2;
}

.atx-minicart__name a:hover { color: var(--clr-red-bright); }

.atx-minicart__qty {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-lg);
  color: var(--clr-ink-dim);
  display: block;
  margin-top: var(--space-1);
}

.atx-minicart__remove {
  font-family: var(--font-mono);
  color: var(--clr-ink-faint);
  font-size: 1.05rem;
  align-self: start;
  transition: color var(--dur-fast) var(--ease-blade);
}

.atx-minicart__remove:hover { color: var(--clr-red-bright); }

/* Fulfillment chips — the digital/physical distinction */
.atx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3em 0.65em;
  margin-top: var(--space-2);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  width: fit-content;
}

.atx-chip--digital {
  background: var(--clr-red);
  color: var(--clr-on-red);
}

.atx-chip--digital::before { content: "▼"; font-size: 0.75em; }

.atx-chip--physical {
  background: transparent;
  box-shadow: inset 0 0 0 var(--hairline) var(--clr-line-strong);
  color: var(--clr-ink-dim);
}

.atx-chip--physical::before { content: "◳"; font-size: 0.9em; color: var(--clr-red); }

.atx-drawer__empty {
  text-align: center;
  color: var(--clr-ink-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-lg);
  letter-spacing: 0.06em;
  padding: var(--space-6) var(--space-3);
}

.atx-drawer__foot {
  border-top: var(--hairline) solid var(--clr-line);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--clr-panel);
}

.atx-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-lg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.atx-drawer__subtotal strong { color: var(--clr-red-bright); font-weight: var(--fw-body-medium); }

.atx-drawer__foot .atx-btn { width: 100%; justify-content: center; }

.atx-drawer__note {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--clr-ink-faint);
  letter-spacing: 0.06em;
  text-align: center;
  margin: 0;
}


/* == 13 · WOOCOMMERCE PAGES & GENERIC CONTENT ============================= */

.atx-page {
  padding-top: calc(var(--header-h) + var(--space-6));
  padding-bottom: var(--section-pad-y);
}

.atx-page__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.atx-content { color: var(--clr-text-muted); max-width: var(--content-narrow); }
.atx-content h2, .atx-content h3 { color: var(--clr-ink); font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-display); margin: var(--space-5) 0 var(--space-3); }
.atx-content a { color: var(--clr-red-bright); }
.atx-content img { clip-path: var(--clip-notch-tr); }

/* Text-wordmark fallback sizing per logo slot */
.atx-hero__mark .atx-wordmark { font-size: 1.6rem; }
.atx-footer .atx-wordmark { font-size: 1.5rem; }

/* Single post featured image */
.atx-single-media { margin: 0 0 var(--space-5); }

/* Archive pagination */
.atx-pagination { margin-top: var(--space-6); }

.atx-pagination .nav-links {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.atx-pagination .page-numbers {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-lg);
  color: var(--clr-ink-dim);
  padding: 0.55em 0.95em;
  box-shadow: inset 0 0 0 var(--hairline) var(--clr-line-strong);
  clip-path: var(--clip-notch-btn);
  transition: color var(--dur-fast) var(--ease-blade),
              background var(--dur-fast) var(--ease-blade);
}

.atx-pagination .page-numbers.current,
.atx-pagination .page-numbers:hover {
  background: var(--clr-red);
  color: var(--clr-on-red);
  box-shadow: none;
}

/* Cart item variation data (size, color, …) */
.atx-minicart__item dl.variation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 0.8em;
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--clr-ink-faint);
}

.atx-minicart__item dl.variation dt,
.atx-minicart__item dl.variation dd { margin: 0; display: inline; }
.atx-minicart__item dl.variation dd p { display: inline; margin: 0; }

/* Woo structural skin: buttons, forms, notices, tables */
.woocommerce .button, .woocommerce button.button, .woocommerce a.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.wc-block-components-button {
  background: var(--clr-red) !important;
  color: var(--clr-on-red) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: var(--btn-fs) !important;
  letter-spacing: var(--ls-button) !important;
  text-transform: uppercase !important;
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  clip-path: var(--clip-notch-btn);
}

.woocommerce .button:hover, .wc-block-components-button:hover {
  background: var(--clr-red-bright) !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input {
  background: var(--input-bg) !important;
  border: var(--hairline) solid var(--input-border) !important;
  border-radius: 0 !important;
  color: var(--clr-ink) !important;
  padding: 0.8em 1em !important;
}

.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--clr-elevated) !important;
  border-top: var(--seam-w) solid var(--clr-red) !important;
  color: var(--clr-ink) !important;
  border-radius: 0 !important;
}

.woocommerce table.shop_table {
  border: var(--hairline) solid var(--clr-line) !important;
  border-radius: 0 !important;
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  border-color: var(--clr-line) !important;
}

.woocommerce ul.products li.product .price { color: var(--clr-red-bright) !important; }

/* Reduced motion — kill all decorative movement, keep function */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js [data-reveal],
  .js [data-reveal-line] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .atx-ticker__track { animation: none; }
  .atx-hero__cue i::after { animation: none; transform: translateY(0); }
  .atx-preloader__seam::after { animation: none; transform: translateX(0); }
  .atx-card { transform: none !important; }
}


/* == RESPONSIVE =========================================================== */

@media (max-width: 1080px) {
  .atx-about__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .atx-about__figure { max-width: 480px; }
  .atx-blog__grid { grid-template-columns: repeat(2, 1fr); }
  .atx-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .atx-nav { display: none; }
  .atx-burger { display: flex; }
  .atx-steps { grid-template-columns: 1fr; }
  .atx-steps::before { display: none; }
  .atx-capture__inner { grid-template-columns: 1fr; }
  .atx-about__body { columns: 1; }
  .atx-hero__hud span:nth-child(3) { display: none; }
}

@media (max-width: 640px) {
  .atx-blog__grid { grid-template-columns: 1fr; }
  .atx-footer__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .atx-capture__form form,
  .atx-capture__form .atx-capture-native { flex-direction: column; }
  .atx-tabs { width: 100%; }
  .atx-tab { flex: 1; padding-inline: 0.5rem; text-align: center; }
  .atx-hero { padding-top: calc(var(--header-h) + var(--space-5)); }
  .atx-hero__fallback { justify-content: center; padding-right: 0; opacity: 0.35; }
}