// Nelly Article — "On Under-Painting (And Why I Stopped)"

const NA_ARTICLE = {
  kicker: "Vol. IV · Column 09 · Makeup",
  title: "On Under-Painting (And Why I <em>Stopped</em>)",
  deck: "I was a convert for four months. Under-painting worked — until I figured out what it was compensating for, and fixed that instead.",
  date: "Saturday, 11 April 2026",
  read: "5 min read",
  author: "Nelly",
  authorRole: "Beauty & Style Director",
  ig: "@legacybynelly",
  category: "Makeup",
  avatar: "/redesign/assets/nelly.png",
  lead: "https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=1800&q=80&auto=format&fit=crop",
  leadCap: "The palette was on the desk for four months. Then it wasn't.",
  leadCredit: "Fig. 01 · From the desk, April",
};

const NA_TOC = [
  { n: "I",   t: "What it is (and why I tried it)" },
  { n: "II",  t: "When it worked" },
  { n: "III", t: "The moment I stopped" },
  { n: "IV",  t: "What I do instead" },
  { n: "V",   t: "On technique as distraction" },
];

const NA_MARGIN_NOTES = [
  { n: "01", t: "Peach cancels dark circles. Orange cancels deeper ones. Green cancels redness on fair skin. For everything else — nothing. There is no corrector for 'general tiredness.'" },
  { n: "02", t: "The prep step that mattered: a clean face before sleep, no exceptions. Not a product. Not a device. An absence of something." },
  { n: "03", t: "On the principle: technique cannot fix what preparation hasn't done. It can hide it, briefly. That is not the same thing." },
];

const NA_MORE = [
  { kick: "Column", t: "Five-Minute Everyday Eye",              time: "4 min", date: "Apr 22", img: "https://images.unsplash.com/photo-1571875257727-256c39da42af?w=1200&q=80&auto=format&fit=crop" },
  { kick: "Essay",  t: "The Five Products I'd Re-Buy Tomorrow", time: "4 min", date: "Apr 18", img: "https://images.unsplash.com/photo-1512290923902-8a9f81dc236c?w=1200&q=80&auto=format&fit=crop" },
  { kick: "Essay",  t: "On the second cleanse",                 time: "8 min", date: "Apr 11", img: "https://images.unsplash.com/photo-1556228852-80b6e5eeff06?w=1200&q=80&auto=format&fit=crop" },
];

const NA_GALLERY = [
  { img: "https://images.unsplash.com/photo-1571875257727-256c39da42af?w=1200&q=80&auto=format&fit=crop", cap: "Fig. 02 · The corrector palette, April" },
  { img: "https://images.unsplash.com/photo-1556228720-195a672e8a03?w=1200&q=80&auto=format&fit=crop", cap: "Fig. 03 · Prep, not product" },
  { img: "https://images.unsplash.com/photo-1512290923902-8a9f81dc236c?w=1200&q=80&auto=format&fit=crop", cap: "Fig. 04 · What stayed" },
];

function NaMast() {
  return (
    <div className="na-mast">
      <div className="na-mast-l">How To: Beauty Edition</div>
      <div className="na-mast-c">The Desk, by Nelly</div>
      <div className="na-mast-r">Vol. IV · Column 09</div>
    </div>
  );
}

function NaHero() {
  const A = NA_ARTICLE;
  return (
    <header className="na-hero reveal" data-screen-label="Article Hero">
      <div className="na-kicker">
        <span className="na-bar" />
        <span>{A.kicker}</span>
        <span className="na-bar" />
      </div>
      <h1 className="na-title" dangerouslySetInnerHTML={{ __html: A.title }} />
      <p className="na-deck">{A.deck}</p>
      <div className="na-byline">
        <span className="by">
          <span className="by-avatar"><img src={A.avatar} alt="" /></span>
          Words by <span className="by-name">{A.author}</span>
        </span>
        <span className="dot" />
        <a href="https://instagram.com/legacybynelly" className="na-ig" style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".22em", color: "var(--blush-deep)", textDecoration: "none" }}>{A.ig}</a>
        <span className="dot" />
        <span>{A.date}</span>
        <span className="dot" />
        <span>{A.read}</span>
        <span className="dot" />
        <span>Filed under {A.category}</span>
      </div>
    </header>
  );
}

function NaLead() {
  const A = NA_ARTICLE;
  return (
    <figure className="reveal" style={{ margin: "0 0 56px" }}>
      <div className="na-lead">
        <img src={A.lead} alt="" />
      </div>
      <figcaption className="na-lead-cap">
        <span className="credit">{A.leadCredit}</span>
        <span className="cap-text">{A.leadCap}</span>
      </figcaption>
    </figure>
  );
}

