/* ── reset ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── top-level grid ── */
#softer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  padding: 24px 0 40px 40px;
  justify-items: start;
}

/* ── header ── */
header {
  display: grid;
  gap: 16px;
  width: 570px;
}

header h1 {
  font-family: "Tiny5", sans-serif;
  font-weight: 400;
  color: #ee0083;
}

header .name {
  font-family: "Tiny5", sans-serif;
  font-weight: 400;
  font-size: 32px;
  color: #000;
}

/* ── content wrapper ── */
.content {
  display: grid;
  gap: 48px;
  width: 592px;
  justify-items: start;
}

/* ── sections ── */
section {
  display: grid;
  gap: 24px;
  width: 592px;
  justify-items: start;
}

section h2 {
  font-family: "Balsamiq Sans", sans-serif;
  font-weight: 400;
  color: #000;
}

/* ── section content blocks ── */
section > div {
  display: grid;
  gap: 24px;
  width: 592px;
  justify-items: start;
}

/* ── text ── */
p {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  color: #6c6c6c;
  width: 592px;
}

p.dark {
  color: #565656;
}

p.caption {
  color: #9c9c9c;
  padding-top: 8px;
  font-size: 15px;
}

p.caption.italic {
  font-style: italic;
  font-weight: 500;
}

p.caption.underline {
  text-decoration: underline;
}

p.caption.blue {
  color: #0003ee;
}

.bold,
.bolded {
  font-weight: 550;
}

.script {
  font-family: "Lily Script One", cursive;
  font-weight: 400;
}

.thick {
  font-weight: 700;
}

a,
a:visited {
  color: #0003ee;
}

/* ── images ── */
.splat-cell {
  width: 592px;
  aspect-ratio: 4 / 3;
  background: transparent;
  border-radius: 2px;
}

.img-about-me {
  width: 60%;
  max-width: 100%;
  height: auto;
  display: block;
}

.vid-pda-softer {
  width: 592px;
  display: block;
}

.vid-pippi {
  width: 592px;
  display: block;
}

video {
  width: 100%;
  height: auto;
}

.media-clickable,
.img-photo,
.mb-tile {
  cursor: zoom-in;
}

.img-pdaweb-2 {
  width: 240px;
  height: 160px;
  background: url(pdaweb-2.jpg);
  background-size: cover;
}

.img-pdaweb-4 {
  width: 160px;
  height: 160px;
  background: url(pdaweb-4.jpg);
  background-size: cover;
}

.img-pdaweb-5 {
  width: 160px;
  height: 160px;
  background: url(pdaweb-5.jpg);
  background-size: cover;
}

.vid-webapp {
  width: 592px;
  display: block;
}

.vid-micropaint {
  width: 592px;
  display: block;
}

.vid-earlydemo,
.vid-timelapse,
.vid-webdemo-2 {
  width: 592px;
  display: block;
}

.img-photo {
  height: 228px;
  background-image: url(image.png);
  background-size: cover;
  background-position: center;
}

.img-photo-a {
  background-image: url(assets/cyberdeck-a.jpg);
}

.img-photo-b {
  background-image: url(assets/cyberdeck-b.jpg);
}

.img-photo-c {
  background-image: url(assets/cyberdeck-c.jpg);
}

.img-other-1 {
  background-image: url(assets/photo-1.jpg);
}

.img-other-2 {
  background-image: url(assets/photo-2.jpg);
}

.img-other-3 {
  background-image: url(assets/photo-3.jpg);
}

/* ── media rows ── */
.media-firstdeck-1 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 592px;
  overflow: hidden;
}

.media-firstdeck-1 .img-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.media-otherwork-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 592px;
  height: 228px;
}

/* ── model viewer ── */
.model-viewer {
  display: grid;
  gap: 8px;
  width: 592px;
}

.model-viewer a {
  font-family: "Barlow", sans-serif;
  font-size: 10px;
  line-height: 12px;
  font-style: italic;
  font-weight: 500;
  text-decoration: underline;
  color: #0003ee;
}

/* ── block wrappers ── */
.block-firstdeck-1,
.block-firstdeck-3,
.block-micropaint-1 {
  display: grid;
  gap: 16px;
  width: 592px;
}

.block-firstdeck-2 {
  display: grid;
  gap: 24px;
  width: 592px;
}

.block-otherwork-1 {
  display: grid;
  gap: 24px;
  width: 592px;
}

.block-otherwork-2 {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 10px;
  width: 592px;
}

