/* Sunday-page comic reader. No webfonts, no CDN. Captions live in HTML. */

.issue-head{ text-align:center; margin:0 0 2rem }
.issue-head .week{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--coral);
  margin:0 0 .7rem;
}

.sunday-wrap{
  max-width:780px;
  margin:0 auto 2.75rem;
}

.sunday-meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  margin:0 0 .45rem;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
}
.sunday-meta a{ color:var(--dim) }

.sunday{
  --gutter:7px;
  display:grid;
  gap:var(--gutter);
  padding:var(--gutter);
  background:#120e0b;
  border:3px solid #0a0908;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  min-height:min(92vw, 980px);
}

.sunday .cell{
  margin:0;
  position:relative;
  overflow:hidden;
  min-height:0;
  background:#c4b49a;
}
.sunday .cell img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.sunday figcaption{
  position:absolute;
  left:7px;
  right:7px;
  bottom:7px;
  background:#f3e4bc;
  color:#1a120c;
  border:2px solid #1a120c;
  padding:.42rem .58rem .48rem;
  font-size:.8rem;
  line-height:1.32;
  box-shadow:2px 2px 0 #1a120c;
}
.sunday figcaption b{
  display:block;
  font-size:.88rem;
  margin-bottom:.12rem;
}

.p1{ grid-area:p1 }
.p2{ grid-area:p2 }
.p3{ grid-area:p3 }
.p4{ grid-area:p4 }

/* Four panels around a larger centre. */
.sunday.around{
  grid-template-columns:1fr 1.35fr 1fr;
  grid-template-rows:1.15fr 1.15fr .82fr;
  grid-template-areas:
    "p1 p3 p2"
    "p1 p3 p2"
    "p4 p4 p4";
}

/* Centre taller, flanks uneven. */
.sunday.inset{
  grid-template-columns:.88fr 1.55fr .95fr;
  grid-template-rows:.9fr 1.15fr .9fr;
  grid-template-areas:
    "p1 p3 p2"
    "p4 p3 p2"
    "p4 p3 p2";
}

/* Big left centre, three stacked right. */
.sunday.hero-left{
  grid-template-columns:1.55fr 1fr;
  grid-template-rows:1fr 1fr 1fr;
  grid-template-areas:
    "p3 p1"
    "p3 p2"
    "p3 p4";
}

/* Three across the top, wide centre along the bottom. */
.sunday.hero-bottom{
  grid-template-columns:1fr 1.3fr 1fr;
  grid-template-rows:.9fr 1.5fr;
  grid-template-areas:
    "p1 p2 p3"
    "p4 p4 p4";
}

/* Wide centre across the top, two then a closer. */
.sunday.quad{
  grid-template-columns:1fr 1fr;
  grid-template-rows:1.4fr .85fr .85fr;
  grid-template-areas:
    "p3 p3"
    "p1 p2"
    "p4 p4";
}

.issue-nav{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  max-width:780px;
  margin:0 auto 3rem;
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.week-list{ display:grid; gap:1rem; margin-top:2rem }
.week-row{
  display:grid;
  grid-template-columns:7.5rem 1fr auto;
  gap:1rem;
  align-items:center;
  padding:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
}
.week-row img{ width:7.5rem; height:5.2rem; object-fit:cover; display:block }
.week-row .week-body{ padding:.2rem .2rem .2rem 0 }
.week-row .kicker{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--coral);
}
.week-row h2{ margin:.15rem 0 .2rem; font-size:1.15rem; color:var(--text) }
.week-row p{ margin:0; color:var(--dim); font-size:.9rem }
.week-row .go{ padding-right:1.1rem; color:var(--amber); font-family:var(--mono); font-size:.75rem }

@media (max-width:640px){
  .sunday,
  .sunday.around,
  .sunday.inset,
  .sunday.hero-left,
  .sunday.hero-bottom,
  .sunday.quad{
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .sunday .cell{
    grid-area:auto;
    min-height:0;
  }
  .sunday .cell img{
    height:240px;
    object-fit:cover;
  }
  .sunday .p3 img{ height:300px }
  .week-row{ grid-template-columns:5.4rem 1fr; }
  .week-row img{ width:5.4rem; height:4.2rem }
  .week-row .go{ display:none }
}