/* Kitchen backsplash leaf — production version */

const HTMast = () => (
  <header className="ht-mast">
    <div className="ht-mast-inner">
      <div className="ht-mast-l">
        <span className="vol">HowTo Quarterly · Vol. III</span>
        <span className="sec">No. 27 · Spring 2026</span>
      </div>
      <div className="ht-mast-c">
        <a href="/">Home</a>
        <span>·</span>
        <a href="/en/kitchen/">Kitchen</a>
        <span>·</span>
        <a href="/en/kitchen/install/">Install</a>
        <span>·</span>
        <span className="cur">Backsplash</span>
      </div>
      <div className="ht-mast-r">
        <span>Field Manual</span>
        <span className="dot">●</span>
        <span>27 / 78</span>
      </div>
    </div>
  </header>
);

const HTOpener = () => (
  <section className="ht-opener">
    <div className="ht-opener-wrap">
      <div className="ht-folio">
        <span className="left">Kitchen / Install · Field Manual № 27</span>
        <span className="right">Filed 04.18.2026 · Last verified 04.22.2026</span>
      </div>

      <div className="ht-opener-grid">
        <div className="ht-opener-side">
          <span className="kicker">A How-To, In Twelve Steps</span>
          <div className="manual-stamp">
            <span className="ms-l">FIELD<br/>MANUAL</span>
            <span className="ms-divider"></span>
            <span className="ms-r">
              <span className="ms-num">No. 27</span>
              <span className="ms-cat">Install</span>
            </span>
          </div>
        </div>

        <div className="ht-opener-main">
          <h1>How to install a tile <em>backsplash</em> in a kitchen, in a single weekend.</h1>
          <p className="standfirst">
            The single highest-impact install you can do in a kitchen, and one of the most forgiving for first-timers — provided you respect the dry-fit, buy 15% extra tile, and don't try to grout on a Sunday night when you're tired. A complete, illustrated, twelve-step manual.
          </p>
          <div className="byline">
            <span>By <em>Sam Halloran</em>, Editor</span>
            <span className="bar">·</span>
            <span>Photographs by <em>M. Lefebvre</em></span>
            <span className="bar">·</span>
            <span>Verified by <em>R. Chen, Tile Setter</em></span>
          </div>
        </div>
      </div>

      <div className="ht-opener-stripe">
        <div className="cell">
          <span className="k">Difficulty</span>
          <span className="v">Intermediate</span>
          <span className="dots">
            <i className="on"/><i className="on"/><i className="on"/><i/><i/>
          </span>
        </div>
        <div className="cell">
          <span className="k">Time</span>
          <span className="v">A weekend</span>
          <span className="m">Fri eve · Sat day · Sun morning</span>
        </div>
        <div className="cell">
          <span className="k">Materials</span>
          <span className="v">$180 — $420</span>
          <span className="m">Tile, thinset, grout, caulk</span>
        </div>
        <div className="cell">
          <span className="k">Tools</span>
          <span className="v">12 items</span>
          <span className="m">Borrow what you can</span>
        </div>
        <div className="cell">
          <span className="k">Permit</span>
          <span className="v">Not required</span>
          <span className="m">Cosmetic surface work</span>
        </div>
        <div className="cell">
          <span className="k">DIY-able</span>
          <span className="v">Yes — solo</span>
          <span className="m">Easier with a friend</span>
        </div>
      </div>
    </div>
  </section>
);

