:root{
    --ink:#1b1b1d;
    --panel:#232327;
    --panel-2:#2b2b30;
    --line: rgba(245,245,242,0.10);
    --line-strong: rgba(245,245,242,0.20);
    --paper:#f5f5f2;
    --paper-dim: rgba(245,245,242,0.62);
    --paper-dimmer: rgba(245,245,242,0.40);
    --burl:#a9702e;
    --burl-glow: rgba(169,112,46,0.35);
    --carbon:#5b6672;
    --carbon-glow: rgba(91,102,114,0.35);
    --gloss:#e8e8e4;
    --gloss-glow: rgba(232,232,228,0.35);
    --amber:#e8a33d;
    --amber-dim: rgba(232,163,61,0.28);
    --radius: 2px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--paper);
    font-family:'IBM Plex Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
  }
  ::selection{ background:var(--amber-dim); color:var(--paper); }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  a{ color:inherit; }
  :focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

  .wrap{ max-width:1120px; margin:0 auto; padding:0 28px; }

  h1,h2,h3{ font-family:'Oswald', sans-serif; letter-spacing:0.01em; margin:0; }
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--amber);
  }
  .mono{ font-family:'IBM Plex Mono', monospace; }

  /* ---------- Top bar: honest disclosure, up top not buried ---------- */
  .disclosure{
    background: var(--panel);
    border-bottom:1px solid var(--line);
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    color:var(--paper-dim);
    padding:10px 0;
  }
  .disclosure .wrap{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
  .disclosure strong{ color:var(--paper); font-weight:600; }

  header.site{
    padding:20px 0 0;
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 0 40px;
    border-bottom:1px solid var(--line);
  }
  .brand{
    font-family:'Oswald', sans-serif;
    font-weight:600;
    font-size:20px;
    letter-spacing:0.03em;
    text-decoration:none;
  }
  .brand span{ color:var(--amber); }
  .nav-links{ display:flex; gap:28px; font-size:14px; }
  .nav-links a{ text-decoration:none; color:var(--paper-dim); }
  .nav-links a:hover{ color:var(--paper); }

  /* ---------- Hero ---------- */
  .hero{ padding:64px 0 56px; border-bottom:1px solid var(--line); }
  .hero h1{
    font-size:clamp(34px, 5.4vw, 58px);
    line-height:1.04;
    font-weight:600;
    max-width:14ch;
    margin-top:14px;
  }
  .hero .lede{
    max-width:56ch;
    color:var(--paper-dim);
    font-size:17px;
    margin-top:22px;
  }
  .hero .lede b{ color:var(--paper); font-weight:600; }

  .gauge-strip{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    margin-top:40px;
  }
  .gauge-strip .cell{
    background:var(--panel);
    padding:20px 22px;
  }
  .gauge-strip .num{
    font-family:'Oswald', sans-serif;
    font-size:30px;
    font-weight:600;
    color:var(--amber);
  }
  .gauge-strip .lbl{
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--paper-dimmer);
    margin-top:6px;
  }

  /* ---------- Section headings ---------- */
  section{ padding:64px 0; border-bottom:1px solid var(--line); }
  .section-head{ margin-bottom:36px; max-width:60ch; }
  .section-head h2{ font-size:clamp(24px,3vw,32px); font-weight:600; margin-top:10px; }
  .section-head p{ color:var(--paper-dim); font-size:15.5px; margin-top:12px; }

  /* ---------- Why it matters strip ---------- */
  .why-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  }
  .why-card{ border-top:2px solid var(--amber); padding-top:16px; }
  .why-card h3{ font-size:16px; font-weight:500; }
  .why-card p{ color:var(--paper-dim); font-size:14.5px; margin-top:8px; }

  /* ---------- Material cards ---------- */
  .materials{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); }
  .mcard{ background:var(--ink); padding:36px; display:grid; grid-template-columns: 220px 1fr; gap:36px; }
  .mcard .swatch-col{ display:flex; flex-direction:column; gap:14px; }
  .swatch{
    width:100%; aspect-ratio:4/3; border-radius:var(--radius);
    border:1px solid var(--line-strong);
    position:relative; overflow:hidden;
  }
  .swatch::after{
    content:''; position:absolute; inset:0;
  }
  .swatch.wood{
    background:
      repeating-linear-gradient(100deg, rgba(0,0,0,0.10) 0 2px, transparent 2px 7px),
      repeating-linear-gradient(96deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 11px),
      linear-gradient(135deg, #8a5a26, #6d4319 60%, #7a4c1f);
  }
  .swatch.carbon{
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 3px, transparent 3px 6px),
      repeating-linear-gradient(-45deg, rgba(0,0,0,0.35) 0 3px, transparent 3px 6px),
      linear-gradient(135deg, #4a525c, #24282d);
  }
  .swatch.piano{
    background: linear-gradient(150deg, #3a3a3a, #0c0c0c 45%, #2c2c2c 55%, #050505);
  }
  .swatch.piano::after{
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 45%, transparent 60%);
    mix-blend-mode:screen;
  }
  .tag-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px; letter-spacing:0.04em;
    border:1px solid var(--line-strong);
    padding:4px 8px; color:var(--paper-dimmer);
  }

  .mcard h3{ font-size:26px; font-weight:600; }
  .mcard .fit-for{ color:var(--paper-dim); font-size:14.5px; margin-top:6px; margin-bottom:26px; max-width:52ch; }

  .ratings{ display:flex; flex-direction:column; gap:16px; }
  .rating-row{ display:grid; grid-template-columns: 190px 1fr 34px; align-items:center; gap:14px; }
  .rating-row .rlabel{ font-size:13.5px; color:var(--paper-dim); }
  .gauge{
    position:relative; height:8px; background:var(--panel-2);
    border:1px solid var(--line); overflow:hidden;
  }
  .gauge .ticks{
    position:absolute; inset:0;
    background-image: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px calc(20% - 1px));
    z-index:2;
  }
  .gauge .fill{
    position:absolute; inset:0; width:0%;
    background: linear-gradient(90deg, var(--amber), #f3c477);
    z-index:1;
  }
  .rating-row .rnum{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--amber); text-align:right; }

  .verdict{
    margin-top:26px; padding-top:20px; border-top:1px dashed var(--line-strong);
    font-size:14px; color:var(--paper-dim);
  }
  .verdict b{ color:var(--paper); font-weight:600; }

  @media (max-width: 760px){
    .mcard{ grid-template-columns:1fr; gap:22px; }
    .swatch-col{ flex-direction:row; }
    .swatch{ aspect-ratio:1/1; }
    .why-grid{ grid-template-columns:1fr; gap:28px; }
    .gauge-strip{ grid-template-columns:1fr; }
    .rating-row{ grid-template-columns:120px 1fr 30px; }
  }

  /* ---------- Quick table ---------- */
  .table-wrap{ overflow-x:auto; border:1px solid var(--line); }
  table{ width:100%; border-collapse:collapse; min-width:620px; font-size:14px; }
  th,td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); white-space:nowrap; }
  th{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--paper-dimmer); background:var(--panel); }
  td.mat{ font-family:'Oswald', sans-serif; font-weight:500; font-size:15px; }
  tr:last-child td{ border-bottom:none; }
  .dot-row{ display:flex; gap:4px; }
  .dot{ width:9px; height:9px; border-radius:1px; background:var(--panel-2); border:1px solid var(--line-strong); }
  .dot.on{ background:var(--amber); border-color:var(--amber); }

  /* ---------- Method / disclaimer ---------- */
  .method{ display:grid; grid-template-columns: 1fr 1.4fr; gap:48px; }
  .method h2{ font-size:22px; font-weight:600; }
  .method ol{ margin:18px 0 0; padding-left:20px; color:var(--paper-dim); font-size:14.5px; }
  .method li{ margin-bottom:10px; }
  .method .note{
    font-size:13.5px; color:var(--paper-dimmer);
    border-left:2px solid var(--amber); padding:4px 0 4px 16px; margin-top:22px;
  }

  @media (max-width: 760px){ .method{ grid-template-columns:1fr; } }

  /* ---------- CTA ---------- */
  .cta{
    text-align:center; padding:72px 0;
  }
  .cta h2{ font-size:clamp(26px,4vw,38px); font-weight:600; max-width:20ch; margin:0 auto; }
  .cta p{ color:var(--paper-dim); margin-top:14px; }
  .cta-buttons{ display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap; }
  .btn{
    font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:0.03em;
    text-decoration:none; padding:14px 26px; border:1px solid var(--line-strong);
    transition:border-color 0.15s, background 0.15s;
  }
  .btn.primary{ background:var(--amber); color:var(--ink); border-color:var(--amber); font-weight:600; }
  .btn.primary:hover{ background:#f3c477; }
  .btn.secondary{ color:var(--paper-dim); }
  .btn.secondary:hover{ border-color:var(--paper-dim); color:var(--paper); }

  footer{ padding:32px 0 48px; }
  footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
  footer .fine{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--paper-dimmer); }
  footer .flinks{ display:flex; gap:20px; font-size:13px; }
  footer .flinks a{ text-decoration:none; color:var(--paper-dim); }
  footer .flinks a:hover{ color:var(--paper); }