*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#ffffff;color:#231f1c;
 font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.65}
img,svg{max-width:100%;height:auto;display:block}
a{color:#7d4f34}
a:focus-visible,[tabindex]:focus-visible{outline:2px solid #7d4f34;outline-offset:2px}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 28px}
.mono{font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:12.5px;
 letter-spacing:.06em;font-variant-numeric:tabular-nums;text-transform:uppercase;color:#5c554d}

/* 1 announcement */
.announce{background:#7d4f34;color:#fff;font-size:13.5px;letter-spacing:.03em;padding:9px 0}
.announce .wrap{text-align:center}

/* 2 header */
.masthead{border-bottom:1px solid #e3ded6}
.masthead .wrap{display:flex;align-items:flex-end;justify-content:space-between;
 gap:24px;flex-wrap:wrap;padding-top:22px;padding-bottom:18px}
.mark{text-decoration:none;color:#231f1c}
.mark b{display:block;font-size:27px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.mark span{display:block;border-top:2px solid #7d4f34;margin-top:8px;padding-top:6px;
 font-family:ui-monospace,Consolas,monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#5c554d}
.storenav{display:flex;flex-wrap:wrap;gap:20px;align-items:baseline;padding-bottom:4px}
.storenav a{font-size:14.5px;text-decoration:none;color:#231f1c}
.storenav a:hover{text-decoration:underline}
.storenav a.util{font-family:ui-monospace,Consolas,monospace;font-size:12px;
 letter-spacing:.12em;text-transform:uppercase;color:#5c554d}

/* 3 lead */
.lead{padding:34px 0 8px}
.lead figure{margin:0}
.lead img{width:100%;max-height:460px;object-fit:cover;background:#f5f2ed}
.leadtext{margin-top:22px;max-width:640px}
.leadtext h1,.leadtext h2{font-size:38px;font-weight:400;line-height:1.15;margin:0 0 12px}
.leadtext p{margin:0 0 18px;color:#3c3630}
.boxlink{display:inline-block;border:1px solid #7d4f34;color:#7d4f34;text-decoration:none;
 padding:11px 26px;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase}
.boxlink:hover{background:#7d4f34;color:#fff}

/* sections */
section{padding:44px 0}
.sechead{font-size:24px;font-weight:400;margin:0 0 6px}
.secnote{margin:0 0 26px;color:#5c554d;font-size:15px;max-width:640px}

/* 4/6 grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 26px}
.cell{margin:0}
.cell a{text-decoration:none;color:#231f1c;display:block}
.cell img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#f5f2ed}
.cell .nm{font-size:17px;margin:12px 0 3px}
.cell a:hover .nm{text-decoration:underline}
.cell .mono{display:block;margin-bottom:5px}
.cell p{margin:0;font-size:14px;color:#5c554d;line-height:1.5}

/* 5 story */
.story{background:#f5f2ed;padding:44px 0}
.story .cols{display:grid;grid-template-columns:1.5fr 1fr;gap:44px}
.story p{margin:0 0 14px;max-width:60ch;color:#3c3630}
.famrows{list-style:none;margin:0;padding:0;border-top:1px solid #e3ded6}
.famrows li{border-bottom:1px solid #e3ded6}
.famrows a{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
 padding:13px 0;text-decoration:none;color:#231f1c;font-size:16px}
.famrows a:hover{text-decoration:underline}

/* specimen detail device */
.specimen{border-top:1px solid #e3ded6;border-bottom:1px solid #e3ded6}
.spec2{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:40px;align-items:start}
.spec2 img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#f5f2ed}
.detail .spec2>img{position:sticky;top:24px}
.wrap.narrow{max-width:840px}
table.specs{width:100%;border-collapse:collapse;margin:0 0 20px}
table.specs th,table.specs td{text-align:left;vertical-align:top;padding:9px 0;
 border-bottom:1px solid #e3ded6;font-size:14.5px}
table.specs th{width:34%;font-weight:400;font-family:ui-monospace,Consolas,monospace;
 font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#5c554d}

/* 7 note */
.note{background:#f5f2ed;padding:36px 0}
.note h2{font-size:20px;font-weight:400;margin:0 0 10px}
.note p{margin:0 0 12px;max-width:66ch;color:#3c3630}

/* 8 footer */
.foot{border-top:1px solid #e3ded6;padding:38px 0 52px}
.foot .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.foot h2{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;letter-spacing:.14em;
 text-transform:uppercase;color:#5c554d;margin:0 0 12px;font-weight:400}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:8px}
.foot a{font-size:14.5px;text-decoration:none;color:#231f1c}
.foot a:hover{text-decoration:underline}
.foot p{font-size:14px;color:#5c554d;margin:0}
.footrule{border-top:1px solid #e3ded6;margin-top:30px;padding-top:16px}

/* detail pages */
.crumb{padding:18px 0 0;font-family:ui-monospace,Consolas,monospace;font-size:12px;
 letter-spacing:.1em;text-transform:uppercase;color:#5c554d}
.crumb a{color:#5c554d}
.detail{padding:22px 0 10px}
.detail h1{font-size:38px;font-weight:400;line-height:1.15;margin:0 0 14px}
.dlead{font-size:18px;line-height:1.6;color:#3c3630;margin:0 0 24px;max-width:62ch}
.prose h2{font-size:20px;font-weight:400;margin:30px 0 8px}
.prose p{margin:0 0 14px;max-width:66ch;color:#3c3630}
.related{border-top:1px solid #e3ded6;margin-top:38px;padding-top:22px}
.related ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.related a{font-size:15px}
.idxgroup{margin-bottom:52px}

@media (max-width:900px){
  .story .cols{grid-template-columns:1fr;gap:26px}
  .spec2{grid-template-columns:1fr;gap:24px}
  .spec2 img{max-width:420px}
  .foot .cols{grid-template-columns:repeat(2,1fr);gap:26px}
}
@media (max-width:720px){
  .wrap{padding:0 18px}
  .announce{font-size:13px}
  .masthead .wrap{align-items:flex-start}
  .storenav{gap:14px}
  .lead img{max-height:300px}
  .leadtext h1,.leadtext h2,.detail h1{font-size:29px}
  .grid{grid-template-columns:repeat(2,1fr);gap:26px 18px}
  .cell .nm{margin-bottom:2px}
  table.specs th,table.specs td{display:block;width:100%;border-bottom:none;padding:2px 0}
  table.specs th{padding-top:12px}
  table.specs td{border-bottom:1px solid #e3ded6;padding-bottom:10px}
}
