/* Each page is a different piece from the same private drawer.
   Patterns stay around paper; photographs and functional text stay clear. */

/* Home: the pink pinstripe scene belongs only to Contents. */
.jl[data-folio="home"] .hk {
  background:#F9F7F6 url(img/texture-paper-grain.svg) repeat;
}

/* Meet Juliette: a dotted photo album and a little gingham keepsake. */
.jl[data-folio="meet"] .final-album {
  background-color:#F9F7F6;
  background-image:linear-gradient(#F9F7F622,#F9F7F622),url(img/folio-black-dots.jpeg);
  background-size:auto,390px auto;
  background-repeat:repeat;
  background-blend-mode:normal,luminosity;
}
.jl[data-folio="meet"] .mo .stripe {
  width:86px;height:210px;
  background:url(img/folio-rose-gingham.jpeg) center/170px auto;
  transform:rotate(-7deg);
}
.jl[data-folio="meet"] .md .under {
  background:url(img/folio-rose-gingham.jpeg) center/260px auto;
}

/* Our Time Together: a wine dotted card-table cloth with one lace edge. */
.jl[data-folio="experiences"] .to {
  background-color:#6F2432;
  background-image:radial-gradient(circle,#F9F7F6 1px,transparent 1.25px);
  background-size:17px 17px;
}
.jl[data-folio="experiences"] .to::before {
  content:"";position:absolute;left:-175px;top:24px;
  width:360px;height:calc(100% - 48px);
  background:url(img/k-lace-doily.webp) center/contain no-repeat;
  transform:rotate(-3deg);pointer-events:none;
}
.jl[data-folio="experiences"] .to .wrap {position:relative;z-index:1}
.jl[data-folio="experiences"] .to .sheetp {
  outline:1px solid #C99AA5;outline-offset:-14px;
}
.jl[data-folio="experiences"] .card {background:#F4E3E5}
.jl[data-folio="experiences"] .ways {
  background:#F9F7F6 url(img/texture-paper-grain.svg) repeat;
}

/* Girlfriend Experience: heart wallpaper, pearl correspondence, a travel stamp. */
.jl[data-folio="girlfriend"] .final-gfe-note {
  background:#F4E3E5 url(img/folio-burgundy-hearts.png) center/550px auto repeat;
}
.jl[data-folio="girlfriend"] .final-gfe-note .kn {
  background:#FBF9F8 url(img/texture-paper-grain.svg) repeat;
  border:4px double #C99AA5;
  padding:38px 36px;
}
.jl[data-folio="girlfriend"] .final-gfe-note .kn::before {
  content:"";position:absolute;left:-58px;top:-34px;
  width:84px;height:190px;pointer-events:none;
  background:url(img/lace-pearl.webp) center/contain no-repeat;
  transform:rotate(-12deg);
}
.jl[data-folio="girlfriend"] .gl {background:#F9F7F6}
.jl[data-folio="girlfriend"] .o3 .stamp {
  background:#F9F7F6 url(img/folio-sage-stars.jpeg) center/90px auto;
  border:3px dotted #F9F7F6;
}
.jl[data-folio="girlfriend"] .o3 .stamp img {visibility:hidden}
.jl[data-folio="girlfriend"] .o3 .stamp::after {
  content:"JL";position:absolute;inset:0;display:grid;place-items:center;
  font:400 27px/1 "True Fate Serif",Georgia,serif;color:#241A1B;
}

/* Kind Notes: delicate heart-striped wallpaper around collected letters. */
.jl[data-folio="notes"] .ko {
  background:#F4E3E5 url(img/folio-heart-stripe.png) center/470px auto repeat;
}
.jl[data-folio="notes"] .ko .sheetp {
  outline:1px solid #C99AA5;outline-offset:-15px;
}
.jl[data-folio="notes"] .kb {
  background:#F9F7F6 url(img/texture-paper-grain.svg) repeat;
}
.jl[data-folio="notes"] .kn {border:1px solid #C99AA5}
.jl[data-folio="notes"] .heart .hand {
  background:#F9F7F6;padding:8px 14px;
  box-shadow:0 4px 10px -7px #241A1B;
}

/* Before Our Date: a pale sage index and clear pearl guide pages. */
.jl[data-folio="before"] .bo,
.jl[data-folio="before"] .steps,
.jl[data-folio="before"] .faq {
  background:#EEF1EA url(img/texture-paper-grain.svg) repeat;
}
.jl[data-folio="before"] .final-planning-intro .wrap {
  background:#FBF9F8 url(img/texture-paper-grain.svg) repeat;
  border:1px solid #B4BAAD;box-shadow:7px 7px 0 #DDE4D6;
}
.jl[data-folio="before"] .guide {padding-top:56px}
.jl[data-folio="before"] .toc {
  border-color:#A4AF9B;box-shadow:6px 6px 0 #EEF1EA;
}
.jl[data-folio="before"] .toc a {
  padding:12px 10px;margin:5px -10px;
  background:#EEF1EA;border-bottom-color:#B4BAAD;
}
.jl[data-folio="before"] .toc a:nth-of-type(even) {background:#F9F7F6}
.jl[data-folio="before"] .toc a:hover,
.jl[data-folio="before"] .toc a:focus-visible {background:#F4E3E5}
.jl[data-folio="before"] .gsec .note {background:#EEF1EA}

/* Rates: an engraved pearl price card, without wallpaper. */
.jl[data-folio="rates"] .menu {
  background:#F9F7F6 url(img/texture-paper-grain.svg) repeat;
  border:4px double #5A0F1D;
}
.jl[data-folio="rates"] .menu .in {border:1px solid #C99AA5}
.jl[data-folio="rates"] .ro {background:#F9F7F6}
.jl[data-folio="rates"] .term {box-shadow:4px 5px 0 #F0EAEC}

/* Write to Juliette: a pearl writing desk, wine envelope and real lace. */
.jl[data-folio="write"] .wo {
  background:#F9F7F6 url(img/texture-paper-grain.svg) repeat;
}
.jl[data-folio="write"] .wo .intro {
  border:1px solid #C99AA5;clip-path:none;
}
.jl[data-folio="write"] .desk .paperw {
  border:1px solid #C99AA5;
  box-shadow:10px 12px 0 #F4E3E5,0 16px 28px -22px #241A1B;
}
.jl[data-folio="write"] .desk .env {
  top:-40px;right:-26px;width:260px;height:165px;
  background:#5A0F1D;
}
.jl[data-folio="write"] .desk .env::after {
  background:linear-gradient(160deg,transparent 49%,#C99AA5 50%,transparent 51%),linear-gradient(20deg,transparent 49%,#C99AA5 50%,transparent 51%);
}
.jl[data-folio="write"] .desk .env::before {
  content:"";position:absolute;left:-36px;top:-35px;width:115px;height:200px;
  background:url(img/lace-pearl.webp) center/contain no-repeat;
  transform:rotate(-9deg);pointer-events:none;
}
.jl[data-folio="write"] .desk::before {
  content:"";position:absolute;left:-40px;top:300px;width:110px;height:290px;
  background-color:#F9F7F6;
  background-image:url(img/folio-bow-paper.jpeg);
  background-size:200px auto;background-blend-mode:luminosity;
  border:7px solid #F9F7F6;transform:rotate(-7deg);pointer-events:none;
}
.jl[data-folio="write"] .jlform {background:#FBF9F8 url(img/texture-paper-grain.svg) repeat}
.tally-form-wrap{padding:24px;background:#FBF9F8}
.tally-form-wrap iframe{display:block;border:0;min-height:690px}
.tally-form-wrap .hint{font:400 15px/1.5 "Newsreader",Georgia,serif;color:#4A3631;padding:10px}
@media(max-width:600px){.tally-form-wrap{padding:8px}.tally-form-wrap iframe{min-height:760px}}
.jl[data-folio="write"] .jlform .lh {border-bottom:3px double #5A0F1D}

/* The profile arrival page is its own little introduction, not more stripes. */
.jl[data-folio="introduction"] .yf {
  background:#EEF1EA url(img/texture-paper-grain.svg) repeat;
}

/* Sealed & Sent: a bordered postcard with the existing envelope/postmark. */
.jl[data-folio="sent"] .so {
  max-width:1120px;margin:48px auto 60px;
  background:#FBF9F8 url(img/texture-paper-grain.svg) repeat;
  border:4px double #C99AA5;
  box-shadow:10px 12px 0 #F4E3E5;
}
.jl[data-folio="sent"] .so .post {opacity:.65}
.jl[data-folio="sent"] .so .env .flap {background:#F4E3E5}

/* Privacy: a restrained letterhead. */
.jl[data-folio="privacy"] .po {background:#F9F7F6 url(img/texture-paper-grain.svg) repeat}
.jl[data-folio="privacy"] .pbody .wrap {
  border-left:3px double #C99AA5;padding-left:32px;
}

/* The particulars belong to the diary, with clear labels and no photo overlay. */
.juliette-particulars{padding:25px 56px 90px;background:#F9F7F6}
.particulars-paper{max-width:1240px;margin:auto;padding:42px 48px;background:#FBF9F8 url(img/texture-paper-grain.svg) repeat;border:4px double #C99AA5;box-shadow:8px 9px 0 #EEF1EA}
.particulars-heading h2{font-size:clamp(38px,4.2vw,58px);line-height:1.05;margin-top:10px}
.particulars-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 30px;margin:34px 0 0}
.particulars-list>div{border-top:1px solid #C99AA5;padding-top:14px}
.particulars-list dt{font:600 11px/1.5 "Instrument Sans",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7A2B3A}
.particulars-list dd{margin:8px 0 0;font:400 25px/1.2 "True Fate Serif",Georgia,serif;color:#5A0F1D}
.particulars-aside{margin:28px 0 0;font:italic 400 17px/1.6 "Newsreader",Georgia,serif}
.experience-pricing{padding:0 56px 64px;scroll-margin-top:24px}
.pricing-note{max-width:1180px;margin:auto;padding:34px 40px;background:#F4E3E5;border-left:3px solid #5A0F1D}
.pricing-note h2{font-size:clamp(34px,3.4vw,46px);line-height:1.08;margin-top:8px}
.pricing-note>p:not(.eyebrow){max-width:76ch;margin-top:18px}
.pricing-note>.tlink{display:inline-flex;line-height:1.5;margin-top:10px;min-height:44px;align-items:center}
.experience-rate-link{max-width:560px;margin-top:20px;font:400 16px/1.6 "Newsreader",Georgia,serif}
.experience-rate-link a{color:#5A0F1D;text-underline-offset:4px}

@container jl (max-width:760px) {
  .juliette-particulars{padding:10px 20px 60px}.particulars-paper{padding:28px 24px;box-shadow:4px 6px 0 #EEF1EA}.particulars-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.particulars-list dd{font-size:23px}
  .experience-pricing{padding:0 20px 44px}.pricing-note{padding:28px 24px}
  .jl[data-folio="meet"] .final-album {background-size:auto,330px auto}
  .jl[data-folio="meet"] .mo .stripe {display:none}
  .jl[data-folio="experiences"] .to::before {left:-145px;width:290px;top:15px;height:500px}
  .jl[data-folio="girlfriend"] .final-gfe-note {background-size:430px auto}
  .jl[data-folio="girlfriend"] .final-gfe-note .kn {padding:30px 26px}
  .jl[data-folio="girlfriend"] .final-gfe-note .kn::before {left:-35px;width:54px;height:140px}
  .jl[data-folio="notes"] .ko {background-size:360px auto}
  .jl[data-folio="before"] .guide {padding-top:36px}
  .jl[data-folio="before"] .final-planning-intro .wrap {box-shadow:4px 5px 0 #DDE4D6}
  .jl[data-folio="write"] .desk .env {right:6px;top:-22px;width:210px}
  .jl[data-folio="write"] .desk::before {left:-22px;top:280px;width:68px;height:210px}
  .jl[data-folio="write"] .desk .paperw {box-shadow:5px 7px 0 #F4E3E5}
  .jl[data-folio="sent"] .so {margin:24px 12px 36px;box-shadow:5px 7px 0 #F4E3E5}
  .jl[data-folio="privacy"] .pbody .wrap {padding-left:20px}
}