// Nelly Article — "A Skin Cycle That Actually Fits a Week"

const NA_ARTICLE = {
  kicker: "Vol. IV · Column 10 · Skin",
  title: "A Skin Cycle That Actually Fits a <em>Week</em>",
  deck: "I resisted skin cycling for a year because the protocol felt like a schedule, and I do not want a schedule for my face. Then I made my own version. Two nights a week. Five nights of nothing. It turns out the nothing was the whole point.",
  date: "Saturday, 04 April 2026",
  read: "6 min read",
  author: "Nelly",
  authorRole: "Beauty & Style Director",
  ig: "@legacybynelly",
  category: "Skin",
  avatar: "/redesign/assets/nelly.png",
  lead: "https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?w=1800&q=80&auto=format&fit=crop",
  leadCap: "The routine, reduced to two nights. Everything else is recovery.",
  leadCredit: "Fig. 01 · The desk, April",
};

const NA_TOC = [
  { n: "I",   t: "What it is (and why I resisted it)" },
  { n: "II",  t: "The standard version" },
  { n: "III", t: "My actual schedule" },
  { n: "IV",  t: "The recovery nights" },
  { n: "V",   t: "What changed" },
];

const NA_MARGIN_NOTES = [
  { n: "01", t: "One active product on active nights. I use retinol, nothing else on top. A stack of actives is a negotiation your skin will lose." },
  { n: "02", t: "Recovery night formula: moisturiser, and nothing else. One product. Applied once. That is the entire step." },
  { n: "03", t: "If you lose track of which night you're on — and you will — default to a recovery night. Always. You can't overdo recovery." },
];

