/* 04_experiment — raw image/type collision */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  overflow-x: hidden;
}

body {
  font-family: Tahoma, Verdana, sans-serif;
}

a { color: inherit; }

.ctl-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ctl-checkbox:focus-visible ~ .hud .hud-toggle {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ---------- HUD / persistent nav ---------- */

.hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: env(safe-area-inset-top, 0) 0.75rem 0.5rem;
  padding-top: calc(env(safe-area-inset-top, 0) + 0.5rem);
  background: #000;
  border-bottom: 2px solid #fff;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.hud-link {
  text-decoration: none;
  border: 1px solid #fff;
  padding: 0.3rem 0.6rem;
  background: #000;
}

.hud-link:hover,
.hud-link:focus-visible {
  background: #fff;
  color: #000;
}

.hud-num {
  font-weight: bold;
}

.hud-toggle {
  margin-left: auto;
  cursor: pointer;
  user-select: none;
}

.hud-toggle::before {
  content: "☐ ";
}

.ctl-checkbox:checked ~ .hud .hud-toggle::before {
  content: "☑ ";
}

/* ---------- panels ---------- */

main {
  padding-top: 2.6rem; /* keep panel content clear of fixed HUD */
}

.panel {
  position: relative;
  isolation: isolate;
  min-height: 844px;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 1rem 0 4.5rem;
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0));
}

.field-purple    { background: #5B2A86; }
.field-orange    { background: #FF6A13; }
.field-babyblue  { background: #A7D8F5; }
.field-acid      { background: #B6FF1A; }

.panel-num {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 5;
  font-family: Tahoma, Verdana, sans-serif;
  font-weight: bold;
  font-size: 1rem;
  color: #fff;
  background: #000;
  padding: 0.1rem 0.4rem;
}

.folder-tag {
  position: absolute;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0));
  left: 0.75rem;
  z-index: 5;
  margin: 0;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: #000;
  background: #fff;
  padding: 0.1rem 0.4rem;
}

.panel-next {
  position: absolute;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0));
  right: 0.75rem;
  z-index: 5;
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1;
  color: #000;
  background: #fff;
  padding: 0.25rem 0.5rem;
  border: 2px solid #000;
}

/* ---------- photo ---------- */

.lym-photo {
  margin: 0;
  position: absolute;
  inset: 0;
  z-index: var(--img-z, 2);
}

.lym-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-full .lym-photo img { object-position: center top; }
.img-full-bottom .lym-photo img { object-position: center bottom; }

.img-right .lym-photo { left: 30%; }
.img-right .lym-photo img { object-position: right center; }

.img-left .lym-photo { right: 40%; left: auto; }
.img-left .lym-photo img { object-position: left center; }

/* ---------- giant type collisions ---------- */

.lym-text {
  position: relative;
  z-index: var(--txt-z, 1);
  margin: 0;
  width: 100%;
  padding: 0 0.2rem;
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  line-height: 0.85;
  font-size: clamp(80px, 24vw, 240px);
  color: #000;
  mix-blend-mode: normal;
}

.field-purple .lym-text,
.field-orange .lym-text { color: #fff; }

.text-over    { --img-z: 2; --txt-z: 3; }
.text-under   { --img-z: 2; --txt-z: 1; }

/* global override: checkbox forces text in front on every panel */
.ctl-checkbox:checked ~ main .lym-text { --txt-z: 9; }

/* ---------- footer ---------- */

.site-footer {
  background: #000;
  color: #fff;
  text-align: center;
  font-size: 0.7rem;
  padding: 1rem 0.75rem calc(1rem + env(safe-area-inset-bottom, 0));
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ---------- desktop: scale imagery, not a grid ---------- */

@media (min-width: 900px) {
  .lym-text { font-size: clamp(140px, 16vw, 240px); }
  .img-right .lym-photo { left: 45%; }
  .img-left .lym-photo { right: 55%; }
}

/* Astra: native control strip, colored type, bounded collision planes. */
html{scroll-padding-top:50px}body{background:#5B2A86}.hud{background:#A7D8F5;color:#241048;border-bottom:1px solid #5B2A86;min-height:44px;gap:10px;letter-spacing:0;font:11px "Courier New",monospace}.hud-link{color:#0000ee;text-decoration:underline;border:0;padding:8px 0;background:transparent}.hud-link:hover,.hud-link:focus-visible{background:#B6FF1A;color:#0000ee}.hud-toggle{display:flex;gap:3px;align-items:center;font:9px Arial,sans-serif;white-space:nowrap}.hud-toggle::before{content:none}.hud-toggle input{margin:0;width:15px;height:15px;accent-color:#5B2A86}main{padding-top:44px}.panel{height:844px;height:100svh;min-height:580px}.img-left .lym-photo{left:0;right:40%}.lym-text{position:absolute;top:17%;left:-5%;width:122%;font-size:clamp(160px,46vw,260px);line-height:.82;overflow-wrap:anywhere;padding:0;pointer-events:none;color:#5B2A86}.field-purple .lym-text{color:#FF6A13}.field-babyblue .lym-text{color:#5B2A86}.field-acid .lym-text{color:#5B2A86}.folder-tag,.panel-num{background:#A7D8F5;color:#261044;font:10px "Courier New",monospace;max-width:calc(100% - 70px)}.panel-num{top:16px}.panel-next{background:#B6FF1A;color:#0000ee;border:1px solid #5B2A86;min-width:32px;text-align:center}.site-footer{background:#A7D8F5;color:#261044}body:has(#text-front:checked) main .lym-text{--txt-z:4}@media(min-width:900px){.lym-text{font-size:clamp(200px,20vw,360px);width:115%}.img-left .lym-photo{left:0;right:55%}}