/* The Club Pledge: one document on one sheet, with brush marks in the margin.
   Ink marks beside the member's promises; terracotta marks beside the club's (the club's own hand). */
.doc { position:relative; max-width:900px; margin:40px auto 120px; padding:60px 112px 40px 150px; }
.doc > * { position:relative; z-index:1; }
.doc .neck { position:absolute; z-index:0; right:calc(-1 * max(var(--gutter), (100vw - 900px) / 2) - 70px); top:34%; width:300px; }
.doc-head .lead { margin-top:22px; max-width:30em; }
.part { margin-top:84px; }
.part .d2 { margin-bottom:30px; }
.vows { list-style:none; }
.vows li { position:relative; padding:10px 0 12px; max-width:32em; }
.vow { font:500 34px/1.22 var(--display); letter-spacing:-.004em; }
.gloss { display:block; margin-top:6px; font:400 17px/1.6 var(--text); color:var(--ink-2); max-width:34em; }
.mm { position:absolute; left:-74px; top:12px; width:46px; height:40px; color:var(--ink); }
.vows li:nth-child(2n) .mm { left:-66px; }
.vows li:nth-child(3n) .mm { left:-76px; }
.mm.club { color:var(--wash); }
.promises p { position:relative; max-width:34em; font-size:18px; line-height:1.7; }
.promises p + p { margin-top:18px; }
.promises .mm { top:4px; }
.pt { font:italic 500 26px/1 var(--display); margin-right:4px; }
.line p { max-width:34em; font-size:18px; line-height:1.7; }
.signed { display:flex; align-items:center; gap:30px; margin-top:44px; }
.signed .patch { width:120px; height:100px; flex:none; color:var(--ink); }
.sign { position:relative; display:inline-flex; flex-direction:column; max-width:22em; }
.sign span:first-child { font:400 14px/1.5 var(--ui); color:var(--ink-3); }
.sign .hand { font:italic 500 40px/1.2 var(--display); margin-top:4px; }
.sign-stroke { position:absolute; left:-8px; bottom:-12px; width:180px; height:14px; color:var(--wash); opacity:.9; mix-blend-mode:var(--wash-blend); }
.doc-end { display:flex; align-items:center; flex-wrap:wrap; gap:14px 30px; margin-top:72px; }

@media (max-width: 760px) {
  .doc { margin:12px 0 72px; padding:28px var(--gutter) 30px 66px; }
  .doc .neck { width:150px; right:-80px; top:40%; }
  .part { margin-top:60px; }
  .part .d2 { margin-bottom:20px; }
  .vow { font-size:27px; }
  .gloss { font-size:16px; }
  .mm { left:-48px; top:12px; width:34px; height:26px; }
  .vows li:nth-child(2n) .mm { left:-46px; }
  .vows li:nth-child(3n) .mm { left:-50px; }
  .promises p, .line p { font-size:16.5px; }
  .pt { font-size:23px; }
  .sign .hand { font-size:34px; }
  .signed { flex-direction:column; align-items:flex-start; gap:18px; }
  .signed .patch { width:96px; height:80px; }
  .doc-end { margin-top:52px; }
}