* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 30px 16px 60px;
  background: #100d0a radial-gradient(ellipse at 50% -10%, #2a231b, #100d0a 65%);
  color: #e3d8c4;
  font: 18px/1.6 'IM Fell English', Georgia, serif;
}

main { max-width: 620px; margin: 0 auto; position: relative; z-index: 1; }

h1 {
  font-family: 'Cinzel', serif;
  font-size: clamp(26px, 6vw, 40px);
  text-align: center;
  color: #ffb000;
  text-shadow: 0 2px 0 #000, 0 0 24px rgba(255, 176, 0, .3);
  margin: 0 0 24px;
}

/* gate */
.gate { padding-top: 8vh; }
.gate form { margin-top: 20px; }

/* gallery */
main.wide { max-width: 1100px; }
.count { text-align: center; font: 19px 'VT323', monospace; color: #9d907c; margin: 0 0 22px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.tile {
  padding: 7px 7px 20px;
  background: #fbf7ec;
  border: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
  cursor: pointer;
  transition: transform .15s ease;
}
.tile:hover { transform: translateY(-3px) scale(1.02); }
.tile img {
  display: block; width: 100%; height: 175px;
  object-fit: cover; object-position: 50% 40%;
}

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 4, .93);
}
.lb[hidden] { display: none; }
.lb-img {
  max-width: 90vw; max-height: 86vh;
  border: 8px solid #fbf7ec;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .8);
}
.lb button {
  position: absolute;
  background: none; border: 0; box-shadow: none;
  color: #d7cab2; cursor: pointer; line-height: 1;
  padding: 10px 18px;
}
.lb button:hover { background: none; color: #ffb000; }
.lb-close { top: 10px; right: 14px; font-size: 42px; }
.lb-prev  { left: 6px;  font-size: 60px; }
.lb-next  { right: 6px; font-size: 60px; }
.lb-count {
  position: absolute; bottom: 14px; left: 0; right: 0;
  text-align: center; font: 19px 'VT323', monospace; color: #9d907c; margin: 0;
}
.lb-note {
  position: absolute; bottom: 14px; left: 16px;
  font: 19px 'VT323', monospace; color: #ffb000; margin: 0;
}
.lb-note[hidden] { display: none; }

.kicker {
  text-align: center;
  font: 20px 'VT323', monospace; letter-spacing: .08em;
  color: #ff981f;
  margin: 0 0 6px;
}

/* intro lists */
.steps { margin: 0; padding-left: 22px; font-size: 19px; line-height: 1.7; }
.steps li { margin-bottom: 6px; }
.rules-head { margin-top: 26px !important; }

.cta { text-align: center; margin: 0 0 24px; }

/* progress */
.bar {
  display: flex; align-items: center; gap: 12px;
  font: 20px 'VT323', monospace; color: #ff981f;
  margin-bottom: 18px;
}
.bar-track {
  flex: 1; height: 14px;
  background: #2b2620; border: 2px solid #151210;
  box-shadow: inset 0 0 0 1px #5d5447;
}
.bar-track span {
  display: block; height: 100%;
  background: linear-gradient(#7ee87e, #2f9c2f);
}

.intro { font: 19px/1.5 'VT323', monospace; color: #c9bda6; margin: 0 0 18px; }

/* parchment */
.scroll {
  position: relative;
  background: #efe0bb radial-gradient(ellipse at 80% 90%, rgba(120, 90, 40, .18), transparent 60%);
  color: #3b2f1c;
  border: 1px solid #b7a173;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  padding: 30px 28px;
  margin-bottom: 22px;
}
.scroll::before, .scroll::after {
  content: ""; position: absolute; left: -6px; right: -6px; height: 13px;
  background: linear-gradient(#d8c599, #bda87d);
  border: 1px solid #9c8757;
}
.scroll::before { top: -8px; }
.scroll::after  { bottom: -8px; }

.scroll h2 {
  font-family: 'Cinzel', serif;
  font-size: clamp(20px, 4.5vw, 26px);
  color: #4a2f16;
  border-bottom: 1px solid #c9b385;
  padding-bottom: 10px;
  margin: 0 0 18px;
}
.text { font-size: 20px; line-height: 1.8; margin: 0; }
.from { font-family: 'Cinzel', serif; text-align: right; color: #4a2f16; margin: 20px 0 0; }

/* photos */
.photo {
  display: block; max-width: 100%; height: auto;
  margin: 22px auto 0;
  border: 6px solid #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
.photo-empty {
  margin: 22px 0 0; padding: 26px 16px;
  border: 2px dashed #a08a5c;
  background: rgba(0, 0, 0, .05);
  font: 17px 'VT323', monospace; color: #7a5c2b; text-align: center;
}

/* polaroids scattered down the margins */
.sides { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

.side {
  position: absolute;
  width: 250px;
  margin: 0;
  padding: 11px 11px 40px;
  background: #fbf7ec;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .6);
  opacity: 0;
  animation: rise 1s ease forwards;
}
/* fixed portrait box - most of the photos are phone snaps.
   swapping never makes the frame jump about. */
.side img {
  display: block; width: 100%; height: 260px;
  object-fit: cover;
  object-position: 50% 40%;   /* bias up a little, that's where faces are */
  transition: opacity .4s ease;
}
.side-empty {
  display: flex; align-items: center; justify-content: center;
  height: 260px; padding: 8px;
  background: #e6dcc6;
  border: 2px dashed #b0996a;
  color: #7a5c2b; font: 16px/1.4 'VT323', monospace; text-align: center;
}

.side:nth-child(odd)  { right: calc(50% + 336px); }
.side:nth-child(even) { left:  calc(50% + 336px); }

.side:nth-child(1) { --r: -5deg; top:  7%; animation-delay: .2s; }
.side:nth-child(2) { --r:  4deg; top: 12%; animation-delay: .4s; }
.side:nth-child(3) { --r:  3deg; top: 52%; animation-delay: .6s; }
.side:nth-child(4) { --r: -4deg; top: 57%; animation-delay: .8s; }

/* short screen - shrink them so the top and bottom pair don't collide */
@media (max-height: 820px) {
  .side img, .side-empty { height: 200px; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px) rotate(var(--r, 0deg)); }
  to   { opacity: 1; transform: translateY(0)    rotate(var(--r, 0deg)); }
}

/* not enough room in the margins - lay them out under the clue instead */
@media (max-width: 1210px) {
  .sides {
    position: static;
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
    margin: 0 0 24px;
  }
  .side {
    position: static;
    width: calc(50% - 6px);
    --r: 0deg;
    padding: 8px 8px 26px;
  }
  .side img, .side-empty { height: 190px; }
  .side-empty { font-size: 14px; }
}

/* answer */
form { display: flex; gap: 10px; flex-wrap: wrap; }
input {
  flex: 1 1 200px;
  font: 24px 'VT323', monospace; text-transform: uppercase; letter-spacing: .05em;
  color: #ffb000; background: #221d18;
  border: 2px solid #151210; box-shadow: inset 0 0 0 2px #5d5447;
  padding: 9px 12px; outline: none;
}
input::placeholder { color: #6d6252; text-transform: none; letter-spacing: 0; }
input:focus { box-shadow: inset 0 0 0 2px #ffb000; }

button, .btn {
  display: inline-block;
  font: 24px 'VT323', monospace; letter-spacing: .05em; color: #ff981f;
  text-decoration: none;
  background: linear-gradient(#4b4133, #362e24);
  border: 2px solid #151210; box-shadow: inset 0 0 0 2px #5d5447;
  padding: 9px 24px; cursor: pointer;
}
button:hover, .btn:hover { background: linear-gradient(#5b5040, #423828); color: #ffb000; }
button:active, .btn:active { transform: translateY(1px); }
.btn { font-size: 27px; padding: 12px 36px; }

.oops { font: 21px 'VT323', monospace; color: #ff4d4d; margin: 12px 0 0; }

.shake { animation: shake .35s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

.foot { text-align: center; font: 17px 'VT323', monospace; margin-top: 30px; }
.foot a { color: #6d6252; }
.foot a:hover { color: #ff981f; }