/* /en/attic — Production Attic Room Hub */

const AtticHero = () => (
  <section className="atc-hero">
    <div className="img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=2400&q=85')" }} />
    <div className="atc-mast">
      <span className="crumb">
        <a href="/">Home</a>  ·  Attic
      </span>
      <span className="ctr">HowTo Quarterly · Vol. VII / The Attic Issue</span>
      <span className="right">№ 07 / Spring 2026</span>
    </div>
    <div className="atc-cover">
      <div>
        <div className="eyebrow">Room Guide · Attic</div>
        <h1>The cheapest upgrade <em>in the house.</em></h1>
      </div>
      <div>
        <p className="deck">
          The room above everything else — and the one that quietly pays your heating bill every winter you ignore it.
        </p>
        <div className="meta">
          <div><span className="k">Section</span><span className="v">Attic</span></div>
          <div><span className="k">Guides</span><span className="v">50 total</span></div>
          <div><span className="k">Reading time</span><span className="v">10 min</span></div>
          <div><span className="k">Updated</span><span className="v">Spring 2026</span></div>
        </div>
      </div>
    </div>
  </section>
);

const ACTIONS = [
  {
    n: "01", slug: "repair",
    name: "Repair",   em: "what's wrong.",
    lede: "Blocked soffits, damaged rafters, a leaking hatch, the vent that's been disconnected for eight years without anyone noticing.",
    bg: "https://images.unsplash.com/photo-1581578731548-c64695cc6952?w=1400&q=80",
    examples: "Soffit vents · Ridge vent · Rafter damage · Hatch seal · Bath fan duct · Moisture damage · Attic ladder",
    count: 11,
  },
  {
    n: "02", slug: "install",
    name: "Install",  em: "what's missing.",
    lede: "Insulation batts, blown-in cellulose, pull-down stairs, attic fans, baffles, whole-house fans. The biggest-return lane in the attic.",
    bg: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1400&q=80",
    examples: "Attic insulation · Pull-down stairs · Attic fan · Soffit baffles · Whole-house fan · Gable vent · Ridge vent",
    count: 14,
  },
  {
    n: "03", slug: "build",
    name: "Build",    em: "above the joists.",
    lede: "Raised storage platforms, knee walls, walkway planks. Projects that make the attic usable without wrecking the insulation below.",
    bg: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1400&q=80",
    examples: "Raised platform · Knee wall frame · Storage walkway · Access hatch frame · Knee wall door",
    count: 5,
  },
  {
    n: "04", slug: "clean",
    name: "Clean",    em: "before you insulate.",
    lede: "Vermiculite removal, pest debris, old blown-in that's past its effective life, the bath fan dust you've been meaning to address.",
    bg: "https://images.unsplash.com/photo-1556910103-1c02745aae4d?w=1400&q=80",
    examples: "Vermiculite cleanup · Rodent debris · Old blown-in · Bat guano · Fan blades · Dust accumulation",
    count: 6,
  },
  {
    n: "05", slug: "organize",
    name: "Organize", em: "the storage.",
    lede: "Raised bin systems, seasonal labeling, proper weight distribution across joists. Store more without compressing what's underneath.",
    bg: "https://images.unsplash.com/photo-1565538810643-b5bdb714032a?w=1400&q=80",
    examples: "Bin system · Raised shelves · Seasonal rotation · Joist weight map · Attic inventory · Lighting layout",
    count: 9,
  },
  {
    n: "06", slug: "decorate",
    name: "Decorate", em: "the bonus room.",
    lede: "Knee wall finishing, subfloor choices, drywall in a sloped ceiling, and the insulation and vapor barrier decisions that make a finished attic livable.",
    bg: "https://images.unsplash.com/photo-1565538810643-b5bdb714032a?w=1400&q=80",
    examples: "Knee wall drywall · Subfloor · Sloped ceiling paint · Dormer trim · Skylight styling · Bonus room flooring",
    count: 5,
  },
];

