.article-template > *:first-child:not(.article-template__hero-container) {
  margin-top: 5rem;
}

.article-template__hero-container {
  max-width: 130rem;
  margin: 0 auto;
}

@media screen and (min-width: 1320px) {
  .article-template__hero-container:first-child {
    margin-top: 5rem;
  }
}

.article-template__hero-medium {
  height: 15.6rem;
}

.article-template__hero-large {
  height: 19rem;
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .article-template__hero-medium {
    height: 34.9rem;
  }

  .article-template__hero-large {
    height: 42.3rem;
  }
}

@media screen and (min-width: 990px) {
  .article-template__hero-medium {
    height: 54.5rem;
  }

  .article-template__hero-large {
    height: 66rem;
  }
}

.article-template header {
  margin-top: 4.4rem;
  margin-bottom: 2rem;
  line-height: 0.8;
}

@media screen and (min-width: 750px) {
  .article-template header {
    margin-top: 5rem;
  }
}

.article-template__title {
  margin: 0;
}

.article-template__title:not(:only-child) {
  margin-bottom: 1rem;
}

.article-template__link {
  font-size: 1.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.article-template__link .icon-wrap {
  margin-right: 1rem;
  transform: rotate(180deg);
}

.article-template__content {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.article-template__social-sharing {
  margin-top: 3rem;
}

.article-template__social-sharing + header, .article-template__social-sharing + .article-template__content {
  margin-top: 1.5rem;
}

.article-template__comment-wrapper {
  margin-top: 5rem;
}

@media screen and (min-width: 750px) {
  .article-template__comment-wrapper {
    margin-top: 6rem;
  }
}

.article-template__comment-wrapper h2 {
  margin-top: 0;
}

.article-template__comments {
  margin-bottom: 5rem;
}

@media screen and (min-width: 750px) {
  .article-template__comments {
    margin-bottom: 7rem;
  }
}

.article-template__comments-fields {
  margin-bottom: 4rem;
}

.article-template__comments-comment {
  color: rgba(var(--color-foreground), 0.75);
  background-color: rgb(var(--color-background));
  margin-bottom: 1.5rem;
  padding: 2rem 2rem 1.5rem;
}

@media screen and (min-width: 750px) {
  .article-template__comments-comment {
    padding: 2rem 2.5rem;
  }
}

.article-template__comments-comment p {
  margin: 0 0 1rem;
}

.article-template__comment-fields > * {
  margin-bottom: 3rem;
}

@media screen and (min-width: 750px) {
  .article-template__comment-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 4rem;
  }
}

.article-template__comment-warning {
  margin: 2rem 0 2.5rem;
}

@media screen and (min-width: 990px) {
  .article-template__comments .pagination-wrapper {
    margin: 5rem 0 8rem;
  }
}

/* Button - social share */

.share-button {
  display: block;
  position: relative;
}

.share-button details {
  width: fit-content;
}

.share-button__button {
  font-size: 1.4rem;
  display: flex;
  min-height: 2.4rem;
  align-items: center;
  color: rgba(var(--color-link), var(--alpha-link));
  margin-left: 0;
  padding-left: 0;
}

.share-button__button:hover,
details[open] > .share-button__button {
  color: rgb(var(--color-link));
}

details[open] > .share-button__fallback {
  animation: animateMenuOpen var(--duration-default) ease;
}

.share-button__button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.share-button__button,
.share-button__fallback button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.share-button__button .icon-share {
  margin-right: 1rem;
}

.share-button__fallback {
  background: rgb(var(--color-background));
  display: flex;
  align-items: center;
  position: absolute;
  top: 3rem;
  left: 0.1rem;
  z-index: 6;
  width: 100%;
  min-width: 31rem;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
  

}

.share-button__fallback button {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.share-button__fallback button:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.share-button__fallback button:hover svg {
  transform: scale(1.07);
}

.share-button__close:not(.hidden) + .share-button__copy {
  display: none;
}

.share-button__close,
.share-button__copy {
  background-color: transparent;
  color: rgb(var(--color-foreground));
}

.share-button__fallback .field__input {
  box-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.share-button__fallback .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.share-button__message:not(:empty) {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 0.8rem 0 0.8rem 1.5rem;
}

.share-button__message:not(:empty):not(.hidden) ~ * {
  display: none;
}

/* arrow animation */

.animate-arrow .icon-wrap .icon-arrow{
  transform: translateX(-0.25rem);
  transition: transform var(--duration-short) ease;
}

.animate-arrow .icon-wrap .icon-arrow:hover{
  transform: translateX(-0.05rem);
}



/* =========================================================
   CW-X REAL TESTING PROJECT
   Scoped Article Styles
   =========================================================
   APPENDED 2026-08-14. Everything ABOVE this marker is the original
   Koji article.css and must never be edited, reordered or cleaned up.
   Everything BELOW this marker belongs to the CW-X REAL TESTING
   editorial article system.

   ── WHY THIS LIVES IN article.css ──────────────────────
   The EasyStore Koji editor cannot create a NEW theme asset, so a
   dedicated cwx-real-testing.css cannot exist on the live site.
   article.css already exists, is already loaded by article.liquid,
   and can be edited. These rules are therefore appended here.

   ── CONSEQUENCE: THIS CSS NOW LOADS ON EVERY BLOG ARTICLE ──
   Previously it would have loaded only on REAL TESTING articles.
   It now parses on every article page, so containment is doing real
   work rather than being tidy. Two things guarantee it:

     1. EVERY selector below begins with .cwx-real-testing-host,
        which only the REAL TESTING branch of article.liquid emits.
        On an ordinary article that element does not exist, so not one
        rule below can match anything.
     2. There are no bare element selectors, no .page-width, no
        .article-template, no .rte, and no :root anywhere below.

   ── SPECIFICITY, AND WHY THE PREFIX MATTERS ────────────
   blog.css and article.css are promoted asynchronously via
   preload + onload, so source order cannot be relied on to win ties.
   Prefixing every rule with .cwx-real-testing-host raises the whole
   system by one class: the reset sits at (0,2,0)/(0,2,1) and the
   component rules at (0,3,0), which beats ordinary theme rules such
   as .article-template p (0,1,1) in any load order.

   ── DO NOT EDIT BY HAND ────────────────────────────────
   This block is generated from the approved stylesheet
   cwx-real-testing/preview/cwx-article.css by prefixing every
   selector. If the article design changes, regenerate it. Editing it
   here will silently drift from the approved local preview.
   ========================================================= */

/* ---------------------------------------------------------
   HOST
   The neutral container emitted by the REAL TESTING branch of
   article.liquid. Releases the inherited narrow wrapper and gives
   the article a predictable typographic starting point.
   --------------------------------------------------------- */

.cwx-real-testing-host {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
  color: #111111;
  font-size: 16px;
  line-height: 1.6;
}

/* Defensive only: if the blog editor injects a wrapper between the
   host and <article class="cwx-test-article">, that wrapper would
   otherwise inherit theme margins and break the field geometry. */
.cwx-real-testing-host > *,
.cwx-real-testing-host p,
.cwx-real-testing-host h1,
.cwx-real-testing-host h2,
.cwx-real-testing-host h3,
.cwx-real-testing-host h4,
.cwx-real-testing-host ul,
.cwx-real-testing-host ol,
.cwx-real-testing-host dl,
.cwx-real-testing-host dd,
.cwx-real-testing-host figure,
.cwx-real-testing-host blockquote { margin: 0; padding: 0; }

/* The approved stylesheet sets max-width/height/display on images but
   not radius or shadow, which are the two a host theme most often
   applies to article imagery. */
.cwx-real-testing-host .cwx-test-article img { border-radius: 0; box-shadow: none; }
.cwx-real-testing-host .cwx-test-article a   { text-decoration: none; }

/* ---------------------------------------------------------
   APPROVED ARTICLE SYSTEM
   Generated from preview/cwx-article.css, every selector prefixed.
   --------------------------------------------------------- */

/* =========================================================
   CW-X REAL TESTING ARTICLE - START
   Series: CW-X REAL TESTING PROJECT (06 stories / Taiwan)
   Root:   .cwx-test-article
   Built:  2026-08-13   Art Direction v2.1 / content rev 2.2

   Every selector below is scoped under .cwx-test-article.
   No global element selectors. No body/html rules. No :root.
   Tokens live on the wrapper, so this block is safe to append to
   assets/base.css and cannot affect any other don1donshop article.

   The article ships ZERO JavaScript. Reading is the job.

   ── THREE WIDTHS (v2) ──────────────────────────────────
       CANVAS  1320px   photography, large type, colour fields
       FRAME   1080px   structural rows: profile, products, nav
       READ     600px   body copy, and only body copy

   ── v2.1 CALIBRATION ───────────────────────────────────
   v2 over-applied the wide canvas to portrait photography and
   leaned on pure white, so gaps read as accidental.

     - real questions and real answers, not editorial chapters
     - NEVER crop a portrait to landscape to fill the canvas
     - the tester's face must keep reappearing down the page
     - neutral colour fields carry the reading direction
     - whitespace must earn its role
   ========================================================= */

/* ---------------------------------------------------------
   0. TOKENS + BASE
   --------------------------------------------------------- */

.cwx-real-testing-host .cwx-test-article {
  --cwx-ink:           #050505;
  --cwx-black:         #0b0b0b;
  --cwx-charcoal:      #171717;
  --cwx-graphite:      #2f3033;

  --cwx-white:         #ffffff;
  --cwx-paper:         #f6f6f3;
  --cwx-art-grey:      #f1f1ef;   /* functional field, between paper and soft-gray */
  --cwx-soft-gray:     #ecece7;
  --cwx-stone:         #d8d8d2;

  --cwx-text:          #111111;
  --cwx-muted:         #5d5f63;
  --cwx-soft-text:     #8b8e94;

  --cwx-electric-blue: #5d7cff;
  --cwx-violet:        #7468ff;

  /* Text-weight accent. --cwx-electric-blue is 3.63:1 on white and
     fails WCAG AA as small copy. Same hue, darkened to 5.92:1 on
     white / 5.47:1 on paper. The ONLY blue for small text on light. */
  --cwx-art-accent-text: #4257d4;

  --cwx-line:          #191919;
  --cwx-soft-line:     #d7d7d0;

  --cwx-art-canvas:    1320px;
  --cwx-art-frame:     1080px;
  --cwx-art-read:      600px;

  --cwx-art-mod-gap:   clamp(52px, 5.4vw, 88px);
  --cwx-art-field-pad: clamp(40px, 4.6vw, 72px);

  /* ── DEPLOYMENT TUNABLE ───────────────────────────────
     --cwx-art-gutter is ADDITIVE to whatever padding the
     EasyStore blog template already applies. Check one live
     article, then keep this or set it to 0px.
     ──────────────────────────────────────────────────── */
  --cwx-art-gutter:    clamp(16px, 4vw, 48px);

  box-sizing: border-box;
  max-width: 100%;
  margin-inline: auto;
  background: var(--cwx-white);
  color: var(--cwx-text);
  font-family: -apple-system, BlinkMacSystemFont,
    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
    Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  text-spacing-trim: space-all;
}

.cwx-real-testing-host .cwx-test-article *,
.cwx-real-testing-host .cwx-test-article *::before,
.cwx-real-testing-host .cwx-test-article *::after { box-sizing: border-box; margin: 0; padding: 0; }

.cwx-real-testing-host .cwx-test-article img { max-width: 100%; height: auto; display: block; }
.cwx-real-testing-host .cwx-test-article a { color: inherit; text-decoration: none; }
.cwx-real-testing-host .cwx-test-article ul, .cwx-real-testing-host .cwx-test-article ol { list-style: none; }
.cwx-real-testing-host .cwx-test-article figure, .cwx-real-testing-host .cwx-test-article blockquote { margin: 0; }

.cwx-real-testing-host .cwx-test-article .cwx-art-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.cwx-real-testing-host .cwx-test-article a:focus-visible {
  outline: 2px solid var(--cwx-electric-blue);
  outline-offset: 3px;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-nowrap { white-space: nowrap; }

/* ---------------------------------------------------------
   1. WIDTHS + NEUTRAL COLOUR FIELDS

   A field is a BACKPLATE, not a card. It has no border, no radius
   and no shadow, it spans the full article width, and photography
   is free to sit outside it. Fields carry the reading direction so
   that vertical gaps read as intentional rather than accidental.
   --------------------------------------------------------- */

.cwx-real-testing-host .cwx-test-article .cwx-art-canvas {
  width: min(var(--cwx-art-canvas), 100% - var(--cwx-art-gutter) * 2);
  margin-inline: auto;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-frame {
  width: min(var(--cwx-art-frame), 100%);
  margin-inline: auto;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-read { max-width: var(--cwx-art-read); }

.cwx-real-testing-host .cwx-test-article .cwx-art-module { margin-top: var(--cwx-art-mod-gap); }

/* Full-width fields. Padding replaces the module gap, so a field
   never stacks its own padding on top of a large margin. */
.cwx-real-testing-host .cwx-test-article .cwx-art-field {
  padding-block: var(--cwx-art-field-pad);
  margin-top: var(--cwx-art-mod-gap);
}
.cwx-real-testing-host .cwx-test-article .cwx-art-field--paper { background: var(--cwx-paper); }
.cwx-real-testing-host .cwx-test-article .cwx-art-field--grey  { background: var(--cwx-art-grey); }
.cwx-real-testing-host .cwx-test-article .cwx-art-field--ink   { background: var(--cwx-ink); color: var(--cwx-white); }

/* Two fields touching each other must not double their padding. */
.cwx-real-testing-host .cwx-test-article .cwx-art-field + .cwx-art-field { margin-top: 0; }

/* Asymmetric field: a backplate that covers only part of the width
   and stops before the photograph, so the photo sits half on and half
   off the field. This is the "reading rail" device. */
.cwx-real-testing-host .cwx-test-article .cwx-art-rail { position: relative; }

.cwx-real-testing-host .cwx-test-article .cwx-art-rail::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc((100% - min(var(--cwx-art-canvas), 100% - var(--cwx-art-gutter) * 2)) / 2
             - var(--cwx-art-gutter));
  width: 58%;
  background: var(--cwx-art-grey);
  z-index: 0;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-rail > * { position: relative; z-index: 1; }

.cwx-real-testing-host .cwx-test-article p + p { margin-top: 1.05em; }

.cwx-real-testing-host .cwx-test-article .cwx-art-body {
  font-size: 17px; line-height: 2.0; color: #1c1d1f; letter-spacing: 0.01em;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-lead {
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.9; color: var(--cwx-text); font-weight: 500;
}

/* ---------------------------------------------------------
   2. HEADING + Q&A SYSTEM

   v2.1: the article is an interview again. The real question is
   visible, and her real answer follows it. The question is styled
   as a question, not as a brand chapter title.
   --------------------------------------------------------- */

.cwx-real-testing-host .cwx-test-article .cwx-art-h2 { margin-bottom: clamp(20px, 2.4vw, 30px); }

.cwx-real-testing-host .cwx-test-article .cwx-art-h2--ruled {
  padding-top: 18px;
  border-top: 1px solid var(--cwx-black);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-h2__en {
  display: block;
  font-size: 11px; font-weight: 900; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--cwx-graphite);
  margin-bottom: 10px;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-h2__zh {
  display: block;
  font-size: clamp(23px, 2.7vw, 33px);
  line-height: 1.35; font-weight: 900; letter-spacing: -0.02em;
  color: var(--cwx-black);
}

/* The interview question. Q-marker plus the question as it was
   actually asked. Nothing here is rewritten into brand language. */
.cwx-real-testing-host .cwx-test-article .cwx-art-q {
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  align-items: baseline;
  margin-bottom: clamp(18px, 2vw, 26px);
  max-width: 30em;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-q__no {
  flex: none;
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 900; letter-spacing: 0.12em;
  color: var(--cwx-art-accent-text);
  padding-top: 0.35em;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-q__text {
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.5; font-weight: 800; letter-spacing: -0.02em;
  color: var(--cwx-black);
}

/* Pull quote drawn from her answer. Never replaces the Q&A. */
.cwx-real-testing-host .cwx-test-article .cwx-art-pull {
  margin: clamp(24px, 2.8vw, 36px) 0 0;
  padding-left: clamp(16px, 1.8vw, 24px);
  border-left: 3px solid var(--cwx-electric-blue);
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.7; font-weight: 800; letter-spacing: -0.02em;
  color: var(--cwx-black);
  max-width: 22em;
}

/* ---------------------------------------------------------
   3. MODULE 01 - SERIES HERO

   v2.1: text and photograph are ONE composition, not two columns.
   The headline sits on black backing strips that follow the text,
   and the text block overlaps into the left edge of the photograph.
   The strips are anchored to the LOWER-LEFT of the frame, which is
   ground in this photograph, never her face.
   --------------------------------------------------------- */

.cwx-real-testing-host .cwx-test-article .cwx-art-hero { padding-top: clamp(20px, 2.8vw, 36px); }

.cwx-real-testing-host .cwx-test-article .cwx-art-series {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cwx-black);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-series__name {
  font-size: 11px; font-weight: 900; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--cwx-black);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-series__count {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cwx-muted);
  margin-left: auto;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: 0;
  align-items: center;
  margin-top: clamp(22px, 3vw, 40px);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-hero__text {
  position: relative;
  z-index: 2;
  margin-right: clamp(-96px, -5vw, -40px);   /* overlaps the photograph */
}

.cwx-real-testing-host .cwx-test-article .cwx-art-hero__no {
  display: block;
  font-size: clamp(62px, 8.4vw, 128px);
  font-weight: 900; line-height: 0.8; letter-spacing: -0.06em;
  color: var(--cwx-black);
  margin-bottom: clamp(16px, 2vw, 26px);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-hero__no span {
  font-size: 0.14em; font-weight: 800; letter-spacing: 0.24em;
  vertical-align: 1.0em; color: var(--cwx-muted); margin-left: 10px;
}

/* Backing strips. One strip per line, sized to the text, never a
   single flat overlay across the whole photograph. */
/* The headline steps right so the longest strip crosses onto the
   photograph. The overlap is measured against her position in the
   crop: it lands on hillside, never on her. See the QA report. */
.cwx-real-testing-host .cwx-test-article .cwx-art-hero__quote {
  font-size: clamp(22px, 2.9vw, 40px);
  line-height: 1.36; font-weight: 900; letter-spacing: -0.035em;
  margin-bottom: clamp(20px, 2.4vw, 30px);
  margin-left: clamp(0px, 9vw, 132px);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-hero__strip {
  display: table;                 /* shrink-wraps to the text */
  background: var(--cwx-ink);
  color: var(--cwx-white);
  padding: 0.2em 0.42em 0.26em;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-hero__strip + .cwx-art-hero__strip { margin-top: 3px; }

.cwx-real-testing-host .cwx-test-article .cwx-art-hero__by {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 3px solid var(--cwx-electric-blue);
  max-width: 18em;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-hero__name {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 900; letter-spacing: 0.02em; color: var(--cwx-black);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-hero__move {
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cwx-muted);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-hero__fig { position: relative; z-index: 1; }

.cwx-real-testing-host .cwx-test-article .cwx-art-hero__fig img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 58%;   /* holds her face and the sky */
}

/* ---------------------------------------------------------
   4. MODULE 02 - TESTER PROFILE
   Alignment and hairlines, never cards.
   --------------------------------------------------------- */

.cwx-real-testing-host .cwx-test-article .cwx-art-profile {
  margin-top: clamp(32px, 3.6vw, 52px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  padding: clamp(16px, 2vw, 22px) 0 clamp(14px, 1.7vw, 18px);
  border-top: 1px solid var(--cwx-black);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-profile__k {
  display: block;
  font-size: 10px; font-weight: 900; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cwx-muted);
  margin-bottom: 9px;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-profile__v {
  display: block;
  font-size: 15px; line-height: 1.6; font-weight: 700; color: var(--cwx-black);
}

/* Name plus a single restrained Instagram affordance. */
.cwx-real-testing-host .cwx-test-article .cwx-art-profile__name {
  display: flex; align-items: center; gap: 10px;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-ig {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
  color: var(--cwx-muted);
  transition: color .18s ease;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-ig:hover,
.cwx-real-testing-host .cwx-test-article .cwx-art-ig:focus-visible { color: var(--cwx-art-accent-text); }

/* The glyph is drawn by CSS, not by inline SVG.
   The EasyStore rich text editor sanitises <svg> out of article.body_html,
   so an inline icon survives locally and silently disappears live. The mark
   is therefore a masked data URI: no new theme asset is needed, the shape
   is monochrome, and it inherits `color`, so hover and focus keep using the
   existing blue-violet accent. No Instagram gradient. */
.cwx-real-testing-host .cwx-test-article .cwx-art-ig::before {
  content: "";
  width: 17px;
  height: 17px;
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='2.6' width='18.8' height='18.8' rx='5.2'/%3E%3Ccircle cx='12' cy='12' r='4.1'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.05' fill='black' stroke='none'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='2.6' width='18.8' height='18.8' rx='5.2'/%3E%3Ccircle cx='12' cy='12' r='4.1'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.05' fill='black' stroke='none'/%3E%3C/svg%3E");
}

/* Without mask support the rule above would paint a solid square, so degrade
   to a rounded outline instead of a black blob. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .cwx-real-testing-host .cwx-test-article .cwx-art-ig::before {
    background-color: transparent;
    border: 1.6px solid currentColor;
    border-radius: 5px;
  }
}

/* If the editor ever stops stripping SVG, hide any that reappears so the
   glyph can never render twice. */
.cwx-real-testing-host .cwx-test-article .cwx-art-ig svg { display: none; }

/* Athletic background. Credentials, not a CV: one quiet line, and it
   carries the closing rule of the profile block. */
.cwx-real-testing-host .cwx-test-article .cwx-art-credits {
  padding: 0 0 clamp(15px, 1.9vw, 20px);
  border-bottom: 1px solid var(--cwx-soft-line);
  font-size: 12.5px; line-height: 1.85; color: var(--cwx-muted);
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------
   4b. EDITOR INTRO
   Editorial narration, deliberately distinct from the tester's
   first-person answers: larger, lighter, on paper, behind a
   blue-violet rule. Never styled as a quote.
   --------------------------------------------------------- */

.cwx-real-testing-host .cwx-test-article .cwx-art-intro__inner {
  max-width: 34em;
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 3px solid var(--cwx-electric-blue);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-intro__text {
  font-size: clamp(17px, 1.75vw, 20px);
  line-height: 1.95;
  font-weight: 500;
  color: var(--cwx-graphite);
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------
   5. Q&A LAYOUTS
   Differentiated weights. Every portrait stays a portrait.
   --------------------------------------------------------- */

/* Q1 - 55 text / 45 photo. Calm, face-visible identity image. */
.cwx-real-testing-host .cwx-test-article .cwx-art-qa--a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(28px, 3.6vw, 60px);
  align-items: center;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-qa--a img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 44%;
}

/* Q2 - text-led and COMPACT. Text-led must not mean an oversized
   empty section, which was the v2 defect between Q2 and Q3. */
.cwx-real-testing-host .cwx-test-article .cwx-art-qa--text {
  max-width: 46em;
  padding-left: clamp(0px, 3.4vw, 56px);
  border-left: 1px solid var(--cwx-soft-line);
}

/* Q3 - 40 text / 60 portrait. The strongest positive experience.
   Person and product first, environment second. This is NEVER a
   landscape crop. */
.cwx-real-testing-host .cwx-test-article .cwx-art-qa--b {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(28px, 3.8vw, 68px);
  align-items: center;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-qa--b img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 58%;
}

/* Q4 - 60 text / 40 context photo. Present, but clearly secondary
   to Q3. Contextual only: nothing claims the tested tights are worn. */
.cwx-real-testing-host .cwx-test-article .cwx-art-qa--c {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
  gap: clamp(26px, 3.4vw, 56px);
  align-items: center;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-qa--c img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 40%;
}

/* Contextual reader guidance after Q1. It points at a real, verified
   section of the brand page. It is NOT an explanation of, or a reply
   to, anything the tester said. */
.cwx-real-testing-host .cwx-test-article .cwx-art-guidelink {
  display: inline-block;
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-bottom: 3px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.02em;
  color: var(--cwx-art-accent-text);
  border-bottom: 1px solid var(--cwx-stone);
  transition: border-color .18s ease;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-guidelink:hover,
.cwx-real-testing-host .cwx-test-article .cwx-art-guidelink:focus-visible {
  border-bottom-color: var(--cwx-art-accent-text);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-cap {
  margin-top: 12px;
  font-size: 12px; line-height: 1.75; color: var(--cwx-muted);
  padding-left: 10px;
  border-left: 2px solid var(--cwx-stone);
  max-width: 34em;
}

/* ---------------------------------------------------------
   6. FIELD NOTE
   The typographic climax and the only inverted surface.
   No photograph, by design.
   --------------------------------------------------------- */

.cwx-real-testing-host .cwx-test-article .cwx-art-note {
  background: var(--cwx-ink);
  color: var(--cwx-white);
  margin-top: var(--cwx-art-mod-gap);
  padding-block: clamp(64px, 8.5vw, 132px);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-note__rule {
  width: clamp(56px, 7vw, 104px); height: 3px;
  background: var(--cwx-electric-blue);
  margin-bottom: clamp(24px, 3vw, 38px);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-note__label {
  display: block;
  font-size: 10.5px; font-weight: 900; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--cwx-electric-blue);
  margin-bottom: clamp(22px, 2.8vw, 36px);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-note__quote {
  font-size: clamp(26px, 4.2vw, 58px);
  line-height: 1.5; font-weight: 900; letter-spacing: -0.04em;
  color: var(--cwx-white);
  text-indent: -0.45em;
  max-width: 17em;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-note__by {
  margin-top: clamp(30px, 4vw, 54px);
  padding-top: clamp(18px, 2.2vw, 24px);
  border-top: 1px solid #2a2b2f;
  display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline;
  color: #9b9ea6;
  max-width: 34em;
}

/* Latin tracking pulls CJK characters apart, so the wide-tracked
   uppercase treatment applies only to the Latin marker. */
.cwx-real-testing-host .cwx-test-article .cwx-art-note__by-name {
  font-size: 14px; font-weight: 800; letter-spacing: 0.02em; color: #d6d8dc;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-note__by-ref {
  margin-left: auto;
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
}

/* ---------------------------------------------------------
   7. FIT NOTE
   v2.1: #13 is the PERSON and carries the section. #12 is a
   DETAIL and is deliberately smaller. They are never equal.
   --------------------------------------------------------- */

.cwx-real-testing-host .cwx-test-article .cwx-art-fit__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: clamp(28px, 3.8vw, 64px);
  align-items: start;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-fit__main img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 44%;
}

/* The detail sits under the copy column, at roughly half the width
   of the main image, so the hierarchy is unmistakable. */
.cwx-real-testing-host .cwx-test-article .cwx-art-fit__detail {
  margin-top: clamp(26px, 3vw, 40px);
  max-width: 62%;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-fit__detail img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 30%;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-fit__tail {
  margin-top: clamp(22px, 2.6vw, 30px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--cwx-stone);
  font-size: 13.5px; line-height: 1.9; color: var(--cwx-muted);
  max-width: 34em;
}

/* ---------------------------------------------------------
   8. MY CW-X
   Frame width: commerce is narrower and calmer than storytelling.
   v2.1 gives the packshots more presence and removes dead space.
   --------------------------------------------------------- */

.cwx-real-testing-host .cwx-test-article .cwx-art-prod {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  border-top: 1px solid var(--cwx-black);
  padding-top: clamp(22px, 2.6vw, 32px);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-prod__item { display: flex; flex-direction: column; }

/* Story 01 tests ONE product. A single card sitting in a two-column
   grid reads as a missing second card, so the single case gets its own
   composition: one larger visual with the information beside it. */
.cwx-real-testing-host .cwx-test-article .cwx-art-prod--single {
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 60px);
  align-items: center;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-prod--single .cwx-art-prod__item {
  display: contents;               /* image and text become grid children */
}

.cwx-real-testing-host .cwx-test-article .cwx-art-prod--single .cwx-art-prod__media img {
  aspect-ratio: 1 / 1;
  padding: clamp(12px, 1.6vw, 24px);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-prod--single .cwx-art-prod__txt {
  padding-top: 0;
  gap: 10px;
  max-width: 26em;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-prod--single .cwx-art-prod__name {
  font-size: clamp(17px, 1.9vw, 22px);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-prod--single .cwx-art-prod__price {
  font-size: 15.5px;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-prod--single .cwx-art-prod__cta {
  margin-top: clamp(8px, 1.2vw, 14px);
  padding-top: 0;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-prod__media { display: block; background: var(--cwx-paper); }

.cwx-real-testing-host .cwx-test-article .cwx-art-prod__media img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: contain;
  padding: clamp(8px, 1vw, 16px);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-prod__txt {
  padding-top: clamp(14px, 1.6vw, 18px);
  display: flex; flex-direction: column; gap: 7px; flex: 1;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-prod__model {
  font-size: 10.5px; font-weight: 900; letter-spacing: 0.2em;
  color: var(--cwx-art-accent-text);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-prod__name {
  font-size: 15.5px; line-height: 1.6; font-weight: 800; color: var(--cwx-black);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-prod__price {
  font-size: 14px; font-weight: 700; color: var(--cwx-muted);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-prod__cta {
  margin-top: auto; padding-top: 14px;
  font-size: 12.5px; font-weight: 900; letter-spacing: 0.12em;
  color: var(--cwx-black);
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: border-color .18s ease, color .18s ease;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-prod__item:hover .cwx-art-prod__cta,
.cwx-real-testing-host .cwx-test-article .cwx-art-prod__cta:focus-visible {
  color: var(--cwx-art-accent-text);
  border-bottom-color: var(--cwx-art-accent-text);
}

/* ---------------------------------------------------------
   9. BE A BETTER YOU
   The widest photographic moment. Environment kept whole. The
   reflection sits alongside the image rather than in a grid, so
   the ending reads as personal rather than as more information.
   --------------------------------------------------------- */

.cwx-real-testing-host .cwx-test-article .cwx-art-close__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 66%;   /* horizon kept, full figure kept */
}
/* No max-height here on purpose. 4:3 is the only ratio that keeps sky,
   sea horizon, trail and the full figure together in this frame, and a
   height cap re-crops it back into a wide strip. The closing image is
   allowed to run slightly over one viewport: it is the release moment
   at the end of a long article, not something the reader must take in
   at a glance. */

.cwx-real-testing-host .cwx-test-article .cwx-art-close__body {
  margin-top: clamp(30px, 3.6vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 64px);
  align-items: start;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-close__last {
  margin-top: clamp(22px, 2.6vw, 32px);
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.72; font-weight: 800; letter-spacing: -0.02em;
  color: var(--cwx-black);
  text-indent: -0.45em;
}

/* ---------------------------------------------------------
   10. SERIES NAVIGATION
   Live stories are links. Upcoming stories are inert text with no
   href, so nothing empty is focusable or clickable.
   --------------------------------------------------------- */

.cwx-real-testing-host .cwx-test-article .cwx-art-nav {
  margin-top: var(--cwx-art-mod-gap);
  border-top: 1px solid var(--cwx-black);
  padding-top: clamp(20px, 2.4vw, 28px);
  padding-bottom: clamp(48px, 6vw, 84px);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-nav__label {
  display: block;
  font-size: 10.5px; font-weight: 900; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--cwx-graphite);
  margin-bottom: clamp(18px, 2.2vw, 26px);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-nav__row {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-nav__item {
  display: flex; flex-direction: column; gap: 9px;
  padding-top: 18px;
  border-top: 1px solid var(--cwx-soft-line);
  min-height: 80px;
}

.cwx-real-testing-host .cwx-test-article .cwx-art-nav__k {
  font-size: 10px; font-weight: 900; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cwx-muted);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-nav__v {
  font-size: 16px; font-weight: 800; line-height: 1.55; color: var(--cwx-black);
}

.cwx-real-testing-host .cwx-test-article a.cwx-art-nav__item:hover .cwx-art-nav__v,
.cwx-real-testing-host .cwx-test-article a.cwx-art-nav__item:focus-visible .cwx-art-nav__v {
  color: var(--cwx-art-accent-text);
}

.cwx-real-testing-host .cwx-test-article .cwx-art-nav__item--soon .cwx-art-nav__v { color: var(--cwx-muted); }

/* ---------------------------------------------------------
   11. RESPONSIVE
   Mobile is re-art-directed. The hero strips move OFF the
   photograph entirely so they can never cover her face.
   --------------------------------------------------------- */

@media (max-width: 1080px) {
  .cwx-real-testing-host .cwx-test-article .cwx-art-hero__text { margin-right: clamp(-56px, -3vw, -24px); }
  .cwx-real-testing-host .cwx-test-article .cwx-art-rail::before { width: 62%; }
}

@media (max-width: 860px) {
  .cwx-real-testing-host .cwx-test-article {
    --cwx-art-mod-gap:   clamp(44px, 7vw, 64px);
    --cwx-art-field-pad: clamp(34px, 5.4vw, 52px);
  }

  /* HERO: one column, strips no longer overlap the photograph. */
  .cwx-real-testing-host .cwx-test-article .cwx-art-hero__grid { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 32px); }
  .cwx-real-testing-host .cwx-test-article .cwx-art-hero__text { margin-right: 0; }
  /* Single column: the strips sit on white, never on the photograph. */
  .cwx-real-testing-host .cwx-test-article .cwx-art-hero__quote { margin-left: 0; }
  .cwx-real-testing-host .cwx-test-article .cwx-art-hero__fig { order: 2; }
  .cwx-real-testing-host .cwx-test-article .cwx-art-hero__fig img { aspect-ratio: 1 / 1; object-position: center 54%; }
  .cwx-real-testing-host .cwx-test-article .cwx-art-hero__by { border-top-width: 2px; }

  .cwx-real-testing-host .cwx-test-article .cwx-art-profile { grid-template-columns: repeat(2, 1fr); }

  .cwx-real-testing-host .cwx-test-article .cwx-art-qa--a,
  .cwx-real-testing-host .cwx-test-article .cwx-art-qa--b,
  .cwx-real-testing-host .cwx-test-article .cwx-art-qa--c,
  .cwx-real-testing-host .cwx-test-article .cwx-art-fit__grid,
  .cwx-real-testing-host .cwx-test-article .cwx-art-close__body { grid-template-columns: 1fr; }

  /* Width rhythm is preserved on mobile rather than collapsing to one
     column of identical images. Q3 stays the largest human moment. */
  .cwx-real-testing-host .cwx-test-article .cwx-art-qa--a figure { width: 78%; margin-left: auto; margin-top: clamp(22px, 4vw, 30px); }
  .cwx-real-testing-host .cwx-test-article .cwx-art-qa--b figure { width: 100%; margin-top: clamp(22px, 4vw, 30px); }
  .cwx-real-testing-host .cwx-test-article .cwx-art-qa--c figure { width: 64%; margin-top: clamp(22px, 4vw, 30px); }
  .cwx-real-testing-host .cwx-test-article .cwx-art-fit__main   { width: 88%; margin-left: auto; margin-top: clamp(22px, 4vw, 30px); }
  .cwx-real-testing-host .cwx-test-article .cwx-art-fit__detail { max-width: 52%; }

  .cwx-real-testing-host .cwx-test-article .cwx-art-qa--text { padding-left: clamp(14px, 4vw, 22px); }

  /* Comfortable thumb target on touch screens. Negative margin keeps
     the profile row from shifting. */
  .cwx-real-testing-host .cwx-test-article .cwx-art-ig { width: 42px; height: 42px; margin: -8px; }

  /* Single product: the 0.62fr image track shrinks to ~236px at tablet,
     which is too timid for the one commerce moment in the article.
     Rebalance so the packshot keeps real presence. */
  .cwx-real-testing-host .cwx-test-article .cwx-art-prod--single {
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 3vw, 34px);
  }

  .cwx-real-testing-host .cwx-test-article .cwx-art-close__media img { aspect-ratio: 5 / 4; }

  /* The rail becomes a full-width field on small screens: a 58% strip
     behind a single stacked column reads as a stray rectangle. */
  .cwx-real-testing-host .cwx-test-article .cwx-art-rail::before { left: 0; width: 100%; }
}

@media (max-width: 620px) {
  .cwx-real-testing-host .cwx-test-article .cwx-art-body { font-size: 16.5px; line-height: 1.95; }
  .cwx-real-testing-host .cwx-test-article .cwx-art-series__count { margin-left: 0; flex-basis: 100%; }
  .cwx-real-testing-host .cwx-test-article .cwx-art-note__quote { text-indent: -0.4em; }
  .cwx-real-testing-host .cwx-test-article .cwx-art-note__by { flex-direction: column; gap: 8px; }
  .cwx-real-testing-host .cwx-test-article .cwx-art-note__by-ref { margin-left: 0; }
  .cwx-real-testing-host .cwx-test-article .cwx-art-prod { grid-template-columns: 1fr; gap: 30px; }
  .cwx-real-testing-host .cwx-test-article .cwx-art-prod--single { grid-template-columns: 1fr; gap: 22px; }
  .cwx-real-testing-host .cwx-test-article .cwx-art-prod--single .cwx-art-prod__media img { aspect-ratio: 4 / 3; }
  .cwx-real-testing-host .cwx-test-article .cwx-art-nav__row { grid-template-columns: 1fr; gap: 16px; }
  .cwx-real-testing-host .cwx-test-article .cwx-art-nav__item { min-height: 0; padding-bottom: 6px; }
  .cwx-real-testing-host .cwx-test-article .cwx-art-q { gap: 10px; }
}

@media (max-width: 420px) {
  .cwx-real-testing-host .cwx-test-article .cwx-art-profile { grid-template-columns: 1fr; gap: 16px; }
  /* The width rhythm is KEPT at 390/375. Forcing these back to 100%
     flattened every photograph to the same width, which is the exact
     "merely stacked" defect the mobile rules exist to prevent. 78% of
     a 390px screen is still a comfortable image. */
  .cwx-real-testing-host .cwx-test-article .cwx-art-qa--c figure { width: 70%; }
}

/* No motion is used in this article. This block guards future edits. */
@media (prefers-reduced-motion: reduce) {
  .cwx-real-testing-host .cwx-test-article * { animation: none !important; transition: none !important; }
}

/* =========================================================
   CW-X REAL TESTING ARTICLE - END
   ========================================================= */