.media-otherwork-webdemo,
.media-otherwork-2 {
  display: grid;
  gap: 16px;
  width: 592px;
}

.section-mb h2 {
  font-weight: 400;
}

.mb-subtitle {
  font-family: "Balsamiq Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
}

.content-mb {
  display: grid;
  gap: 48px;
  width: 592px;
}

.block-mb-form,
.block-mb-concept {
  display: grid;
  gap: 24px;
  width: 592px;
}

.media-mb {
  display: grid;
  gap: 8px;
  width: 592px;
}

.mediarow-mb {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 592px;
  height: 153.51px;
  overflow: hidden;
}

.mb-tile {
  width: 100%;
  height: 153.51px;
  background-size: cover;
  background-position: center;
}

.mb-tile::before {
  content: "";
}

.mb-placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10px;
}

.mb-placeholder::before {
  content: "working hard! just taking a nap. almost done here.";
  font-family: "Barlow", sans-serif;
  font-size: 11px;
  line-height: 1.2;
  color: #6c6c6c;
}

.mbf-antikythera { background-image: url(assets/mbf-antikythera.webp); }
.mbf-architecture { background-image: url(assets/mbf-architecture.webp); }
.mbf-beauty { background-image: url(assets/mbf-beauty.webp); }
.mbf-classic { background-image: url(assets/mbf-classic.webp); }
.mbf-clearutility { background-image: url(assets/mbf-clearutility.webp); }
.mbf-cycle { background-image: url(assets/mbf-cycle.webp); }
.mbf-devtool { background-image: url(assets/mbf-devtool.webp); }
.mbf-enzomari-a { background-image: url(assets/mbf-enzomari-a.webp); }
.mbf-enzomari-b { background-image: url(assets/mbf-enzomari-b.webp); }
.mbf-globalgrid { background-image: url(assets/mbf-globalgrid.webp); }
.mbf-inspiration { background-image: url(assets/mbf-inspiration.webp); }
.mbf-ipodprototype { background-image: url(assets/mbf-ipodprototype.webp); }
.mbf-library { background-image: url(assets/mbf-library.webp); }
.mbf-mine { background-image: url(assets/mbf-mine.webp); }
.mbf-perhaps { background-image: url(assets/mbf-perhaps.webp); }
.mbf-polaroidizone { background-image: url(assets/mbf-polaroidizone.webp); }
.mbf-process { background-image: url(assets/mbf-process.webp); }
.mbf-real { background-image: url(assets/mbf-real.webp); }
.mbf-tascam { background-image: url(assets/mbf-tascam.webp); }
.mbf-vibecheck { background-image: url(assets/mbf-vibecheck.webp); }

.mbc-architecture { background-image: url(assets/mbc-architecture.webp); }
.mbc-concept { background-image: url(assets/mbc-concept.webp); }
.mbc-custom { background-image: url(assets/mbc-custom.webp); }
.mbc-cycle { background-image: url(assets/mbc-cycle.webp); }
.mbc-experience { background-image: url(assets/mbc-experience.webp); }
.mbc-globalgrid { background-image: url(assets/mbc-globalgrid.webp); }
.mbc-library { background-image: url(assets/mbc-library.webp); }
.mbc-memory { background-image: url(assets/mbc-memory.webp); }
.mbc-mesh { background-image: url(assets/mbc-mesh.webp); }
.mbc-oldandnew { background-image: url(assets/mbc-oldandnew.webp); }
.mbc-personal { background-image: url(assets/mbc-personal.webp); }
.mbc-slowtech { background-image: url(assets/mbc-slowtech.webp); }

.img-about-me,
.media-about-cyberdeck video,
.media-about-pippi video,
.media-firstdeck-1 .img-photo,
.media-firstdeck-2 video,
.media-micropaint-1 video,
.media-otherwork-1 .img-photo,
.media-otherwork-webdemo video,
.media-otherwork-2 video,
.mediarow-mb .mb-tile {
  box-shadow:
    rgba(0, 0, 0, 0.12) 0px 1px 3px,
    rgba(0, 0, 0, 0.24) 0px 1px 2px;
}


#media-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}

#media-modal.open {
  display: flex;
}

#media-modal-content {
  max-width: min(96vw, 1600px);
  max-height: 92vh;
  width: 100%;
}

#media-modal-content img,
#media-modal-content video {
  width: 100%;
  max-height: 92vh;
  object-fit: contain;
}

#media-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #fff;
  color: #000;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}