function NaBody() {
  return (
    <div className="na-body-grid">
      <article className="na-col reveal">

        {/* ---- I. What it is (and why I tried it) ---- */}
        <p className="has-drop">
          <span className="na-drop">U</span>
          nder-painting is the practice of applying color-correcting product to the face before foundation — peach or orange tones pressed into the under-eye to cancel the blue-grey of dark circles, occasionally green on the cheek plane to quiet redness. It comes from portrait painting. It entered beauty about a decade ago by way of a handful of editorial makeup artists who posted it online, and then it became the thing everyone was doing, and then I became the thing doing it.
        </p>
        <p>
          I was not impulsive about it. I researched. I bought the right products — a peach cream corrector from a French brand with good pigment weight, a separate orange stick for the outer corner where my circles are darkest. I watched how the artists applied it. I practiced. Within a week, I had a method. Within a month, I was evangelical about it in the way you are evangelical about something when it is new and working and you have not yet had cause to question it.
        </p>

        <p className="na-note mobile-only">Peach cancels dark circles. Orange cancels deeper ones. Green for redness. For everything else — no corrector exists for 'general tiredness.'</p>

        {/* ---- II. When it worked ---- */}
        <h3 className="na-sub">When it worked.</h3>
        <p>
          It worked. That is the honest thing to say first, before the rest of this, which is about why I stopped. The corrector went on in a thin layer — two fingers, patted, not dragged — and then the foundation went over it, sheered out at the edges, and the circles were gone. Not concealed. Gone, from a certain distance. The face read as rested. I did a dinner in Paris in February and a woman I admire asked what I was doing differently. I told her. She bought the corrector the next morning. I was pleased with myself in the specific way of a person who has discovered something other people haven't yet.
        </p>
        <p>
          Four months of this. The palette sat to the left of the mirror, which is the spot reserved for the things I use daily. I built the step into the routine with the same seriousness I give to everything else — same pressure, same timing, same two minutes of attention. I was a practitioner, not a dabbler.
        </p>

        <blockquote className="na-pull">
          The corrector was solving something real. I just hadn't asked yet what was causing it.
        </blockquote>

        {/* ---- III. The moment I stopped ---- */}
        <h3 className="na-sub">The moment I stopped.</h3>
        <p>
          I was traveling for work — three cities, eight days, the kind of trip where sleep becomes a negotiation and the room is always slightly too warm. On the fifth morning, I ran out of the corrector. I had packed the wrong case. I did the foundation without it and stood at the bathroom mirror waiting for the damage to be visible.
        </p>
        <p>
          It wasn't. Not the way I expected. The circles were there, quieter than on a bad week, but present. I applied a small amount of foundation over them twice — the method I'd used before under-painting — and it was fine. Not remarkable, but fine. I thought: this is a bad day, the real test will be when I'm home.
        </p>

        <div className="na-fig">
          <div className="na-fig-img">
            <img src="https://images.unsplash.com/photo-1571875257727-256c39da42af?w=1400&q=80&auto=format&fit=crop" alt="" />
          </div>
          <div className="na-fig-cap">
            <span className="num">Fig. 02</span>
            <span>The corrector palette. French brand, good pigment weight. It is in a drawer now, not on the shelf — which is the honest metric of how much I use it.</span>
          </div>
        </div>

        <p>
          When I was home, I looked at what had changed. Not in the last week — in the last four months. I had, sometime around month two of the under-painting experiment, also started cleaning my face more carefully before sleep. Not a new product. A better cleanse. Earlier to bed two nights a week. Less wine on those nights, mostly because I was tired and not because I was disciplined. The circles had been improving for reasons I had attributed, wholesale, to the corrector.
        </p>
        <p>
          I tested it, the way you test a hypothesis when you are too stubborn to admit you already know the answer: two weeks without the corrector, with the same cleanse, the same sleep schedule. The circles were the same as they'd been when I was using the corrector. Which meant the corrector had been correcting for a problem that preparation had already solved, and I had been crediting the wrong thing.
        </p>

        <div className="na-pull-big reveal">
          I had been crediting the technique. It was the preparation that had done it.
        </div>

        {/* ---- IV. What I do instead ---- */}
        <h3 className="na-sub">What I do instead.</h3>
        <p>
          I still own the corrector. It goes on for specific occasions — very little sleep, very bright light, the kind of event where the circles would read from across a table. But it is not part of the daily routine. It is in the same drawer as the lip liner I use twice a year, which is where things go when they have earned their keep but lost their necessity.
        </p>
        <p>
          What I do instead is less interesting to write about, which is part of why I'm writing about it. I clean my face before sleep. I use a low-pH second cleanse, tepid water, cotton flannel — none of this will surprise anyone who has read the second-cleanse column. I sleep as much as I can, which is sometimes seven hours and sometimes five and is out of my hands on most nights. I drink less. I am not evangelical about any of it. There is no palette. There is no before-and-after. There is just a face that looks like it slept, most mornings, without any correcting being done to it.
        </p>

        <p className="na-note mobile-only">The prep step that mattered: a clean face before sleep, no exceptions. Not a product. An absence of something.</p>

        <div className="na-dinkus" aria-hidden="true">
          <span>·</span><span>·</span><span>·</span>
        </div>

        {/* ---- V. On technique as distraction ---- */}
        <h3 className="na-sub">On technique as distraction.</h3>
        <p>
          There is a version of beauty practice that is about solving problems. There is another version that is about doing things — techniques, steps, tools, applications — and feeling like a person who takes care. The two versions often look identical from the outside. The distinction only becomes clear when you try removing the technique and find the problem has gone with it.
        </p>
        <p>
          Under-painting is not a bad technique. The artists who use it on set — long hours, artificial light, faces that need to read perfectly from twenty feet — are using it correctly. The corrector is doing work there. What I had done was taken a precision tool and applied it to a problem it wasn't the solution to. It was the right answer to a question I wasn't actually asking.
        </p>
        <p>
          I think about this in other parts of the routine sometimes. The serum that does something, probably. The mist that feels good. The extra step that arrived in a press box and stayed because I liked the bottle. Most of them are fine. Some of them are correctors I bought before I figured out what was upstream. The shelf is thinner than it was. I do not miss what's gone.
        </p>

        {/* End mark */}
        <div className="na-end">
          <span className="na-end-mark">¶</span>
          <span className="na-end-name">Filed by Nelly, from the desk · 11 April</span>
          <span className="na-end-meta">N. 09 · S/S 26</span>
        </div>
      </article>

      {/* Sticky margin */}
      <aside className="na-margin">
        <div className="na-margin-card thin">
          <div className="na-mc-eyebrow">Sections</div>
          <div className="na-toc">
            {NA_TOC.map((s, i) => (
              <a key={i} href="#" className="na-toc-item">
                <span>{s.t}</span>
                <span className="num">{s.n}</span>
              </a>
            ))}
          </div>
        </div>

        <div className="na-margin-card">
          <div className="na-mc-eyebrow">From the margin</div>
          <h4 className="na-mc-h">Three notes I'd pin to the mirror.</h4>
          <ul className="na-mc-list">
            {NA_MARGIN_NOTES.map((m, i) => (
              <li key={i}>
                <span className="na-mc-n">{m.n}</span>
                <span>{m.t}</span>
              </li>
            ))}
          </ul>
        </div>

        <div className="na-margin-card thin">
          <div className="na-mc-eyebrow">On Nelly's desk</div>
          <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 14.5, lineHeight: 1.45, color: "var(--ink-2)", margin: 0 }}>
            "The palette is in a drawer now. That is the review."
          </p>
        </div>
      </aside>
    </div>
  );
}