const AtticMenu = () => (
  <section className="atc-menu">
    <div className="atc-menu-wrap">
      <div className="section-folio">
        <span>The Menu · Attic, by Action</span>
        <span className="pg">PG. 02</span>
      </div>
      <div className="atc-menu-head">
        <h2>Six things to do <em>in an attic.</em></h2>
        <p className="deck">
          Every attic project lives at the intersection of a room and a verb. You're in the attic — pick a verb.
        </p>
      </div>
      <div className="atc-actions">
        {ACTIONS.map(a => (
          <a key={a.name} href={`/en/attic/${a.slug}/`} className="atc-act">
            <div className="atc-act-bg" style={{ backgroundImage: `url(${a.bg})` }} />
            <div className="num">№ {a.n} — Layer 01</div>
            <h3>{a.name} <em>{a.em}</em></h3>
            <p className="lede">{a.lede}</p>
            <p className="examples">{a.examples}</p>
            <div className="foot">
              <span><strong>{a.count}</strong> guides</span>
              <span className="arr">Browse {a.name.toLowerCase()} →</span>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const AtticEssay = () => (
  <section className="atc-essay">
    <div className="atc-essay-wrap">
      <div className="section-folio" style={{ borderColor: "rgba(201,184,158,0.35)" }}>
        <span>Editor's Note · The Attic, Annotated</span>
        <span className="pg">PG. 06</span>
      </div>
      <div className="atc-essay-grid">
        <aside className="atc-essay-side">
          <h2>The room above <em>everything.</em></h2>
          <div className="by">By the Editors · 5 min read</div>
          <div className="stat-list">
            <div className="row"><span>Avg. home R-value</span><strong>R-19</strong></div>
            <div className="row"><span>Recommended R-value</span><strong>R-49</strong></div>
            <div className="row"><span>Avg. energy savings</span><strong>15%</strong></div>
            <div className="row"><span>Payback period</span><strong>3–5 yr</strong></div>
          </div>
        </aside>
        <div className="atc-essay-body">
          <p className="dropcap">
            The attic is the most neglected room in the house — not because it's unimportant, but because it's invisible. You don't walk through it every morning. You don't eat or sleep there. You don't notice it getting worse. But the attic is where your heating and cooling dollars go to disappear: heat rises and escapes through every gap in the ceiling, and in summer the attic becomes a 140-degree heat battery that radiates into every room below it. The American Council for an Energy-Efficient Economy estimates that the attic accounts for 25–30% of a home's total heat loss in a typical cold-climate winter.
          </p>
          <p>
            Which is why the attic is, paradoxically, the best room to work on first. The math is straightforward: insulation and air sealing are the cheapest materials in the building trades, the labor is accessible to any intermediate homeowner, and the return on investment is among the highest of any home improvement project. A properly insulated and air-sealed attic in a cold climate typically pays back its cost in 3–5 years in energy savings alone — before you account for the comfort improvement of a house that holds temperature better.
          </p>
          <div className="pull">
            "The attic is the one room where a weekend of work can shave 15–25% off your utility bill permanently."
          </div>
          <p>
            The six task lanes on this page reflect the full range of attic work. <a href="/en/attic/repair/">Repair</a> is where you go when something is actively wrong — a ventilation path blocked, a rafter compromised, a moisture problem that's already started. <a href="/en/attic/install/">Install</a> is the high-return lane: insulation, a proper pull-down stair, an attic fan, baffles to protect the soffit vents. <a href="/en/attic/build/">Build</a> covers the structural projects — platforms, knee walls, walkways. <a href="/en/attic/clean/">Clean</a> covers the necessary-but-unpleasant work that must happen before any insulation goes in. <a href="/en/attic/organize/">Organize</a> covers the storage use case. And <a href="/en/attic/decorate/">Decorate</a> covers the bonus-room conversion, for the attics that have graduated beyond storage.
          </p>
          <p>
            The sequence matters. Clean before you insulate. Air-seal before you add R-value. Fix the ventilation before you close up the soffits. The guides below are written in the order you should do them — not the order you might find them on a home improvement show.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const AtticPick = () => (
  <section className="atc-pick">
    <div className="atc-pick-spread">
      <div className="atc-pick-img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1800&q=85')" }}>
        <div className="stamp">Editor's<br/>Pick<small>SPRING 2026</small></div>
      </div>
      <div className="atc-pick-text">
        <div className="eyebrow">Featured Project · Attic, Install</div>
        <h3>How to install attic insulation <em>the right way.</em></h3>
        <p>
          The most-impactful single upgrade you can make to your home — and one of the most misunderstood. Air-seal first, then baffle, then insulate. Most guides skip the first two steps. This one doesn't.
        </p>
        <div className="meta">
          <span><span className="dot"></span>Intermediate</span>
          <span><span className="dot"></span>Half day</span>
          <span><span className="dot"></span>$200–600</span>
          <span><span className="dot"></span>8 steps</span>
        </div>
        <a href="/en/attic/install/how-to-install-attic-insulation/" className="read">Read the guide  →</a>
      </div>
    </div>
  </section>
);

const LANE_SLUGS = { "Repair": "repair", "Install": "install", "Build": "build", "Clean": "clean", "Organize": "organize", "Decorate": "decorate" };
const atcLaneHref = label => `/en/attic/${LANE_SLUGS[label.split(" · ")[0]] || "install"}/`;

const AtticIndex = () => {
  const cols = [
    {
      title: "Five most-searched guides",
      count: "Top searches",
      items: [
        ["01", "How to install attic insulation",           "Install · half day"],
        ["02", "How to install a pull-down attic ladder",   "Install · 3 hr"],
        ["03", "How to install an attic fan",               "Install · 4 hr"],
        ["04", "How to add attic flooring above joists",    "Build · 1 day"],
        ["05", "How to fix attic ventilation",              "Repair · 4 hr"],
      ],
    },
    {
      title: "Most-saved by readers",
      count: "One per lane",
      items: [
        ["01", "How to repair a leaking attic hatch",       "Repair · 2 hr"],
        ["02", "How to install rafter baffles",             "Install · 3 hr"],
        ["03", "How to build a raised attic storage deck",  "Build · weekend"],
        ["04", "How to remove old blown-in insulation",     "Clean · half day"],
        ["05", "How to organize attic storage bins",        "Organize · 3 hr"],
        ["06", "How to finish attic knee walls",            "Decorate · weekend"],
      ],
    },
  ];
  return (
    <section className="atc-index">
      <div className="atc-index-wrap">
        <div className="section-folio">
          <span>The Index · Most-read attic guides</span>
          <span className="pg">PG. 14</span>
        </div>
        <div className="atc-index-head">
          <h2>What people came here <em>to do.</em></h2>
          <div className="right">As of <strong>Spring 2026</strong> · live ranking</div>
        </div>
        <div className="atc-index-grid">
          {cols.map(c => (
            <div className="atc-index-col" key={c.title}>
              <h3>{c.title} <span className="ct">— {c.count}</span></h3>
              <ul className="atc-index-list">
                {c.items.map(([n, t, m]) => (
                  <li key={n}><a href={atcLaneHref(m)}><span className="n">{n}</span><span className="t-text">{t}</span><span className="t">{m}</span></a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const AtticMistakes = () => {
  const items = [
    { h: "Compressing insulation with plywood storage",
      p: "R-38 batts compressed to half their loft deliver R-19 — half the insulation performance for the full material cost. Build a raised platform on sleepers instead. The insulation stays lofted; the storage stays safe." },
    { h: "Blocking soffit vents with insulation",
      p: "Insulation slumped into the soffit cavity kills the convective airflow that moves heat and moisture out of the attic. Rafter baffles are mandatory before any insulation goes in. They create a 1-inch clear air channel, top to bottom." },
    { h: "Insulating over non-IC-rated recessed lights",
      p: "Non-IC cans require 3 inches of clearance from insulation on all sides — a code requirement, not a suggestion. Cover them with airtight box enclosures before insulating, or replace with IC-AT rated fixtures ($25–40 each)." },
    { h: "Dumping bath fans into the attic instead of ducting out",
      p: "Every shower dumps warm, moisture-laden air straight onto the cold roof sheathing. The result is condensation, rot, and mold — usually invisible for 2–3 years. Extend every bath fan duct through the attic to a roof cap or gable vent. No exceptions." },
    { h: "Walking on drywall ceiling between joists",
      p: "The ceiling drywall will not hold your weight. One misplaced step puts a foot-shaped hole in the living room ceiling — a $300–500 repair. Carry knee boards (2×8 planks) and step only on joists." },
    { h: "Skipping the air-seal before insulating",
      p: "Insulation slows heat movement through a material. Air sealing stops air — and the heat it carries — from bypassing the insulation entirely. A well-insulated but leaky attic is like a thick sweater with the zipper open. Air-seal the top plates first, every time." },
  ];
  return (
    <section className="atc-mistakes">
      <div className="atc-mistakes-wrap">
        <div className="section-folio" style={{ marginBottom: 0 }}>
          <span>Field Notes · Attic Mistakes We've Seen</span>
          <span className="pg">PG. 22</span>
        </div>
        <div className="atc-mistakes-head">
          <h2>Six attic mistakes <em>worth avoiding.</em></h2>
          <div className="num">№ 01 — 06</div>
        </div>
        <div className="atc-mistakes-grid">
          {items.map((m, i) => (
            <div className="atc-mistake" key={i}>
              <div className="n">{String(i + 1).padStart(2, "0")}</div>
              <div>
                <h4>{m.h}</h4>
                <p>{m.p}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const AtticFilters = () => (
  <section className="atc-filters">
    <div className="atc-filters-grid">
      <div className="atc-filter">
        <span className="label">Sort · By Skill</span>
        <h3>What have you done before?</h3>
        <div className="atc-pills">
          <a href="/en/attic/" className="atc-pill">Beginner <span className="ct">18</span></a>
          <a href="/en/attic/" className="atc-pill">Intermediate <span className="ct">26</span></a>
          <a href="/en/attic/" className="atc-pill">Advanced <span className="ct">6</span></a>
        </div>
      </div>
      <div className="atc-filter">
        <span className="label">Sort · By Time</span>
        <h3>How much weekend do you have?</h3>
        <div className="atc-pills">
          <a href="/en/attic/" className="atc-pill">Under 2 hours <span className="ct">14</span></a>
          <a href="/en/attic/" className="atc-pill">Half a day <span className="ct">18</span></a>
          <a href="/en/attic/" className="atc-pill">A full day <span className="ct">12</span></a>
          <a href="/en/attic/" className="atc-pill">Multi-day <span className="ct">6</span></a>
        </div>
      </div>
      <div className="atc-filter">
        <span className="label">Sort · By Budget</span>
        <h3>Spending what, exactly?</h3>
        <div className="atc-pills">
          <a href="/en/attic/" className="atc-pill">$0 — $50 <span className="ct">16</span></a>
          <a href="/en/attic/" className="atc-pill">$50 — $300 <span className="ct">22</span></a>
          <a href="/en/attic/" className="atc-pill">$300 — $1k <span className="ct">10</span></a>
          <a href="/en/attic/" className="atc-pill">$1k+ <span className="ct">2</span></a>
        </div>
      </div>
    </div>
  </section>
);

const AtticAnatomy = () => {
  const parts = [
    { n: "01", h: "Insulation", em: "& air barrier.",
      d: "Batts, blown-in, or spray foam — and the air-sealing layer that goes in first.",
      links: [["Install insulation", "install"], ["Air-seal top plates", "install"], ["Add R-value", "install"], ["Old insulation", "clean"], ["Batt vs blown-in", "install"]] },
    { n: "02", h: "Soffit vents", em: "& baffles.",
      d: "The intake side of the passive ventilation loop. Clear soffits are non-negotiable.",
      links: [["Install baffles", "install"], ["Clear blocked soffit", "repair"], ["Check airflow", "repair"], ["Vent sizing", "repair"], ["Baffle types", "install"]] },
    { n: "03", h: "Ridge vent", em: "& exhaust.",
      d: "Where hot air exits. Ridge vent, gable vent, or attic fan — the exhaust side.",
      links: [["Fix ridge vent", "repair"], ["Install gable vent", "install"], ["Attic fan install", "install"], ["Ventilation math", "repair"], ["Ridge vent types", "install"]] },
    { n: "04", h: "Pull-down stairs", em: "& hatch.",
      d: "The entry point. Also the single biggest thermal hole in most attic ceilings.",
      links: [["Install pull-down ladder", "install"], ["Insulate hatch", "install"], ["Hatch seal fix", "repair"], ["Hatch cover", "install"], ["Ladder wobble fix", "repair"]] },
    { n: "05", h: "Rafters", em: "& roof deck.",
      d: "The structural bones. Where to look for water damage and how to address it.",
      links: [["Rafter repair", "repair"], ["Roof deck moisture", "repair"], ["Sister a rafter", "repair"], ["Ice dam damage", "repair"], ["Sheathing inspect", "repair"]] },
    { n: "06", h: "Floor joists", em: "& subfloor.",
      d: "Load-bearing members and the platforms that safely turn raw joists into storage.",
      links: [["Raised platform", "build"], ["Storage deck", "build"], ["Joist load check", "build"], ["Subfloor install", "build"], ["Finished floor", "decorate"]] },
    { n: "07", h: "Knee walls", em: "& storage.",
      d: "The vertical walls at the sides of cape-style attics. Storage behind, living space in front.",
      links: [["Frame knee wall", "build"], ["Insulate knee wall", "install"], ["Knee wall door", "build"], ["Knee wall drywall", "decorate"], ["Behind-knee storage", "organize"]] },
    { n: "08", h: "Bath fan ducts", em: "& exhausts.",
      d: "The ductwork that exits through the attic. Must terminate outside. No exceptions.",
      links: [["Extend bath fan duct", "repair"], ["Duct insulation", "install"], ["Roof cap install", "install"], ["Duct condition check", "repair"], ["Gable termination", "install"]] },
  ];
  return (
    <section className="atc-anatomy">
      <div className="atc-anatomy-wrap">
        <div className="section-folio">
          <span>The Diagram · Attic, By the Part</span>
          <span className="pg">PG. 28</span>
        </div>
        <div className="atc-anatomy-head">
          <h2>Eight parts of an attic, <em>and the guides that fix them.</em></h2>
          <p className="deck">If you came here with a problem in a specific part of the attic — start with the part. We'll route you to the verb from there.</p>
        </div>
        <div className="atc-anatomy-grid">
          {parts.map(p => (
            <div className="atc-anatomy-cell" key={p.n}>
              <div className="n">№ {p.n}</div>
              <h4>{p.h} <em>{p.em}</em></h4>
              <p>{p.d}</p>
              <div className="links">
                {p.links.map(([label, lane], i) => (
                  <React.Fragment key={label}>
                    <a href={`/en/attic/${lane}/`}>{label}</a>
                    {i < p.links.length - 1 && <span>·</span>}
                  </React.Fragment>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const AtticFaq = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: "What R-value does my attic actually need?",
      a: "It depends on your climate zone. The US Department of Energy divides the country into eight zones. Zone 1–2 (Deep South, Hawaii) recommends R-30 to R-49. Zone 3–4 (most of the South and mid-Atlantic) recommends R-38 to R-60. Zones 5–8 (most of the North, mountains, Alaska) recommend R-49 to R-60. Most homes built before 1990 have R-11 to R-19. That's a gap you can measure in utility dollars every month." },
    { q: "Blown-in or batts — which insulation is better for an attic?",
      a: "Both work. Blown-in cellulose or fiberglass is generally easier to install in a full attic floor because it fills irregularly-spaced joists and works around obstructions without cutting. Batts are easier for small patches, knee wall cavities, and situations where you need to work in sections. If you're adding to existing insulation that's already above the top of the joists, blown-in is almost always the right choice — you can add depth without disturbing anything." },
    { q: "Do I need a permit to add attic insulation?",
      a: "For adding insulation to an existing attic floor — almost never. For air-sealing alone — almost never. For converting the attic to conditioned living space — almost always. The permit threshold is usually triggered by changes to structure (framing, rafters), mechanical systems (adding HVAC or a new electrical circuit), or creating a habitable room. If you're just adding R-value to a raw attic floor, you can almost certainly proceed without a permit — but confirm with your local building department's website, which almost all have a one-pager on this." },
    { q: "How do I know if I have vermiculite insulation and what to do about it?",
      a: "Vermiculite looks like small silver-gray pebbles, roughly the size of pencil erasers. It was commonly installed from the 1940s through the early 1990s. Much of the vermiculite sold in the US during this period came from a mine in Libby, Montana that was contaminated with asbestos. If you see gray pebbles in your attic, do not disturb them. Leave the attic, and arrange for certified asbestos testing before any work in that space. The EPA recommends treating all vermiculite as if it contains asbestos until proven otherwise." },
    { q: "How do I insulate an attic hatch without losing access?",
      a: "The standard solution is an insulation tent or rigid foam box that sits on top of the hatch from inside the attic. These range from DIY (a box built from 2-inch polyiso foam panels, foil-taped at the seams) to commercial covers ($40–80 at the building supply). The key is creating an airtight seal where the cover sits on the drywall or framing around the hatch — weatherstripping around the perimeter is the most common finishing detail. A well-insulated hatch cover can reduce attic heat loss by 20–30% on its own." },
    { q: "Can I do attic insulation myself or should I hire a contractor?",
      a: "For a standard attic floor insulation job — adding batts or blown-in over existing insulation — this is an intermediate DIY project. The main considerations are safety (respirator, knee boards, proper footwear) and sequencing (air-seal first, baffles second, insulation third). Where hiring out makes sense: large attics over 1,500 sq ft where blown-in requires significant machinery logistics; attics with complex knee wall configurations; any situation where the existing insulation is contaminated or requires professional removal first." },
  ];
  return (
    <section className="atc-faq">
      <div className="section-folio">
        <span>Reader Questions · Attic, Answered</span>
        <span className="pg">PG. 36</span>
      </div>
      <div className="atc-faq-head">
        <span className="label">FAQ · The Most-Asked</span>
        <h2>What people ask <em>before they attic.</em></h2>
      </div>
      <div className="atc-faq-list">
        {faqs.map((f, i) => (
          <div key={i} className={`atc-faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="atc-faq-q">
              <span>{f.q}</span>
              <span className="toggle">+</span>
            </div>
            <div className="atc-faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

const SISTERS = [
  { name: "Kitchen",     slug: "kitchen",     ct: "312 guides", img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80" },
  { name: "Basement",    slug: "basement",    ct: "guides",     img: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&q=80" },
  { name: "Garage",      slug: "garage",      ct: "133 guides", img: "https://images.unsplash.com/photo-1486718448742-163732cd1544?w=1200&q=80" },
  { name: "Exterior",    slug: "exterior",    ct: "guides",     img: "https://images.unsplash.com/photo-1570129477492-45c003edd2be?w=1200&q=80" },
  { name: "Bathroom",    slug: "bathroom",    ct: "284 guides", img: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1200&q=80" },
];

const AtticSisters = () => (
  <section className="atc-sisters">
    <div className="atc-sisters-wrap">
      <div className="atc-sisters-head">
        <h2>Other rooms <em>worth a Saturday.</em></h2>
        <a href="/en/" className="view-all">All rooms  →</a>
      </div>
      <div className="atc-sisters-grid">
        {SISTERS.map(s => (
          <a key={s.name} href={`/en/${s.slug}/`} className="atc-sister">
            <div className="img" style={{ backgroundImage: `url(${s.img})` }} />
            <div className="meta">
              <div className="nm">{s.name}</div>
              <div className="ct">{s.ct}</div>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const AtticColophon = () => (
  <section className="atc-colophon">
    <h2>Found what you're <em>fixing?</em></h2>
    <p>Every attic guide on HowTo is written by someone who did the project in their own home — in the heat of August and the cold of January. Pick a verb and start exploring.</p>
    <a href="#atc-menu" className="go">Browse attic projects  →</a>
  </section>
);

window.AtticHero      = AtticHero;
window.AtticMenu      = AtticMenu;
window.AtticEssay     = AtticEssay;
window.AtticPick      = AtticPick;
window.AtticIndex     = AtticIndex;
window.AtticMistakes  = AtticMistakes;
window.AtticFilters   = AtticFilters;
window.AtticAnatomy   = AtticAnatomy;
window.AtticFaq       = AtticFaq;
window.AtticSisters   = AtticSisters;
window.AtticColophon  = AtticColophon;