/* Mothership — protokół kwarantanny */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Sofia+Sans+Extra+Condensed:wght@400;500;600;700;800&display=swap");

:root {
  --ink: #111517;
  --paper: #d9d8d0;
  --pale: #e2e6e2;
  --red: #ae2625;
  --yellow: #e0bb0e;
  --section-heading-size: 30px;
  --section-copy-size: 15px;
}

* { box-sizing: border-box; }

html {
  background: #050708;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: radial-gradient(circle at 50% 4%, #344045 0, #101416 38%, #040506 76%);
  font-family: "IBM Plex Mono", monospace;
}

button,
a { font: inherit; }

.catalog-return {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  width: min(1180px, 100vw);
  min-height: 46px;
  margin: 0 auto;
  padding: 0 20px;
  border-bottom: 1px solid rgba(220, 232, 233, 0.25);
  background:
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 42%),
    #080c0e;
}

.catalog-return a {
  color: #e8eeeb;
  font-family: "Sofia Sans Extra Condensed", sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.catalog-return a:hover,
.catalog-return a:focus-visible {
  color: #ef4e49;
}

.catalog-return a:focus-visible {
  outline: 2px solid #ef4e49;
  outline-offset: 5px;
}

.quarantine-board {
  position: relative;
  container-type: inline-size;
  width: min(1180px, 100vw);
  aspect-ratio: 971 / 1619;
  min-height: 1650px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(rgba(1, 5, 7, 0.03), rgba(1, 5, 7, 0.13)),
    url("../assets/mothership-quarantine/lab-tray-background.webp") center / 100% 100% no-repeat;
  box-shadow: 0 0 0 1px #819095, 0 0 80px #000;
}

.quarantine-board::before {
  position: absolute;
  z-index: 2;
  inset: 1.4%;
  border: 1px solid rgba(216, 232, 235, 0.24);
  box-shadow: inset 0 0 2.4cqi rgba(213, 234, 237, 0.12);
  content: "";
  pointer-events: none;
}

.vertical-brand {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  width: 12%;
  overflow: hidden;
  color: rgba(233, 236, 232, 0.76);
  background: transparent;
}

.vertical-brand-logo {
  position: absolute;
  top: 1.4%;
  right: -4%;
  display: block;
  width: 108%;
  height: auto;
}

.vertical-brand small {
  position: absolute;
  right: 10%;
  bottom: 1.8%;
  writing-mode: vertical-rl;
  font-size: clamp(8px, 0.88cqi, 12px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.protocol-placard {
  position: absolute;
  z-index: 20;
  top: -2.1%;
  left: -3.2%;
  width: 54%;
  height: 13.2%;
  transform: rotate(-5.8deg);
  color: #eef1ed;
  filter: drop-shadow(0 1.2cqi 1.1cqi rgba(0,0,0,.85));
}

.protocol-placard > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.protocol-placard > div {
  position: absolute;
  top: 32%;
  right: 7.5%;
  left: 20.5%;
  text-transform: uppercase;
}

.protocol-placard p {
  margin: 0.22cqi 0;
  font-size: clamp(8px, 0.92cqi, 13px);
  letter-spacing: 0.16em;
}

.protocol-placard h1 {
  margin: 0;
  font-family: "Sofia Sans Extra Condensed", sans-serif;
  font-size: clamp(25px, 3.8cqi, 50px);
  font-weight: 500;
  letter-spacing: 0.065em;
  line-height: 0.94;
}

.protocol-placard b { color: #e34b46; }

.bio-mark {
  position: absolute;
  top: 31%;
  left: 6%;
  font-size: clamp(28px, 4.8cqi, 65px);
}

.specimen-film {
  position: absolute;
  z-index: 5;
  top: 7.1%;
  left: 5.4%;
  width: 62.5%;
  height: 49.2%;
  overflow: hidden;
  transform: rotate(-1.35deg);
  color: #dce8e9;
  background: #04090c;
  border: 1px solid rgba(209, 228, 230, 0.5);
  box-shadow: 0 1.5cqi 2.4cqi #000b, inset 0 0 0 0.6cqi #050809;
}

.specimen-film::after {
  position: absolute;
  inset: 1.2%;
  border: 1px solid rgba(216, 232, 234, 0.22);
  content: "";
  pointer-events: none;
}

.specimen-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  filter: contrast(1.17) brightness(0.77);
}

.specimen-copy {
  position: absolute;
  z-index: 2;
  top: 4%;
  left: -1.5%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.3cqi;
  width: 49%;
  padding: 1.2cqi;
  color: #e4eded;
  background: linear-gradient(90deg, rgba(1,5,7,.9), rgba(1,5,7,.64) 72%, transparent);
  text-shadow: 0 1px 2px #000;
}

.sample-index {
  padding-right: 1.1cqi;
  border-right: 1px solid rgba(219,231,232,.44);
  font-size: clamp(9px, 0.9cqi, 12px);
}

.specimen-copy h2 {
  margin: 0 0 0.75cqi;
  font-family: "Sofia Sans Extra Condensed", sans-serif;
  font-size: clamp(18px, 2.3cqi, 31px);
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.specimen-copy dl { margin: 0; }

.specimen-copy dl > div {
  display: grid;
  grid-template-columns: 43% 57%;
  gap: 0.4cqi;
  margin: 0.2cqi 0;
  font-size: clamp(7px, 0.7cqi, 10px);
  line-height: 1.25;
  text-transform: uppercase;
}

.specimen-copy dt::after { content: ":"; }
.specimen-copy dd { margin: 0; }

.hook-copy {
  position: absolute;
  z-index: 2;
  top: 46%;
  left: 5%;
  width: 47%;
  padding: 1cqi 1.2cqi;
  color: #f1f3ef;
  background: rgba(2, 6, 8, 0.77);
  border-left: 2px solid #dfe9e9;
  text-shadow: 0 1px 2px #000;
}

.hook-copy p { margin: 0; }

.hook {
  font-family: "Sofia Sans Extra Condensed", sans-serif;
  font-size: var(--section-heading-size);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
}

.subtitle {
  margin-top: 0.45cqi !important;
  color: #ef5b54;
  font-family: "Sofia Sans Extra Condensed", sans-serif;
  font-size: var(--section-heading-size);
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
}

.world-copy {
  position: absolute;
  z-index: 2;
  top: 8.5%;
  right: 2.6%;
  left: 45%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8cqi;
  padding: 1.05cqi 1.15cqi;
  background: rgba(2, 6, 8, 0.82);
  border: 1px solid rgba(218, 230, 231, 0.38);
}

.world-copy h3 {
  margin: 0 0 0.35cqi;
  font-family: "Sofia Sans Extra Condensed", sans-serif;
  font-size: var(--section-heading-size);
  line-height: 1;
  text-transform: uppercase;
}

.world-copy p:not(.tags) {
  margin: 0;
  font-size: var(--section-copy-size);
  line-height: 1.36;
}

.world-copy .tags {
  margin: 0;
  padding-top: 0.55cqi;
  border-top: 1px solid rgba(218, 230, 231, 0.28);
  font-size: 10px;
  letter-spacing: 0.07em;
  line-height: 1.36;
  text-transform: uppercase;
}

.evidence-card {
  position: absolute;
  z-index: 11;
  padding: 4.6% 3.2% 3.4%;
  background: url("../assets/mothership-quarantine/sleeve-01.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 1cqi 1cqi rgba(0,0,0,.72));
}

.evidence-card h2,
.petri-panel h2 {
  margin: 0 0 0.8cqi;
  border-bottom: 1px solid rgba(15,19,21,.72);
  font-family: "Sofia Sans Extra Condensed", sans-serif;
  font-size: var(--section-heading-size);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.evidence-card h2 span { margin-right: 0.45cqi; }

.evidence-card > p:not(.card-code) {
  margin: 0;
  font-size: var(--section-copy-size);
  font-weight: 500;
  line-height: 1.42;
}

.card-code {
  margin: 0 0 0.55cqi;
  font-size: clamp(7px, 0.7cqi, 10px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-crew {
  top: 1.5%;
  right: 9.9%;
  width: 23.5%;
  height: 24.8%;
  transform: rotate(1.2deg);
  background-image: url("../assets/mothership-quarantine/sleeve-02.webp");
}

.card-sketch {
  position: absolute;
  right: 11%;
  bottom: 8%;
  width: 42%;
  height: 27%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.25);
  mix-blend-mode: multiply;
}

.card-adventures {
  top: 24.3%;
  right: 6.1%;
  width: 31.6%;
  height: 34.6%;
  transform: rotate(1.15deg);
  background-image: url("../assets/mothership-quarantine/sleeve-03.webp");
}

.embedded-photos {
  position: absolute;
  right: 7%;
  bottom: 7%;
  left: 7%;
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  grid-template-rows: 1.1fr 1fr;
  gap: 0.55cqi;
  height: 49%;
  min-width: 0;
  overflow: hidden;
}

.film button {
  padding: 0;
  overflow: hidden;
  border: 1px solid #13191b;
  background: #050708;
  cursor: zoom-in;
}

.embedded-photos > img:first-child {
  grid-column: 1 / 3;
  grid-row: 1;
}

.embedded-photos img,
.film img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  filter: grayscale(1) contrast(1.24) brightness(.86);
  transition: filter 220ms ease, transform 220ms ease;
}

.embedded-photos > img {
  overflow: hidden;
  border: 1px solid #13191b;
}

.film button:hover img {
  transform: scale(1.035);
  filter: grayscale(.2) contrast(1.12);
}

.petri-panel {
  position: absolute;
  z-index: 13;
  top: 39.2%;
  left: 0.1%;
  width: 34.7%;
  aspect-ratio: 1;
  color: #e6eded;
  filter: drop-shadow(0 1.2cqi 1.2cqi #000b);
}

.petri-panel > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.petri-panel > div {
  position: absolute;
  top: 26%;
  left: 18%;
  width: 42%;
  text-shadow: 0 1px 2px #000;
}

.petri-panel h2 {
  border-color: rgba(227,236,236,.6);
}

.petri-panel p:not(.card-code) {
  margin: 0;
  font-size: var(--section-copy-size);
  line-height: 1.38;
}

.card-distinction {
  top: 59.8%;
  left: 1.7%;
  width: 29.2%;
  height: 24.9%;
  transform: rotate(-1.3deg);
  background-image: url("../assets/mothership-quarantine/sleeve-04.webp");
}

.card-distinction > p:not(.card-code) {
  font-size: var(--section-copy-size);
  line-height: 1.35;
}

.checklist {
  margin: 1cqi 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(8px, 0.8cqi, 11px);
}

.checklist li {
  margin: .45cqi 0;
}

.checklist li::before {
  margin-right: .55cqi;
  content: "☑";
}

.panic-assay {
  position: absolute;
  z-index: 8;
  top: 55.9%;
  left: 30.8%;
  width: 43.6%;
  aspect-ratio: 1;
  color: #e5eded;
  text-shadow: 0 1px 2px #000;
}

.panic-assay > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: brightness(.92) contrast(1.08);
}

.session-scales {
  position: absolute;
  z-index: 2;
  top: -57%;
  left: 12%;
  width: 54%;
  margin: 0;
  padding: 3.2cqi 1.25cqi 1.1cqi;
  transform: rotate(2.65deg);
  color: #e8efed;
  background:
    linear-gradient(115deg, rgba(255,255,255,.035), transparent 38%),
    rgba(2, 7, 9, .94);
  border: 1px solid rgba(215, 229, 230, .5);
  box-shadow:
    0 1cqi 1.4cqi rgba(0,0,0,.72),
    inset 0 0 0 .32cqi rgba(218,230,231,.04);
  text-shadow: 0 1px 2px #000;
}

.session-scales::before {
  position: absolute;
  top: .85cqi;
  right: 1.2cqi;
  left: 1.2cqi;
  padding-bottom: .5cqi;
  border-bottom: 1px solid rgba(224, 235, 234, .42);
  color: #edf3f0;
  content: "PARAMETRY SESJI";
  font-family: "Sofia Sans Extra Condensed", sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}

.session-scales > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8cqi;
  margin: 0;
  padding: .32cqi 0;
  border-top: 1px solid rgba(224, 235, 234, .13);
  font-family: "Sofia Sans Extra Condensed", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.session-scales > div:first-child { border-top: 0; }

.session-scales dd {
  margin: 0;
  color: #f04c46;
  font-size: 18px;
  font-weight: 700;
}

.system-data {
  position: absolute;
  right: 10%;
  bottom: 163%;
  left: -50%;
  padding: .75cqi 1cqi;
  border-top: 1px solid rgba(226,236,236,.48);
  background: rgba(2,6,8,.72);
  font-size: clamp(8px, .78cqi, 11px);
  line-height: 1.28;
}

.system-data p { margin: .2cqi 0; }
.system-data b { color: #ef4e49; text-transform: uppercase; }

.card-audience {
  top: 59.6%;
  right: 7.3%;
  width: 25.8%;
  height: 25.6%;
  transform: rotate(.75deg);
  background-image: url("../assets/mothership-quarantine/sleeve-02.webp");
}

.card-audience > p:not(.card-code) {
  font-size: var(--section-copy-size);
}

.audience-symbols {
  position: absolute;
  right: 12%;
  bottom: 13%;
  left: 12%;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #222;
  padding-top: 1cqi;
  font-size: clamp(18px, 2.2cqi, 30px);
}

.contact-strip {
  position: absolute;
  z-index: 14;
  bottom: 2.5%;
  left: 0.6%;
  width: 49.4%;
  height: 15.4%;
  padding: 1.25% 1.45% 1.6%;
  transform: rotate(-1deg);
  color: #dfe7e5;
  background:
    linear-gradient(rgba(8,12,14,.88), rgba(1,4,5,.97)),
    url("../assets/mothership-quarantine/alien-xray-film.webp") center / cover;
  border: 1px solid rgba(205,220,220,.52);
  box-shadow: 0 1.2cqi 1.6cqi #000c;
}

.contact-strip > p {
  margin: 0 0 .65cqi;
  font-size: clamp(7px, .72cqi, 10px);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.film {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7cqi;
  height: 83%;
}

.film button {
  position: relative;
  padding: .7cqi .45cqi;
  border-color: rgba(227,236,233,.58);
}

.film button::before,
.film button::after {
  position: absolute;
  z-index: 2;
  right: 9%;
  left: 9%;
  height: .3cqi;
  background: repeating-linear-gradient(90deg, #dce4e1 0 7%, transparent 7% 13%);
  content: "";
}

.film button::before { top: .12cqi; }
.film button::after { bottom: .12cqi; }

.overtime-note {
  position: absolute;
  z-index: 16;
  right: 32.5%;
  bottom: 10.8%;
  width: 28%;
  margin: 0;
  padding: 2.1% 2.2%;
  transform: rotate(-5.2deg);
  color: #171b1d;
  background: url("../assets/mothership-quarantine/sleeve-04.webp") center 43% / 100% 470%;
  box-shadow: 0 1cqi 1.4cqi #000b;
  font-family: "Sofia Sans Extra Condensed", sans-serif;
  font-size: clamp(13px, 1.45cqi, 20px);
  font-weight: 600;
  line-height: 1.1;
}

.atlas-ticket {
  position: absolute;
  z-index: 18;
  right: 35.6%;
  bottom: -.3%;
  width: 23.5%;
  height: 11.7%;
  padding: 2.6% 2.3% 2%;
  transform: rotate(4.7deg);
  color: #14191b;
  background: url("../assets/mothership-quarantine/sleeve-03.webp") center 44% / 100% 520%;
  box-shadow: 0 1cqi 1.4cqi #000c;
  text-decoration: none;
}

.atlas-ticket span,
.atlas-ticket strong,
.atlas-ticket small { display: block; }

.atlas-ticket span {
  font-size: clamp(7px, .7cqi, 10px);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.atlas-ticket strong {
  margin: .35cqi 0 .55cqi;
  font-family: "Sofia Sans Extra Condensed", sans-serif;
  font-size: var(--section-heading-size);
  text-transform: uppercase;
}

.atlas-ticket small {
  font-size: var(--section-copy-size);
  line-height: 1.3;
}

.atlas-ticket > b {
  position: absolute;
  bottom: 9%;
  left: 8%;
  font-family: "Sofia Sans Extra Condensed", sans-serif;
  font-size: clamp(13px, 1.4cqi, 19px);
}

.hazard-warning {
  position: absolute;
  z-index: 19;
  right: -4.2%;
  bottom: -1.4%;
  width: 46%;
  aspect-ratio: 1.25;
  filter: drop-shadow(0 1.2cqi 1.5cqi #000c);
}

.hazard-warning > img:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hazard-warning > div {
  position: absolute;
  top: 28%;
  right: 13%;
  bottom: 18%;
  left: 15%;
}

.hazard-warning p {
  margin: 0;
  font-size: clamp(7px, .72cqi, 10px);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.hazard-warning h2 {
  margin: .35cqi 0 .75cqi;
  border-bottom: 1px solid #15191a;
  font-family: "Sofia Sans Extra Condensed", sans-serif;
  font-size: var(--section-heading-size);
  line-height: 1;
  text-transform: uppercase;
}

.hazard-warning strong {
  display: block;
  width: 64%;
  font-size: var(--section-copy-size);
  line-height: 1.35;
}

.hazard-warning span {
  position: absolute;
  bottom: 2%;
  left: 0;
  font-size: clamp(7px, .72cqi, 10px);
}

.hazard-warning .biohazard-mark {
  position: absolute;
  top: 48%;
  right: 15%;
  width: 21%;
  height: auto;
  opacity: .92;
}

.lightbox {
  width: min(920px, 94vw);
  max-height: 92vh;
  padding: 16px;
  border: 1px solid #c4d2d2;
  color: #e5eeee;
  background: #080c0e;
  box-shadow: 0 20px 80px #000;
}

.lightbox::backdrop {
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(5px);
}

.lightbox-close {
  float: right;
  width: 42px;
  height: 42px;
  border: 1px solid #e8eeee;
  color: #e8eeee;
  background: #0c1214;
  font-size: 24px;
  cursor: pointer;
}

.lightbox figure { margin: 0; }

.lightbox img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
  object-fit: contain;
}

.lightbox figcaption {
  padding: 12px 4px 0;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .quarantine-board {
    width: 100%;
    min-height: 0;
    aspect-ratio: auto;
    padding: 100px 14px 42px;
    background:
      linear-gradient(rgba(2,6,8,.28), rgba(2,6,8,.7)),
      url("../assets/mothership-quarantine/lab-tray-background.webp") top center / 100% auto repeat-y,
      #05090b;
  }

  .quarantine-board::before { position: fixed; }

  .vertical-brand {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    width: 72px;
    height: 380px;
  }

  .vertical-brand {
    width: 78px;
    height: 620px;
  }

  .vertical-brand-logo {
    right: -3px;
    width: 82px;
  }

  .protocol-placard {
    top: -10px;
    left: -52px;
    width: 440px;
    height: 124px;
  }

  .protocol-placard > div {
    top: 29px;
    left: 95px;
  }

  .protocol-placard h1 { font-size: 28px; }
  .protocol-placard p { font-size: 8px; }

  .specimen-film,
  .evidence-card,
  .petri-panel,
  .panic-assay,
  .contact-strip,
  .overtime-note,
  .atlas-ticket,
  .hazard-warning {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0 0 18px;
    transform: none;
  }

  .specimen-film {
    height: 760px;
  }

  .specimen-copy {
    top: 28px;
    left: 22px;
    width: calc(100% - 44px);
  }

  .specimen-copy dl > div { font-size: 9px; }

  .hook-copy {
    top: auto;
    bottom: 24px;
    left: 22px;
    width: 55%;
  }

  .world-copy {
    top: 165px;
    grid-template-columns: 1fr;
    right: 22px;
    bottom: auto;
    left: 22px;
    padding: 14px;
  }

  .world-copy p:not(.tags),
  .atlas-ticket small { font-size: 13px; }

  .evidence-card {
    min-height: 380px;
    padding: 54px 42px;
  }

  .evidence-card > p:not(.card-code),
  .petri-panel p:not(.card-code),
  .system-data,
  .hazard-warning strong {
    font-size: 13px;
  }

  .card-adventures { min-height: 560px; }
  .embedded-photos { height: 53%; }

  .petri-panel,
  .panic-assay {
    aspect-ratio: 1;
  }

  .petri-panel > div { top: 24%; }
  .panic-assay {
    margin-top: -24px;
    margin-bottom: 190px;
  }

  .session-scales {
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 16px;
    padding: 42px 22px 18px;
  }

  .session-scales::before {
    top: 14px;
    right: 22px;
    left: 22px;
  }

  .contact-strip {
    min-height: 320px;
    padding: 24px 16px;
  }

  .film {
    grid-template-columns: repeat(2, 1fr);
    height: 260px;
  }

  .overtime-note,
  .atlas-ticket {
    padding: 28px;
  }

  .atlas-ticket { min-height: 185px; }

  .hazard-warning {
    aspect-ratio: 1.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .embedded-photos img,
  .film img { transition: none; }
}