const HTIndex = () => {
  const steps = [
    ["§ 01", "Survey the wall, measure twice", "Layout · 25 min"],
    ["§ 02", "Buy the tile, plus 15%", "Shopping · 1 hr"],
    ["§ 03", "Gather tools and protective gear", "Prep · 20 min"],
    ["§ 04", "Empty the counter, mask the edges", "Prep · 30 min"],
    ["§ 05", "Find the centerline and key tile", "Layout · 20 min"],
    ["§ 06", "Mix the thinset (and rest it)", "Tiling · 10 min"],
    ["§ 07", "Set the field tile, top down", "Tiling · 2 — 3 hrs"],
    ["§ 08", "Cut around outlets and edges", "Tiling · 1 hr"],
    ["§ 09", "Let it cure overnight, fully", "Wait · 24 hrs"],
    ["§ 10", "Mix and float the grout", "Grout · 90 min"],
    ["§ 11", "Wipe, polish, wait, polish again", "Grout · 1 hr"],
    ["§ 12", "Caulk every wet seam", "Finish · 30 min"],
  ];
  return (
    <section className="ht-toc">
      <div className="ht-toc-wrap">
        <div className="ht-folio">
          <span className="left">Contents · Twelve steps</span>
          <span className="right">PG. 02</span>
        </div>
        <div className="ht-toc-head">
          <h2>Contents.</h2>
          <p>Read end-to-end before you start. The dry-fit (§ 05) is the most-skipped step and the most-regretted.</p>
        </div>
        <ol className="ht-toc-list">
          {steps.map(([n, t, m], i) => (
            <li key={n}>
              <a href={`#step-${i+1}`}>
                <span className="n">{n}</span>
                <span className="t">{t}</span>
                <span className="dots-line" aria-hidden="true"></span>
                <span className="m">{m}</span>
              </a>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
};

const HTLede = () => (
  <section className="ht-lede">
    <div className="ht-lede-wrap">
      <div className="ht-folio">
        <span className="left">Before You Begin · A Note from the Editor</span>
        <span className="right">PG. 04</span>
      </div>
      <div className="ht-lede-grid">
        <aside className="ht-lede-side">
          <div className="ht-margin-note">
            <span className="mn-label">Editor's note</span>
            <p>If you've never tiled before, do this project on a single weekend with no other obligations. Tiling rewards patience and punishes the urge to "just finish it tonight."</p>
          </div>
          <div className="ht-margin-note">
            <span className="mn-label">Reader tip</span>
            <p>"I borrowed a wet saw from a neighbor instead of renting one. Saved me $90 and a Home Depot trip on Saturday morning." — Marta R., Denver</p>
          </div>
        </aside>
        <div className="ht-lede-body">
          <p className="dropcap">
            A <em>tile backsplash</em> is the highest-leverage install in your kitchen — a thirty-square-foot slice of wall that gets photographed in every dinner-party shot for the next decade. It is also, almost uniquely among kitchen projects, both forgiving for first-timers and visibly transformative on completion. You will not believe a kitchen this is the same kitchen on Monday morning.
          </p>
          <p>
            That said, tiling is a craft, and crafts have rules. The thinset has a working time. The grout has a working time. The tile has a face and a back, and you will, at least once, set one backwards. The good news: every mistake is reversible if you catch it before the thinset cures. The better news: the cure window is forty-five minutes, which is plenty of time to step back, frown, and pull the tile off cleanly.
          </p>
          <p className="callout">
            What follows is the manual we wish we'd had on our first backsplash, in 2018, in a kitchen we no longer live in.
          </p>
          <p>
            We've broken the project into <em>twelve steps</em> across <em>three sessions</em>: a Friday evening of prep and layout, a Saturday of tiling, and a Sunday morning of grout and caulk. Each step is timed, and each has a checklist of what you need before you begin. Read the whole thing before you start. Do not skip the dry-fit.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const HTBom = () => {
  const materials = [
    { item: "Subway tile (3×6 ceramic)", qty: "35 sq ft", note: "30 sq ft of wall + 15% waste", price: "$120 — $260" },
    { item: "Thinset mortar, white",     qty: "25 lb bag", note: "Premixed is fine for 30 sq ft or less", price: "$24 — $34" },
    { item: "Sanded grout (color of your choice)", qty: "10 lb", note: "Sanded for joints over 1/8\"", price: "$18 — $28" },
    { item: "1/16\" tile spacers",         qty: "200 ct",   note: "Buy more than you think", price: "$8" },
    { item: "100% silicone caulk",         qty: "1 tube",   note: "Match grout color, not tile color", price: "$8 — $14" },
    { item: "Painter's tape",              qty: "1 roll",   note: "2-inch, fresh roll", price: "$6" },
    { item: "Drop cloths (canvas, not plastic)", qty: "2", note: "Plastic slides — canvas stays", price: "$24" },
  ];
  const tools = [
    { item: "1/4\" V-notch trowel",        own: false, sub: "For mosaic / 3×6" },
    { item: "Tile cutter (snap)",           own: true,  sub: "Fine for straight cuts" },
    { item: "Wet saw (rented or borrowed)", own: false, sub: "For outlet cutouts" },
    { item: "Mixing paddle + drill",        own: true,  sub: "Or buy premixed" },
    { item: "Bucket (5-gal) × 2",           own: true,  sub: "One for thinset, one for water" },
    { item: "Grout float (rubber)",         own: false, sub: "$10, lasts forever" },
    { item: "Large sponge × 2",             own: false, sub: "For cleanup, fresh" },
    { item: "Microfiber cloth × 4",         own: true,  sub: "For polishing haze" },
    { item: "24-inch bubble level",         own: true,  sub: "Real, not phone" },
    { item: "Tape measure, pencil, square", own: true,  sub: "Sharpie for the wall" },
    { item: "Knee pads",                    own: false, sub: "Trust us" },
    { item: "Safety glasses + dust mask",   own: true,  sub: "Cutting tile is dusty" },
  ];
  return (
    <section className="ht-bom">
      <div className="ht-bom-wrap">
        <div className="ht-folio">
          <span className="left">Bill of Materials · Tools &amp; Supplies</span>
          <span className="right">PG. 06</span>
        </div>
        <div className="ht-bom-head">
          <h2>What you'll need.</h2>
          <p>For a typical 30 sq-ft kitchen backsplash. Adjust quantities up or down 10% per 5 sq ft over or under.</p>
        </div>

        <div className="ht-bom-grid">
          <div className="ht-bom-col">
            <div className="ht-bom-coltitle">
              <span className="lbl">Materials</span>
              <span className="ct">7 line items</span>
            </div>
            <table className="ht-bom-table">
              <thead>
                <tr><th>Item</th><th>Qty</th><th>Note</th><th>Cost</th></tr>
              </thead>
              <tbody>
                {materials.map((m, i) => (
                  <tr key={i}>
                    <td className="item">{m.item}</td>
                    <td className="qty">{m.qty}</td>
                    <td className="note">{m.note}</td>
                    <td className="price">{m.price}</td>
                  </tr>
                ))}
                <tr className="total">
                  <td colSpan="3">Estimated total, materials</td>
                  <td className="price">$208 — $374</td>
                </tr>
              </tbody>
            </table>
          </div>

          <div className="ht-bom-col">
            <div className="ht-bom-coltitle">
              <span className="lbl">Tools</span>
              <span className="ct">12 line items · ✓ = you may already own</span>
            </div>
            <ul className="ht-tool-list">
              {tools.map((t, i) => (
                <li key={i} className={t.own ? "own" : ""}>
                  <span className="check">{t.own ? "✓" : "○"}</span>
                  <span className="item">{t.item}</span>
                  <span className="sub">{t.sub}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

const STEPS = [
  {
    n: "01", phase: "Friday Evening · Layout", title: "Survey the wall, measure twice.",
    body: "Walk the wall with a tape measure, pencil, and a phone for photos. Note the height from countertop to the underside of the upper cabinets — typical is 18 inches. Measure the width, including all the way around the corners. Photograph every outlet, switch, and faucet stub-out. Multiply width × height in feet to get square feet, then add 15% for waste, breakage, and the inevitable replacement tile in five years.",
    tip: "Take a photo with your tape measure visibly extended to each outlet. You will refer to this photo six times during cuts.",
    img: "https://images.unsplash.com/photo-1581094288338-2314dddb7ece?w=900&q=80",
  },
  {
    n: "02", phase: "Friday Evening · Shopping", title: "Buy the tile, plus 15%.",
    body: "Bring the photos and the square footage. Buy from a single dye lot — every box should have a matching lot number printed on the side. While you're there, get the thinset (white for ceramic, gray if you must), sanded grout in your chosen color, and at least 200 spacers. The dust mask, drop cloth, and a fresh tube of 100% silicone are easy to forget but you'll need them on Sunday.",
    tip: "If you're choosing grout color: pick the color you want, then go one shade darker. Light grout shows every smudge, every spot, every drip from a kid with a juice box.",
    img: "https://images.unsplash.com/photo-1620626011761-996317b8d101?w=900&q=80",
  },
  {
    n: "03", phase: "Friday Evening · Tools", title: "Gather your tools.",
    body: "Lay everything from the bill of materials on the kitchen floor. Plug in the drill. Charge the second drill battery. If you're borrowing a wet saw, set it up on the back patio — wet saws produce a fine slurry that you don't want indoors. If your tile is straight cuts only, a $25 manual snap cutter is enough.",
    tip: "Knee pads. We're serious. The wall is short and you will be on your knees for six straight hours on Saturday.",
    img: "https://images.unsplash.com/photo-1581244277943-fe4a9c777189?w=900&q=80",
  },
  {
    n: "04", phase: "Friday Evening · Prep", title: "Empty the counter, mask the edges.",
    body: "Clear everything off the counter — the toaster, the fruit bowl, the spice rack, the mail pile. Tape canvas drop cloth across the entire counter and 2 ft of floor in front. Mask painter's tape along every edge: the underside of the upper cabinets, the seam between counter and wall, around outlets and switches. Remove outlet cover plates and tape over the outlet faces themselves. Power off the kitchen circuit at the breaker if you're nervous.",
    tip: "Mask 1/4-inch shy of the actual edge. You want the tile to land on the wall, not on tape.",
    img: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=900&q=80",
  },
  {
    n: "05", phase: "Friday Evening · Layout", title: "Find the centerline and the key tile.",
    body: "Find the center of the most-visible wall — usually the wall behind the range or sink. Drop a plumb line, mark it in pencil. Lay your first row of tiles dry, centered on that line, working outward. Note where the cuts will land at each end. If they're tiny slivers (less than 1 inch), shift the entire layout half a tile so the cuts land mid-tile and don't read as 'mistake.'",
    tip: "This is the dry-fit. Do not skip the dry-fit. Lay tiles all the way across one full row, with spacers, before any thinset comes out. Take photos.",
    img: "https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=900&q=80",
  },
  {
    n: "06", phase: "Saturday Morning · Mix", title: "Mix the thinset (and rest it).",
    body: "Read the bag. Most thinset wants water-then-powder, mixed to peanut-butter consistency, then 'slaked' — left to rest — for ten minutes before a final stir. Mix only what you can use in 30 minutes; thinset has a working time and ignoring it is the most common rookie mistake. Add water in small splashes, not glugs.",
    tip: "If your thinset starts to stiffen in the bucket, do NOT add more water — it changes the chemistry. Throw it out, mix a fresh batch.",
    img: "https://images.unsplash.com/photo-1572297870735-d68a30c0e603?w=900&q=80",
  },
  {
    n: "07", phase: "Saturday · Tiling", title: "Set the field tile, top down.",
    body: "Counterintuitive, but: start at the top, work down. This way, slumping tiles slide into a bed of fresh thinset rather than onto the just-set tile below. Spread thinset on the wall with the flat side of the trowel, then comb it with the notched side at a 45° angle. Press each tile firmly with a slight wiggle, set spacers, work in three-foot sections. Wipe excess thinset off the face immediately with a damp sponge.",
    tip: "Every fifth tile, step back six feet. The wall is the work, not the individual tile. Look for level, look for plumb, look for waves.",
    img: "https://images.unsplash.com/photo-1600566752355-35792bedcfea?w=900&q=80",
  },
  {
    n: "08", phase: "Saturday · Tiling", title: "Cut around outlets and edges.",
    body: "For straight cuts: snap cutter, score-and-snap, twice. For outlets and irregular shapes: wet saw on the patio, mark each cut with a Sharpie on the front of the tile, cut, dry-fit before setting. Aim for the outlet box to sit just proud of the tile face — the cover plate hides up to 1/8-inch of overlap.",
    tip: "Outlet boxes might be set too deep for new tile. Use box extenders — $2 each, screw into the existing box, push it forward to the new tile face.",
    img: "https://images.unsplash.com/photo-1591955506264-3f5a6834570a?w=900&q=80",
  },
  {
    n: "09", phase: "Saturday Night · Cure", title: "Let it cure overnight. Fully.",
    body: "Pull the spacers if your manufacturer recommends it, leave them in if not. Wipe the entire face with a damp sponge to remove any thinset haze. Walk away. Eat dinner you didn't cook. Watch a movie. Do not touch the tile, do not lean on the counter, do not test it with a fingernail. Thinset wants 24 hours minimum before grout. We mean it.",
    tip: "If you've got pets, close the kitchen door. A cat against a half-cured tile wall is a story you don't want to live.",
    img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=900&q=80",
  },
  {
    n: "10", phase: "Sunday Morning · Grout", title: "Mix and float the grout.",
    body: "Mix grout to thick-yogurt consistency — slightly stiffer than thinset. Slake for 10 minutes. Holding the rubber float at a 45° angle to the wall, smear grout diagonally across the joints. Force it in. Work in 3-foot sections. Once a section is filled, scrape excess off with the float held at 90°. Move on while the first section sets.",
    tip: "Do not grout caulk joints — the seam between counter and tile, between tile and cabinet, between two walls in a corner. Those get caulk, not grout. Grout cracks at flex points.",
    img: "https://images.unsplash.com/photo-1503594384566-461fe158e797?w=900&q=80",
  },
  {
    n: "11", phase: "Sunday · Polish", title: "Wipe, wait, wipe, wait, polish.",
    body: "Wait 15-20 minutes after grouting a section, then wipe with a damp (not wet) sponge in circular motions. Rinse the sponge in fresh water every wipe. The grout will haze the tile face — this is normal. Wait another 30 minutes, then polish the haze off with a dry microfiber cloth. If a stubborn haze remains, repeat with a slightly damp cloth, then re-polish dry.",
    tip: "Two buckets, always — one for clean rinse water, one for dirty. Switching to dirty water is how the haze becomes permanent.",
    img: "https://images.unsplash.com/photo-1581578017093-cd30fce4eeb7?w=900&q=80",
  },
  {
    n: "12", phase: "Sunday Afternoon · Caulk", title: "Caulk every wet seam.",
    body: "Tape both sides of every seam — counter-to-tile, cabinet-to-tile, corner-to-corner — leaving a 3/16-inch gap. Cut the caulk tube tip at a 45° angle, small opening. Lay a thin, continuous bead. Smooth with a wet fingertip in one continuous pull, no stops. Peel both pieces of tape away while the caulk is still soft. Wait 24 hours before using the kitchen sink near the new wall.",
    tip: "Match caulk color to grout, not tile. A caulk line that matches the grout disappears; a caulk line that matches the tile reads as a stripe.",
    img: "https://images.unsplash.com/photo-1560185007-cde436f6a4d0?w=900&q=80",
  }
];

const HTSteps = () => (
  <section className="ht-steps">
    <div className="ht-steps-wrap">
      <div className="ht-folio">
        <span className="left">The Manual · Twelve Steps</span>
        <span className="right">PG. 08</span>
      </div>
      <div className="ht-steps-head">
        <h2>The Manual.</h2>
        <p>Twelve steps. Read all of them before you start. Do them in order.</p>
      </div>
      <div className="ht-steps-list">
        {STEPS.map((s, i) => (
          <article key={s.n} id={`step-${i+1}`} className="ht-step">
            <div className="ht-step-meta">
              <div className="phase">{s.phase}</div>
              <div className="num"><span>§</span>{s.n}</div>
              <div className="rule" aria-hidden="true"></div>
              <div className="time">Step {i+1} of 12</div>
            </div>
            <div className="ht-step-body">
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <div className="ht-step-tip">
                <span className="lbl">Pro tip ↓</span>
                <p>{s.tip}</p>
              </div>
            </div>
            <figure className="ht-step-fig">
              <div className="fig-frame">
                <img className="fig-img" src={s.img} alt={`Step ${s.n}: ${s.title}`} loading="lazy" />
                <div className="fig-label">FIG. {String(i+1).padStart(2,'0')}</div>
                <div className="fig-corner tl" aria-hidden="true">+</div>
                <div className="fig-corner tr" aria-hidden="true">+</div>
                <div className="fig-corner bl" aria-hidden="true">+</div>
                <div className="fig-corner br" aria-hidden="true">+</div>
              </div>
              <figcaption>Fig. {String(i+1).padStart(2,'0')}. {s.title.replace(/\.$/, "")}.</figcaption>
            </figure>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const TROUBLE = [
  { p: "Thinset is sliding down the wall.",            a: "Too wet. Scoop it back into the bucket, add a small amount of dry powder, mix, slake 10 min, retry." },
  { p: "A tile won't sit flat — it sticks proud.",     a: "Pull it, scrape that section's thinset to a thinner layer, re-comb, re-set. Do this within 30 minutes; after that the thinset has set." },
  { p: "I cut a tile too short.",                      a: "Set it anyway, in a low-visibility spot. The grout fills up to 1/4-inch gracefully. Use the cut tile in the corner that lives behind the toaster." },
  { p: "Grout is hazing tile and won't come off.",     a: "It's been too long. Mix a 50/50 vinegar-water solution, scrub gently with a non-abrasive pad. Don't use vinegar on stone — only on ceramic or porcelain." },
  { p: "There's a hairline crack in a grout joint.",   a: "Normal in the first week as the wall settles. Re-grout that joint after seven days. If it cracks again, the substrate is moving — that's a separate problem." },
  { p: "I missed a spot of caulk.",                    a: "Wait until the existing caulk is fully cured (24 hours), then add a small bead with a wet finger, smoothed in one motion. It will blend." },
];

const HTTrouble = () => (
  <section className="ht-trouble">
    <div className="ht-trouble-wrap">
      <div className="ht-folio">
        <span className="left">Troubleshooting · When Things Go Sideways</span>
        <span className="right">PG. 22</span>
      </div>
      <div className="ht-trouble-head">
        <h2>Troubleshooting.</h2>
        <p>Six things that go wrong on a backsplash, and how to fix each without starting over.</p>
      </div>
      <div className="ht-trouble-grid">
        {TROUBLE.map((t, i) => (
          <div className="ht-trouble-row" key={i}>
            <div className="num">{String(i+1).padStart(2,'0')}</div>
            <div className="prob"><strong>Problem.</strong> {t.p}</div>
            <div className="ans"><strong>Fix.</strong> {t.a}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const HTNotes = () => (
  <section className="ht-notes">
    <div className="ht-notes-wrap">
      <div className="ht-folio">
        <span className="left">Reader Notes · From the Field</span>
        <span className="right">PG. 26</span>
      </div>
      <div className="ht-notes-head">
        <h2>Reader notes.</h2>
        <p>Annotations from readers who finished the project, ranked by usefulness. Submit yours after you finish.</p>
      </div>
      <div className="ht-notes-grid">
        <article className="ht-note">
          <div className="meta"><span className="who">Marta R.</span><span className="when">04.18</span><span className="where">Denver, CO</span></div>
          <p>"Borrowed the wet saw from a neighbor instead of renting. Saved $90. Don't forget to bring it back the same weekend — they always need it."</p>
        </article>
        <article className="ht-note">
          <div className="meta"><span className="who">Jay P.</span><span className="when">04.12</span><span className="where">Brooklyn, NY</span></div>
          <p>"The 'work top-down' instruction (§ 07) is the difference between a clean wall and a slumping one. Took me a few rows to get it but I am now a top-down evangelist."</p>
        </article>
        <article className="ht-note">
          <div className="meta"><span className="who">D. Okonkwo</span><span className="when">04.04</span><span className="where">Atlanta, GA</span></div>
          <p>"Painter's tape on outlet covers BEFORE removing them — saves you from wondering which screw goes where on Sunday at 5 pm."</p>
        </article>
        <article className="ht-note">
          <div className="meta"><span className="who">L. Becker</span><span className="when">03.28</span><span className="where">Madison, WI</span></div>
          <p>"Caulk colour matters more than tile colour for the final look. I went with a tone that matched the grout, not the tile, and it disappeared completely. Editor's tip on § 12 was the right call."</p>
        </article>
        <article className="ht-note">
          <div className="meta"><span className="who">S. Halloran (ed.)</span><span className="when">04.22</span><span className="where">Editor's desk</span></div>
          <p>"If your kitchen has uneven walls — and most do — float a thin skim coat of thinset across the worst dips before tiling. Adds an hour Friday night, saves you a weekend of curses."</p>
        </article>
        <article className="ht-note">
          <div className="meta"><span className="who">A. Park</span><span className="when">03.21</span><span className="where">Portland, OR</span></div>
          <p>"Did this with two kids under five in the house. The 24-hour cure window in § 09 was the hardest step, not the tiling. Hide the kitchen behind a baby gate."</p>
        </article>
      </div>
    </div>
  </section>
);

const HTSideways = () => (
  <section className="ht-sideways">
    <div className="ht-sideways-wrap">
      <div className="ht-folio">
        <span className="left">End of Manual · Where to Next</span>
        <span className="right">PG. 32</span>
      </div>
      <div className="ht-sideways-head">
        <h2>You're at the end of the manual.</h2>
        <p>There's nothing below this. Only sideways — to projects that pair with this one — and back up to the kitchen install index.</p>
      </div>

      <div className="ht-sideways-grid">
        <div className="ht-side-block">
          <span className="kicker">Sideways · Pair with this project</span>
          <ul className="ht-side-list">
            <li><a href="/en/kitchen/install/how-to-install-under-cabinet-led-strips/"><span className="t">How to install under-cabinet LED strips</span><span className="m">Install · 2 — 3 hrs</span></a></li>
            <li><a href="/en/kitchen/install/how-to-install-a-kitchen-faucet/"><span className="t">How to install a kitchen faucet</span><span className="m">Install · 90 min</span></a></li>
            <li><a href="/en/kitchen/repair/how-to-caulk-a-kitchen-sink/"><span className="t">How to caulk a kitchen sink edge</span><span className="m">Repair · 30 min</span></a></li>
            <li><a href="/en/kitchen/decorate/how-to-paint-kitchen-cabinets/"><span className="t">How to paint kitchen cabinets</span><span className="m">Decorate · weekend</span></a></li>
          </ul>
        </div>
        <div className="ht-side-block">
          <span className="kicker">Sideways · Other tile installs</span>
          <ul className="ht-side-list">
            <li><a href="/en/bathroom/install/how-to-tile-a-bathroom-backsplash/"><span className="t">How to tile a bathroom backsplash</span><span className="m">Install · weekend</span></a></li>
            <li><a href="/en/kitchen/install/how-to-lay-kitchen-floor-tile/"><span className="t">How to lay a kitchen floor tile</span><span className="m">Install · 2 days</span></a></li>
            <li><a href="/en/kitchen/repair/how-to-regrout-a-backsplash/"><span className="t">How to regrout an existing backsplash</span><span className="m">Repair · half day</span></a></li>
            <li><a href="/en/kitchen/clean/how-to-seal-natural-stone-tile/"><span className="t">How to seal natural stone tile</span><span className="m">Clean · 1 hr</span></a></li>
          </ul>
        </div>
        <div className="ht-side-block back">
          <span className="kicker">Back up · The index pages</span>
          <ul className="ht-side-list">
            <li><a href="/en/kitchen/install/"><span className="t">↑ All Kitchen Install guides</span><span className="m">78 guides</span></a></li>
            <li><a href="/en/kitchen/"><span className="t">↑ The Kitchen Edition</span><span className="m">312 guides, 6 verbs</span></a></li>
            <li><a href="/en/install/"><span className="t">↑ The Install Issue</span><span className="m">428 guides, 10 rooms</span></a></li>
            <li><a href="/"><span className="t">↑ Home — front cover</span><span className="m">Vol. III · Spring 2026</span></a></li>
          </ul>
        </div>
      </div>
    </div>
  </section>
);

const HTColophon = () => (
  <section className="ht-end">
    <div className="ht-end-wrap">
      <div className="ht-end-cred">
        <div className="line">
          <span className="k">Manual</span>
          <span className="v">No. 27 · Field Guide</span>
        </div>
        <div className="line">
          <span className="k">Filed</span>
          <span className="v">April 18, 2026</span>
        </div>
        <div className="line">
          <span className="k">Verified</span>
          <span className="v">April 22, 2026 · R. Chen, tile setter, 14 yrs</span>
        </div>
        <div className="line">
          <span className="k">Photographs</span>
          <span className="v">M. Lefebvre · 6 sites, 4 cities</span>
        </div>
        <div className="line">
          <span className="k">Set in</span>
          <span className="v">Playfair Display, DM Sans, JetBrains Mono</span>
        </div>
        <div className="line">
          <span className="k">License</span>
          <span className="v">CC BY-NC 4.0 · share, do not sell</span>
        </div>
      </div>
      <div className="ht-end-cta">
        <h3>Done with the manual? <em>Tell us how it went.</em></h3>
        <p>If you finished the project, drop a note. We add reader annotations to this page on the first of every month. Yours might be in next month's edition.</p>
        <div className="ht-end-btns">
          <a href="#" className="btn primary">Save this manual →</a>
          <a href="#" className="btn ghost">Submit a reader note</a>
        </div>
      </div>
    </div>
    <div className="ht-end-bottom">
      <span>— end of manual № 27 —</span>
    </div>
  </section>
);

window.HTMast     = HTMast;
window.HTOpener   = HTOpener;
window.HTIndex    = HTIndex;
window.HTLede     = HTLede;
window.HTBom      = HTBom;
window.HTSteps    = HTSteps;
window.HTTrouble  = HTTrouble;
window.HTNotes    = HTNotes;
window.HTSideways = HTSideways;
window.HTColophon = HTColophon;