/* bent0box.com: one sheet of hairline cells */

:root {
  --ground: #E4E4E1;
  --paper: #ffffff;
  --ink: #000000;
  --muted: #6B6B6B;
  --well: #ECECEA;
  --hatch: #D4D4D0;
  --edge: rgba(0, 0, 0, 0.95);
  --edge2: rgba(0, 0, 0, 0.5);
  --blue: #0A8CE6;
  --cyan: #1FC6E4;
  --red: #EE2B1B;
  --orange: #FF7A00;
  --yellow: #FFC800;
  --bleed: 16px;
  color-scheme: light;
}
[data-theme="dark"] {
  --ground: #141414;
  --paper: #000000;
  --ink: #F2F2F0;
  --muted: #9C9C98;
  --well: #1C1C1C;
  --hatch: #2C2C2C;
  --edge: rgba(242, 242, 240, 0.9);
  --edge2: rgba(242, 242, 240, 0.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.5;
}
a { color: inherit; }
button, input, output { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: -6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Sheet and cells ---- */
.sheet { max-width: 1360px; margin: 40px auto; background: var(--ink); padding: 1px; display: flex; flex-direction: column; gap: 1px; }
main { display: contents; }
.row { display: grid; gap: 1px; }
.cell { background: var(--paper); min-width: 0; }
.pad { padding: 24px 32px; }
.grow { flex-grow: 1; }
.lbl { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hatch { background: repeating-linear-gradient(45deg, var(--paper) 0 7px, var(--hatch) 7px 8px); }
.swatch { display: flex; }
.swatch span { width: 16px; height: 6px; }
.swatch .s1 { background: var(--cyan); } .swatch .s2 { background: var(--blue); } .swatch .s3 { background: var(--ink); }
.swatch .s4 { background: var(--red); } .swatch .s5 { background: var(--orange); } .swatch .s6 { background: var(--yellow); }

/* Hover: the cell's lines go to 2px and fringe blue and red inward */
.c { position: relative; }
.c::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  transition: opacity 0.2s ease;
  box-shadow: inset 0 0 0 1px var(--ink), inset 0 0 2px 1px var(--edge2),
    inset 4px 0 6px -3px var(--blue), inset -4px 0 6px -3px var(--red);
}
.c:hover::after, .c:focus-visible::after, .c:focus-within::after { opacity: 1; }

/* Black action cells */
.k { background: var(--ink); color: var(--paper); border: 0; text-decoration: none; }
.k:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Big titles: black with blue and red offset copies */
.rgb { text-shadow: -0.04em -0.012em 0 rgba(10, 140, 230, 0.6), 0.04em 0.012em 0 rgba(238, 43, 27, 0.85); }

/* Halo: reserved for one thing in focus per page */
.halo {
  border: 10px solid var(--ink) !important;
  box-shadow:
    0 0 calc(var(--bleed) * 0.2) calc(var(--bleed) * 0.06) var(--edge),
    0 0 calc(var(--bleed) * 0.55) calc(var(--bleed) * 0.12) var(--edge2),
    calc(var(--bleed) * -0.45) 0 calc(var(--bleed) * 0.95) calc(var(--bleed) * 0.06) var(--blue),
    calc(var(--bleed) * 0.45) 0 calc(var(--bleed) * 0.95) calc(var(--bleed) * 0.06) var(--orange);
}

/* Product art and photo placeholders */
.art { border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; background: var(--well); color: var(--muted); font-size: 12px; text-align: center; padding: 8px; overflow: hidden; }
.art.has-img { padding: 0; }
.art img { width: 100%; height: 100%; object-fit: cover; }
.art-rings { background: radial-gradient(circle at 50% 50%, #000 0 18%, #0A8CE6 18% 23%, #1FC6E4 23% 28%, #EE2B1B 28% 33%, #FF7A00 33% 39%, #FFC800 39% 45%, #ECECEA 45%); }
.art-stripes { background: repeating-linear-gradient(90deg, #000 0 16px, #0A8CE6 16px 22px, #1FC6E4 22px 26px, #000 26px 44px, #FF7A00 44px 48px, #FFC800 48px 50px, #000 50px 70px, #EE2B1B 70px 73px, #000 73px 90px); }
.art-bands { background: linear-gradient(180deg, #ECECEA 0 22%, #FFC800 22% 36%, #FF7A00 36% 50%, #EE2B1B 50% 60%, #000 60% 78%, #0A8CE6 78% 88%, #1FC6E4 88% 100%); }
.art-zoom { background-size: 260% 260%; background-position: 30% 50%; }

/* ---- Header ---- */
.hdr { grid-template-columns: 200px minmax(0, 1fr) 150px 190px 96px 136px 160px; min-height: 104px; }
.hdr > * { display: flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; border: 0; font-size: 15px; }
.hdr .studio { flex-direction: column; align-items: flex-start; padding: 0 24px; gap: 6px; }
.logo img { height: 72px; width: auto; }
[data-theme="dark"] .logo img { filter: invert(1); }
.badge { min-width: 28px; height: 28px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); font-size: 13px; }
.badge.on { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; box-shadow: -2px 0 5px 0 var(--blue), 2px 0 5px 0 var(--orange); }

.meta { grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 40px; font-size: 12px; }
.meta > * { display: flex; align-items: center; gap: 8px; padding: 8px 24px; }
.meta > :last-child { justify-content: flex-end; }
.meta a { text-decoration: none; }

/* ---- Session telemetry ---- */
.tele-wrap { position: relative; z-index: 20; }
.tele { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: 56px; }
.tele > * { padding: 0 16px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 3px; border: 0; text-align: left; }
.tele .lbl { font-size: 10px; }
.tele .v { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---- Console ---- */
.console { position: absolute; top: 100%; left: 0; right: 0; margin-top: 1px; background: var(--ink); color: var(--paper); padding: 18px 24px 20px; display: none; flex-direction: column; gap: 12px; font-size: 13px; line-height: 1.6; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); }
.console.open { display: flex; }
.console .bar { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: 0.08em; }
.console .bar span, .console .bar button { opacity: 0.7; }
.console .bar button { background: none; border: 0; font-size: 10px; letter-spacing: 0.08em; height: 28px; padding: 0 4px; }
.console .log { height: 220px; overflow-y: auto; white-space: pre-wrap; }
.console .in { display: flex; align-items: center; gap: 10px; border-top: 1px solid currentColor; padding-top: 12px; }
.console input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; height: 28px; caret-color: currentColor; }

/* ---- Shared type ---- */
h1.big { margin: 0; font-size: clamp(48px, 6.4vw, 92px); font-weight: 500; line-height: 0.98; letter-spacing: -0.065em; max-width: 10ch; }
h1.title { margin: 0; font-size: clamp(40px, 5vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -0.07em; }
h2.h { margin: 0; font-size: clamp(30px, 3vw, 40px); font-weight: 500; line-height: 1; letter-spacing: -0.06em; }
h2.hs { margin: 0; font-size: 28px; font-weight: 500; line-height: 1; letter-spacing: -0.05em; }
.lead { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.7; }
.bar-h { min-height: 44px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ink); }
.actions { min-height: 72px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; padding: 16px 24px; text-align: center; }

/* ---- Home ---- */
.hero { grid-template-columns: minmax(0, 1fr) 540px; min-height: 640px; }
.hero-l { padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.feat { display: flex; flex-direction: column; text-decoration: none; }
.feat .stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 56px 40px; }
.feat .frame { width: 320px; max-width: 100%; aspect-ratio: 1; }
.feat .foot { display: grid; grid-template-columns: minmax(0, 1fr) 120px; border-top: 1px solid var(--ink); min-height: 72px; }
.feat .foot > :first-child { padding: 12px 24px; border-right: 1px solid var(--ink); display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.feat .foot > :last-child { display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; }
.fname { font-size: 16px; font-weight: 500; }

.values { grid-template-columns: repeat(3, minmax(0, 1fr)) 270px 270px; min-height: 120px; font-size: 13px; }
.values > div { padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; }

.cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cat { min-height: 250px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; text-decoration: none; }
.cat .top { display: flex; justify-content: space-between; }
.cat .name { font-size: 52px; font-weight: 500; line-height: 1; letter-spacing: -0.06em; }
.cat p { margin: 0; font-size: 13px; line-height: 1.6; max-width: 38ch; }

.shop-h { grid-template-columns: minmax(0, 1fr) repeat(4, 120px); min-height: 128px; scroll-margin-top: 16px; }
.shop-h .t { padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.filter { border: 0; background: var(--paper); min-height: 48px; }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 500px; }
.card { display: flex; flex-direction: column; }
.card .bar-h { min-height: 40px; padding: 0 16px; font-size: 11px; letter-spacing: 0.08em; }
.card > a { flex: 1; display: flex; flex-direction: column; text-decoration: none; min-height: 0; }
.card .art-wrap { flex: 1; padding: 20px; display: flex; min-height: 0; }
.card .art-wrap .art { flex: 1; }
.card .info { padding: 0 20px 18px; display: flex; flex-direction: column; gap: 4px; }
.card .name { font-size: 15px; font-weight: 500; }
.card .buy { display: grid; grid-template-columns: 96px minmax(0, 1fr); height: 52px; border-top: 1px solid var(--ink); }
.card .buy .p { display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--ink); font-weight: 600; }
.card .buy button { border: 0; background: var(--paper); font-weight: 500; font-size: 14px; }
.card .buy button.added { background: var(--ink); color: var(--paper); }

.spot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 600px; }
.spot-l { padding: 40px; display: flex; }
.spot-l .art { flex: 1; min-height: 320px; }
.spot-r { display: grid; grid-template-rows: auto 1fr auto 72px; gap: 1px; background: var(--ink); }
.spot-r .head { padding: 32px; display: flex; flex-direction: column; gap: 10px; }
.bignum { font-size: 72px; font-weight: 500; line-height: 1; letter-spacing: -0.07em; }
.subname { font-size: 24px; font-weight: 500; letter-spacing: -0.04em; }
.spot-r .desc { margin: 0; padding: 24px 32px; font-size: 14px; line-height: 1.7; }
.spec4 { grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: 13px; }
.spec4 > div, .specs > div { padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }

.custom { grid-template-columns: 220px minmax(0, 1fr) 260px; scroll-margin-top: 16px; }
.custom .intro { grid-column: 1 / span 2; padding: 40px 32px; display: flex; flex-direction: column; gap: 16px; }
.custom .intro p { margin: 0; max-width: 60ch; font-size: 14px; line-height: 1.7; }
.custom .d { padding: 20px 32px; font-size: 16px; font-weight: 500; }
.custom .dd { grid-column: 2 / span 2; padding: 20px 32px; font-size: 14px; line-height: 1.6; }

/* ---- Footer ---- */
.foot-b { grid-template-columns: 200px repeat(4, minmax(0, 1fr)); grid-template-rows: 64px 64px; font-size: 13px; }
.foot-b > * { display: flex; align-items: center; padding: 0 24px; text-decoration: none; }
.foot-b .logo { grid-row: 1 / span 2; justify-content: center; padding: 0; }
.foot-b > :last-child { justify-content: flex-end; }

/* ---- Product page ---- */
.pdp { grid-template-columns: 760px minmax(0, 1fr); }
.pdp-l { display: flex; flex-direction: column; }
.pdp .stage { min-height: 700px; display: flex; align-items: center; justify-content: center; padding: 40px; }
.pdp .stage .art { width: 560px; max-width: 100%; aspect-ratio: 1; font-size: 13px; }
.thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); height: 140px; background: var(--ink); border-top: 1px solid var(--ink); }
.thumbs button { border: 0; padding: 16px; display: flex; background: var(--paper); }
.thumbs button .art { flex: 1; font-size: 10px; }
.thumbs button[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--ink); }
.pdp-r { display: flex; flex-direction: column; gap: 1px; background: var(--ink); }
.pdp-r .head { padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.pdp-r .head .lblrow { display: flex; justify-content: space-between; gap: 12px; }
.pprice { font-size: 24px; font-weight: 600; }
.pdesc { margin: 0; padding: 24px 32px; font-size: 14px; line-height: 1.75; }
#p-opts { display: contents; }
.optlbl { padding: 14px 32px; }
.opts { min-height: 56px; }
.opts button { border: 0; background: var(--paper); font-size: 14px; padding: 8px; }
.opts button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.qty-add { grid-template-columns: 180px minmax(0, 1fr); min-height: 72px; }
.qty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qty button { border: 0; background: var(--paper); font-size: 20px; }
.qty output { display: flex; align-items: center; justify-content: center; font-weight: 600; background: var(--paper); }
.addbtn { font-size: 16px; font-weight: 500; }
.status { min-height: 56px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; }
.status a { font-weight: 600; }
.specs { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 13px; }
.specs > div { padding: 16px 32px; }
.sec-h { min-height: 72px; padding: 0 24px; display: flex; align-items: center; }
.related { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 340px; }
.rel { display: flex; flex-direction: column; text-decoration: none; }
.rel .bar-h { min-height: 40px; padding: 0 16px; }
.rel .art-wrap { flex: 1; padding: 16px; display: flex; min-height: 0; }
.rel .art-wrap .art { flex: 1; }
.rel .foot { display: grid; grid-template-columns: minmax(0, 1fr) 80px; min-height: 52px; border-top: 1px solid var(--ink); font-size: 14px; }
.rel .foot > :first-child { padding: 0 16px; display: flex; align-items: center; border-right: 1px solid var(--ink); }
.rel .foot > :last-child { display: flex; align-items: center; justify-content: center; font-weight: 600; }

/* ---- Cart ---- */
.title-row { min-height: 150px; padding: 32px; display: flex; align-items: center; }
.cart-main { grid-template-columns: minmax(0, 1fr) 480px; }
.lines { display: flex; flex-direction: column; gap: 1px; background: var(--ink); }
#lines { display: contents; }
.line { display: grid; grid-template-columns: 180px minmax(0, 1fr) 150px 120px; gap: 1px; }
.line.head { min-height: 40px; }
.line.head > * { display: flex; align-items: center; padding: 0 20px; }
.line.head > :nth-child(3) { justify-content: center; }
.line.head > :last-child { justify-content: flex-end; }
.line.item { min-height: 180px; }
.line .th { padding: 16px; display: flex; }
.line .th .art { flex: 1; font-size: 11px; }
.line .info { padding: 20px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.line .info .stack { display: flex; flex-direction: column; gap: 6px; }
.lname { font-size: 16px; font-weight: 500; text-decoration: none; }
.linkbtn { align-self: flex-start; min-height: 32px; padding: 0; background: transparent; border: 0; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.line .qcell { display: flex; align-items: center; justify-content: center; }
.line .tot { padding: 0 20px; display: flex; align-items: center; justify-content: flex-end; font-size: 16px; font-weight: 600; }
.stepper { display: grid; grid-template-columns: repeat(3, 40px); height: 40px; border: 1px solid var(--ink); }
.stepper button { border: 0; background: var(--paper); font-size: 18px; }
.stepper button:first-child { border-right: 1px solid var(--ink); }
.stepper button:last-child { border-left: 1px solid var(--ink); }
.stepper output { display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.empty { min-height: 361px; padding: 40px 32px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; }
.empty p { margin: 0; font-size: 16px; line-height: 1.7; max-width: 40ch; }
.empty a { min-height: 56px; padding: 0 28px; display: flex; align-items: center; font-weight: 500; }
.keep { min-height: 56px; padding: 0 20px; display: flex; align-items: center; text-decoration: none; font-size: 14px; }
.lines .hatch { flex-grow: 1; min-height: 40px; }
.summary { padding: 40px; }
.sum-box { background: var(--paper); }
.sum-box .t { padding: 20px 24px; border-bottom: 1px solid var(--ink); font-size: 22px; font-weight: 500; letter-spacing: -0.04em; }
.sum-rows { display: grid; grid-template-columns: minmax(0, 1fr) auto; font-size: 14px; }
.sum-rows > * { padding: 14px 24px; border-bottom: 1px solid var(--ink); }
.sum-rows .total { padding: 18px 24px; font-weight: 600; }
.sum-rows .total-v { padding: 18px 24px; font-size: 22px; font-weight: 600; }
.sum-email { padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--ink); }
.sum-email input { height: 48px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); font-size: 14px; }
.co-btn { width: 100%; height: 64px; font-size: 15px; font-weight: 500; }
.co-msg { margin: 0; padding: 0 24px; font-size: 13px; line-height: 1.6; }
.co-msg:not(:empty) { padding: 14px 24px; border-top: 1px solid var(--ink); }
.summary .note { margin: 24px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); }

/* ---- Simple pages ---- */
.notice { min-height: 420px; padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.notice p { margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.7; }
.notice .actions { align-self: flex-start; min-height: 56px; padding: 0 28px; }

/* ---- Responsive ---- */
@media (max-width: 1180px) {
  .sheet { margin: 16px; }
  .hdr { grid-template-columns: 150px repeat(5, minmax(0, 1fr)); min-height: 88px; }
  .hdr .studio { display: none; }
  .logo img { height: 60px; }
  .tele { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero, .pdp, .cart-main, .spot { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: 0; }
  .values { grid-template-columns: minmax(0, 1fr); }
  .values .actions { min-height: 64px; }
  .cats { grid-template-columns: minmax(0, 1fr); }
  .cat { min-height: 180px; }
  .shop-h { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shop-h .t { grid-column: 1 / -1; }
  .grid4, .related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .custom { grid-template-columns: 140px minmax(0, 1fr); }
  .custom .intro { grid-column: 1 / -1; }
  .custom .intro + .k { grid-column: 1 / -1; min-height: 64px; }
  .custom .dd { grid-column: auto; }
  .foot-b { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .foot-b > * { min-height: 56px; }
  .foot-b .logo { grid-row: auto; grid-column: 1 / -1; min-height: 96px; }
  .foot-b > :last-child { justify-content: flex-start; }
  .pdp .stage { min-height: 0; }
}
@media (max-width: 640px) {
  .sheet { margin: 0; }
  .hdr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hdr > * { min-height: 52px; }
  .hdr .logo { grid-column: 1 / -1; min-height: 96px; }
  .hdr .search { display: none; }
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta > :last-child { justify-content: flex-start; }
  .tele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tele [data-m="0"] { display: none; }
  .hero-l { padding: 28px 24px; }
  .feat .stage { padding: 40px 24px; }
  .cat .name { font-size: 44px; }
  .grid4, .related { grid-template-columns: minmax(0, 1fr); }
  .grid4 > .hatch { display: none; }
  .spec4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bignum { font-size: 56px; }
  .custom { grid-template-columns: minmax(0, 1fr); }
  .spot-l { padding: 24px; }
  .qty-add { grid-template-columns: minmax(0, 1fr); }
  .qty { min-height: 56px; }
  .addbtn { min-height: 64px; }
  .line { grid-template-columns: 96px minmax(0, 1fr); }
  .line.head { display: none; }
  .line .tot { justify-content: flex-start; }
  .summary { padding: 20px; }
  .specs > div, .pdesc, .pdp-r .head, .optlbl, .status { padding-left: 24px; padding-right: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }