<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Briefing Room — mockup</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Archivo+Expanded:wght@700;800&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
  :root{
    --paper:#E7E3D6;        /* warm document ground */
    --paper-2:#DEDACB;      /* slightly deeper panel */
    --ink:#191613;          /* near-black warm */
    --ink-soft:#4F4C44;     /* slate secondary */
    --brass:#B0822F;        /* file-tab amber */
    --brass-deep:#8C6520;
    --stamp:#8E3B2E;        /* oxblood stamp */
    --line:#1916131a;       /* hairline */
    --line-strong:#19161333;
    --reveal:#191613;       /* redaction bar */
    --maxw:1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:"Newsreader",Georgia,serif;
    font-size:18px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
    background-image:
      radial-gradient(var(--line) 0.5px, transparent 0.5px);
    background-size:22px 22px;
  }
  a{color:inherit;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
  .mono{font-family:"IBM Plex Mono",monospace;}
  .grotesk{font-family:"Archivo",sans-serif;}

  /* ---- classification bar ---- */
  .classbar{
    background:var(--ink);color:var(--paper);
    font-family:"IBM Plex Mono",monospace;font-size:11px;
    letter-spacing:.18em;text-transform:uppercase;
  }
  .classbar .wrap{display:flex;justify-content:space-between;align-items:center;
    gap:16px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap;}
  .classbar .dots{color:var(--brass);}
  .classbar a{text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:1px;}

  /* ---- masthead ---- */
  header.mast{border-bottom:2px solid var(--ink);}
  .mast .wrap{padding-top:30px;padding-bottom:18px;text-align:center;}
  .kicker{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.55em;
    text-transform:uppercase;color:var(--brass-deep);margin:0 0 10px;padding-left:.55em;}
  .logo{
    font-family:"Archivo Expanded","Archivo",sans-serif;font-weight:800;
    font-size:clamp(32px,6.6vw,80px);line-height:.92;letter-spacing:.01em;
    margin:0;cursor:pointer;text-transform:uppercase;
  }
  .logo .press{color:var(--brass);}
  .tagline{
    font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.32em;
    text-transform:uppercase;color:var(--ink-soft);margin-top:14px;
  }

  /* ---- nav ---- */
  nav.sections{border-bottom:1px solid var(--line-strong);
    position:sticky;top:0;z-index:40;background:var(--paper);
    background-image:radial-gradient(var(--line) 0.5px,transparent 0.5px);
    background-size:22px 22px;}
  nav.sections .wrap{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;
    padding-top:0;padding-bottom:0;}
  .navlink{
    font-family:"Archivo",sans-serif;font-weight:700;font-size:12.5px;
    letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
    background:none;border:0;cursor:pointer;
    padding:15px 16px;border-bottom:3px solid transparent;
    transition:color .15s,border-color .15s;
  }
  .navlink:hover{color:var(--brass-deep);}
  .navlink.active{border-bottom-color:var(--brass);}
  .navlink:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}

  /* ---- view switching ---- */
  .view{display:none;}
  .view.show{display:block;animation:fade .4s ease;}
  @keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

  /* ---- eyebrow ---- */
  .eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11.5px;
    letter-spacing:.24em;text-transform:uppercase;color:var(--brass-deep);
    display:flex;align-items:center;gap:10px;margin:0 0 18px;}
  .eyebrow::before{content:"";width:26px;height:2px;background:var(--brass);}

  /* ---- HERO ---- */
  .hero{padding:54px 0 46px;border-bottom:1px solid var(--line-strong);}
  .hero .wrap{display:grid;grid-template-columns:1.55fr 1fr;gap:54px;align-items:start;}
  .hero h1{
    font-family:"Newsreader",serif;font-weight:600;
    font-size:clamp(40px,6.2vw,76px);line-height:1.02;letter-spacing:-.015em;
    margin:0 0 22px;
  }
  /* redaction reveal */
  .redact{position:relative;display:inline;white-space:nowrap;}
  .redact .bar{
    position:absolute;inset:0.06em -0.12em;background:var(--reveal);
    transform-origin:left center;transition:transform .7s cubic-bezier(.7,0,.2,1);
    z-index:2;
  }
  .declassified .redact .bar{transform:scaleX(0);}
  .hero .dek{font-size:20px;line-height:1.55;color:var(--ink);margin:0 0 26px;max-width:42ch;}
  .byline{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;
    color:var(--ink-soft);text-transform:uppercase;}
  .byline b{color:var(--brass-deep);font-weight:600;}

  .hero-aside{border-left:2px solid var(--ink);padding-left:26px;}
  .hero-aside .label{font-family:"IBM Plex Mono",monospace;font-size:11px;
    letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
    padding-bottom:10px;margin-bottom:16px;border-bottom:1px solid var(--line-strong);}
  .dispatch{padding:15px 0;border-bottom:1px solid var(--line);}
  .dispatch:last-child{border-bottom:0;}
  .dispatch .stamp{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
    letter-spacing:.16em;color:var(--brass-deep);text-transform:uppercase;display:block;margin-bottom:5px;}
  .dispatch p{margin:0;font-size:16.5px;line-height:1.4;font-weight:500;}
  .dispatch:hover p{color:var(--brass-deep);cursor:pointer;}

  /* ---- generic section ---- */
  section.block{padding:62px 0;border-bottom:1px solid var(--line-strong);}
  .block.dark{background:var(--ink);color:var(--paper);background-image:none;}
  .block.dark .eyebrow{color:var(--brass);}
  .block.dark .eyebrow::before{background:var(--brass);}
  .sec-head{display:flex;justify-content:space-between;align-items:flex-end;
    gap:20px;margin-bottom:34px;flex-wrap:wrap;}
  .sec-head h2{font-family:"Archivo",sans-serif;font-weight:800;
    font-size:clamp(26px,3.4vw,40px);letter-spacing:-.01em;margin:0;text-transform:uppercase;}
  .sec-head .note{font-family:"IBM Plex Mono",monospace;font-size:12px;
    color:var(--ink-soft);letter-spacing:.04em;max-width:34ch;text-align:right;}
  .dark .sec-head .note{color:#cfc9b8;}

  /* ---- THE VERDICT review cards ---- */
  .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .rev{background:var(--paper);border:1px solid var(--line-strong);
    padding:26px 24px 24px;position:relative;overflow:hidden;}
  .dark .rev{background:#221e1a;border-color:#3a342c;}
  .rev .cat{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--brass-deep);}
  .dark .rev .cat{color:var(--brass);}
  .rev h3{font-family:"Newsreader",serif;font-weight:600;font-size:23px;
    line-height:1.15;margin:14px 0 12px;}
  .rev p{font-size:15.5px;line-height:1.5;color:var(--ink-soft);margin:0 0 56px;}
  .dark .rev p{color:#c9c3b4;}
  .rev .score{position:absolute;right:18px;bottom:16px;
    font-family:"IBM Plex Mono",monospace;font-weight:600;}
  .rev .score .num{font-size:30px;color:var(--ink);}
  .dark .rev .score .num{color:var(--paper);}
  .rev .score .out{font-size:13px;color:var(--ink-soft);}
  /* the signature stamp */
  .vstamp{position:absolute;left:20px;bottom:14px;
    font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:10px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--stamp);
    border:1.5px solid var(--stamp);border-radius:3px;padding:5px 8px;
    transform:rotate(-7deg);opacity:.92;line-height:1.2;text-align:center;}
  .vstamp small{display:block;font-size:8px;letter-spacing:.1em;opacity:.8;}

  /* ---- THE FILES data ---- */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    border:1px solid #3a342c;}
  .stat{padding:30px 28px;border-right:1px solid #3a342c;}
  .stat:last-child{border-right:0;}
  .stat .fig{font-family:"Archivo",sans-serif;font-weight:800;
    font-size:clamp(40px,5vw,60px);line-height:1;color:var(--brass);}
  .stat .desc{font-size:16px;line-height:1.4;margin-top:14px;color:#d8d2c2;max-width:30ch;}
  .stat .src{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
    letter-spacing:.12em;text-transform:uppercase;color:#8e887a;margin-top:12px;}

  /* ---- newsletter ---- */
  .signup{padding:72px 0;text-align:center;}
  .signup h2{font-family:"Archivo",sans-serif;font-weight:800;
    font-size:clamp(30px,4.6vw,52px);text-transform:uppercase;letter-spacing:-.01em;margin:0 0 14px;}
  .signup p{font-size:19px;color:var(--ink-soft);max-width:46ch;margin:0 auto 30px;}
  .form{display:flex;gap:0;max-width:480px;margin:0 auto;border:2px solid var(--ink);}
  .form input{flex:1;border:0;background:transparent;padding:16px 18px;
    font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--ink);min-width:0;}
  .form input:focus{outline:none;background:#0000000a;}
  .form button{border:0;background:var(--ink);color:var(--paper);
    font-family:"Archivo",sans-serif;font-weight:700;font-size:13px;letter-spacing:.12em;
    text-transform:uppercase;padding:0 24px;cursor:pointer;transition:background .15s;}
  .form button:hover{background:var(--brass-deep);}
  .confirm{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--brass-deep);
    margin-top:18px;min-height:18px;letter-spacing:.05em;}

  /* ---- footer ---- */
  footer{background:var(--ink);color:var(--paper);background-image:none;padding:48px 0 36px;}
  footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start;}
  footer .fl{font-family:"Archivo Expanded","Archivo",sans-serif;font-weight:800;font-size:28px;letter-spacing:.02em;}
  footer .fl .press{color:var(--brass);}
  footer .cols{display:flex;gap:48px;flex-wrap:wrap;}
  footer .col h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--brass);margin:0 0 12px;}
  footer .col a{display:block;font-family:"Archivo",sans-serif;font-size:14px;font-weight:500;
    color:#d8d2c2;text-decoration:none;margin-bottom:8px;}
  footer .col a:hover{color:var(--paper);}
  .creed{border-top:1px solid #3a342c;margin-top:36px;padding-top:20px;
    font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.04em;color:#9a9486;
    display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}

  /* ================= ABOUT VIEW ================= */
  .about-hero{padding:60px 0 40px;border-bottom:1px solid var(--line-strong);}
  .about-hero h1{font-family:"Newsreader",serif;font-weight:600;
    font-size:clamp(36px,5.4vw,64px);line-height:1.05;letter-spacing:-.015em;margin:0 0 22px;max-width:18ch;}
  .about-hero .lead{font-size:21px;line-height:1.55;max-width:54ch;color:var(--ink);}
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;padding:60px 0;
    border-bottom:1px solid var(--line-strong);}
  .about-grid h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:24px;
    text-transform:uppercase;letter-spacing:-.005em;margin:0 0 16px;}
  .about-grid p{font-size:17px;line-height:1.62;color:var(--ink);margin:0 0 16px;}
  .about-grid p:last-child{margin-bottom:0;}

  /* sections legend */
  .legend{padding:60px 0;border-bottom:1px solid var(--line-strong);}
  .legend .row{display:grid;grid-template-columns:200px 1fr;gap:30px;
    padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline;}
  .legend .row:last-child{border-bottom:0;}
  .legend .name{font-family:"Archivo",sans-serif;font-weight:800;font-size:20px;text-transform:uppercase;}
  .legend .name span{display:block;font-family:"IBM Plex Mono",monospace;font-weight:400;
    font-size:11px;letter-spacing:.16em;color:var(--brass-deep);margin-top:4px;text-transform:uppercase;}
  .legend .what{font-size:16.5px;line-height:1.55;color:var(--ink-soft);}

  /* methodology steps */
  .method{padding:60px 0;border-bottom:1px solid var(--line-strong);}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:30px;}
  .step{border-top:2px solid var(--ink);padding-top:16px;}
  .step .n{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;
    color:var(--brass-deep);}
  .step h4{font-family:"Archivo",sans-serif;font-weight:700;font-size:17px;
    text-transform:uppercase;margin:8px 0 8px;}
  .step p{font-size:15px;line-height:1.5;color:var(--ink-soft);margin:0;}

  .ethics{padding:56px 0;background:var(--ink);color:var(--paper);background-image:none;}
  .ethics .wrap{max-width:760px;}
  .ethics .eyebrow{color:var(--brass);}
  .ethics .eyebrow::before{background:var(--brass);}
  .ethics p{font-size:19px;line-height:1.6;margin:0 0 18px;}
  .ethics p:last-child{margin-bottom:0;}
  .ethics b{color:var(--brass);font-weight:600;}

  /* ---- responsive ---- */
  @media(max-width:880px){
    .hero .wrap{grid-template-columns:1fr;gap:40px;}
    .hero-aside{border-left:0;padding-left:0;border-top:2px solid var(--ink);padding-top:24px;}
    .reviews{grid-template-columns:1fr;}
    .stats{grid-template-columns:1fr;}
    .stat{border-right:0;border-bottom:1px solid #3a342c;}
    .stat:last-child{border-bottom:0;}
    .about-grid{grid-template-columns:1fr;gap:36px;}
    .steps{grid-template-columns:1fr 1fr;}
    .legend .row{grid-template-columns:1fr;gap:8px;}
    .redact{white-space:normal;}
  }
  @media(max-width:520px){
    .steps{grid-template-columns:1fr;}
    .classbar .wrap{font-size:10px;}
  }
  @media(prefers-reduced-motion:reduce){
    .declassified .redact .bar{transition:none;}
    .view.show{animation:none;}
    html{scroll-behavior:auto;}
  }
</style>
</head>
<body>

<!-- classification bar -->
<div class="classbar">
  <div class="wrap">
    <span>Unclassified <span class="dots">//</span> for public release</span>
    <span>briefingroom.info</span>
    <span><a href="#signup" onclick="go('home')">Subscribe</a></span>
  </div>
</div>

<!-- masthead -->
<header class="mast">
  <div class="wrap">
    <div class="kicker">The</div>
    <h1 class="logo" onclick="go('home')">Briefing Room</h1>
    <div class="tagline">Investigations · Intelligence · Verdicts — on men's underwear</div>
  </div>
</header>

<!-- nav -->
<nav class="sections">
  <div class="wrap">
    <button class="navlink active" data-nav="home" onclick="go('home')">The Brief</button>
    <button class="navlink" data-nav="home" onclick="go('home')">The Debrief</button>
    <button class="navlink" data-nav="home" onclick="go('home')">The Verdict</button>
    <button class="navlink" data-nav="home" onclick="go('home')">Standard Issue</button>
    <button class="navlink" data-nav="home" onclick="go('home')">The Files</button>
    <button class="navlink" data-nav="about" onclick="go('about')">About</button>
  </div>
</nav>

<!-- =================== HOME =================== -->
<main id="home" class="view show">

  <!-- HERO -->
  <section class="hero" id="hero">
    <div class="wrap">
      <div>
        <p class="eyebrow">The Debrief / Investigation</p>
        <h1>The briefs America <span class="redact">won't sell you<span class="bar"></span></span></h1>
        <p class="dek">Nike, Adidas, Under Armour and Puma all stock brief-cut underwear abroad. On their U.S. storefronts, the category has quietly vanished. We tracked where it went — and how to get it anyway.</p>
        <p class="byline">By <b>The Desk</b> · File №014 · 16 Jun 2026 · 11 min read</p>
      </div>
      <aside class="hero-aside">
        <div class="label">The Brief — latest dispatches</div>
        <div class="dispatch">
          <span class="stamp">Industry · 14 Jun</span>
          <p>Gildan closes its Hanes acquisition. The world's two largest underwear empires are now under one roof.</p>
        </div>
        <div class="dispatch">
          <span class="stamp">Culture · 11 Jun</span>
          <p>The sunga, explained: how Brazil turned the brief into a national uniform.</p>
        </div>
        <div class="dispatch">
          <span class="stamp">Restock · 09 Jun</span>
          <p>Watch list: the discontinued cotton 3-pack readers keep asking about is back — for now.</p>
        </div>
      </aside>
    </div>
  </section>

  <!-- THE VERDICT -->
  <section class="block">
    <div class="wrap">
      <div class="sec-head">
        <h2>The Verdict</h2>
        <p class="note">We buy every pair ourselves. Scored on fit, fabric, support, durability and value.</p>
      </div>
      <div class="reviews">
        <article class="rev">
          <span class="cat">Everyday / Cotton</span>
          <h3>The All-Day Cotton Brief, 3-Pack</h3>
          <p>Holds its shape through a month of washes. Waistband is the quiet star.</p>
          <div class="vstamp">Field-Tested<small>28-day wear</small></div>
          <div class="score"><span class="num">8.7</span><span class="out">/10</span></div>
        </article>
        <article class="rev">
          <span class="cat">Performance / Trunk</span>
          <h3>The Sweat-Test Trunk</h3>
          <p>Wicks fast, rides up slow. Earns its place in a gym bag, not a price tag.</p>
          <div class="vstamp">Field-Tested<small>gym cycle</small></div>
          <div class="score"><span class="num">7.9</span><span class="out">/10</span></div>
        </article>
        <article class="rev">
          <span class="cat">Premium / Modal</span>
          <h3>The Splurge Modal Brief</h3>
          <p>Feels extraordinary on day one. The question is week six — and it mostly survives.</p>
          <div class="vstamp">Field-Tested<small>42-day wear</small></div>
          <div class="score"><span class="num">9.1</span><span class="out">/10</span></div>
        </article>
      </div>
    </div>
  </section>

  <!-- THE FILES (data) -->
  <section class="block dark">
    <div class="wrap">
      <div class="sec-head">
        <h2>The Files</h2>
        <p class="note">The numbers behind the market — sourced, and honest about what isn't knowable.</p>
      </div>
      <div class="stats">
        <div class="stat">
          <div class="fig">7.5%</div>
          <div class="desc">Hanes' share of the global men's underwear market — the single largest.</div>
          <div class="src">Source · Euromonitor</div>
        </div>
        <div class="stat">
          <div class="fig">36%</div>
          <div class="desc">Hanes' share in North America alone — more than its next two rivals combined.</div>
          <div class="src">Source · Euromonitor</div>
        </div>
        <div class="stat">
          <div class="fig">2 of 5</div>
          <div class="desc">Top global players that merged in December 2025, reshaping any ranking.</div>
          <div class="src">Source · Company filings</div>
        </div>
      </div>
    </div>
  </section>

  <!-- newsletter -->
  <section class="signup" id="signup">
    <div class="wrap">
      <h2>Get debriefed.</h2>
      <p>One dispatch a week: a verdict worth knowing, an investigation worth your time, and what's restocking before it sells out.</p>
      <div class="form">
        <input type="email" id="email" placeholder="you@email.com" aria-label="Email address">
        <button onclick="subscribe()">Request access</button>
      </div>
      <div class="confirm" id="confirm" role="status"></div>
    </div>
  </section>

  <footer>
    <div class="wrap">
      <div class="fl">The Briefing Room</div>
      <div class="cols">
        <div class="col">
          <h4>Sections</h4>
          <a href="#" onclick="go('home');return false;">The Brief</a>
          <a href="#" onclick="go('home');return false;">The Debrief</a>
          <a href="#" onclick="go('home');return false;">The Verdict</a>
          <a href="#" onclick="go('home');return false;">Standard Issue</a>
          <a href="#" onclick="go('home');return false;">The Files</a>
        </div>
        <div class="col">
          <h4>The File</h4>
          <a href="#" onclick="go('about');return false;">About</a>
          <a href="#" onclick="go('about');return false;">How we test</a>
          <a href="#" onclick="go('about');return false;">Independence</a>
          <a href="#" onclick="go('home');return false;">Contact</a>
        </div>
      </div>
    </div>
    <div class="wrap creed">
      <span>Independent. Reader-funded. We buy what we test.</span>
      <span>© 2026 The Briefing Room · briefingroom.info</span>
    </div>
  </footer>
</main>

<!-- =================== ABOUT =================== -->
<div id="about" class="view">

  <section class="about-hero">
    <div class="wrap">
      <p class="eyebrow">About the file</p>
      <h1>Underwear is the one thing everyone wears and no one investigates.</h1>
      <p class="lead">The Briefing Room is a publication, not a storefront. We report on the men's underwear industry the way other people report on cars or coffee — with verdicts you can trust because we paid for the product, and analysis you can cite because we show our sources.</p>
    </div>
  </section>

  <section class="about-grid">
    <div>
      <h3>Why this exists</h3>
      <p>Most underwear "reviews" online are affiliate links wearing a blog. Scores appear without anyone having worn the thing; "best of" lists rank whatever pays the most. Meanwhile the actual story — who makes your underwear, why a whole category can vanish from a brand's U.S. site, how a Brazilian swim brief became a cultural default — goes unwritten.</p>
      <p>We thought that gap was worth a publication. So we built one.</p>
    </div>
    <div>
      <h3>What we cover</h3>
      <p>Two things, deliberately kept separate. The <b>reporting</b>: market shifts, brand decisions, manufacturing, and the cultural history of what men wear underneath. And the <b>reviews</b>: long-haul wear tests of the products you'd actually consider buying, scored on the things that matter after the first wash.</p>
      <p>If a piece is selling you something, you'll know. If it's reporting, it stands on its sources.</p>
    </div>
  </section>

  <section class="legend">
    <div class="wrap">
      <p class="eyebrow">How the file is organized</p>
      <div class="row">
        <div class="name">The Brief <span>short-form</span></div>
        <div class="what">News, drops, restocks and quick dispatches. What changed this week, in a paragraph.</div>
      </div>
      <div class="row">
        <div class="name">The Debrief <span>long-form</span></div>
        <div class="what">The investigations and deep-dives — industry analysis, brand reporting, and the cultural pieces. The flagship.</div>
      </div>
      <div class="row">
        <div class="name">The Verdict <span>reviews</span></div>
        <div class="what">Wear-tested product reviews with a clear score. We keep what we buy, so we tell you what holds up.</div>
      </div>
      <div class="row">
        <div class="name">Standard Issue <span>guides</span></div>
        <div class="what">Buyer's guides and the essentials — the best brief for heat, for the gym, for the price. Where to start.</div>
      </div>
      <div class="row">
        <div class="name">The Files <span>reference</span></div>
        <div class="what">Brand profiles, market data, and fabric explainers. The sourced reference layer behind everything else.</div>
      </div>
    </div>
  </section>

  <section class="method">
    <div class="wrap">
      <p class="eyebrow">How we test</p>
      <div class="sec-head"><h2 style="font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(26px,3.4vw,40px);text-transform:uppercase;margin:0;">A verdict takes weeks, not minutes</h2></div>
      <div class="steps">
        <div class="step"><div class="n">01 / Acquire</div><h4>We buy it</h4><p>Every pair is bought at retail, anonymously. No samples, no seeding, no strings.</p></div>
        <div class="step"><div class="n">02 / Wear</div><h4>Weeks, not minutes</h4><p>A full rotation of real wear — work, sweat, sleep — over a month or more.</p></div>
        <div class="step"><div class="n">03 / Wash</div><h4>The wash test</h4><p>Repeated laundering is where cheap underwear dies. We count the cycles.</p></div>
        <div class="step"><div class="n">04 / Score</div><h4>The verdict</h4><p>Fit, fabric, support, durability and value — one number, fully explained.</p></div>
      </div>
    </div>
  </section>

  <section class="ethics">
    <div class="wrap">
      <p class="eyebrow">Independence</p>
      <p>The Briefing Room is <b>reader-funded</b>. Some links earn a commission, and we mark them plainly — but a commission never buys a score, a placement, or a kind word. <b>We buy what we test.</b></p>
      <p>When we get something wrong, we correct it in the open and date the change. The whole point of a briefing is that it's straight with you.</p>
    </div>
  </section>

  <footer>
    <div class="wrap">
      <div class="fl">The Briefing Room</div>
      <div class="cols">
        <div class="col">
          <h4>Sections</h4>
          <a href="#" onclick="go('home');return false;">The Brief</a>
          <a href="#" onclick="go('home');return false;">The Debrief</a>
          <a href="#" onclick="go('home');return false;">The Verdict</a>
          <a href="#" onclick="go('home');return false;">Standard Issue</a>
          <a href="#" onclick="go('home');return false;">The Files</a>
        </div>
        <div class="col">
          <h4>The File</h4>
          <a href="#" onclick="go('about');return false;">About</a>
          <a href="#" onclick="go('about');return false;">How we test</a>
          <a href="#" onclick="go('about');return false;">Independence</a>
          <a href="#" onclick="go('home');return false;">Contact</a>
        </div>
      </div>
    </div>
    <div class="wrap creed">
      <span>Independent. Reader-funded. We buy what we test.</span>
      <span>© 2026 The Briefing Room · briefingroom.info</span>
    </div>
  </footer>
</div>

<script>
  function go(target){
    document.querySelectorAll('.view').forEach(function(v){v.classList.remove('show');});
    document.getElementById(target).classList.add('show');
    document.querySelectorAll('.navlink').forEach(function(n){
      n.classList.toggle('active', n.dataset.nav===target);
    });
    window.scrollTo({top:0,behavior:'instant' in window ? 'instant':'auto'});
    if(target==='home'){runReveal();}
  }
  function runReveal(){
    var hero=document.getElementById('hero');
    if(!hero) return;
    hero.classList.remove('declassified');
    // force reflow then add for a clean re-trigger
    void hero.offsetWidth;
    setTimeout(function(){hero.classList.add('declassified');},350);
  }
  function subscribe(){
    var e=document.getElementById('email').value.trim();
    var c=document.getElementById('confirm');
    if(e && e.indexOf('@')>0){
      c.textContent='✓ Access requested for '+e+' — check your inbox.';
      document.getElementById('email').value='';
    }else{
      c.textContent='Enter a valid email to request access.';
    }
  }
  // initial reveal
  window.addEventListener('load',runReveal);
</script>
</body>
</html>

One thought on “Hello world!”

Leave a Reply

Your email address will not be published. Required fields are marked *