:root{
  --paper:#efe7d2;
  --ink:#11110f;
  --pink:#ff2b9a;
  --orange:#ff5b24;
  --muted:#6d675b;
}

*{box-sizing:border-box}
html{background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif}
body{margin:0;background:var(--paper);overflow-x:hidden}

.assembly{height:520vh;position:relative}
.stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:var(--paper);
  isolation:isolate;
}
.paper-grain{
  position:absolute; inset:0; pointer-events:none; opacity:.18; mix-blend-mode:multiply;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 60%, rgba(0,0,0,.05) 0 1px, transparent 1px);
  background-size:11px 13px,17px 19px;
  z-index:40;
}
.fragment{position:absolute;will-change:transform,opacity,filter}
.type{font-weight:900;line-height:.82;letter-spacing:-.065em}
.huge{font-size:clamp(7rem,22vw,21rem)}
.plus{font-size:clamp(3rem,8vw,8rem);font-weight:900}
.marry{font-size:clamp(2.4rem,7vw,6rem);line-height:.83}
.date{font-size:clamp(3rem,9vw,8rem);font-weight:900;letter-spacing:-.055em}
.venue{font-size:clamp(2rem,6vw,5.2rem);line-height:.86;font-weight:900}
.venue span{font-size:.28em;letter-spacing:.24em;font-weight:700}
.micro{font-size:clamp(.7rem,1.2vw,1rem);font-weight:800;letter-spacing:.16em;line-height:1.25}
.registration{font-size:2rem;font-weight:300}
.rule{height:6px;background:var(--ink);transform-origin:left center}
.ink{mix-blend-mode:multiply}
.block{width:24vw;height:18vh}
.pink{background:var(--pink)}
.orange{background:var(--orange)}

.photo{
  background:#d7d0bf;
  overflow:hidden;
  border:0;
  mix-blend-mode:multiply;
}
.photo-a{width:min(34vw,480px);height:min(43vw,620px)}
.photo-b{width:min(26vw,360px);aspect-ratio:1}
.halftone-face,.halftone-disc{
  width:100%;height:100%;display:grid;place-items:center;
  font-weight:900;color:var(--ink);
  background:
    radial-gradient(circle, var(--ink) 0 1.2px, transparent 1.3px);
  background-size:6px 6px;
}
.halftone-face{font-size:clamp(5rem,16vw,15rem);color:var(--pink)}
.halftone-disc{font-size:clamp(8rem,18vw,16rem);color:var(--orange)}

.status{
  position:absolute;left:2.2vw;bottom:1.8vh;
  font-size:.68rem;letter-spacing:.16em;color:var(--muted);z-index:50;
}
.resolved-spacer{height:28vh}

