body { margin: 0; background: #061124; }
#hj26 {
  --night:#061124; --blue:#11274a; --gold:#efcf8b; --cream:#fff3dc;
  --line:#d8ae655c; --serif:"Playfair Display",Georgia,serif;
  color:var(--cream); background:var(--night);
  font:400 16px/1.72 "Lora",Georgia,serif;
  position:relative; isolation:isolate;
}
#hj26 [hidden]{display:none!important}
#hj26 h1,#hj26 h2,#hj26 h3,#hj26 p,#hj26 figure{margin:0}
#hj26 h1,#hj26 h2,#hj26 h3{font-family:var(--serif);line-height:1.04;color:var(--gold);font-weight:600}
#hj26 .hj-kicker{font-family:Arial,sans-serif;color:var(--gold);font-size:.72rem;letter-spacing:.19em;font-weight:700;text-transform:uppercase}
#hj26 .hj-intro {
  min-height:100vh; min-height:100svh; box-sizing:border-box;
  display:grid; place-content:center; justify-items:center; gap:clamp(19px,4vw,48px);
  padding:32px 18px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 52%,#294978 0%,#102647 47%,#061124 82%);
  transition:opacity .48s ease;
}
#hj26 .hj-title{font-size:clamp(1.65rem,7.6vw,6.1rem);letter-spacing:.03em;text-align:center;transition:opacity .32s}
#hj26 .hj-envelope {
  display:block; position:relative; width:min(83vw,640px); aspect-ratio:1.62;
  perspective:1200px; isolation:isolate;
  filter:drop-shadow(0 24px 28px #020610b0);
}
#hj26 .hj-back,#hj26 .hj-pocket,#hj26 .hj-flap{position:absolute;inset:0;border-radius:8px}
#hj26 .hj-back{background:linear-gradient(160deg,#152d55,#08132b);border:1px solid var(--line)}
#hj26 .hj-flap{
  bottom:auto;height:62%;z-index:4; transform-origin:top center;
  transition:transform .74s cubic-bezier(.55,.05,.21,1),z-index 0s .37s;
  clip-path:polygon(0 0,100% 0,50% 100%);
  background:linear-gradient(160deg,#46628d,#203960 60%,#9d7944);
}
#hj26 .hj-pocket{z-index:3;overflow:hidden;pointer-events:none}
#hj26 .hj-pocket::before,#hj26 .hj-pocket::after{
  content:"";position:absolute;inset:0
}
#hj26 .hj-pocket::before{
  background:linear-gradient(115deg,#203d66,#172f56 54%,#2b4670);
  clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);
}
#hj26 .hj-pocket::after{
  background:linear-gradient(176deg,#516991,#1d365e 56%,#11274a);
  clip-path:polygon(0 100%,50% 51%,100% 100%);
}
#hj26 .hj-letter {
  position:absolute;z-index:2;inset:7% 5% 9%;box-sizing:border-box;
  display:grid;place-content:center;gap:clamp(4px,1.15vw,12px);text-align:center;
  padding:5%;color:#14284a;background:linear-gradient(135deg,#fff6e2,#e6c887);
  border:4px double #a77d3b;border-radius:3px;
  box-shadow:0 3px 22px #0007;
  font-size:clamp(.62rem,2.3vw,1.05rem);line-height:1.23;
  transition:transform .95s .54s cubic-bezier(.19,.67,.26,1);
}
#hj26 .hj-letter strong{font:700 clamp(1.05rem,4.7vw,3.1rem)/.95 var(--serif)}
#hj26 .hj-letter small{font-size:.9em;letter-spacing:.09em;font-weight:700}
#hj26 .hj-seal{
  position:absolute;z-index:5;top:57%;left:50%;width:30%;aspect-ratio:1;
  transform:translate(-50%,-50%);filter:drop-shadow(0 9px 9px #0008);
  transition:opacity .3s,transform .32s;
}
#hj26 .hj-seal img{display:block;width:100%;height:100%;clip-path:ellipse(46.9% 45.7% at 49.8% 48.4%)}
#hj26 .hj-hit{position:absolute;z-index:6;inset:0;border:0;padding:0;background:transparent;cursor:pointer;border-radius:8px}
#hj26 .hj-hit:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
#hj26 .hj-hint{transition:opacity .32s}
#hj26 .hj-opening .hj-title,#hj26 .hj-opening .hj-seal,#hj26 .hj-opening .hj-hint{opacity:0}
#hj26 .hj-opening .hj-flap{transform:rotateX(180deg);z-index:1}
#hj26 .hj-opening .hj-letter{transform:translateY(-62%)}
#hj26 .hj-opening .hj-hit{pointer-events:none}
#hj26 .hj-leaving{opacity:0}
#hj26 .hj-main{background:radial-gradient(ellipse at top,#172f55,#061124 65%);padding:clamp(16px,4vw,55px)}
#hj26 .hj-paper{max-width:1150px;margin:auto;border:1px solid var(--line)}
#hj26 .hj-section{box-sizing:border-box;padding:clamp(32px,6vw,80px) clamp(16px,5vw,64px);border-bottom:1px solid var(--line)}
#hj26 .hj-section:last-child{border-bottom:0}
#hj26 .hj-section h2{font-size:clamp(2.15rem,5vw,4.7rem);text-align:center;margin-bottom:.48em}
#hj26 .hj-section h2:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
#hj26 .hj-rule{width:62px;height:1px;background:var(--gold);margin:0 auto 26px}
#hj26 .hj-copy p{max-width:74ch;margin-inline:auto}
#hj26 .hj-copy p + p{margin-top:.85em}
#hj26 .hj-memory{margin:0;text-align:center}
#hj26 .hj-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,3vw,28px)}
#hj26 .hj-gallery img{display:block;width:100%;height:auto;box-sizing:border-box;border:1px solid var(--line)}
#hj26 .hj-memory figcaption{margin-top:20px;color:var(--gold);font-family:var(--serif);font-size:clamp(1.2rem,3vw,2rem)}
#hj26 .hj-event{text-align:center}
#hj26 .hj-details{max-width:840px;margin-inline:auto;border:1px solid var(--line)}
#hj26 .hj-details > *{padding:clamp(18px,4vw,36px) clamp(12px,4vw,32px)}
#hj26 .hj-details > * + *{border-top:1px solid var(--line)}
#hj26 .hj-date,#hj26 .hj-time{color:var(--gold);font-family:var(--serif);font-weight:600;line-height:1.15}
#hj26 .hj-date{font-size:clamp(1.6rem,4vw,2.8rem)}
#hj26 .hj-time{font-size:clamp(2.5rem,7vw,5rem)}
#hj26 .hj-venue h2{font-size:clamp(1.35rem,4vw,2.7rem)}
#hj26 .hj-contact{margin-top:24px}
#hj26 .hj-contact a{color:var(--cream);text-underline-offset:4px}
@media(max-width:600px){
  #hj26 .hj-gallery{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  #hj26 .hj-intro,#hj26 .hj-letter,#hj26 .hj-flap,#hj26 .hj-title,#hj26 .hj-seal,#hj26 .hj-hint{transition:none}
  #hj26 .hj-intro.hj-soft-opening{opacity:0;transition:opacity .24s ease}
}

@media (max-width: 680px), (hover: none) and (pointer: coarse) {
  #hj26 .hj-hit {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 680px) and (prefers-reduced-motion: no-preference),
       (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  /* The flap flips in the plane of the screen on touch devices. */
  #hj26 .hj-opening .hj-flap {
    transform: scaleY(-1);
  }

  #hj26 .hj-intro {
    overflow: visible;
  }

  #hj26 .hj-envelope {
    width: min(83vw, 640px, 105svh);
    filter: none;
    perspective: none;
  }

  #hj26 .hj-back {
    box-shadow: 0 24px 28px #020610b0;
  }

  #hj26 .hj-opening .hj-letter {
    transform: translateY(-60%);
  }
}

#hj26 .hj-corners {
  position: absolute;
  z-index: 1;
  inset: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) auto max(16px, env(safe-area-inset-left));
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--gold);
  font-size: .875rem;
  line-height: 1.4;
  pointer-events: none;
}

#hj26 .hj-main {
  padding-top: max(44px, 4vw);
}