/* site/css/devices.css
*
* THE BIG SCREENS, burropack, 2026-10-30. The laptop, the desk display, the
* tablet and the counter terminal, drawn in CSS beside the phones of
* phone.css so every screen inside is live markup. Tyler: "they don't need to
* have our logo on them at all. They're all just clean devices... matte black
* or gloss, whatever the phones look like, it needs to match... the bigger
* the screen the better, without thick edges."
*
*
*
*
*
*
* Size a device with --bw, everything inside scales from it through --k, one
* unit per pixel of a 1000 wide laptop. Matte basalt glass, a hairline of
* satin titanium at the edge like the phones, bezels a few units thin. No
* marks, no cameras that read as a brand, nothing written on the hardware.
* Centred pieces use left 0, right 0 and auto margins, as in phone.css.
*
* No oxford commas, no em dashes.
*/
.bx{--bw:1000px;--k:calc(var(--bw) / 1000);position:relative;width:var(--bw);max-width:100%;flex:none;box-sizing:border-box}
.bx__screen{position:absolute;overflow:hidden;background:#0E1311;color:#F2EFE7;font-size:calc(15 * var(--k));line-height:1.4;isolation:isolate}
/* ── the laptop: a lid of glass edge to edge, a thin deck below ── */
.bx--laptop{aspect-ratio:1000/640}
.bx--laptop::before{content:"";position:absolute;left:7%;right:7%;top:0;height:calc(600 * var(--k));border-radius:calc(22 * var(--k)) calc(22 * var(--k)) calc(6 * var(--k)) calc(6 * var(--k));
background:#060807;box-shadow:inset 0 0 0 calc(1.4 * var(--k)) #3A3F3C,inset 0 0 0 calc(2.4 * var(--k)) #0A0C0B,0 calc(50 * var(--k)) calc(90 * var(--k)) calc(-40 * var(--k)) rgba(5,8,6,.55)}
.bx--laptop .bx__screen{left:calc(7% + 9 * var(--k));right:calc(7% + 9 * var(--k));top:calc(9 * var(--k));height:calc(574 * var(--k));border-radius:calc(14 * var(--k)) calc(14 * var(--k)) calc(2 * var(--k)) calc(2 * var(--k))}
.bx--laptop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(40 * var(--k));border-radius:calc(4 * var(--k)) calc(4 * var(--k)) calc(26 * var(--k)) calc(26 * var(--k)) / calc(4 * var(--k)) calc(4 * var(--k)) calc(40 * var(--k)) calc(40 * var(--k));
background:linear-gradient(180deg,#4A4F4C 0,#22262A 8%,#16191A 40%,#0B0D0C 100%);box-shadow:inset 0 calc(1 * var(--k)) 0 rgba(255,255,255,.18),0 calc(30 * var(--k)) calc(50 * var(--k)) calc(-20 * var(--k)) rgba(5,8,6,.5)}
.bx--laptop .bx__lip{position:absolute;z-index:2;left:0;right:0;margin:0 auto;bottom:calc(30 * var(--k));width:14%;height:calc(8 * var(--k));border-radius:0 0 calc(8 * var(--k)) calc(8 * var(--k));background:#0A0C0B}
/* ── the desk display: near borderless glass on a slim matte stand ── */
.bx--display{aspect-ratio:1000/760}
.bx--display::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(590 * var(--k));border-radius:calc(16 * var(--k));background:#060807;
box-shadow:inset 0 0 0 calc(1.4 * var(--k)) #3A3F3C,0 calc(50 * var(--k)) calc(90 * var(--k)) calc(-46 * var(--k)) rgba(5,8,6,.6)}
.bx--display .bx__screen{left:calc(8 * var(--k));right:calc(8 * var(--k));top:calc(8 * var(--k));height:calc(574 * var(--k));border-radius:calc(9 * var(--k))}
.bx--display .bx__neck{position:absolute;left:0;right:0;margin:0 auto;top:calc(590 * var(--k));width:calc(120 * var(--k));height:calc(140 * var(--k));
background:linear-gradient(90deg,#0B0D0C,#2A2E2C 45%,#1A1D1C 60%,#0B0D0C);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.bx--display .bx__foot{position:absolute;left:0;right:0;margin:0 auto;bottom:0;width:calc(300 * var(--k));height:calc(30 * var(--k));border-radius:calc(8 * var(--k)) calc(8 * var(--k)) calc(14 * var(--k)) calc(14 * var(--k));
background:linear-gradient(180deg,#3A3F3C,#121514 30%,#0B0D0C);box-shadow:0 calc(20 * var(--k)) calc(30 * var(--k)) calc(-12 * var(--k)) rgba(5,8,6,.5)}
/* ── the tablet, landscape, a hairline band like the phones ── */
.bx--tablet{aspect-ratio:1000/700;border-radius:calc(46 * var(--k));
background:linear-gradient(135deg,#8E918E 0%,#4B4F4C 12%,#2A2D2B 40%,#3A3E3B 70%,#7D817E 100%);
box-shadow:inset 0 0 0 calc(1.5 * var(--k)) rgba(255,255,255,.35),0 calc(50 * var(--k)) calc(90 * var(--k)) calc(-40 * var(--k)) rgba(5,8,6,.5)}
.bx--tablet::before{content:"";position:absolute;inset:calc(4 * var(--k));border-radius:calc(42 * var(--k));background:#050605}
.bx--tablet .bx__screen{inset:calc(22 * var(--k));border-radius:calc(26 * var(--k))}
/* ── the counter terminal: a big screen on a short weighted base, a reader beside ── */
.bx--pos{aspect-ratio:1000/820}
.bx--pos::before{content:"";position:absolute;left:4%;width:74%;top:0;height:calc(560 * var(--k));border-radius:calc(30 * var(--k));background:#060807;
box-shadow:inset 0 0 0 calc(1.4 * var(--k)) #3A3F3C,0 calc(50 * var(--k)) calc(90 * var(--k)) calc(-40 * var(--k)) rgba(5,8,6,.55)}
.bx--pos .bx__screen{left:calc(4% + 14 * var(--k));width:calc(74% - 28 * var(--k));top:calc(14 * var(--k));height:calc(532 * var(--k));border-radius:calc(18 * var(--k))}
.bx--pos::after{content:"";position:absolute;left:calc(4% + 24%);width:calc(26%);top:calc(560 * var(--k));height:calc(260 * var(--k));
background:linear-gradient(180deg,#121514,#0B0D0C 60%);clip-path:polygon(30% 0,70% 0,100% 88%,100% 100%,0 100%,0 88%);border-radius:calc(10 * var(--k))}
.bx--pos .bx__reader{position:absolute;right:0;bottom:0;width:18%;height:calc(330 * var(--k));border-radius:calc(26 * var(--k));background:linear-gradient(180deg,#1A1D1C,#0B0D0C);
box-shadow:inset 0 0 0 calc(1.2 * var(--k)) #3A3F3C,0 calc(30 * var(--k)) calc(50 * var(--k)) calc(-20 * var(--k)) rgba(5,8,6,.5)}
.bx--pos .bx__reader::before{content:"";position:absolute;left:12%;right:12%;top:8%;height:46%;border-radius:calc(12 * var(--k));background:#0E1311;box-shadow:inset 0 0 0 calc(1 * var(--k)) rgba(242,239,231,.08)}
.bx--pos .bx__reader::after{content:"";position:absolute;left:0;right:0;margin:0 auto;bottom:12%;width:44%;height:calc(4 * var(--k));border-radius:999px;background:#2A2E2C}
/* ── Ion's laptop, 2026-10-30. The real frame from the brand kit, screen off,
with a true alpha hole. The live screen sits behind it at the measured
rectangle in devices/manifest.json (screen.frontRectangle: x 229, y 77,
1079 by 650 on the 1536 by 1024 master). Swap the PNG and these four
numbers move with it, never one without the other.
...
