/* Journal: index (/journal) and posts (/journal/<slug>). Editorial, readable first; collage second. */
.jl{--ease-out:cubic-bezier(.23,1,.32,1)}

/* ---------- index ---------- */
.jl .jx-hero{position:relative;padding:84px 56px 40px;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:end}
.jl .jx-hero h1{font-size:clamp(54px,7.4vw,104px);line-height:.92;margin:14px 0 0}
.jl .jx-hero h1 .scr{display:block;font-size:.62em;line-height:1.1;margin-top:6px}
.jl .jx-lede{font-size:21px;line-height:1.55;color:#4A3631;max-width:30em;margin:26px 0 0}
.jl .jx-note{justify-self:end;width:min(330px,100%);background:#FBF9F8 url(img/paper-lined.webp) 0 0/420px auto;padding:30px 28px 24px;transform:rotate(2deg);position:relative}
.jl .jx-note p{margin:0;font-size:17px;line-height:1.55;color:#2F2522}
.jl .jx-note .hand{display:block;font-size:30px;margin-top:10px;color:#5A0F1D}

.jl .jx-list{max-width:1180px;margin:0 auto;padding:30px 56px 90px}
.jl .jx-feature{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;padding:40px 0 64px;border-bottom:1px solid rgba(90,15,29,.18)}
.jl .jx-print{position:relative;margin:0;background:#FBF9F8;padding:14px 14px 58px;transform:rotate(-2.2deg);transition:transform 260ms var(--ease-out)}
.jl .jx-print img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.jl .jx-print figcaption{position:absolute;left:18px;right:18px;bottom:14px;font-size:27px}
.jl .jx-print .tape{top:-12px;left:50%;margin-left:-48px;transform:rotate(-3deg)}
.jl .jx-kicker{font:600 12px/1.5 "Instrument Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#7A2B3A;margin:0}
.jl .jx-feature h2{font-size:clamp(36px,4.2vw,56px);line-height:1;margin:14px 0 0}
.jl .jx-feature h2 a,.jl .jx-row h3 a{color:inherit;text-decoration:none}
.jl .jx-dek{font-size:19px;line-height:1.6;color:#4A3631;margin:18px 0 0;max-width:32em}
.jl .jx-read{display:inline-block;margin-top:22px}

.jl .jx-rows{list-style:none;margin:0;padding:0}
.jl .jx-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:36px;align-items:center;padding:40px 0;border-bottom:1px solid rgba(90,15,29,.18)}
.jl .jx-row:nth-child(even){grid-template-columns:minmax(0,1fr) 150px}
.jl .jx-row:nth-child(even) .jx-thumb{order:2;transform:rotate(3deg)}
.jl .jx-thumb{position:relative;display:block;background:#FBF9F8;padding:8px 8px 26px;transform:rotate(-3deg);transition:transform 260ms var(--ease-out)}
.jl .jx-thumb img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 22%}
.jl .jx-row h3{font-size:clamp(28px,3vw,38px);line-height:1.05;margin:10px 0 0}
.jl .jx-row .jx-dek{font-size:17.5px;margin-top:10px}
@media (hover:hover) and (pointer:fine){
  .jl .jx-feature:hover .jx-print{transform:rotate(-1deg) translateY(-4px)}
  .jl .jx-row:hover .jx-thumb{transform:rotate(0deg) translateY(-3px)}
}

/* ---------- post ---------- */
.jl .jp{position:relative}
.jl .jp-head{max-width:1180px;margin:0 auto;padding:64px 56px 24px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:60px;align-items:center}
.jl .jp-back{display:inline-block;margin-bottom:26px}
.jl .jp-head h1{font-size:clamp(40px,5vw,68px);line-height:1;margin:14px 0 0;text-wrap:balance}
.jl .jp-dek{font-size:21px;line-height:1.55;color:#4A3631;margin:22px 0 0;max-width:31em;text-wrap:pretty}
.jl .jp-by{font:500 13px/1.4 "Instrument Sans",sans-serif;letter-spacing:.08em;color:#6B5555;margin:20px 0 0}
.jl .jp-photo{position:relative;margin:0;background:#FBF9F8;padding:14px 14px 60px;transform:rotate(2.2deg);max-width:420px;justify-self:end;width:100%}
.jl .jp-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%}
.jl .jp-photo figcaption{position:absolute;left:18px;right:18px;bottom:14px;font-size:26px;line-height:1.05}
.jl .jp-photo .tape{top:-12px;left:50%;margin-left:-48px;transform:rotate(4deg)}

.jl .jp-body{max-width:1180px;margin:0 auto;padding:30px 56px 40px;display:grid;grid-template-columns:minmax(0,680px) minmax(0,1fr);gap:60px}
.jl .jp-text{font-size:19.5px;line-height:1.72;color:#241A1B}
.jl .jp-text > :first-child{margin-top:0}
.jl .jp-text p{margin:0 0 1.05em;text-wrap:pretty}
.jl .jp-text h2{font-family:"True Fate Serif",Didot,serif;font-weight:400;color:#5A0F1D;letter-spacing:-.02em;font-size:34px;line-height:1.08;margin:1.7em 0 .5em}
.jl .jp-text ul,.jl .jp-text ol{margin:0 0 1.2em;padding:0;list-style:none}
.jl .jp-text li{position:relative;padding:0 0 0 34px;margin:0 0 .6em}
.jl .jp-text ul li::before{content:"♡";position:absolute;left:4px;top:.05em;color:#A55A6A;font-size:.85em}
.jl .jp-text ol{counter-reset:jp}
.jl .jp-text ol li{counter-increment:jp}
.jl .jp-text ol li::before{content:counter(jp) ".";position:absolute;left:0;top:-.08em;font:400 28px/1 "True Fate Script",cursive;color:#A55A6A}
.jl .jp-text b,.jl .jp-text strong{font-weight:600;color:#2F2522}
.jl .jp-text a{color:#5A0F1D;text-underline-offset:3px}
.jl .jp-rates{margin:6px 0 1.2em;padding:0}
.jl .jp-rates div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px dotted rgba(90,15,29,.3);font:500 16.5px/1.35 "Instrument Sans",sans-serif}
.jl .jp-rates dt{color:#241A1B}
.jl .jp-rates dd{margin:0;font-weight:600;color:#5A0F1D;font-variant-numeric:tabular-nums;white-space:nowrap}
.jl .jp-pull{margin:1.6em 0;padding:4px 0 4px 26px;border-left:2px solid #C99AA5;font-style:italic;font-size:23px;line-height:1.45;color:#5A0F1D}

/* the short version: a lined card in the side column */
.jl .jp-side{position:relative}
.jl .jp-card{position:sticky;top:30px;background:#FBF9F8 url(img/paper-lined.webp) 0 0/420px auto;padding:30px 28px 26px;transform:rotate(-1.4deg);max-width:340px}
.jl .jp-card h2{font-size:28px;line-height:1.05;margin:0 0 12px}
.jl .jp-card ol{margin:0;padding:0;list-style:none;counter-reset:jc}
.jl .jp-card li{counter-increment:jc;position:relative;padding:0 0 0 30px;margin:0 0 9px;font-size:16.5px;line-height:1.5}
.jl .jp-card li::before{content:counter(jc) ".";position:absolute;left:0;top:-.1em;font:400 24px/1 "True Fate Script",cursive;color:#A55A6A}
.jl .jp-card .hand{display:block;margin-top:12px;font-size:26px;color:#5A0F1D}

/* closing call to action */
.jl .jp-cta{max-width:1068px;margin:30px auto 0;padding:0 56px}
.jl .jp-cta-in{background:#F9F7F7 url(img/paper-pink-gingham.webp) 0 0/420px auto;padding:44px 22px}
.jl .jp-cta-card{max-width:620px;margin:0 auto;background:#FBF9F8;padding:38px 36px 32px;text-align:center;position:relative}
.jl .jp-cta-card h2{font-size:clamp(32px,3.6vw,44px);line-height:1.02;margin:0}
.jl .jp-cta-card p{margin:14px auto 0;max-width:30em;font-size:17.5px;line-height:1.55;color:#4A3631}
.jl .jp-cta-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.jl .jp-cta-acts .ghost{background:transparent;color:#5A0F1D;border:1px solid #5A0F1D}
.jl .jp-cta-acts .ghost:hover{background:#F4E3E5;color:#5A0F1D}
.jl .jp-cta-card .tape{top:-12px;left:50%;margin-left:-48px;transform:rotate(-2deg)}

.jl .jp-more{max-width:1068px;margin:0 auto;padding:56px 56px 80px}
.jl .jp-more h2{font-size:30px;margin:0 0 8px}
.jl .jp-more ul{list-style:none;margin:0;padding:0}
.jl .jp-more li{border-bottom:1px solid rgba(90,15,29,.16)}
.jl .jp-more a{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:18px 0;text-decoration:none;color:#241A1B}
.jl .jp-more a span{font:400 24px/1.2 "True Fate Serif",Didot,serif;color:#5A0F1D}
.jl .jp-more a small{font:600 11.5px/1.4 "Instrument Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#7A2B3A;white-space:nowrap}

/* press feedback on buttons and links that act like buttons */
.jl .jx-list .btn,.jl .jp .btn{transition:transform 160ms var(--ease-out),background-color 160ms ease}
.jl .jx-list .btn:active,.jl .jp .btn:active{transform:scale(.97)}

/* ---------- phones ---------- */
@container jl (max-width: 760px){
  .jl .jx-hero{grid-template-columns:minmax(0,1fr);padding:44px 18px 10px;gap:30px}
  .jl .jx-lede{font-size:19px}
  .jl .jx-note{justify-self:center;transform:rotate(1.5deg)}
  .jl .jx-list{padding:10px 18px 60px}
  .jl .jx-feature{grid-template-columns:minmax(0,1fr);gap:34px;padding:30px 0 46px}
  .jl .jx-print{max-width:330px;margin:0 auto;width:100%}
  .jl .jx-row,.jl .jx-row:nth-child(even){grid-template-columns:96px minmax(0,1fr);gap:18px;padding:28px 0;align-items:start}
  .jl .jx-row:nth-child(even) .jx-thumb{order:0}
  .jl .jx-thumb{padding:5px 5px 16px}
  .jl .jx-row h3{font-size:25px;margin-top:6px}
  .jl .jx-row .jx-dek{font-size:16.5px}

  .jl .jp-head{grid-template-columns:minmax(0,1fr);padding:34px 18px 10px;gap:34px}
  .jl .jp-back{margin-bottom:16px}
  .jl .jp-dek{font-size:19px}
  .jl .jp-photo{justify-self:center;max-width:320px;transform:rotate(1.6deg)}
  .jl .jp-body{grid-template-columns:minmax(0,1fr);padding:24px 18px 20px;gap:34px}
  .jl .jp-text{font-size:18.5px}
  .jl .jp-text h2{font-size:29px}
  .jl .jp-side{order:-1}
  .jl .jp-card{position:relative;top:0;transform:rotate(-1deg);margin:0 auto}
  .jl .jp-cta{padding:0 10px}
  .jl .jp-cta-in{padding:28px 12px}
  .jl .jp-cta-card{padding:32px 20px 26px}
  .jl .jp-cta-acts .btn{width:100%}
  .jl .jp-more{padding:44px 18px 60px}
  .jl .jp-more a{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion: reduce){
  .jl .jx-print,.jl .jx-thumb,.jl .jx-list .btn,.jl .jp .btn{transition:none}
}
.jl .btn.jx-read{display:inline-flex}
.jl .jp{overflow:visible}