.rsvp{
  min-height:100svh;
  display:grid;place-items:center;
  padding:8vh 5vw 14vh;
  background:var(--ink);
  color:var(--paper);
}
.rsvp-inner{width:min(860px,100%)}
.eyebrow{letter-spacing:.2em;font-size:.75rem}
.rsvp h1{
  margin:.15em 0 .5em;
  font-size:clamp(4rem,12vw,9rem);
  line-height:.78;letter-spacing:-.07em;
}
form{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
label{display:grid;gap:.45rem;font-size:.72rem;letter-spacing:.15em}
label:last-of-type{grid-column:1/-1}
input,textarea{
  width:100%;border:2px solid var(--paper);background:transparent;color:var(--paper);
  padding:.9rem 1rem;font:inherit;font-size:1rem;border-radius:0;outline:none;
}
input:focus,textarea:focus{background:rgba(255,255,255,.06)}
.decision{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.6rem}
button{
  border:0;border-radius:0;padding:1rem 1.2rem;font:inherit;font-weight:900;
  cursor:pointer;
}
.decision button{font-size:clamp(2rem,6vw,4rem);min-height:110px}
.yes{background:var(--pink);color:var(--ink)}
.no{background:var(--orange);color:var(--ink);position:relative}
.plain-decline{
  grid-column:1/-1;background:transparent;color:#bdb4a2;
  text-decoration:underline;font-weight:500;padding:.4rem 0;text-align:left;
}
.confirmation{
  margin-top:2rem;
  font-size:clamp(2rem,6vw,4rem);
  font-weight:900;line-height:.9;
}

@media (max-width:700px){
  .assembly{height:560vh}
  .block{width:46vw;height:14vh}
  .photo-a{width:56vw;height:66vw}
  .photo-b{width:42vw}
  form{grid-template-columns:1fr}
  label:last-of-type,.decision,.plain-decline{grid-column:auto}
  .decision{grid-template-columns:1fr 1fr}
  .status{font-size:.56rem}
}

@media (prefers-reduced-motion: reduce){
  .assembly{height:100svh}
  .fragment{transition:none!important}
}


/* V3: East Berlin 1986 paper artifact */
.ddr{
  min-height:100svh;
  background:#5d5c55;
  padding:4vh 2vw 8vh;
  color:#171713;
  font-family:"Courier New",Courier,monospace;
}
.ddr-document{
  position:relative;
  width:min(900px,96vw);
  min-height:94svh;
  margin:0 auto;
  padding:clamp(28px,5vw,64px);
  overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.02)),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(77,96,102,.11) 31px 32px),
    repeating-linear-gradient(90deg,transparent 0 31px,rgba(77,96,102,.08) 31px 32px),
    #e7e0ca;
  box-shadow:0 20px 70px rgba(0,0,0,.45);
}
.ddr-aged-paper{
  position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background:
    radial-gradient(circle at 3% 12%,rgba(94,64,32,.35),transparent 12%),
    radial-gradient(circle at 98% 75%,rgba(94,64,32,.20),transparent 15%),
    radial-gradient(circle at 45% 2%,rgba(0,0,0,.10),transparent 8%),
    repeating-linear-gradient(7deg,rgba(0,0,0,.025) 0 1px,transparent 1px 5px);
}
.ddr-letterhead{position:relative;display:flex;justify-content:space-between;gap:2rem;border-bottom:2px solid #171713;padding-bottom:18px}
.ddr-ministry{font-family:Georgia,serif;font-weight:700;font-size:clamp(.65rem,1.5vw,.9rem);line-height:1.35;text-align:center}
.ddr-file{font-size:.7rem;line-height:1.5;text-align:right}
.ddr-document h2{position:relative;text-align:center;font-family:Georgia,serif;font-size:clamp(2rem,5vw,3.6rem);margin:34px 0 4px}
.ddr-subtitle{text-align:center;font-size:.72rem;letter-spacing:.08em;margin:0 0 30px}
.ddr-fields{position:relative;border:2px solid #171713;padding:10px 14px;margin-bottom:28px}
.ddr-fields div{display:grid;grid-template-columns:160px 1fr;border-bottom:1px solid #171713;padding:8px 0;gap:10px}
.ddr-fields div:last-child{border-bottom:0}
.ddr-fields span{font-family:Georgia,serif;font-size:.82rem}
.ddr-fields b{font-size:.8rem}
.ddr-question,.ddr-processing,.ddr-result{position:relative;border:2px solid #171713;padding:18px;margin-top:18px;background:rgba(239,233,213,.55)}
.ddr-question>p,.ddr-processing>p{font-family:Georgia,serif;font-weight:700;margin:0 0 14px}
#ddrOptions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ddr-option{font-family:"Courier New",monospace;text-align:left;border:1px solid #171713;background:transparent;color:#171713;padding:10px 12px;font-weight:700}
.ddr-option:hover,.ddr-option:focus{background:#171713;color:#e7e0ca}
.processing-line{padding:6px 0;border-bottom:1px dotted #555}
.processing-line::before{content:"✓ ";font-weight:900}
.ddr-result{text-align:center}
.stamp{display:inline-block;margin:10px auto 24px;border:6px double #8b241c;color:#8b241c;padding:.12em .28em;font-weight:900;font-size:clamp(2.8rem,8vw,6rem);letter-spacing:.04em;transform:rotate(-8deg);mix-blend-mode:multiply}
.ddr-result h3{font-family:Georgia,serif;font-size:clamp(2rem,5vw,3.5rem);margin:0}
.ddr-final{font-weight:900;border-top:2px solid #171713;padding-top:16px;margin-top:24px}
.ddr-result button{background:#171713;color:#e7e0ca;font-family:"Courier New",monospace;margin-top:10px}
.ddr-fineprint{position:relative;margin-top:30px;border-top:1px solid #171713;padding-top:12px;font-size:.56rem;line-height:1.35}
.ddr-photo-strip{position:absolute;inset:0;pointer-events:none;opacity:.12;mix-blend-mode:multiply}
.ddr-photo{position:absolute;filter:grayscale(1) contrast(1.5);background:
  repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 7px),
  repeating-linear-gradient(0deg,#777 0 1px,#ddd 1px 5px);
}
.ddr-photo-a{width:260px;height:150px;right:-50px;top:210px;transform:rotate(-5deg)}
.ddr-photo-b{width:190px;height:120px;left:-45px;bottom:150px;transform:rotate(4deg)}
@media(max-width:700px){
  .ddr{padding:0}
  .ddr-document{width:100%;min-height:100svh;padding:26px 18px}
  .ddr-fields div{grid-template-columns:1fr}
  #ddrOptions{grid-template-columns:1fr}
  .ddr-file{display:none}
}


/* V4 poster refinements */
.amp{
  font-size:clamp(8rem,26vw,24rem);
  font-weight:900;
  line-height:.7;
  letter-spacing:-.08em;
}
.talking-heads{
  font-size:clamp(1.8rem,5.8vw,5rem);
  font-weight:900;
  line-height:.78;
  letter-spacing:-.05em;
  text-transform:uppercase;
  padding:.2em .25em .12em;
  background:var(--pink);
  color:var(--ink);
  mix-blend-mode:multiply;
}
.talking-heads span{
  font-size:.28em;
  letter-spacing:.26em;
  font-weight:800;
}
.at-the{
  font-size:clamp(.85rem,2vw,1.4rem);
  font-weight:900;
  letter-spacing:.18em;
}
.engagement{
  font-size:clamp(1rem,2.8vw,2.2rem);
  font-weight:900;
  letter-spacing:.12em;
  background:var(--orange);
  padding:.22em .45em;
  mix-blend-mode:multiply;
}
.stray-plus{
  font-size:clamp(2rem,7vw,6rem);
  font-weight:900;
  line-height:1;
}
.gloryhole{
  width:min(24vw,300px);
  aspect-ratio:1.2;
  background:#cfc8b5;
  border:2px solid var(--ink);
  overflow:hidden;
  mix-blend-mode:multiply;
}
.gloryhole .hole{
  position:absolute;
  width:34%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--ink);
  left:34%;top:33%;
}
.gloryhole .hotdog{
  position:absolute;
  width:15%;
  height:64%;
  border-radius:999px;
  background:var(--orange);
  left:46%;top:8%;
  transform:rotate(14deg);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.15);
}
.duct-tape{
  position:absolute;
  width:68%;
  height:16%;
  background:#aaa69d;
  opacity:.72;
}
.tape-a{left:-5%;top:12%;transform:rotate(-8deg)}
.tape-b{right:-6%;bottom:12%;transform:rotate(11deg)}
.status{
  letter-spacing:.12em;
  text-transform:uppercase;
}
.ddr-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.actual-no{background:#e7e0ca!important;color:#171713!important;border:2px solid #171713!important}
.actual-no:hover,.actual-no:focus{background:#171713!important;color:#e7e0ca!important}
.ddr-document h2{font-family:"Courier New",Courier,monospace;text-transform:uppercase;letter-spacing:-.03em}
.ddr-subtitle{font-family:Georgia,serif}


/* V5 composition correction */
.amp{
  font-size:clamp(5rem,15vw,13rem);
  font-weight:900;
  line-height:.72;
  letter-spacing:-.08em;
  mix-blend-mode:multiply;
}
.talking-heads{
  width:max-content;
  max-width:38vw;
  font-size:clamp(1.35rem,4vw,3.6rem);
  padding:.18em .3em .15em;
  transform-origin:center;
}
.at-the{
  width:max-content;
  font-size:clamp(.8rem,1.6vw,1.2rem);
  background:var(--pink);
  padding:.22em .38em;
  letter-spacing:.2em;
  mix-blend-mode:multiply;
}
.engagement{
  width:max-content;
  font-size:clamp(.8rem,1.8vw,1.35rem);
  letter-spacing:.18em;
  padding:.28em .48em;
}
.stray-plus{font-size:clamp(1.4rem,4vw,3.5rem)}
.gloryhole{
  width:min(17vw,190px);
  aspect-ratio:1.12;
  border:0;
  background:transparent;
  overflow:visible;
}
.glory-card{
  position:absolute;inset:0;
  background:#d6d0bd;
  border:2px solid var(--ink);
  overflow:hidden;
  transform:rotate(-2deg);
}
.glory-label{
  position:absolute;left:8%;top:8%;
  font-size:clamp(.42rem,.8vw,.62rem);
  line-height:.92;font-weight:900;letter-spacing:.08em;
}
.glory-hole{
  position:absolute;width:38%;aspect-ratio:1;border-radius:50%;
  background:var(--ink);left:31%;top:34%;
}
.glory-dog{
  position:absolute;width:13%;height:60%;border-radius:999px;
  background:var(--orange);left:48%;top:11%;transform:rotate(10deg);
}
.tape{
  position:absolute;width:54%;height:13%;background:#99968d;opacity:.72;z-index:3;
}
.tape-one{left:-8%;top:20%;transform:rotate(-12deg)}
.tape-two{right:-8%;bottom:18%;transform:rotate(9deg)}


/* V6 */
.fragment{z-index:10}
.decorative-amp{
  z-index:1;
  font-size:clamp(18rem,52vw,48rem);
  line-height:.55;
  font-weight:900;
  opacity:.13!important;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.status{
  display:flex;
  flex-wrap:wrap;
  gap:.45em;
  align-items:center;
  font-weight:700;
}
.status span{font-weight:900}


/* V7 — real invitation assets */
.real-photo, .venue-artifact, .band-artifact, .glory-photo {
  overflow:hidden;
  box-shadow:0 8px 0 rgba(0,0,0,.10);
}
.real-photo img, .venue-artifact img, .band-artifact img, .glory-photo img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.real-photo {
  width:min(22vw,240px);
  aspect-ratio:3/4;
  background:#f4f0e6;
  padding:7px;
  z-index:12;
  transform-origin:center;
}
.venue-artifact {
  width:min(31vw,350px);
  aspect-ratio:3/2;
  z-index:5;
  mix-blend-mode:multiply;
}
.band-artifact {
  width:min(23vw,250px);
  aspect-ratio:2/3;
  z-index:16;
  border:2px solid var(--ink);
  transform-origin:center;
}
.band-artifact img { filter:contrast(1.05); }
.band-name {
  position:absolute; inset:auto 4% 4% 4%;
  background:var(--paper);
  color:var(--ink);
  padding:.5em .55em;
  font-size:clamp(.45rem,.75vw,.65rem);
  font-weight:900; line-height:1.05;
  letter-spacing:.025em;
  border:1px solid var(--ink);
}
.band-name small {
  display:block;
  margin-top:.55em;
  font-size:.75em;
  letter-spacing:.08em;
}
.glory-photo {
  width:min(14vw,155px);
  aspect-ratio:3/2;
  z-index:14;
  border:2px solid var(--ink);
  transform-origin:center;
}
.decorative-amp { z-index:0 !important; }
.fragment:not(.decorative-amp) { position:absolute; }
.status {
  font-size:clamp(.52rem,1.1vw,.8rem);
  line-height:1.25;
}

/* generated paper becomes the physical substrate for the NO world */
.ddr-paper, .bureau-paper, #ddr-paper, .no-paper {
  background-color:#cdb88f !important;
  background-image:
    linear-gradient(rgba(225,210,175,.12),rgba(225,210,175,.12)),
    url("assets/bureaucratic-paper.png") !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
}


/* V8 — composition lock */
.poster-name{font-size:clamp(6rem,19vw,18rem);z-index:18;white-space:nowrap}
.decorative-amp{font-size:clamp(28rem,72vw,68rem)!important;z-index:0!important;opacity:.12!important;line-height:.5}
.marry{z-index:19;font-size:clamp(2.5rem,6.4vw,6.2rem);max-width:42vw}
.event-info{z-index:20;width:max-content;max-width:38vw;font-size:clamp(.72rem,1.25vw,1.05rem);font-weight:900;line-height:1.25;letter-spacing:.13em;background:var(--orange);padding:.55em .7em;mix-blend-mode:multiply}
.venue{z-index:20}
.real-photo{width:min(17vw,220px);z-index:24;box-shadow:9px 10px 0 rgba(0,0,0,.12)}
.venue-artifact{width:min(38vw,540px);aspect-ratio:16/9;z-index:6;box-shadow:none}
.glory-photo{width:min(19vw,250px);aspect-ratio:1.2;z-index:22;box-shadow:8px 8px 0 rgba(0,0,0,.12)}
.band-artifact{width:min(18vw,230px);aspect-ratio:2/3;z-index:23;background:var(--pink);border:3px solid var(--ink);padding:0;overflow:hidden;box-shadow:8px 8px 0 rgba(0,0,0,.12)}
.band-artifact .band-sheet{position:absolute;inset:0;background:var(--pink);color:var(--ink);padding:7%;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.band-kicker{font-size:clamp(.42rem,.65vw,.62rem);font-weight:900;letter-spacing:.15em;border-bottom:3px solid var(--ink);padding-bottom:.5em}
.band-title{font-size:clamp(1rem,2.35vw,2.35rem);font-weight:900;line-height:.78;letter-spacing:-.06em;text-transform:uppercase;transform:rotate(-2deg);margin-left:-2%}
.band-title span{display:block}
.band-sub{font-size:clamp(.42rem,.62vw,.6rem);font-weight:900;line-height:1.1;letter-spacing:.08em;border-top:3px solid var(--ink);padding-top:.7em}
.transient{z-index:4}
.status{z-index:60;background:rgba(239,231,210,.82);padding:.25em .45em;color:var(--ink)}
@media(max-width:700px){
  .poster-name{font-size:clamp(5rem,25vw,9rem)}
  .decorative-amp{font-size:clamp(24rem,115vw,40rem)!important}
  .marry{max-width:68vw;font-size:clamp(2rem,10vw,4rem)}
  .event-info{max-width:68vw;font-size:.62rem}
  .real-photo{width:28vw}
  .venue-artifact{width:52vw}
  .band-artifact{width:28vw}
  .glory-photo{width:29vw}
  .venue{font-size:clamp(1.5rem,7vw,3rem)}
}

/* V9 — restore the graphic field and rebalance the physical artifacts */
.dot-field{
  width:min(31vw,430px);height:min(24vh,260px);z-index:3;opacity:.74;
  background-image:radial-gradient(circle,var(--ink) 0 1.45px,transparent 1.6px);
  background-size:7px 7px;mix-blend-mode:multiply;
}
.dots-b{width:min(22vw,300px);height:min(20vh,220px)}
.dots-c{width:min(18vw,240px);height:min(17vh,190px)}
.rule{z-index:8;height:5px;background:var(--ink)}
.rule-thin{height:2px}
.rule-fat{height:9px}
.registration{z-index:9;font-size:clamp(1.3rem,2.4vw,2.25rem);font-weight:900;opacity:.68}
.engagement-line{
  z-index:21;width:max-content;font-size:clamp(.9rem,1.8vw,1.45rem);font-weight:900;
  letter-spacing:.16em;background:var(--orange);padding:.28em .5em;mix-blend-mode:multiply;
}
.date-time{
  z-index:20;width:max-content;font-size:clamp(1.1rem,2.35vw,2rem);font-weight:900;
  line-height:.96;letter-spacing:-.02em;
}
.date-time span{font-size:.43em;letter-spacing:.17em;line-height:1.2}
.at-the{
  z-index:20;width:max-content;font-size:clamp(.75rem,1.3vw,1.05rem);font-weight:900;
  letter-spacing:.2em;background:var(--pink);padding:.2em .38em;mix-blend-mode:multiply;
}
/* Keep the names closer to the original, with the photograph no longer sitting on BRITT. */
.real-photo{width:min(13vw,170px);z-index:24}
.venue-artifact{width:min(44vw,630px);aspect-ratio:16/9;z-index:7}
.glory-photo{width:min(24vw,320px);aspect-ratio:1.2;z-index:22}
.band-artifact{width:min(24vw,315px);aspect-ratio:2/3;z-index:23}
.band-title{font-size:clamp(1.25rem,3.05vw,3.1rem);line-height:.75}
.band-kicker{font-size:clamp(.45rem,.72vw,.67rem)}
.band-sub{font-size:clamp(.46rem,.7vw,.66rem)}

@media(max-width:700px){
  .dot-field{width:44vw;height:19vh}
  .real-photo{width:22vw}
  .venue-artifact{width:60vw}
  .glory-photo{width:34vw}
  .band-artifact{width:34vw}
  .date-time{font-size:clamp(.9rem,4vw,1.35rem)}
}

/* V10 — readability pass: preserve the noise, clear the information hierarchy */
.marry{
  font-size:clamp(2.7rem,6.15vw,6rem);
  line-height:.88;
  letter-spacing:-.055em;
  max-width:36vw;
  text-wrap:balance;
}
.engagement-line{
  font-size:clamp(1rem,1.95vw,1.55rem);
  letter-spacing:.14em;
  padding:.3em .55em;
  transform-origin:center;
}
.date-time{
  font-size:clamp(1.25rem,2.45vw,2.15rem);
  line-height:1;
  letter-spacing:-.025em;
  text-shadow:0 1px 0 rgba(239,231,210,.35);
}
.date-time span{
  display:block;
  margin-top:.55em;
  font-size:.39em;
  letter-spacing:.2em;
  line-height:1.15;
}
.at-the{
  font-size:clamp(.8rem,1.4vw,1.1rem);
  letter-spacing:.22em;
}
.venue{
  line-height:.9;
  letter-spacing:-.025em;
}
.venue span{
  display:inline-block;
  margin-top:.8em;
  line-height:1.1;
}
/* Keep the imagery substantial, but prevent the bottom collage from reading as one dark lump. */
.venue-artifact{width:min(47vw,680px)}
.glory-photo{width:min(26vw,350px)}
.band-artifact{width:min(25vw,330px)}

/* Give the band flyer slightly more breathing room without taming it. */
.band-artifact .band-sheet{padding:7.5%}
.band-title{font-size:clamp(1.28rem,3vw,3rem);line-height:.78;letter-spacing:-.052em}
.band-kicker,.band-sub{line-height:1.18}

/* Graphic texture stays, but sits one step farther behind the factual copy. */
.dot-field{z-index:2;opacity:.66}
.rule{z-index:5}
.registration{z-index:6}
.transient{z-index:7}
.marry,.engagement-line,.date-time,.at-the,.venue{z-index:21}

@media(max-width:700px){
  .marry{max-width:58vw;font-size:clamp(2rem,9.2vw,3.8rem);line-height:.9}
  .engagement-line{font-size:clamp(.72rem,3.1vw,1rem)}
  .date-time{font-size:clamp(1rem,4vw,1.4rem)}
  .venue-artifact{width:64vw}
  .glory-photo{width:36vw}
  .band-artifact{width:36vw}
}


/* V11 — restore the strongest abstract moments from the original composition */
.date-big{
  z-index:22;
  width:max-content;
  white-space:nowrap;
  font-size:clamp(4.8rem,10.5vw,10rem);
  font-weight:900;
  line-height:.78;
  letter-spacing:-.075em;
}
.time-note{
  z-index:22;
  width:max-content;
  white-space:nowrap;
  font-size:clamp(.58rem,1vw,.82rem);
  font-weight:900;
  line-height:1;
  letter-spacing:.21em;
}
/* A true graphic object, not background texture: dots + orange disc. */
.graphic-disc-field{
  width:min(27vw,390px);
  height:min(26vh,285px);
  z-index:4;
  opacity:.86;
  background-image:radial-gradient(circle,var(--ink) 0 1.65px,transparent 1.8px);
  background-size:8px 8px;
  mix-blend-mode:multiply;
}
.graphic-disc-field span{
  position:absolute;
  width:clamp(72px,9vw,132px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--orange);
  left:25%;top:50%;
  transform:translate(-50%,-50%);
}
/* Registration crosses are part of the visual language, not incidental debris. */
.reg-large{font-size:clamp(2.4rem,4.6vw,4.5rem)}
.reg-mid{font-size:clamp(1.8rem,3vw,3rem)}
.reg-small{font-size:clamp(1rem,1.8vw,1.6rem)}
/* Factual copy always wins over texture. */
.engagement-line,.date-big,.time-note,.at-the,.venue,.marry{z-index:22}
.engagement-line{mix-blend-mode:normal}
/* More assertive physical collage at the bottom. */
.venue-artifact{width:min(52vw,750px)}
.glory-photo{width:min(29vw,390px)}
.band-artifact{width:min(26.5vw,350px)}
/* Let the ampersand register without competing with the names. */
.decorative-amp{opacity:.16!important}
/* Reserve a little cream for the factual footer. */
.status{bottom:1.2vh;padding:.35em .55em;background:rgba(239,231,210,.94)}
@media(max-width:700px){
  .date-big{font-size:clamp(4rem,17vw,7rem)}
  .time-note{font-size:.52rem}
  .graphic-disc-field{width:46vw;height:22vh}
  .venue-artifact{width:70vw}
  .glory-photo{width:40vw}
  .band-artifact{width:39vw}
}


/* V12 — hierarchy cleanup: retire legacy fields, fix z-order, keep the best OG moments */
/* The disc field is the main halftone object. Old auxiliary fields may animate in, but do not survive resolved. */
.graphic-disc-field{z-index:7}
.dots-a{z-index:3}
.dots-b,.dots-c{z-index:2}
/* Factual hierarchy stays clean above texture. */
.marry,.engagement-line,.at-the,.venue{z-index:24}
.date-big,.time-note{z-index:25}
/* SAVE THE DATE is now a permanent resolved fragment, not disposable debris. */
[data-fragment="debris-b"]{z-index:20;font-size:clamp(.72rem,1.15vw,.98rem);font-weight:900;letter-spacing:.16em;white-space:nowrap}
/* Keep the band flyer substantial without letting it eat the date. */
.band-artifact{z-index:23}
/* Physical collage order: building at back, glory-hole pasted on it, band flyer on top/right. */
.venue-artifact{z-index:10}
.glory-photo{z-index:21}
/* Footer: factual and protected. */
.status{z-index:70;white-space:nowrap;max-width:96vw;overflow:hidden;text-overflow:clip}
@media(max-width:700px){
  .status{font-size:.46rem;letter-spacing:.08em;white-space:normal;line-height:1.2}
  [data-fragment="debris-b"]{font-size:.58rem}
}


/* V13 — final hierarchy/readability reduction pass
   Keep: names, ampersand, one upper halftone field, one disc field, two pink plates,
   marriage statement, engagement/date/venue, three physical artifacts, two rules, four + marks.
   Everything else has been removed from the DOM. */

/* Primary hierarchy */
.poster-name{z-index:30}
.decorative-amp{z-index:1!important;opacity:.115!important}
.marry{
  z-index:31;
  max-width:31vw;
  font-size:clamp(2.7rem,5.75vw,5.7rem);
  line-height:.88;
  letter-spacing:-.055em;
}
.engagement-line,.date-big,.time-note,.at-the,.venue,.save-date{z-index:32}

/* SAVE THE DATE is a clear label, not debris. */
.save-date{
  width:max-content;
  white-space:nowrap;
  font-size:clamp(.72rem,1.1vw,.96rem);
  font-weight:900;
  line-height:1;
  letter-spacing:.18em;
}

/* One quiet upper halftone plate plus one assertive OG-inspired disc field. */
.dot-field{z-index:4;opacity:.68}
.dots-a{width:min(28vw,380px);height:min(22vh,235px)}
.graphic-disc-field{
  z-index:8;
  width:min(23vw,315px);
  height:min(21vh,220px);
  opacity:.9;
  background-size:8px 8px;
}
.graphic-disc-field span{
  width:clamp(64px,7.2vw,104px);
  left:27%;top:50%;
}

/* Pink is a printing plate, not a container for every fact. */
.block-a,.block-c{z-index:2}
.engagement-line{mix-blend-mode:normal}

/* Date is allowed to be the graphic event; time is deliberately subordinate. */
.date-big{
  font-size:clamp(4.7rem,10vw,9.5rem);
  line-height:.78;
  letter-spacing:-.075em;
  white-space:nowrap;
}
.time-note{
  font-size:clamp(.57rem,.92vw,.8rem);
  letter-spacing:.22em;
  white-space:nowrap;
}

/* Rules should frame the field, never strike through factual typography. */
.rule{z-index:12}
.rule-thin{height:2px}

/* Plus marks: enough to create rhythm, not enough to become confetti. */
.registration{z-index:14;opacity:.62}
.reg-large{font-size:clamp(2.2rem,4vw,4rem)}
.reg-small{font-size:clamp(1rem,1.6vw,1.45rem)}

/* Physical collage: three objects, clear stacking order. */
.venue-artifact{z-index:16;width:min(52vw,750px)}
.glory-photo{z-index:22;width:min(29vw,390px)}
.band-artifact{z-index:24;width:min(26vw,345px)}

/* The information layer always wins. */
.at-the,.venue{z-index:33}
.status{z-index:70;background:rgba(239,231,210,.96)}

@media(max-width:700px){
  .marry{max-width:55vw;font-size:clamp(2rem,8.8vw,3.6rem)}
  .dots-a{width:42vw;height:18vh}
  .graphic-disc-field{width:40vw;height:19vh}
  .date-big{font-size:clamp(4rem,16vw,6.7rem)}
  .save-date{font-size:.56rem}
  .venue-artifact{width:70vw}
  .glory-photo{width:40vw}
  .band-artifact{width:38vw}
}

/* V14 — responsive composition
   Desktop composition stays locked. Mobile gets its own poster geometry instead of
   shrinking desktop coordinates into a narrow viewport. */
.assembly{height:520svh}
.stage{height:100svh}

@media(max-width:700px){
  /* Type: preserve the poster hierarchy without edge clipping. */
  .poster-name{
    font-size:clamp(4.8rem,23vw,7rem);
    line-height:.78;
  }
  .marry{
    max-width:62vw;
    font-size:clamp(2rem,8.25vw,3.2rem);
    line-height:.88;
  }
  .engagement-line{
    font-size:clamp(.72rem,3vw,.92rem);
    padding:.28em .48em;
    letter-spacing:.12em;
  }
  .date-big{
    font-size:clamp(4rem,15.3vw,6.2rem);
    letter-spacing:-.075em;
  }
  .time-note{
    font-size:clamp(.47rem,1.75vw,.62rem);
    letter-spacing:.18em;
  }
  .at-the{
    font-size:clamp(.7rem,2.7vw,.9rem);
  }
  .venue{
    font-size:clamp(2rem,9.4vw,3rem);
    line-height:.88;
    white-space:nowrap;
  }
  .venue span{
    font-size:.24em;
    letter-spacing:.20em;
    margin-top:.72em;
  }
  .save-date{
    font-size:clamp(.52rem,2.2vw,.68rem);
    letter-spacing:.15em;
  }

  /* Texture: fewer, stronger fields. */
  .dots-a{width:45vw;height:17svh;opacity:.62}
  .graphic-disc-field{
    width:43vw;
    height:18svh;
    background-size:7px 7px;
  }
  .graphic-disc-field span{width:clamp(58px,16vw,78px)}
  .block{height:16svh}
  .block-a{width:46vw}
  .block-c{width:50vw}

  /* The bottom collage is a band, not a second poster competing with the facts. */
  .venue-artifact{width:61vw}
  .glory-photo{width:34vw}
  .band-artifact{width:28vw;border-width:2px;box-shadow:5px 5px 0 rgba(0,0,0,.12)}
  .glory-photo{box-shadow:5px 5px 0 rgba(0,0,0,.12)}
  .band-artifact .band-sheet{padding:6.5%}
  .band-title{
    font-size:clamp(.78rem,4.55vw,1.28rem);
    line-height:.76;
    letter-spacing:-.055em;
  }
  .band-kicker,.band-sub{
    font-size:clamp(.29rem,1.35vw,.42rem);
    letter-spacing:.06em;
  }

  /* Decorative amp can be large, but it must stay a field rather than a wall. */
  .decorative-amp{
    font-size:clamp(18rem,92vw,27rem);
    opacity:.095!important;
  }

  .rule{height:4px}
  .rule-thin{height:2px}
  .registration{font-size:1.35rem}
  .reg-large{font-size:2.25rem}
  .reg-small{font-size:1rem}

  /* Give the footer a real mobile strip rather than letting it fight the collage. */
  .status{
    left:1.8%;
    right:1.8%;
    bottom:.65svh;
    max-width:none;
    padding:.4em .55em;
    font-size:clamp(.42rem,1.65vw,.54rem);
    line-height:1.15;
    letter-spacing:.045em;
    white-space:normal;
    text-wrap:balance;
  }

  .resolved-spacer{height:16svh}
}

@media(max-width:380px){
  .poster-name{font-size:22vw}
  .date-big{font-size:14.6vw}
  .venue{font-size:9vw}
  .band-artifact{width:29vw}
  .band-title{font-size:4.35vw}
  .status{font-size:.4rem}
}

/* Tablet bridge: avoid the awkward middle state between desktop and phone. */
@media(min-width:701px) and (max-width:900px){
  .poster-name{font-size:17vw}
  .marry{font-size:5.6vw;max-width:35vw}
  .date-big{font-size:9.4vw}
  .venue-artifact{width:55vw}
  .glory-photo{width:30vw}
  .band-artifact{width:27vw}
}

/* V15 — consolidation: mobile hierarchy leads, desktop uses space for scale rather than spread. */

/* Names recover authority; final state keeps a little tension instead of flattening. */
.poster-name{
  font-size:clamp(6.4rem,20.5vw,19.5rem);
}
.marry{
  max-width:34vw;
  font-size:clamp(2.8rem,5.95vw,5.9rem);
}

/* SAVE THE DATE stays an eyebrow, but gets a clean physical knockout. */
.save-date{
  z-index:36;
  background:rgba(239,231,210,.96);
  padding:.34em .52em .30em;
  box-shadow:0 0 0 3px rgba(239,231,210,.72);
  mix-blend-mode:normal;
}

/* Color remains a printing plate, not a full-width header. */
.block-a,.block-c{mix-blend-mode:multiply}

/* Key factual type owns cream space. */
.marry,.engagement-line,.date-big,.time-note,.at-the,.venue{mix-blend-mode:normal}
.engagement-line{z-index:34}
.date-big,.time-note{z-index:35}
.at-the,.venue{z-index:35}

/* Venue lockup follows the tighter mobile relationship. */
.at-the{
  padding:.22em .42em;
}
.venue{
  line-height:.88;
}
.venue span{
  margin-top:.64em;
}

/* Bottom collage: readable objects, not a single dark rectangle. */
.venue-artifact{width:min(50vw,720px)}
.glory-photo{width:min(27vw,365px)}
.band-artifact{width:min(24vw,325px)}

/* Keep controlled chaos in the physical artifacts. */
.venue-artifact,.glory-photo,.band-artifact,.engagement-line,.save-date{transform-origin:center}

/* Protect factual footer from the collage. */
.status{
  bottom:.8vh;
  max-width:94vw;
  padding:.38em .58em;
}

@media(max-width:700px){
  /* Names stay large, but not clipped. */
  .poster-name{
    font-size:clamp(5.15rem,24.6vw,7.4rem);
  }
  .marry{
    max-width:48vw;
    font-size:clamp(2rem,8.55vw,3.35rem);
  }

  /* Less pink concentration at the top; dots do more of the texture work. */
  .block{height:13.5svh}
  .block-a{width:38vw}
  .block-c{width:40vw}
  .dots-a{width:43vw;height:17svh;opacity:.64}

  /* SAVE THE DATE has its own cream ticket and does not vanish into halftone. */
  .save-date{
    font-size:clamp(.54rem,2.15vw,.7rem);
    padding:.34em .48em .28em;
    box-shadow:0 0 0 2px rgba(239,231,210,.75);
  }

  /* The date stays the event; supporting copy remains clearly subordinate. */
  .date-big{font-size:clamp(4rem,15.8vw,6.35rem)}
  .time-note{font-size:clamp(.48rem,1.8vw,.64rem)}

  /* Phone collage: three distinct pieces with only modest overlap. */
  .venue-artifact{width:58vw}
  .glory-photo{width:30vw}
  .band-artifact{width:25vw}
  .band-title{
    font-size:clamp(.72rem,4.05vw,1.18rem);
    line-height:.77;
  }
  .band-kicker,.band-sub{
    font-size:clamp(.27rem,1.22vw,.39rem);
  }

  .status{
    bottom:.55svh;
    font-size:clamp(.41rem,1.55vw,.52rem);
  }
}

@media(max-width:380px){
  .poster-name{font-size:23.5vw}
  .band-artifact{width:26vw}
  .band-title{font-size:3.95vw}
}

@media(min-width:701px) and (max-width:900px){
  .poster-name{font-size:18.3vw}
  .marry{font-size:5.8vw;max-width:34vw}
  .band-artifact{width:25vw}
}

/* V16 — choreography-only pass. Final V15 composition remains unchanged. */
.chaos-square{
  width:min(24vw,360px);
  aspect-ratio:1.04;
  background:var(--orange);
  mix-blend-mode:multiply;
  z-index:7;
  opacity:0;
  pointer-events:none;
  transform-origin:center;
}

/* The transient orange plate should read as a print collision, not a new content box. */
@media(max-width:700px){
  .chaos-square{width:34vw;max-width:160px}
}

/* V17 — bureaucratic NO-world finish. RSVP form remains intentionally stark. */
.ddr{
  --ddr-ink:#1b1b16;
  --ddr-paper:#d9c8a6;
  --ddr-red:#8e281f;
  --ddr-blue:#53666a;
  background:
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.08),transparent 28%),
    #4c4b45;
  padding:clamp(18px,4vh,48px) 14px clamp(48px,8vh,100px);
}
.ddr-document{
  isolation:isolate;
  width:min(880px,96vw);
  min-height:94svh;
  padding:clamp(34px,6vw,72px) clamp(30px,6vw,76px) clamp(42px,6vw,68px);
  color:var(--ddr-ink);
  background-color:var(--ddr-paper);
  background-image:
    linear-gradient(rgba(222,207,171,.12),rgba(222,207,171,.12)),
    url("assets/bureaucratic-paper.png");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  border:1px solid rgba(31,28,19,.38);
  box-shadow:0 24px 80px rgba(0,0,0,.5),0 2px 0 rgba(255,255,255,.22) inset;
  transform:rotate(-.16deg);
}
.ddr-document::before{
  content:"";
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(73,91,94,.055) 31px 32px),
    linear-gradient(90deg,rgba(34,28,17,.035),transparent 8%,transparent 92%,rgba(34,28,17,.04));
  mix-blend-mode:multiply;
}
.ddr-document::after{
  content:"";position:absolute;inset:0;z-index:30;pointer-events:none;opacity:.23;
  background:repeating-linear-gradient(1deg,rgba(0,0,0,.03) 0 1px,transparent 1px 4px);
  mix-blend-mode:multiply;
}
.ddr-aged-paper{opacity:.22;background:radial-gradient(circle at 6% 20%,rgba(76,47,19,.38),transparent 11%),radial-gradient(circle at 93% 72%,rgba(76,47,19,.25),transparent 13%),radial-gradient(circle at 62% 5%,rgba(52,34,17,.18),transparent 8%)}
.ddr-fold{position:absolute;z-index:0;pointer-events:none;opacity:.12;mix-blend-mode:multiply}
.ddr-fold-v{top:0;bottom:0;left:51%;width:2px;background:linear-gradient(90deg,transparent,#3e3428,transparent)}
.ddr-fold-h{left:0;right:0;top:57%;height:2px;background:linear-gradient(0deg,transparent,#3e3428,transparent)}
.ddr-punch{position:absolute;width:18px;height:18px;border-radius:50%;background:#665c48;box-shadow:inset 2px 2px 5px rgba(0,0,0,.55),0 0 0 3px rgba(224,208,168,.35);opacity:.72;z-index:2}
.ddr-punch-one{left:10px;top:31%}.ddr-punch-two{left:10px;top:67%}
.ddr-staple{position:absolute;right:30px;top:20px;width:34px;height:9px;border-top:2px solid #625f56;border-bottom:1px solid rgba(255,255,255,.45);transform:rotate(6deg);opacity:.75;z-index:3}
.ddr-docket{position:absolute;left:10px;top:95px;display:flex;flex-direction:column;align-items:center;gap:12px;font:700 .55rem/1 "Courier New",monospace;letter-spacing:.1em;writing-mode:vertical-rl;transform:rotate(180deg);opacity:.68;border-left:1px solid currentColor;padding-left:7px}
.ddr-letterhead{z-index:3;align-items:flex-start;border-bottom:3px double var(--ddr-ink);padding:0 0 14px}
.ddr-ministry{font-family:"Times New Roman",Times,serif;text-align:left;font-size:clamp(.67rem,1.2vw,.82rem);letter-spacing:.015em;max-width:470px}
.ddr-ministry span{font-size:.85em;letter-spacing:.045em}
.ddr-file{font:700 .66rem/1.5 "Courier New",monospace;border:1px solid currentColor;padding:7px 9px;min-width:138px;background:rgba(224,210,174,.3)}
.ddr-clearance-row{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0 0;font:700 .55rem/1.1 "Courier New",monospace;letter-spacing:.08em}
.ddr-clearance{border:2px solid var(--ddr-red);color:var(--ddr-red);padding:4px 7px;transform:rotate(-1.5deg);mix-blend-mode:multiply}
.ddr-copy{opacity:.65}
.ddr-document h2{z-index:3;text-align:left;font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;font-size:clamp(2.25rem,6vw,4.5rem);font-weight:900;line-height:.82;letter-spacing:-.055em;margin:34px 0 8px;max-width:700px;text-transform:uppercase}
.ddr-subtitle{position:relative;z-index:3;text-align:left;font:700 .67rem/1.2 "Courier New",monospace;letter-spacing:.09em;margin:0 0 25px;border-bottom:1px solid var(--ddr-ink);padding-bottom:9px}
.ddr-instruction{position:relative;z-index:3;border-left:5px solid var(--ddr-ink);padding:8px 12px;margin:0 0 21px;font:400 .7rem/1.45 "Courier New",monospace;background:rgba(233,219,182,.42)}
.ddr-fields{z-index:3;border:2px solid var(--ddr-ink);padding:0;margin:0 0 24px;background:rgba(232,218,180,.25);box-shadow:3px 3px 0 rgba(27,27,22,.10)}
.ddr-fields div{grid-template-columns:minmax(190px,34%) 1fr;border-bottom:1px solid var(--ddr-ink);padding:8px 11px;gap:12px;min-height:39px;align-items:center}
.ddr-fields span{font-family:"Times New Roman",Times,serif;font-size:.73rem}
.ddr-fields b{font:700 .75rem/1.25 "Courier New",monospace;letter-spacing:.025em}
.ddr-section-code{font:700 .55rem/1 "Courier New",monospace;letter-spacing:.1em;margin:-18px -18px 15px;padding:6px 8px;border-bottom:1px solid var(--ddr-ink);background:rgba(83,102,106,.09)}
.ddr-question,.ddr-processing,.ddr-result{z-index:3;border:2px solid var(--ddr-ink);padding:18px;margin-top:18px;background:rgba(224,210,174,.42);box-shadow:4px 4px 0 rgba(27,27,22,.12);transform:rotate(.12deg)}
.ddr-question>p,.ddr-processing>p{font-family:"Times New Roman",Times,serif;font-size:clamp(.85rem,1.6vw,1.05rem);line-height:1.28;margin:0 0 16px}
#ddrOptions{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--ddr-ink);border-left:1px solid var(--ddr-ink)}
.ddr-option{position:relative;min-height:52px;font:700 .69rem/1.2 "Courier New",monospace;text-align:left;border:0;border-right:1px solid var(--ddr-ink);border-bottom:1px solid var(--ddr-ink);background:rgba(245,235,204,.18);color:var(--ddr-ink);padding:9px 10px 9px 38px;transition:none}
.ddr-option::before{content:"";position:absolute;left:10px;top:50%;width:15px;height:15px;border:2px solid currentColor;transform:translateY(-50%) rotate(-1deg);background:rgba(255,255,255,.08)}
.ddr-option::after{content:"";position:absolute;left:8px;top:50%;width:23px;height:4px;background:var(--ddr-red);opacity:0;transform:translateY(-50%) rotate(-13deg);mix-blend-mode:multiply}
.ddr-option:hover,.ddr-option:focus{background:rgba(83,102,106,.12);color:var(--ddr-ink);outline:2px dotted var(--ddr-ink);outline-offset:-5px}
.ddr-option:active::after{opacity:.85}
.ddr-sign-line{display:grid;grid-template-columns:auto 1fr auto 120px;align-items:end;gap:7px;margin-top:16px;font:700 .5rem/1 "Courier New",monospace;letter-spacing:.06em;opacity:.7}.ddr-sign-line i{display:block;border-bottom:1px solid currentColor;height:14px}
.ddr-processing{min-height:280px;overflow:hidden}
.processing-line{position:relative;padding:7px 8px 7px 35px;border-bottom:1px dotted #5c5a50;font:700 .68rem/1.25 "Courier New",monospace;animation:ddrLineIn .18s steps(2,end) both}
.processing-line::before{content:"✓";position:absolute;left:7px;top:5px;color:var(--ddr-red);font:bold 1rem/1 Georgia,serif;transform:rotate(-11deg)}
.processing-line:nth-child(3n)::after{content:"GEPRÜFT";float:right;color:var(--ddr-red);border:1px solid var(--ddr-red);padding:2px 4px;font-size:.48rem;letter-spacing:.08em;transform:rotate(-2deg);opacity:.7}
.ddr-processing-stamp{position:absolute;right:20px;bottom:22px;color:var(--ddr-red);border:3px double var(--ddr-red);padding:.32em .5em;font:900 clamp(1.4rem,4vw,2.5rem)/1 "Arial Narrow",Arial,sans-serif;letter-spacing:.06em;transform:rotate(-8deg);opacity:.5;mix-blend-mode:multiply}
.ddr-result{padding:clamp(26px,5vw,50px) 18px 30px;text-align:center;overflow:visible;animation:ddrPaperJolt .26s steps(2,end) both}
.ddr-result-number{text-align:right;font:700 .55rem/1 "Courier New",monospace;letter-spacing:.09em;opacity:.65;margin-bottom:8px}
.stamp{position:relative;z-index:5;margin:4px auto 20px;border:8px double var(--ddr-red);color:var(--ddr-red);padding:.08em .22em .04em;font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;font-weight:1000;font-size:clamp(3.2rem,11vw,7.5rem);line-height:.9;letter-spacing:-.035em;transform:rotate(-7deg);mix-blend-mode:multiply;filter:contrast(1.2);animation:ddrStampSlam .26s cubic-bezier(.15,.9,.25,1.25) both}
.stamp::after{content:"ABGELEHNT";position:absolute;inset:0;color:transparent;-webkit-text-stroke:1px rgba(142,40,31,.4);transform:translate(3px,2px);pointer-events:none}
.ddr-result h3{font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;font-size:clamp(2.3rem,6vw,4.8rem);font-weight:900;line-height:.9;letter-spacing:-.04em;margin:6px 0 14px}
.ddr-ruling{max-width:560px;margin:0 auto 22px;font:400 .78rem/1.45 "Courier New",monospace}
.ddr-final{font:900 .78rem/1.3 "Courier New",monospace;border-top:3px double var(--ddr-ink);border-bottom:1px solid var(--ddr-ink);padding:13px 6px;margin:20px auto 16px;max-width:590px;background:rgba(233,219,182,.32)}
.ddr-result button{border:2px solid var(--ddr-ink);border-radius:0;box-shadow:3px 3px 0 rgba(27,27,22,.25);font:700 .68rem/1.1 "Courier New",monospace;letter-spacing:.04em;padding:11px 14px;min-height:46px}
.ddr-result button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(27,27,22,.25)}
.actual-no{background:rgba(233,219,182,.78)!important}
.ddr-signatures{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:30px 0 24px;padding-top:12px;border-top:1px solid var(--ddr-ink)}
.ddr-signatures div{display:flex;flex-direction:column;gap:12px}.ddr-signatures span{font:700 .5rem/1 "Courier New",monospace;letter-spacing:.08em}.ddr-signatures b{font:400 .72rem/1 "Courier New",monospace}
.ddr-fineprint{z-index:3;margin-top:0;border-top:3px double var(--ddr-ink);padding-top:12px;font:400 .52rem/1.45 "Courier New",monospace;columns:2;column-gap:28px;text-align:justify}
.ddr-bottom-code{position:relative;z-index:3;margin-top:18px;padding-top:7px;border-top:1px solid var(--ddr-ink);font:700 .48rem/1 "Courier New",monospace;letter-spacing:.12em;text-align:right;opacity:.66}
@keyframes ddrLineIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes ddrStampSlam{0%{opacity:0;transform:scale(2.8) rotate(-16deg)}65%{opacity:1;transform:scale(.91) rotate(-6deg)}100%{transform:scale(1) rotate(-7deg)}}
@keyframes ddrPaperJolt{0%{transform:translate(0,0) rotate(.12deg)}35%{transform:translate(3px,-2px) rotate(-.25deg)}100%{transform:translate(0,0) rotate(.12deg)}}
@media(max-width:700px){
  .ddr{padding:0;background:#4c4b45}
  .ddr-document{width:100%;min-height:100svh;padding:28px 20px 42px;transform:none;border:0}
  .ddr-docket,.ddr-punch,.ddr-staple{display:none}
  .ddr-letterhead{gap:10px}.ddr-ministry{font-size:.57rem}.ddr-file{display:block;font-size:.5rem;min-width:102px;padding:5px}
  .ddr-clearance-row{align-items:flex-start}.ddr-copy{display:none}
  .ddr-document h2{font-size:clamp(2.45rem,13vw,4.6rem);margin-top:28px}
  .ddr-subtitle{font-size:.55rem}
  .ddr-instruction{font-size:.6rem}
  .ddr-fields div{grid-template-columns:1fr;padding:7px 9px;gap:4px}.ddr-fields span{font-size:.61rem}.ddr-fields b{font-size:.68rem}
  #ddrOptions{grid-template-columns:1fr}.ddr-option{min-height:48px;font-size:.64rem}
  .ddr-sign-line{display:none}
  .ddr-processing{min-height:310px}
  .ddr-actions{display:grid;grid-template-columns:1fr;width:100%}.ddr-result button{width:100%}
  .ddr-signatures{grid-template-columns:1fr;gap:8px}
  .ddr-fineprint{columns:1;font-size:.49rem;text-align:left}
}
@media(prefers-reduced-motion:reduce){.ddr-result,.stamp,.processing-line{animation:none!important}}

/* V18 — DDR readability pass. Keep the prop density, make the jokes legible. */

/* rsvp.js already prints a □ character. Remove the second CSS-drawn box. */
.ddr-option::before{display:none}
.ddr-option{padding-left:14px}

/* The factual outcome should never disappear into the bit. */
.ddr-final{
  font-size:clamp(.92rem,1.55vw,1.08rem);
  line-height:1.35;
  letter-spacing:.018em;
  padding:15px 12px;
  background:rgba(244,231,193,.68);
  box-shadow:inset 0 0 0 1px rgba(27,27,22,.2);
}

/* Fine print is still administrative, but it is now intended to be read. */
.ddr-fineprint p{margin:0 0 1.05em;break-inside:avoid}
.ddr-fineprint strong{font-weight:900;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}

@media(min-width:701px){
  /* Desktop was visually convincing but typographically undersized. */
  .ddr-document{
    width:min(860px,94vw);
    padding:clamp(42px,5.2vw,66px) clamp(42px,5.4vw,70px) clamp(50px,5.5vw,70px);
  }
  .ddr-ministry{font-size:.88rem;line-height:1.32}
  .ddr-file{font-size:.76rem;line-height:1.45}
  .ddr-clearance-row{font-size:.64rem}
  .ddr-document h2{font-size:clamp(3.35rem,6.1vw,4.8rem);margin-top:30px}
  .ddr-subtitle{font-size:.77rem;line-height:1.3}
  .ddr-instruction{font-size:.82rem;line-height:1.48;padding:10px 14px}

  .ddr-fields div{
    grid-template-columns:minmax(205px,34%) 1fr;
    min-height:44px;
    padding:10px 12px;
  }
  .ddr-fields span{font-size:.84rem;line-height:1.25}
  .ddr-fields b{font-size:.87rem;line-height:1.28}

  .ddr-section-code{font-size:.63rem;line-height:1.05;padding:7px 9px}
  .ddr-question,.ddr-processing,.ddr-result{padding:20px}
  .ddr-question>p,.ddr-processing>p{
    font-size:clamp(1.04rem,1.55vw,1.18rem);
    line-height:1.32;
    margin-bottom:18px;
  }
  #ddrOptions{gap:0}
  .ddr-option{
    min-height:61px;
    padding:12px 13px;
    font-size:.82rem;
    line-height:1.28;
    letter-spacing:.01em;
  }

  .processing-line{
    padding:9px 9px 9px 38px;
    font-size:.81rem;
    line-height:1.32;
  }
  .processing-line::before{top:7px;font-size:1.12rem}
  .processing-line:nth-child(3n)::after{font-size:.56rem;padding:3px 5px}
  .ddr-processing-stamp{font-size:clamp(1.8rem,3.3vw,2.7rem);opacity:.58}

  .ddr-ruling{font-size:.91rem;line-height:1.52;max-width:610px}
  .ddr-result-number{font-size:.63rem}
  .ddr-result button{font-size:.78rem;padding:12px 16px}

  .ddr-signatures span{font-size:.58rem}
  .ddr-signatures b{font-size:.78rem}
  .ddr-fineprint{
    font-size:.64rem;
    line-height:1.55;
    column-gap:34px;
    text-align:left;
  }
  .ddr-bottom-code{font-size:.56rem}
}

@media(max-width:700px){
  /* Phone already read better; only reinforce the actual RSVP state and fine-print gags. */
  .ddr-final{font-size:.78rem;padding:12px 8px}
  .ddr-fineprint{font-size:.53rem;line-height:1.52}
  .ddr-fineprint strong{text-decoration:none}
}


/* V21 — final refinement: venue bridge, mobile poster rescue, DDR signal > noise */

/* Replace the dead cream spacer with a real venue transition. */
.resolved-spacer{display:none!important}
.venue-transition{
  position:relative;
  width:100%;
  background:var(--ink);
  overflow:hidden;
}
.venue-transition-media{
  position:relative;
  width:100%;
  height:clamp(250px,35vw,500px);
  overflow:hidden;
  background:var(--pink);
}
.venue-transition-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 55%;
  filter:contrast(1.05) saturate(1.02);
}
.venue-transition-caption{
  position:absolute;
  left:clamp(18px,3vw,44px);
  bottom:clamp(14px,2vw,28px);
  z-index:2;
  background:var(--paper);
  color:var(--ink);
  padding:.45em .65em;
  font-size:clamp(.68rem,1vw,.9rem);
  font-weight:900;
  letter-spacing:.13em;
  transform:rotate(-1deg);
}
.rsvp{border-top:0;margin-top:0}

/* Footer is factual, not texture. */
.status{display:flex;gap:.35em;align-items:center;max-width:96vw;overflow:visible;text-overflow:initial}
.status span{font-weight:900}
.status span+span::before{content:" / ";font-weight:900}

/* Mobile: explicitly rescue the German Club image and keep all three artifacts distinct. */
@media(max-width:700px){
  .venue-artifact{
    width:76vw!important;
    z-index:17!important;
    opacity:1!important;
  }
  .glory-photo{width:36vw!important;z-index:22!important}
  .band-artifact{width:31vw!important;z-index:24!important}
  .status{
    left:3vw!important;
    right:auto!important;
    bottom:1.1vh!important;
    width:94vw;
    max-width:94vw;
    display:block;
    padding:.48em .6em!important;
    font-size:.58rem!important;
    line-height:1.25!important;
    letter-spacing:.065em!important;
    background:rgba(239,231,210,.96)!important;
    white-space:normal!important;
  }
  .status span{display:block}
  .status span+span::before{content:""}
  .venue-transition-media{height:clamp(220px,36svh,330px)}
  .venue-transition-media img{object-position:center 58%}
  .venue-transition-caption{
    left:14px;bottom:13px;
    font-size:.64rem;
    letter-spacing:.11em;
  }
}

/* DDR: clearer interactive hierarchy. Black = structure, red = active question/stamp. */
.ddr-document::after{opacity:.12}
.ddr-aged-paper{opacity:.14}
.ddr-fields{background:rgba(244,231,193,.58)}
.ddr-question{
  background:rgba(244,231,193,.90)!important;
  box-shadow:0 0 0 6px rgba(239,225,187,.38),4px 4px 0 rgba(27,27,22,.12)!important;
}
.ddr-question::before{
  content:"FRAGE / QUESTION";
  display:inline-block;
  margin:0 0 10px;
  color:var(--ddr-red);
  border:2px solid var(--ddr-red);
  padding:3px 6px 2px;
  font:900 .62rem/1 "Courier New",monospace;
  letter-spacing:.12em;
  transform:rotate(-1deg);
  mix-blend-mode:multiply;
}
.ddr-question>p{
  color:var(--ddr-red)!important;
  font-family:"Courier New",monospace!important;
  font-weight:900!important;
  font-size:clamp(1.05rem,1.8vw,1.28rem)!important;
  line-height:1.22!important;
  padding-bottom:12px;
  border-bottom:2px solid var(--ddr-red);
}
#ddrOptions{
  border-top:1px solid rgba(27,27,22,.65);
  border-left:1px solid rgba(27,27,22,.65);
  background:rgba(246,235,204,.48);
}
.ddr-option{
  min-height:56px;
  background:rgba(250,241,215,.55)!important;
  font-size:clamp(.72rem,1.05vw,.82rem)!important;
  line-height:1.25!important;
  border-color:rgba(27,27,22,.7)!important;
}
.ddr-option:hover,.ddr-option:focus{
  color:var(--ddr-red)!important;
  background:rgba(142,40,31,.07)!important;
  outline:2px solid var(--ddr-red)!important;
  outline-offset:-4px!important;
}
.ddr-processing,.ddr-result{background:rgba(244,231,193,.83)!important}
.ddr-fineprint{opacity:.82}
.ddr-photo-credit{opacity:.9;font-size:.92em}
.ddr-photo-credit a{color:inherit;text-decoration:underline}

/* Evidence images: one event image, one actual East Berlin archival image. */
.ddr-evidence{
  position:relative;
  z-index:4;
  margin:18px 0 24px;
  padding:9px 9px 7px;
  border:1px solid var(--ddr-ink);
  background:rgba(242,229,192,.82);
  box-shadow:4px 5px 0 rgba(27,27,22,.13);
  transform:rotate(-.7deg);
  overflow:hidden;
}
.ddr-evidence img{
  display:block;
  width:100%;
  max-height:230px;
  object-fit:cover;
  filter:grayscale(1) contrast(1.55) brightness(.84);
  mix-blend-mode:multiply;
  opacity:.86;
}
.ddr-evidence-label{
  position:absolute;
  z-index:2;
  left:14px;
  top:14px;
  background:rgba(238,224,186,.92);
  color:var(--ddr-red);
  border:2px solid var(--ddr-red);
  padding:4px 6px 3px;
  font:900 .58rem/1 "Courier New",monospace;
  letter-spacing:.09em;
  transform:rotate(-1.5deg);
}
.ddr-evidence figcaption{
  padding:7px 2px 1px;
  font:700 .56rem/1.25 "Courier New",monospace;
  letter-spacing:.06em;
}
.ddr-evidence-venue{width:min(52%,390px);margin-left:auto}
.ddr-evidence-venue img{aspect-ratio:16/9;object-position:center 58%}
.ddr-evidence-archive{
  width:min(48%,330px);
  margin:18px 0 0 auto;
  transform:rotate(1.4deg);
}
.ddr-evidence-archive img{aspect-ratio:4/3;object-position:center}
.ddr-processing-stamp{z-index:7}

/* On phones, preserve readability; images are visual punctuation, not obstacles. */
@media(max-width:700px){
  .ddr-question{padding:17px 14px!important}
  .ddr-question>p{font-size:1rem!important}
  .ddr-option{font-size:.72rem!important;min-height:52px!important}
  .ddr-evidence-venue{width:74%;margin:14px 0 20px auto}
  .ddr-evidence-archive{width:72%;margin:16px 0 0 auto}
  .ddr-evidence img{max-height:170px}
  .ddr-evidence-label{font-size:.49rem;left:10px;top:10px}
  .ddr-fineprint{opacity:.7}
}

/* V22 launch hardening: keyboard focus, safe areas, reduced motion */
.skip-link{
  position:fixed;left:12px;top:12px;z-index:10000;
  transform:translateY(-180%);
  padding:.7rem .9rem;background:var(--ink);color:var(--paper);
  font-weight:900;letter-spacing:.06em;text-decoration:none;
  border:2px solid var(--paper);
}
.skip-link:focus{transform:translateY(0)}

:where(a,button,input,textarea,select):focus-visible{
  outline:3px solid var(--pink)!important;
  outline-offset:4px!important;
}
.rsvp :where(a,button,input,textarea,select):focus-visible{
  outline-color:var(--paper)!important;
}
.ddr :where(a,button,input,textarea,select):focus-visible{
  outline-color:var(--ddr-red, #9d1c16)!important;
}

.rsvp{
  padding-bottom:calc(14vh + env(safe-area-inset-bottom));
}
.status{
  bottom:max(1.8vh, env(safe-area-inset-bottom));
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .assembly{height:100svh!important}
  .fragment{transition:none!important}
  .ddr-processing-stamp,.stamp,.processing-line,.ddr-result{animation:none!important}
}

/* V23 — DDR paperclip + hierarchy pass. Guest-facing invitation remains locked. */

/* Lighten the substrate without making it look new. */
.ddr-document{
  --ddr-paper:#e4d5b7;
  background-color:var(--ddr-paper);
  background-image:
    linear-gradient(rgba(255,248,226,.31),rgba(255,248,226,.31)),
    url("assets/bureaucratic-paper.png");
}
.ddr-document::before{
  background:
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(73,91,94,.038) 31px 32px),
    linear-gradient(90deg,rgba(34,28,17,.02),transparent 8%,transparent 92%,rgba(34,28,17,.025));
}
.ddr-document::after{opacity:.065}
.ddr-aged-paper{opacity:.075}
.ddr-fold{opacity:.075}
.ddr-instruction{background:rgba(248,238,208,.66)}
.ddr-fields{background:rgba(249,239,209,.68)}

/* Put the identity and venue evidence in one immediate bureaucratic beat. */
.ddr-identity-evidence{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:minmax(0,1.24fr) minmax(250px,.76fr);
  align-items:end;
  gap:clamp(18px,2.7vw,30px);
  margin:0 0 18px;
}
.ddr-identity-evidence .ddr-fields{
  width:100%;
  margin:0;
  align-self:stretch;
}
.ddr-evidence-venue{
  width:100%!important;
  margin:0 0 5px!important;
  align-self:end;
  transform:translateY(-3px) rotate(2.1deg)!important;
  overflow:visible;
  background:rgba(248,238,208,.9);
  box-shadow:6px 8px 0 rgba(27,27,22,.14)!important;
}
.ddr-evidence-venue img{
  max-height:210px;
  filter:grayscale(1) contrast(1.42) brightness(.93)!important;
  opacity:.9!important;
}
.ddr-evidence-venue figcaption{
  padding:8px 2px 2px;
  line-height:1.35;
}
.ddr-evidence-venue figcaption span{opacity:.72}

/* A deliberately simple CSS paperclip. */
.ddr-evidence-venue::after{
  content:"";
  position:absolute;
  z-index:8;
  width:13px;
  height:43px;
  right:25px;
  top:-17px;
  border:2px solid rgba(67,68,64,.9);
  border-radius:9px 9px 8px 8px;
  background:transparent;
  box-shadow:
    inset 0 0 0 3px rgba(244,232,201,.34),
    1px 2px 1px rgba(0,0,0,.12);
  transform:rotate(10deg);
  pointer-events:none;
}

/* The question is the page's focal point, not another background panel. */
.ddr-question{
  margin-top:8px!important;
  background:rgba(249,239,209,.92)!important;
  box-shadow:3px 3px 0 rgba(27,27,22,.11)!important;
}
.ddr-question::before{margin-bottom:8px}
.ddr-question>p{
  font-size:clamp(1.18rem,2.05vw,1.42rem)!important;
  line-height:1.2!important;
  margin-bottom:16px!important;
  padding-bottom:12px!important;
}
.ddr-section-code{opacity:.72}
#ddrOptions{background:rgba(250,242,218,.7)}
.ddr-option{
  color:var(--ddr-ink)!important;
  background:rgba(253,246,225,.72)!important;
  outline:none!important;
}
.ddr-option:hover,.ddr-option:focus-visible{
  color:var(--ddr-red)!important;
  background:rgba(142,40,31,.065)!important;
  outline:2px solid var(--ddr-red)!important;
  outline-offset:-4px!important;
}
.ddr-option:active{
  color:var(--ddr-red)!important;
  background:rgba(142,40,31,.10)!important;
  border-color:var(--ddr-red)!important;
}

/* Atmospheric bureaucracy recedes; payoff lines stay readable. */
.ddr-signatures{opacity:.72}
.ddr-fineprint{
  opacity:1!important;
  color:rgba(27,27,22,.58);
}
.ddr-fineprint strong,
.ddr-fineprint b,
.ddr-photo-credit{
  color:rgba(27,27,22,.84);
}
.ddr-photo-credit{opacity:.76!important}
.ddr-bottom-code{opacity:.48}

/* Processing keeps its evidence, but the visual system is slightly calmer. */
.ddr-processing{background:rgba(249,239,209,.88)!important}
.ddr-evidence-archive{
  background:rgba(248,238,208,.88);
  box-shadow:4px 5px 0 rgba(27,27,22,.11);
}
.ddr-evidence-archive img{filter:grayscale(1) contrast(1.4) brightness(.92)!important;opacity:.88}

/* Make the real state impossible to miss after the joke. */
.ddr-final{
  font-size:clamp(1rem,1.7vw,1.18rem)!important;
  line-height:1.32!important;
  background:rgba(252,244,221,.83)!important;
  border-top:3px double var(--ddr-ink)!important;
  border-bottom:2px solid var(--ddr-ink)!important;
}

@media(max-width:700px){
  /* Do not squeeze the paperclip gag into a fake two-column form on phones. */
  .ddr-identity-evidence{
    display:block;
    margin-bottom:12px;
  }
  .ddr-identity-evidence .ddr-fields{margin-bottom:14px}
  .ddr-evidence-venue{
    width:80%!important;
    margin:0 2% 16px auto!important;
    transform:rotate(1.7deg)!important;
  }
  .ddr-evidence-venue img{max-height:180px}
  .ddr-evidence-venue::after{
    width:11px;
    height:36px;
    right:18px;
    top:-14px;
  }
  .ddr-question{margin-top:4px!important}
  .ddr-question>p{
    font-size:1.04rem!important;
    line-height:1.22!important;
  }
  .ddr-fineprint{color:rgba(27,27,22,.61)}
  .ddr-fineprint strong,.ddr-fineprint b{color:rgba(27,27,22,.88)}
}


/* V24 — deduplicate the venue image. The German Club photograph participates in
   the scroll choreography, then exits; the full-width venue bridge becomes its
   single guest-facing resolved appearance. This gives Glory Hole + the band
   flyer enough visual authority at the bottom of the poster. */
.glory-photo{
  width:min(33vw,440px)!important;
}
.band-artifact{
  width:min(29vw,380px)!important;
}

/* The transition image is now the deliberate venue reveal, not a repeat. */
.venue-transition-media{
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
}

@media(max-width:700px){
  /* Two readable artifacts instead of three competing thumbnails. */
  .glory-photo{
    width:46vw!important;
    z-index:22!important;
  }
  .band-artifact{
    width:38vw!important;
    z-index:24!important;
  }
  /* Preserve space for the two-line footer. */
  .status{
    z-index:80!important;
  }
  .venue-transition-media{
    height:clamp(245px,38svh,350px);
  }
}

/* V26 — mobile-only spacing refinement. Desktop remains locked. */
@media(max-width:700px){
  /* Keep the venue lockup visually separate from the physical collage below. */
  .venue{
    z-index:36!important;
  }
  .venue span{
    position:relative;
    z-index:37;
    display:block;
  }

  /* The Glory Hole card should begin as a distinct pasted object, not eat the city line. */
  .glory-photo{
    z-index:23!important;
  }

  /* DDR: tuck the clipped evidence photo under the identity table so the paperclip gag
     reads as one attached dossier object on phones, like it does on desktop. */
  .ddr-identity-evidence{
    position:relative;
    overflow:visible;
  }
  .ddr-identity-evidence .ddr-fields{
    position:relative;
    z-index:6;
    margin-bottom:0!important;
  }
  .ddr-evidence-venue{
    position:relative;
    z-index:4;
    width:82%!important;
    margin:-18px 1.5% 16px auto!important;
    transform:rotate(1.5deg)!important;
  }
  .ddr-evidence-venue::before{
    content:"";
    position:absolute;
    left:-1px;
    right:-1px;
    top:-1px;
    height:22px;
    z-index:7;
    pointer-events:none;
    background:linear-gradient(to bottom,rgba(228,213,183,.96),rgba(228,213,183,0));
    opacity:.38;
  }
  .ddr-evidence-venue::after{
    z-index:10!important;
  }
  .ddr-question{
    margin-top:0!important;
  }
}

/* V27 — RSVP identity + invisible anti-junk field. */
.guest-names-field[hidden]{display:none!important}
.guest-names-field{grid-column:1/-1}
.rsvp-hp{
  position:absolute!important;
  left:-10000px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
@media(max-width:700px){
  .guest-names-field{grid-column:auto}
}


/* V30 — final phone cleanup + robust DDR reference image.
   Desktop composition remains locked; only shared archive reliability is changed. */

/* Avoid a broken-image icon if Wikimedia thumbnail delivery changes again.
   The intended archival source is Gerd Danigel's Berlin Oderberger Straße 1986,
   credited in the existing fine print. The graphic still degrades gracefully offline. */
.ddr-archive-photo{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  background-color:#d6c9aa;
  background-image:
    linear-gradient(rgba(231,220,191,.09),rgba(231,220,191,.09)),
    repeating-linear-gradient(0deg,rgba(30,30,26,.08) 0 1px,transparent 1px 4px),
    url("https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Berlin_Oderberger_Stra%C3%9Fe_1986.jpg/960px-Berlin_Oderberger_Stra%C3%9Fe_1986.jpg");
  background-position:center,center,center;
  background-size:auto,auto,cover;
  background-repeat:no-repeat,repeat,no-repeat;
  filter:grayscale(1) contrast(1.38) brightness(.94);
  opacity:.9;
}
.ddr-archive-photo::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(11deg,transparent 0 48%,rgba(244,235,209,.16) 49% 50%,transparent 51%),
    radial-gradient(circle at 82% 18%,rgba(34,30,24,.14),transparent 26%);
  mix-blend-mode:multiply;
}
.ddr-archive-photo span{
  position:absolute;
  left:10px;
  bottom:8px;
  z-index:2;
  padding:.25em .42em;
  background:rgba(238,226,195,.82);
  color:rgba(27,27,22,.78);
  font:700 .48rem/1 "Courier New",monospace;
  letter-spacing:.08em;
}

@media(max-width:700px){
  /* iOS Safari can paint the document beneath its status area. Give the first
     dossier page a guaranteed physical top margin in addition to the safe area. */
  .ddr-document{
    padding-top:max(74px, calc(30px + env(safe-area-inset-top)))!important;
  }
  .ddr-document h2{
    margin-top:20px!important;
  }

  /* Keep the factual venue lockup separate from the pasted-object collage. */
  .venue span{
    margin-top:.48em!important;
    top:-8px;
  }

  /* The venue evidence should look clipped underneath the identity table,
     not like a second independent card lower on the page. */
  .ddr-identity-evidence{
    margin-bottom:8px!important;
  }
  .ddr-identity-evidence .ddr-fields{
    z-index:8!important;
  }
  .ddr-evidence-venue{
    z-index:4!important;
    width:84%!important;
    margin:-32px 1.5% 14px auto!important;
    transform:rotate(1.25deg)!important;
  }
  .ddr-evidence-venue::after{
    right:16px!important;
    top:-12px!important;
  }
  .ddr-question{
    margin-top:2px!important;
  }

  /* Processing reference remains useful even when the remote archival bitmap
     is unavailable; never expose a browser's broken-image glyph. */
  .ddr-evidence-archive{
    width:76%!important;
    margin:14px 0 0 auto!important;
  }
  .ddr-archive-photo{
    max-height:190px;
    aspect-ratio:4/3;
  }
}

/* V32 — mobile-only DDR breathing-room correction.
   Completes the spacing pass that V31 did not include. Desktop remains locked. */
@media(max-width:700px){
  /* Keep the document title clear of iOS browser/status chrome. */
  .ddr-document{
    padding-top:max(108px, calc(64px + env(safe-area-inset-top)))!important;
  }

  /* Let the paperclipped exhibit hang from the identity block instead of feeling jammed into it. */
  .ddr-evidence-venue{
    margin:-22px 1.5% 18px auto!important;
  }
  .ddr-evidence-venue::after{
    top:-10px!important;
  }

  /* Separate the red FRAGE tag from the bureaucratic section code. */
  .ddr-question{
    margin-top:14px!important;
  }
  .ddr-question::before{
    display:block!important;
    width:max-content;
    margin:0 0 12px!important;
  }
  .ddr-question .ddr-section-code{
    margin:0 -14px 18px!important;
  }
}