/* ============================================================
   FEATURES  -  THE DEVICE, SPECIFIED               2026-08-22

   A specification sheet. The locked form head on, then the same object
   from three angles with every callout pointing at a real part in the
   photograph, then a plain two-column sheet of facts. Nothing here is a
   claim floating in space - each line names something the reader can see.

   THE PHOTOGRAPHS ARE THE ONES ON DISK, front/top/back, shot on the same
   grey studio ground under the same light. If the device geometry is
   superseded (the brief notes pre-Aug-8 images show the old form), the
   layout survives an image swap: same three files, same aspect.

   Scoped with #thing throughout, keeping the id every nav and footer link
   already points at.
   ============================================================ */

#thing{background:var(--paper-2)}

/* ---------- the hero plate ---------- */
#thing .ds__hero{
  margin:clamp(28px,3.4vw,48px) auto 0; max-width:760px;
  border-radius:22px; overflow:hidden; background:var(--paper);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,
             0 2px 6px rgba(4,20,43,.08),
             0 34px 60px -30px rgba(4,20,43,.34);
}
#thing .ds__hero img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:center 46%}
#thing .ds__hero figcaption{
  padding:12px 18px; font-family:var(--ui); font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  border-top:1px solid rgba(0,27,61,.08);
}

/* ---------- the three angles ---------- */
#thing .ds__angles{
  margin-top:clamp(18px,2.4vw,30px);
  display:grid; gap:clamp(16px,2vw,24px);
}
@media (min-width:760px){ #thing .ds__angles{grid-template-columns:repeat(3,1fr)} }

#thing .ds__angle{
  margin:0; display:flex; flex-direction:column;
  background:var(--paper); border-radius:18px; overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,
             0 2px 5px rgba(4,20,43,.07),
             0 20px 34px -22px rgba(4,20,43,.32);
}
#thing .ds__shot{line-height:0; background:#e9e6df}
#thing .ds__shot img{display:block; width:100%; height:auto; aspect-ratio:501/317; object-fit:cover}
#thing .ds__angle figcaption{
  padding:clamp(15px,1.7vw,20px) clamp(16px,1.8vw,20px) clamp(18px,2vw,22px);
  flex:1;
}
#thing .ds__side{
  display:inline-block; margin-bottom:12px;
  font-family:var(--ui); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ember);
}
#thing .ds__calls{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
#thing .ds__calls li{font-size:14.5px; line-height:1.5; color:var(--ink-2)}
#thing .ds__calls b{
  display:block; font-family:var(--display); font-weight:500;
  font-size:16px; letter-spacing:-.01em; color:var(--ink); margin-bottom:2px;
}

/* ---------- the sheet ---------- */
#thing .ds__sheet{
  margin:clamp(26px,3.2vw,44px) auto 0; max-width:760px;
  border-top:1px solid rgba(0,27,61,.14);
}
#thing .ds__sheet > div{
  display:grid; grid-template-columns:minmax(90px,140px) 1fr; gap:clamp(14px,3vw,40px);
  padding:15px 4px; border-bottom:1px solid rgba(0,27,61,.10);
}
#thing .ds__sheet dt{
  font-family:var(--ui); font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  padding-top:2px;
}
#thing .ds__sheet dd{margin:0; font-size:15.5px; line-height:1.55; color:var(--ink)}

#thing .ds__none{
  margin:clamp(24px,3vw,40px) auto 0; max-width:640px; text-align:center;
  font-family:var(--display); font-style:italic;
  font-size:clamp(18px,2vw,23px); line-height:1.35; color:var(--ink-2);
}

html.no-js #thing .rv,.rv-force #thing .rv{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ #thing .rv{transition:none} }