// Nelly Article — "Shape Your Brows"

const NA_ARTICLE = {
  kicker: "Vol. IV · Column 06 · Brows",
  title: "Shape your <em>brows</em>.",
  deck: "Measure once. Fill twice. Stop at the third stroke. The brow formula Nelly has followed for eight years, and why stopping is always the hardest part.",
  date: "Tuesday, 22 April 2026",
  read: "7 min read",
  author: "Nelly",
  authorRole: "Beauty & Style Director",
  ig: "@legacybynelly",
  category: "Brows",
  avatar: "/redesign/assets/nelly.png",
  lead: "https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=1800&q=80&auto=format&fit=crop",
  leadCap: "Measure the inner corner, find the arch, and — this is the part people skip — stop.",
  leadCredit: "Fig. 01 · Styled by Nelly",
};

const NA_TOC = [
  { n: "I",   t: "The measurements" },
  { n: "II",  t: "The arch (where it actually belongs)" },
  { n: "III", t: "The tail (and the pencil rule)" },
  { n: "IV",  t: "Stopping (the hardest part)" },
  { n: "V",   t: "Maintenance" },
];

const NA_MARGIN_NOTES = [
  { n: "01", t: "The spoolie is the most important tool in a brow routine. Not the pencil, not the powder. The spoolie. If yours is stiff or splayed, replace it before anything else." },
  { n: "02", t: "The most common mistake is a tail that ends past the orbital bone. It ages the face downward. Stop earlier than feels right." },
  { n: "03", t: "Go one shade lighter than you think. One shade. Your brow hair is lighter at the root than it appears, and a pencil that matches the tip reads as costume." },
];

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: "Column", t: "Why Your Pillowcase Is Ruining Your Hair", time: "5 min", date: "Apr 22", img: "https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?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-1487412720507-e7ab37603c6f?w=1200&q=80&auto=format&fit=crop", cap: "Fig. 02 · The spoolie first, always" },
  { img: "https://images.unsplash.com/photo-1571875257727-256c39da42af?w=1200&q=80&auto=format&fit=crop", cap: "Fig. 03 · The arch, not the peak" },
  { img: "https://images.unsplash.com/photo-1556228720-195a672e8a03?w=1200&q=80&auto=format&fit=crop", cap: "Fig. 04 · Aftermath — less than you expect" },
];

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 06</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. The measurements ---- */}
        <p className="has-drop">
          <span className="na-drop">T</span>
          here are three numbers and a pencil. That is the entire method. I learned it from a makeup artist in Istanbul who had been doing brows for twenty years and charged, at the time, almost nothing — because she had decided, as a matter of principle, that brow work should not cost what it costs. She drew three dots on my face in under a minute, connected them, and handed me a mirror. I have used nothing else since.
        </p>
        <p>
          The three dots correspond to three measurements: the inner corner of the eye, the arch point, and the tail. Every brow formula that has ever worked — and most of them do, underneath the marketing — traces back to these three points. The differences are in how people find the arch, how far they extend the tail, and whether they stop when they should. The stopping is the variable. It is always the stopping.
        </p>

        <p className="na-note mobile-only">The spoolie is the most important tool in a brow routine. Not the pencil, not the powder. Replace it if yours is stiff or splayed.</p>

        <h3 className="na-sub">The inner corner — and why it anchors everything.</h3>
        <p>
          Hold a spoolie — not a pencil, a spoolie — vertically alongside your nostril. Where it meets the brow bone is where your brow should begin. Not two millimetres closer to the bridge, which is the instinct, because we have been told for thirty years that a wide gap between the brows looks polished. It doesn't. It looks like a gap. The inner corner should sit, almost exactly, above the inner corner of the eye. That alignment is what gives a face its coherence from across a room.
        </p>
        <p>
          If you've been plucking or threading the inner corner for years, you may find that there isn't much hair left to work with — or that the hairs that remain have learned to grow in the wrong direction. The spoolie will find them. Brush upward, then across. You'll see what's actually there before you add anything. Most of the time, it is more than you thought.
        </p>

        {/* ---- II. The arch ---- */}
        <h3 className="na-sub">The arch — where it actually belongs.</h3>
        <p>
          Hold the spoolie at the outer edge of your iris, angled from the nostril. Where it crosses the brow is the apex — the highest point of the arch. Not above the pupil, which is what you will read everywhere, and which was correct for the decade it was coined and has since become slightly dated. Above the outer iris. It sits a fraction further out than expected, and it does something important: it lifts the eye rather than rounding it, which is the difference between looking alert and looking permanent.
        </p>

        <blockquote className="na-pull">
          The arch is not a peak. It is a suggestion — the point where the brow begins its quiet descent.
        </blockquote>

        <p>
          This is where most people overfill. The impulse, once you've found the arch, is to define it — to press down with the pencil and make a visible angle. Do not. The arch should feel, on the finished brow, like something you can sense rather than see. A hairline accent upward with the spoolie after filling is usually all it takes. If the arch is visible as a shape on its own, the brow has done too much.
        </p>

        <div className="na-fig">
          <div className="na-fig-img">
            <img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=1400&q=80&auto=format&fit=crop" alt="" />
          </div>
          <div className="na-fig-cap">
            <span className="num">Fig. 02</span>
            <span>I have owned the same spoolie for three years. It is from a mascara I finished in the second month. The head is small and firm and cost nothing. I keep it in a ceramic dish in Istanbul and a leather case everywhere else.</span>
          </div>
        </div>

        {/* ---- III. The tail ---- */}
        <h3 className="na-sub">The tail — and the pencil rule.</h3>
        <p>
          Hold the spoolie from the nostril to the outer corner of the eye. Where it crosses the brow is where the tail ends. Not where it ends naturally — most tails extend further than this point. But where it <em>should</em> end, according to the geometry of the face and the fact that a long tail pulls the eye downward, which is the opposite of what anyone is trying to do.
        </p>
        <p>
          The pencil rule is simple: the tail is drawn, not filled. Everything between the inner corner and the arch is filled — short, hair-like strokes in the direction of growth, light pressure, two passes maximum. The tail is a line. One stroke, slightly tapered at the end so it doesn't stop abruptly. If you can see where the tail begins, the transition between filled brow and drawn tail, the line is too heavy. A cotton swab, barely damp, will take off what's excess without disturbing the fill.
        </p>

        <p className="na-note mobile-only">Go one shade lighter than you think. Brow hair is lighter at the root than it appears, and a pencil that matches the tip reads as costume.</p>

        {/* ---- BIG PULL ---- */}
        <div className="na-pull-big reveal">
          The best brow you have ever seen did not announce itself. You noticed the face.
        </div>

        {/* ---- IV. Stopping ---- */}
        <h3 className="na-sub">Stopping — which is the actual skill.</h3>
        <p>
          I have a rule, and I have had it for eight years: I do not look at my brows while I am doing them. I feel them — the spoolie drag, the weight of the pencil, the moment when the tail tapers. Then I set down the pencil and look. If something is wrong at that point, I correct it. But I have stopped adding. This is different from finishing; finishing implies a natural endpoint. Stopping implies discipline, which is what it actually requires.
        </p>
        <p>
          The third stroke is where most people ruin a brow that was, after the second stroke, finished. The third stroke is the one that fixes the thing that didn't need fixing — that deepens the arch that was subtle, that extends the tail another two millimetres, that adds definition to a brow that had already found its shape. Put the pencil down after the second stroke. Look. Look again. If you are still convinced something needs correcting, wait thirty seconds and look a third time. In eight years, the third look has never confirmed the third stroke.
        </p>

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

        {/* ---- V. Maintenance ---- */}
        <h3 className="na-sub">Maintenance — which is simpler than it sounds.</h3>
        <p>
          Threading every four weeks, if threading is available. Waxing if threading is not. Tweezing for the single strays that appear in the third week — a magnifying mirror, good light, and the rule that you only remove hairs that fall clearly outside the three-point boundary. Never thread or tweeze before an event. Thread or tweeze after one, when the redness has three days to settle before anyone sees you.
        </p>
        <p>
          The brow serum question: I have tried four and seen results from two. Both took three months. If you want fuller brows, the serum is slower than you expect and more reliable than the alternatives. Apply nightly to the tail, which is the section that thins first and recovers most visibly. Avoid the inner corner — oversaturation there tends to produce hairs at the wrong angle, and you will spend the rest of your mornings combing them into submission with the spoolie you should have been using all along.
        </p>
        <p>
          The makeup artist in Istanbul — her name was Zeynep, and she has since retired to a studio in Karaköy where she works by appointment only — told me something I have repeated so many times it has become something I believe I thought myself: a brow shapes the face the way a sentence shapes a paragraph. You do not notice a good one. You notice only when it is missing. I think about this every morning, for approximately forty seconds, and then I put the pencil down.
        </p>

        {/* End mark */}
        <div className="na-end">
          <span className="na-end-mark">¶</span>
          <span className="na-end-name">Filed by Nelly, from the desk · 22 April</span>
          <span className="na-end-meta">N. 06 · 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 }}>
            "I don't use stencils. I don't use gels that set like cement. I use a spoolie from a mascara I finished in February."
          </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>measured</em> morning.</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 });