function NaGallery() {
  return (
    <section className="na-gallery reveal">
      <div className="na-gallery-head">
        <span className="na-gallery-num">·</span>
        <div>
          <div className="na-gallery-eyebrow">Stills · From the shoot</div>
          <h2 className="na-gallery-h">Three frames from a <em>quieter</em> shelf.</h2>
        </div>
      </div>
      <div className="na-gallery-grid">
        {NA_GALLERY.map((g, i) => (
          <a key={i} href="#" className={`na-gtile ${i === 1 ? "tall" : ""}`}>
            <img src={g.img} alt="" />
            <span className="na-gtile-cap">{g.cap}</span>
          </a>
        ))}
      </div>
    </section>
  );
}

function NaMore() {
  return (
    <section className="na-more reveal">
      <div className="na-more-head">
        <div>
          <div className="na-more-eyebrow">More from the desk</div>
          <h2 className="na-more-h">Other things <em>Nelly</em> is thinking about.</h2>
        </div>
        <a className="na-more-back" href="Nelly.html">
          Back to Nelly's page <span aria-hidden>→</span>
        </a>
      </div>
      <div className="na-more-grid">
        {NA_MORE.map((p, i) => (
          <a key={i} className="na-more-card" href="#">
            <div className="na-more-img">
              <img src={p.img} alt="" />
              <span className="na-more-kick">{p.kick}</span>
            </div>
            <h4>{p.t}</h4>
            <div className="na-more-meta">{p.date} · {p.time} read</div>
          </a>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { NA_ARTICLE, NaMast, NaHero, NaLead, NaBody, NaGallery, NaMore });
