/* /tryst — photo, the booking form and the way around the site all in the first view */
.jl .ty-open{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(320px,380px);grid-template-areas:"photo copy side";gap:clamp(24px,3vw,48px);align-items:start;max-width:1440px;margin:0 auto;padding:44px clamp(20px,3vw,48px) 88px;background:#F8F6F3}
.jl .ty-photo{grid-area:photo;margin:0;position:relative;background:#FBF9F8;padding:12px 12px 14px;box-shadow:0 1px 2px rgba(50,15,22,.14),0 14px 30px rgba(50,15,22,.14);transform:rotate(-.8deg)}
/* whole photo, never cropped: the frame takes the photo's own proportions */
.jl .ty-photo img{display:block;width:100%;height:auto;max-height:calc(100vh - 110px);object-fit:contain;background:#EFE9E6}
.jl .ty-photo::after{content:"";position:absolute;left:38%;top:-13px;width:92px;height:26px;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(246,238,240,.55));box-shadow:0 1px 1.5px rgba(40,10,20,.12);transform:rotate(-3deg)}
.jl .ty-copy{grid-area:copy;padding-top:12px;min-width:0}
.jl .ty-copy h1{font-size:clamp(50px,4.6vw,76px);line-height:.92;margin-top:14px}
.jl .ty-copy h1 .scr{font-size:1.12em}
.jl .ty-lede{font-size:19px;line-height:1.55;color:#4A3631;margin-top:20px}
.jl .ty-facts{margin:22px 0 0;border-top:1px solid rgba(90,15,29,.18)}
.jl .ty-facts div{display:grid;grid-template-columns:5.6em minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid rgba(90,15,29,.18)}
.jl .ty-facts dt{font:600 11.5px/1.7 "Instrument Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#7A2B3A}
.jl .ty-facts dd{margin:0;font-size:16.5px;line-height:1.5;color:#2F2522}
.jl .ty-long{display:inline-block;margin-top:16px;padding:10px 0;font:600 12.5px/1.3 "Instrument Sans",sans-serif;letter-spacing:.11em;text-transform:uppercase;color:#5A0F1D;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.jl .ty-hand{font-size:28px;margin-top:18px;display:block;transform:rotate(-3deg);transform-origin:left}

.jl .ty-side{grid-area:side;min-width:0;display:grid;gap:18px;position:relative;z-index:2}
.jl .ty-form{padding:36px 24px 22px}
.jl .ty-form .qi-title{font-size:34px;margin:0}
.jl .ty-where{font:600 11.5px/1.6 "Instrument Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7A2B3A;margin-top:6px}
.jl .ty-quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:16px}
.jl .ty-or{font-size:15.5px;font-style:italic;color:#4A3631;margin:14px 0 4px}
.jl .ty-form .qi-form{gap:18px}
.jl .ty-form textarea{min-height:80px}
.jl .ty-longv{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:0 20px;border:1px solid #5A0F1D;background:#FBF9F8;font:600 12.5px/1.3 "Instrument Sans",sans-serif;letter-spacing:.11em;text-transform:uppercase;color:#5A0F1D;text-decoration:none}
.jl .ty-longv:hover{background:#F6EEF0}
.jl .ty-pages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.jl .ty-pages a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:6px 8px;border:1px solid rgba(90,15,29,.28);background:rgba(251,249,248,.7);font:600 11px/1.25 "Instrument Sans",sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#5A0F1D;text-decoration:none}
.jl .ty-pages a:hover{border-color:#5A0F1D;background:#F6EEF0}
/* sticky only within the opening, and only where the whole column fits the window */
@media (min-height:1320px){.jl .ty-side{position:sticky;top:16px}}
.jl .yw .ty-end{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:22px}
.jl .yw .ty-ghost{background:transparent;color:#5A0F1D;border:1px solid #5A0F1D}
.jl .yw h2 .scr{font-size:1.12em}
.jl .ty-open a:focus-visible{outline:2px solid #5A0F1D;outline-offset:4px}
@container jl (max-width:1100px){
  .jl .ty-open{grid-template-columns:minmax(0,1fr) minmax(300px,370px);grid-template-areas:"photo side" "copy side"}
}
/* phones: a large photo, with the form card sliding up over its lower edge (below the face) */
@container jl (max-width:760px){
  .jl .ty-open{grid-template-columns:minmax(0,1fr);grid-template-areas:"photo" "side" "copy";padding:0 0 56px;gap:0}
  .jl .ty-photo{transform:none;padding:0;box-shadow:none;background:none}
  .jl .ty-photo::after{display:none}
  .jl .ty-photo img{max-height:none;width:100%}
  .jl .ty-side{margin:-120px 12px 0;gap:14px}
  .jl .ty-form{padding:30px 18px 20px}
  .jl .ty-form .qi-title{font-size:32px}
  .jl .ty-quick .btn{flex:1 1 auto}
  .jl .ty-copy{padding:44px 16px 0}
  .jl .ty-copy h1{font-size:54px}
  .jl .ty-lede{font-size:18px}
  .jl .ty-hand{display:none}
}
/* trinkets on the frame edges, outside the photograph itself */
.jl .ty-trinket{position:absolute;z-index:2;pointer-events:none;height:auto;filter:drop-shadow(1px 2px 1px rgba(50,15,22,.18)) drop-shadow(5px 10px 12px rgba(50,15,22,.12))}
.jl .ty-photo img.ty-trinket{max-height:none;background:none;object-fit:initial}
.jl .ty-photo img.ty-ribbon{width:150px;left:-46px;top:-34px;transform:rotate(-24deg)}
.jl .ty-photo img.ty-card{width:92px;right:-30px;bottom:-34px;transform:rotate(9deg)}
.jl .ty-copy{position:relative}
.jl .ty-copy img.ty-tag{width:70px;right:10px;top:auto;bottom:-6px;transform:rotate(10deg)}
@container jl (max-width:760px){
  .jl .ty-photo img.ty-ribbon{width:104px;left:-14px;top:-18px}
  .jl .ty-photo img.ty-card{display:none}
  .jl .ty-copy img.ty-tag{width:54px;right:16px;top:30px;bottom:auto}
}
/* mirror photo: her reflection is upper-left, so the ribbon moves to the top-right corner */
.jl .ty-photo img.ty-ribbon{left:auto;right:-46px;top:-30px;transform:rotate(22deg) scaleX(-1)}
@container jl (max-width:760px){.jl .ty-photo img.ty-ribbon{left:auto;right:-10px;top:-16px}}
/* birthday note: a small playing card under the form */
.jl .ty-bday{position:relative;display:grid;gap:4px;padding:18px 20px 16px 52px;background:#FBF9F8;border:1px solid rgba(90,15,29,.3);border-radius:8px;box-shadow:inset 0 0 0 4px #FBF9F8,inset 0 0 0 5px rgba(122,43,58,.24),0 1px 2px rgba(50,15,22,.12),0 8px 16px rgba(50,15,22,.1);text-decoration:none;color:#2F2522;transform:rotate(-.8deg)}
.jl .ty-bday .bday-pip{position:absolute;left:14px;top:14px;display:flex;flex-direction:column;align-items:center;font:600 14px/1 "Instrument Sans",sans-serif;color:#9E1B2A}
.jl .ty-bday .bday-pip i{font-style:normal;margin-top:2px}
.jl .ty-bday-k{font:400 23px/1.1 "True Fate Serif",Didot,serif;color:#5A0F1D}
.jl .ty-bday-t{font-size:15.5px;line-height:1.45}
.jl .ty-bday-go{font:600 11.5px/1.3 "Instrument Sans",sans-serif;letter-spacing:.11em;text-transform:uppercase;color:#5A0F1D;text-decoration:underline;text-underline-offset:5px;margin-top:6px}
.jl .ty-bday:hover .ty-bday-k{color:#9E1B2A}
@container jl (max-width:760px){.jl .ty-copy img.ty-tag{display:none}}
/* rosebud wallpaper behind the opening; the words sit on their own paper */
.jl .ty-open{background:#F6EEF0 url(img/paper-pink-pinstripe.webp) center top/520px auto;max-width:none}
.jl .ty-copy{background:#FBF9F8;border:1px solid rgba(90,15,29,.16);padding:34px 32px 28px;box-shadow:0 1px 2px rgba(50,15,22,.12),0 12px 26px rgba(50,15,22,.12);transform:rotate(.5deg)}
.jl .ty-copy .ty-hand{display:none}
@container jl (max-width:760px){
  .jl .ty-copy{margin:28px 12px 0;padding:30px 18px 24px;transform:none}
}
/* bite-sized Before Our Date, right above the form */
.jl .ty-bod{position:relative;background:#FBF9F8;border:1px solid rgba(90,15,29,.22);padding:20px 20px 14px;box-shadow:0 1px 2px rgba(50,15,22,.1),0 8px 18px rgba(50,15,22,.1)}
.jl .ty-bod::before{content:"";position:absolute;left:24px;top:-11px;width:84px;height:22px;background:linear-gradient(180deg,rgba(214,224,203,.92),rgba(176,192,162,.82));transform:rotate(-3deg)}
.jl .ty-bod ul{list-style:none;margin:10px 0 0;padding:0}
.jl .ty-bod li{position:relative;padding:5px 0 5px 18px;font-size:15.5px;line-height:1.45;color:#2F2522}
.jl .ty-bod li::before{content:"♡";position:absolute;left:0;top:5px;font-size:11px;color:#A55A6A}
.jl .ty-bod-more{display:inline-block;margin-top:8px;padding:8px 0;font:600 11.5px/1.4 "Instrument Sans",sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#5A0F1D;text-decoration:underline;text-underline-offset:5px}

/* Under the photo and introduction: a collage of photos, two real Kind Notes and keepsakes,
   so the left side keeps going while the form column runs down the right. */
.jl .ty-open{grid-template-areas:"photo copy side" "more more side"}
.jl .ty-more{grid-area:more;position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:34px 26px;align-items:start;padding:26px 6px 10px;min-width:0}
.jl .tm-p{position:relative;margin:0;background:#FBF9F8;padding:10px 10px 0}
.jl .tm-p img{display:block;width:100%;height:auto}
.jl .tm-p .hand{font-size:24px;color:#7A2B3A;padding:8px 4px 12px}
.jl .tm-p3{padding-bottom:10px}
.jl .tm-p .tape,.jl .tm-note .tape{left:38%;top:-12px;transform:rotate(-3deg)}
.jl .tm-note{position:relative;margin:0;padding:34px 30px 26px;background:#FBF9F8 url(img/paper-lined.webp) 0 0/420px auto}
.jl .tm-n2{background:#F6EEF0}
.jl .tm-note blockquote{font:italic 400 19px/1.55 "Newsreader",serif;color:#241A1B;margin:0}
.jl .tm-note figcaption{margin-top:14px;font:600 11.5px/1.4 "Instrument Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#4A3631}
.jl .tm-note figcaption a{color:#5A0F1D}
.jl .tm-p1{grid-column:1/6;grid-row:1;transform:rotate(-2deg)}
.jl .tm-n1{grid-column:6/13;grid-row:1;margin-top:70px;transform:rotate(1.2deg)}
.jl .tm-p2{grid-column:5/13;grid-row:2;transform:rotate(1.4deg);margin-top:-40px}
.jl .tm-n2{grid-column:1/6;grid-row:2;transform:rotate(-1.6deg);margin-top:30px}
.jl .tm-p3{grid-column:2/7;grid-row:3;transform:rotate(-1deg);margin-top:-30px}
.jl .tm-o{position:absolute;pointer-events:none;filter:drop-shadow(1px 2px 1.5px rgba(50,15,22,.22)) drop-shadow(5px 12px 14px rgba(50,15,22,.14))}
.jl .tm-o1{width:118px;right:-14px;top:-60px;transform:rotate(8deg)}
.jl .tm-o2{width:80px;left:44%;top:300px;transform:rotate(-10deg)}
.jl .tm-o3{width:140px;right:9%;bottom:100px;transform:rotate(6deg)}
.jl .tm-o4{width:150px;right:-18px;bottom:-40px;transform:rotate(-8deg)}
.jl .tm-o5{width:64px;left:3%;bottom:-22px;transform:rotate(-64deg)}
@container jl (max-width:1100px){
  .jl .ty-open{grid-template-areas:"photo side" "copy side" "more side"}
  .jl .tm-o1,.jl .tm-o2,.jl .tm-o5{display:none}
}
@container jl (max-width:760px){
  .jl .ty-open{grid-template-areas:"photo" "side" "copy" "more"}
  .jl .ty-more{grid-template-columns:repeat(6,minmax(0,1fr));gap:26px 12px;padding:34px 14px 0}
  .jl .tm-n1{grid-column:1/7;grid-row:1;margin-top:0}
  .jl .tm-p1{grid-column:1/5;grid-row:2}
  .jl .tm-n2{grid-column:1/7;grid-row:3;margin-top:0}
  .jl .tm-p2,.jl .tm-p3,.jl .tm-o1,.jl .tm-o2,.jl .tm-o3,.jl .tm-o5{display:none}
  .jl .tm-o4{position:relative;grid-column:5/7;grid-row:2;align-self:center;width:100%;right:auto;bottom:auto}
  .jl .tm-note blockquote{font-size:18px}
}