/* still_messengers — MASTER SEQUENCE TEMPLATE
   Reusable sequence-page structure.
   Do not alter the established production values unless a deliberate
   site-wide change is made and tested separately.
*/

:root{
  --paper:#FAF9F6;
  --ink:#1a1a1a;
  --rule:rgba(26,26,26,.18);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
}

a{color:inherit;text-decoration:none}

.header{
  position:sticky;
  top:0;
  z-index:10;
  height:68px;
  margin:0;
  padding:0 35px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--rule);
  background:var(--paper);
}

.nav{
  display:flex;
  gap:30px;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.08em;
}

.site-identity{
  display:flex;
  align-items:center;
  gap:20px;
  font-size:12px;
  letter-spacing:.03em;
}

.site-home{
  display:flex;
  align-items:center;
  gap:8px;
}

.site-home img{
  width:13px;
  height:13px;
  object-fit:contain;
  display:block;
}

.site-home span{color:var(--ink)}

.sequence-identity{
  font-style:normal;
  color:var(--ink);
}

.sequence-page{
  padding:68px 7vw 12vh;
}

.sequence-heading{
  max-width:1220px;
  margin:0 auto 105px;
}

.sequence-number{
  font-size:12px;
  letter-spacing:.08em;
  margin-bottom:13px;
}

.sequence-heading h1{
  font-size:31px;
  font-weight:400;
  margin:0;
  letter-spacing:.01em;
}

.sequence{
  max-width:1220px;
  margin:0 auto;
}

figure{
  margin:0 0 18vh;
}

img{
  display:block;
  width:100%;
  height:auto;
}

.image-meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-top:10px;
  font-size:10px;
  letter-spacing:.045em;
  line-height:1.4;
}

.image-meta em{
  opacity:.75;
  font-style:italic;
}

.sequence-end{
  margin:2vh auto 0;
  text-align:center;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.footer{
  margin:0;
  padding:25px 35px 35px;
  border-top:1px solid var(--rule);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:baseline;
  gap:2em;
  font-size:10px;
  letter-spacing:.04em;
}

.footer span:nth-child(2){text-align:center}
.footer span:last-child{text-align:right}

.lightbox{
  position:fixed;
  inset:0;
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4vh 4vw;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:1000;
}

.lightbox.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.lightbox img{
  max-width:92vw;
  max-height:92vh;
  width:auto;
  height:auto;
  object-fit:contain;
}

.lightbox-close{
  position:absolute;
  top:18px;
  right:24px;
  background:none;
  border:0;
  color:var(--ink);
  font-size:30px;
  font-weight:300;
  line-height:1;
  cursor:pointer;
  padding:4px 8px;
}

body.lightbox-open{overflow:hidden}
.sequence figure img{cursor:zoom-in}

@media(max-width:700px){
  .header{
    height:62px;
    margin:0;
    padding:0 6vw;
  }

  .nav{
    gap:16px;
    font-size:10px;
  }

  .site-identity{
    gap:10px;
    font-size:10px;
  }

  .site-home{
    gap:6px;
  }

  .site-home img{
    width:13px;
    height:13px;
  }

  .sequence-identity{
    font-size:10px;
  }

  .sequence-page{
    padding:70px 7vw 12vh;
  }

  .sequence-heading{
    margin-bottom:75px;
  }

  .sequence-heading h1{
    font-size:26px;
  }

  figure{
    margin:0 0 16vh;
  }

  .image-meta{
    font-size:10px;
  }

  .sequence-end{
    margin-top:1vh;
  }

  .footer{
    margin:0;
    padding-left:6vw;
    padding-right:6vw;
    grid-template-columns:1fr auto 1fr;
    gap:1em;
    font-size:10px;
  }

  .footer span{white-space:nowrap}
}

/* Sequence 08 working image vocabulary: XL / Large / Medium / Small.
   Sizes are intentionally varied; spacing is relational rather than uniform. */
.sequence figure{margin-left:auto;margin-right:auto;}
.sequence .size-xl{width:70%;}
.sequence .size-large{width:70%;}
.sequence .size-medium{width:56%;}
.sequence .size-small{width:38%;}
.sequence .space-s{margin-bottom:12vh;}
.sequence .space-m{margin-bottom:18vh;}
.sequence .space-l{margin-bottom:26vh;}
@media(max-width:700px){
  .sequence .size-xl,.sequence .size-large,.sequence .size-medium,.sequence .size-small{width:100%;}
  .sequence .space-s{margin-bottom:10vh;}
  .sequence .space-m{margin-bottom:16vh;}
  .sequence .space-l{margin-bottom:22vh;}
}