const NA_MORE = [
  { 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" },
  { 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: "Column", 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" },
];

const NA_GALLERY = [
  { img: "https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?w=1200&q=80&auto=format&fit=crop", cap: "Fig. 02 · Tuesday night" },
  { img: "https://images.unsplash.com/photo-1556228852-80b6e5eeff06?w=1200&q=80&auto=format&fit=crop", cap: "Fig. 03 · The recovery shelf" },
  { img: "https://images.unsplash.com/photo-1512290923902-8a9f81dc236c?w=1200&q=80&auto=format&fit=crop", cap: "Fig. 04 · One product" },
];

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 10</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 resisted it) ---- */}
        <p className="has-drop">
          <span className="na-drop">S</span>
          kin cycling arrived in my feeds the way most routines do — recommended by someone with considerably more free time than I have, in the form of a four-night rotation with a spreadsheet attached. Night one: exfoliant. Night two: retinol. Nights three and four: recovery. Then repeat. I watched fourteen of these videos over the course of a week, thought to myself <em>I will never remember which night I'm on</em>, and went back to doing whatever I'd been doing, which was not nothing, but also was not this.
        </p>
        <p>
          That was a year ago. I eventually came back to the idea not because I was convinced by the protocol, but because I was tired of my skin behaving as though it had a grudge. Dry patches in the morning. Tight across the cheeks by noon. A general sense that I was asking it to do something and it was declining. I had been layering products for six months in an attempt to fix this, which is, as it turns out, the exact opposite of the correct approach.
        </p>

        <p className="na-note mobile-only">One active product on active nights. I use retinol, nothing else on top. A stack of actives is a negotiation your skin will lose.</p>

        {/* ---- II. The standard version ---- */}
        <h3 className="na-sub">The standard version, and why I didn't use it.</h3>
        <p>
          The four-night rotation is not wrong. It is simply built for a person whose week has a reliable shape, and my weeks do not have a reliable shape. I fly. I present. I have dinners I did not expect to have. The night I'd designated as "retinol night" becomes the night I land at Heathrow at eleven with a hotel minibar as my only skincare option. The system breaks, and once it breaks I need to remember where in the cycle I was, which I cannot, and so I default to doing nothing, which is not recovery — it is abandonment.
        </p>
        <p>
          What I needed was a system structured around forgetting, not remembering. Fewest possible decision points. Named nights, not numbered ones.
        </p>

        <blockquote className="na-pull">
          I needed a system structured around forgetting, not remembering. Fewest possible decision points. Named nights, not numbered ones.
        </blockquote>

        {/* ---- III. My actual schedule ---- */}
        <h3 className="na-sub">My actual schedule.</h3>
        <p>
          Tuesday. Thursday. Those are my active nights. Every other night of the week is recovery. That is the entire protocol.
        </p>
        <p>
          I chose Tuesday and Thursday because they are the nights I am most reliably at home, awake, and not depleted enough to skip steps entirely. Monday I'm recovering from a weekend. Wednesday I'm in the middle of something. Friday is not a retinol night — that is a hill I will die on, because Friday is when I am most likely to stay up later than I should, have a glass of wine, and wake up with skin that has already been through enough.
        </p>
        <p>
          On active nights, I use one product: retinol. Not a retinol serum followed by a retinol moisturiser followed by a recovery balm that contains yet another active. One product. Applied after cleansing, before moisturiser. Wait twenty seconds. Moisturiser on top. That is the complete step. The instinct to add more — to layer a niacinamide, to press in an essence, to seal with a barrier oil — is the instinct I have learned to ignore. Actives work when they have quiet to work in. A queue of other products is not quiet.
        </p>

        <div className="na-fig">
          <div className="na-fig-img">
            <img src="https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?w=1400&q=80&auto=format&fit=crop" alt="" />
          </div>
          <div className="na-fig-cap">
            <span className="num">Fig. 02</span>
            <span>Tuesday nights: retinol, then moisturiser. The shelf has four products on it. I use two of them on this night. The other two are for the five nights that follow.</span>
          </div>
        </div>

        {/* ---- BIG PULL ---- */}
        <div className="na-pull-big reveal">
          The recovery nights are not the pause between the real work. The recovery nights are the work.
        </div>

        {/* ---- IV. The recovery nights ---- */}
        <h3 className="na-sub">The recovery nights, which nobody talks about.</h3>
        <p>
          Here is what the skin cycling content does not say clearly enough: the recovery nights are not the pause between the real work. The recovery nights are the work. What actives do, loosely summarised, is create a condition your skin then has to respond to. The response — the repair, the renewal, the building of the thing you are actually after — happens in the days that follow, not during the active night itself. You apply the retinol on Tuesday. Your skin spends Wednesday through Friday doing something with that information. If you apply more actives on Wednesday, you are interrupting a process you paid for on Tuesday.
        </p>
        <p>
          On recovery nights, I use one product: moisturiser. Not a hydrating toner, then a recovery serum, then a moisturiser, then a sleeping mask. One product. The heaviest moisturiser I own, applied liberally, and then I go to sleep. That is the entire step. I have tested shorter routines and longer ones, and I have found no meaningful difference between one good moisturiser and three products that cost more collectively than my first camera. The skin does not care about the presentation.
        </p>

        <p className="na-note mobile-only">Recovery night formula: moisturiser, and nothing else. One product. Applied once. That is the entire step.</p>

        <p>
          What changed when I committed to the recovery nights — actually committed, not just reduced my routine slightly — was that my skin stopped fighting me. The dryness receded by the third week. The tightness across the cheeks was gone by the end of the first month. By the second month I had stopped buying products to fix problems that no longer existed, which was either excellent news for my skin or catastrophic news for the beauty industry, depending on your perspective.
        </p>
        <p>
          The other thing nobody mentions: losing track of which night you're on is not a failure state. I have built this into the design. If I travel unexpectedly, if I stay somewhere unfamiliar, if it is a Friday and I simply cannot be trusted with decisions — I default to a recovery night. Moisturiser. Sleep. The system absorbs the chaos because it expects it.
        </p>

        <p className="na-note mobile-only">If you lose track of which night you're on — and you will — default to a recovery night. Always. You can't overdo recovery.</p>

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

        {/* ---- V. What changed ---- */}
        <h3 className="na-sub">What changed.</h3>
        <p>
          By month three, my bathroom shelf had eight fewer products on it. Not because I threw them away in a moment of resolve, but because I stopped replacing them when they ran out. There was nothing to replace them with. The jobs they had been doing either did not exist anymore, or were being done adequately by two products that together cost less than what I used to spend on serums in a quarter.
        </p>
        <p>
          I did not expect, when I started this, that the primary result would be subtraction. Skin cycling is sold as a protocol for results — texture, brightness, the soft language of improvement. Those things came, eventually, in modest and unremarkable ways. What came faster, and mattered more, was the absence of the problems I had been actively creating by doing too much. The barrier disruption. The dryness I was treating with products that caused more dryness. The dependency cycle of actives and the recovery products I needed to survive the actives.
        </p>
        <p>
          Two nights a week is a very small amount of effort. Five nights of one product is almost no effort at all. Between them, they leave enough room for your skin to have an opinion and express it. Mine eventually expressed that it preferred to be left alone most of the time, with brief, specific interventions. That is, as it turns out, my preferred approach to most things.
        </p>

        {/* End mark */}
        <div className="na-end">
          <span className="na-end-mark">¶</span>
          <span className="na-end-name">Filed by Nelly, from the desk · 04 April</span>
          <span className="na-end-meta">N. 10 · 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 bathroom 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 }}>
            "Two active nights. Five recovery nights. The ratio is not a compromise — it is the point."
          </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>reduced</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 });
