/* /story and /videos. Shared components are in site.css: see DESIGN.md. */

/* ======================= /story ======================= */

/* Opener: the surgeon line and John at 21 */
.sh{position:relative;padding-block:clamp(28px,4vw,64px) clamp(30px,4vw,64px)}
.sh__in{display:grid;gap:clamp(18px,3vw,48px)}
.sh__h{margin-top:6px}
.sh__quote{font:700 italic clamp(21px,2vw,29px)/1.25 var(--slab);margin-top:clamp(14px,1.8vw,26px);max-width:34em}
.sh__deck{font-size:clamp(18px,1.5vw,21px);line-height:1.42;margin-top:12px;max-width:46ch}
.sh__john{max-width:min(62vw,400px);transform:rotate(1.2deg)}
.sh__john img{width:100%;height:auto;border:2px solid var(--ink);padding:5px;background:var(--cream);box-shadow:4px 4px 0 rgba(23,18,13,.55)}
.sh__john figcaption{font:italic 500 15px/1.3 var(--slab);margin-top:9px}

/* Timeline: a big year, ruled off, the words beside it */
.tl{padding-block:clamp(14px,2vw,30px) clamp(40px,5vw,80px)}
.e{border-top:3px solid var(--ink);padding-block:clamp(18px,2.4vw,36px) clamp(30px,4vw,64px)}
.tl .wrap>.e:first-child{border-top:0}
.e__y{font:400 clamp(92px,12.4vw,178px)/.86 var(--gothic);letter-spacing:.002em}
.e__y--red{color:var(--red)}
.e__y--cream{color:var(--cream)}
.e__y--blank span{color:var(--red-k);font-family:var(--hand);letter-spacing:.04em}
.e__y--stack{font-size:clamp(60px,6vw,88px);line-height:.92}
.e__y--stack span{display:inline-block;margin-right:.18em}
.e__t{font:400 clamp(44px,5vw,76px)/.94 var(--gothic);text-transform:uppercase;letter-spacing:.006em}
.e__t--big{font-size:clamp(84px,10vw,150px);line-height:.88}
.e__text p{margin-top:12px;max-width:52ch}
.e__text p a,.e99__text a{font-weight:600}
.e__body{display:grid;gap:clamp(18px,2.4vw,36px);margin-top:12px;min-width:0}
.e__fig{align-self:start}
.e__fig figcaption,.e51__panel figcaption,.third__pic figcaption,.print figcaption,.e09__nick figcaption{font:italic 500 15px/1.3 var(--slab);margin-top:7px}
.e51__panel figcaption b{font-weight:800}

/* 1951 */
.ad51 img{width:100%;height:auto;box-shadow:0 2px 0 rgba(23,18,13,.3),5px 6px 0 rgba(23,18,13,.16)}
.e51__t{border-top:3px solid var(--ink);margin-top:18px}
.e51__panel{margin-top:22px}
.e51__panel img{width:100%;height:auto;border:2px solid var(--ink);padding:4px}
.e51__pencil{margin-top:12px;text-align:right}

/* 1966, 1974 */
.pair{display:grid;border-top:3px solid var(--ink)}
.e--small{border-top:0;padding-block:clamp(18px,2.4vw,32px) clamp(20px,3vw,40px)}
.e--small+.e--small{border-top:1px solid rgba(23,18,13,.5)}
.e--small .e__y{font-size:clamp(84px,9vw,132px)}
.e--small .e__t{font-size:clamp(40px,3.6vw,56px);margin-top:6px}

/* Undated prints, tacked up crooked */
.prints{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px);align-items:start;margin-top:18px}
.print--3{grid-column:1/-1;width:52%;justify-self:center}
.print img{width:100%;height:auto;border:6px solid var(--cream);outline:1px solid rgba(23,18,13,.55);box-shadow:3px 4px 0 rgba(23,18,13,.32)}
.print--1{transform:rotate(-1.4deg)}
.print--2{transform:rotate(1deg);margin-top:10px}
.print--3{transform:rotate(.7deg)}
.print--clip{transform:rotate(-.8deg);max-width:240px}
.print--clip img{border-width:0;outline:0;box-shadow:3px 4px 0 rgba(23,18,13,.32)}

/* 1979: the roll of film, on ink */
.forty{position:relative;padding-block:calc(var(--tear-h) + clamp(16px,3vw,50px)) calc(var(--tear-h) + clamp(30px,4vw,60px))}
.forty__head{display:grid;gap:8px}
.forty .e__t{font-size:clamp(66px,8vw,120px);line-height:.9}
.forty__cols p{margin-top:12px;max-width:52ch}
.film{margin-top:clamp(20px,3vw,44px)}
.film__roll{overflow-x:auto;background:#000;-webkit-overflow-scrolling:touch}
.film__roll img{width:1000px;max-width:none;height:auto;margin-inline:auto}
.film figcaption{font-size:16px;line-height:1.35;margin-top:10px;color:#e6d8bd}
.film figcaption b{color:var(--cream);font-weight:700}
.film__hint{color:#e6d8bd;font-style:italic}
.aprons{display:grid;gap:18px;margin-top:clamp(28px,4vw,60px)}
.aprons__pic{max-width:372px}
.aprons__h{color:var(--cream)}
.aprons__sub{font:800 italic clamp(25px,3vw,44px)/1.1 var(--slab);color:var(--red-hot);margin-top:6px}
.aprons__cap{margin-top:12px;color:#e6d8bd}

/* The ad run, clipped and laid on kraft */
.adrun{padding-block:clamp(36px,5vw,76px) clamp(44px,6vw,90px)}
.adrun__deck{font:700 italic clamp(21px,2vw,29px)/1.25 var(--slab);margin-block:12px 8px;max-width:38em}
.adrun__cols{display:grid;gap:clamp(26px,3vw,40px);margin-top:clamp(22px,3vw,44px);align-items:start}
.adrun__col{display:grid;gap:clamp(26px,3vw,40px);min-width:0}
.clip{min-width:0}
.clip--a img{transform:rotate(-.6deg)}
.clip--b img{transform:rotate(.5deg)}
.clip--c img{transform:rotate(.4deg)}
.ad figcaption b{color:var(--red-k)}
.clip--c img{border:2px solid var(--ink)}
.ad09{display:grid;justify-items:center;gap:6px}
.ad09 img{width:100%;height:auto;mix-blend-mode:multiply}
.ad09 img.ad09__man{width:52%}

/* The next ad. Not written yet. */
.next{position:relative;border:3px dashed var(--ink);padding:clamp(22px,2.6vw,34px) 18px;min-height:200px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.next__l{font:400 clamp(52px,5vw,76px)/.92 var(--gothic);text-transform:uppercase}
.next__t{font:700 italic 19px/1.25 var(--slab);margin-top:6px}
.next__p{margin-top:12px}

/* 1989 */
.e__fig--sm{max-width:492px}

/* 1999 */
.e99{display:grid;gap:clamp(18px,2.4vw,36px)}
.e99__text p{margin-top:12px;max-width:54ch}
.tales{margin-top:14px;border-top:2px solid var(--ink)}
.tale{padding-block:11px;border-bottom:1px solid rgba(23,18,13,.5)}
.tale dt{font:400 clamp(27px,2.4vw,34px)/1.04 var(--gothic);text-transform:uppercase;letter-spacing:.012em}
.tale dd{margin:2px 0 0;max-width:54ch}
.e99__fam{align-self:start}
.e99__fam figcaption{font:italic 500 15px/1.3 var(--slab);margin-top:7px}

/* Marie: kept serious */
.marie{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2.4vw,36px);background:var(--ink);color:var(--cream);padding:clamp(18px,3vw,44px);margin-top:clamp(6px,1vw,14px)}
.marie .kick-red{color:var(--red-hot)}
.marie__pic img{width:clamp(108px,12vw,174px);height:auto;border:2px solid var(--cream);padding:4px;background:#000}
.marie__copy{display:contents}
.marie__copy>.kick-red,.marie__copy>.marie__h{grid-column:2}
.marie__copy>.marie__cols,.marie__copy>.marie__poem{grid-column:1/-1}
.marie__pic{grid-row:1/span 2}
.marie__h{font:400 clamp(44px,5.6vw,84px)/.94 var(--gothic);text-transform:uppercase;letter-spacing:.006em}
.marie__h span{display:block}
.marie__h span:last-child{color:var(--red-hot)}
.marie__cols p+p{margin-top:12px}
.marie__cols p{max-width:54ch}
.marie__poem{border-top:1px solid rgba(244,231,207,.45);padding-top:12px}
.marie__poem blockquote{font:italic 500 clamp(20px,1.9vw,26px)/1.3 var(--slab);margin-top:8px}

/* Third generation */
.third{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(14px,2.4vw,36px);align-items:start}
.third__pic{width:clamp(120px,14vw,171px)}
.third__pic img{width:100%;height:auto;border:2px solid var(--ink);padding:4px}
.third__h{font:400 clamp(36px,3.6vw,56px)/.96 var(--gothic);text-transform:uppercase;letter-spacing:.008em}
.third p{margin-top:10px;max-width:58ch}

/* 2004: set like a notice in the paper. No jokes in this one. */
.notice{border:2px solid var(--ink);outline:1px solid var(--ink);outline-offset:3px;padding:clamp(18px,3vw,40px);margin-top:14px;max-width:880px}
.notice__l{font:800 clamp(25px,3vw,42px)/1.18 var(--slab)}
.notice__q{font:italic 500 clamp(19px,1.8vw,24px)/1.32 var(--slab);margin-top:14px;max-width:44em}

/* The wall: the photo whole, then the words on ink */
.wall{position:relative;background:var(--ink);color:var(--cream);padding-bottom:calc(var(--tear-h) + clamp(26px,4vw,60px))}
.wall__photo{position:relative;max-width:1920px;margin-inline:auto}
.wall__photo img{width:100%;height:auto}
.wall__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,18,13,0) 70%,rgba(23,18,13,.88) 92%,#17120d 100%)}
.wall__in{position:relative;display:grid;gap:clamp(16px,2.4vw,36px);margin-top:calc(clamp(40px,6vw,90px) * -1)}
.wall .kick{color:var(--cream);margin-bottom:4px}
.wall__h{font:400 clamp(90px,10vw,150px)/.88 var(--gothic);text-transform:uppercase;white-space:nowrap}
.wall__t{font-size:clamp(18px,1.5vw,21px);line-height:1.42;max-width:44ch;margin-top:12px}
.wall figcaption{font:italic 500 15px/1.3 var(--slab);margin-top:7px;color:#e6d8bd}
.wall .frame{border-color:var(--cream);align-self:end}
.wall__b img{width:100%;height:auto}

/* 2006 on */
.tl.paper-k{padding-top:clamp(20px,3vw,44px)}
.tl.paper-k .wrap>.e:first-child{padding-top:0}
.e--2004{padding-bottom:clamp(10px,2vw,30px)}
.seal{width:clamp(110px,12vw,150px);height:auto;mix-blend-mode:multiply}
.badges{display:flex;gap:clamp(8px,1.4vw,18px);flex-wrap:wrap}
.badges img{width:clamp(88px,8vw,116px);height:auto}
.e09__nick{margin-top:18px;max-width:320px}

/* Off the clock */
.off{padding:clamp(18px,3vw,44px);border:2px solid var(--ink);box-shadow:5px 6px 0 rgba(23,18,13,.32)}
.off__h{font:400 clamp(44px,5.6vw,84px)/.94 var(--gothic);text-transform:uppercase;letter-spacing:.006em;margin-top:4px}
.off__grid{display:grid;gap:clamp(16px,3vw,44px);margin-top:14px;align-items:start}
.off__list{border-top:3px solid var(--ink)}
.off__list li{display:grid;gap:2px 18px;padding-block:13px;border-bottom:1px solid rgba(23,18,13,.5)}
.off__y{font:400 clamp(30px,2.6vw,38px)/1 var(--gothic);color:var(--red-k)}
.off__list h3{font:900 clamp(21px,1.9vw,26px)/1.15 var(--slab)}
.off__list p{margin-top:4px;max-width:54ch}
.off__jar figcaption{margin-top:6px}

/* Today */
.today{padding-block:clamp(30px,4vw,64px) calc(var(--tear-h) + clamp(20px,4vw,50px))}
.today__top{display:grid;gap:clamp(18px,3vw,44px);align-items:center}
.today__line{font-size:clamp(18px,1.5vw,21px);line-height:1.42;margin-top:12px;max-width:42ch}
.today__status{font:800 italic 18px/1.3 var(--slab);color:var(--red-k);margin-top:10px}
.today__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.today__motto{margin-top:clamp(26px,4vw,60px)}
.src{margin-top:clamp(26px,3vw,44px)}
.src h2{margin-bottom:6px}
.src li+li{margin-top:3px}
.src p{margin-top:10px;max-width:70ch}
.src a{display:inline-block;padding-block:2px;font-weight:600}

/* ---- wide ---- */
@media (min-width:600px){
  .prints{grid-template-columns:repeat(3,minmax(0,1fr))}
  .print--2{margin-top:14px}
  .print--3{grid-column:auto;width:auto}
}
@media (min-width:700px){
  .adrun__cols{grid-template-columns:1.08fr 1fr .96fr}
  .wall__in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .wall__copy{grid-column:1/-1}
  .pair{grid-template-columns:1fr 1fr;gap:0 var(--gut)}
  .e--small+.e--small{border-top:0}
  .off__list li{grid-template-columns:130px minmax(0,1fr)}
  .marie__copy>.marie__cols{grid-column:2}
  .marie__copy>.marie__poem{grid-column:2}
  .marie__pic{grid-row:1/span 4}
}
@media (min-width:700px){
  .sh__in{grid-template-columns:minmax(0,1fr) minmax(300px,400px);align-items:center}
  .sh__john{max-width:none}
  .sh__h{font-size:clamp(110px,10.8vw,170px)}

  .e{display:grid;grid-template-columns:clamp(170px,16.5vw,250px) minmax(0,1fr);gap:clamp(18px,2.4vw,36px)}
  .e__y{position:sticky;top:72px;align-self:start;font-size:clamp(84px,9.4vw,140px)}
  .e__y--stack{font-size:clamp(58px,5.4vw,80px)}
  .e__y--stack span{display:block;margin:0}
  .e__body{margin-top:0}
  .e__text p:first-of-type{margin-top:14px}
  .und{grid-template-columns:minmax(0,1fr) 240px;align-items:start}
  .e__body--2{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
  .e--1989 .e__body--2{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr)}
  .e__body--ad{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
  .e__body--seal{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .e--small{display:block}
  .e--small .e__y{position:static;font-size:clamp(84px,8.4vw,120px)}

  .forty__head{grid-template-columns:clamp(170px,16.5vw,250px) minmax(0,1fr);gap:clamp(18px,2.4vw,36px);align-items:start}
  .forty .e__y{font-size:clamp(84px,9.4vw,140px);position:static}
  .forty__cols{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gut)}
  .film__roll img{width:100%;max-width:1400px}
  .film__hint{display:none}
  .aprons{grid-template-columns:372px minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,60px)}
  .aprons__h{font-size:clamp(90px,10vw,150px);line-height:.88}
  .wall__in{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr) minmax(0,.72fr);align-items:end}
  .wall__copy{grid-column:auto}
  .wall__photo img{aspect-ratio:2.05;object-fit:cover;object-position:50% 78%}


  .e99{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr)}

  .marie{grid-template-columns:auto minmax(0,1fr)}
  .marie__cols{display:grid;grid-template-columns:1fr 1fr;gap:10px var(--gut)}
  .marie__cols p+p{margin-top:0}
  .marie__cols p:last-child{grid-column:1/-1}

  .off__grid{grid-template-columns:minmax(0,1fr) 340px}
  .today__top{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .today__y{position:static}
}
@media (min-width:1440px){
  .sh__h{font-size:178px}
}
@media (max-width:699px){
  .marie__h{font-size:clamp(40px,12.4vw,56px)}
  .e{padding-block:14px 26px}
  .e__y{font-size:clamp(72px,23vw,92px)}
  .e--small{padding-block:12px 18px}
  .e--small .e__y{font-size:72px}
  .e__y--stack{font-size:clamp(46px,14vw,58px)}
  .e__y--stack span{margin-right:.14em}
  .e__t{font-size:clamp(40px,11.4vw,48px)}
  .e__t--big{font-size:clamp(80px,24vw,100px)}
  .e__body{margin-top:8px}
  .sh__h{font-size:clamp(66px,20.4vw,84px)}
  .sh__john{max-width:56vw}
  .tl{padding-top:4px;padding-bottom:24px}
  .forty .e__t{font-size:52px}
  .forty .e__y{font-size:clamp(72px,23vw,92px)}
  .aprons{grid-template-columns:44% minmax(0,1fr);align-items:center;gap:14px}
  .aprons__h{font-size:clamp(38px,11.6vw,46px);line-height:.96}
  .aprons__sub{font-size:19px}
  .aprons__cap{grid-column:1/-1}
  .aprons__copy{display:contents}
  .aprons__pic{grid-row:1/span 2}
  .aprons__h{align-self:end}
  .aprons__sub{align-self:start;margin-top:-8px}
  .und{gap:12px}
  .print--clip{max-width:none;display:grid;grid-template-columns:42% minmax(0,1fr);gap:12px;align-items:center;transform:none}
  .print--clip img{transform:rotate(-.8deg)}
  .print--clip figcaption{margin:0}
  .prints{margin-top:12px}
  .e--small{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px}
  .e--small .e__text{display:contents}
  .e--small .e__t{margin:0;font-size:38px}
  .e--small .e__text p{flex:0 0 100%;margin-top:4px}
  .third{display:block}
  .third__pic{float:left;width:118px;margin:4px 14px 6px 0}
  .third::after{content:"";display:block;clear:both}
  .third__pic figcaption{font-size:14px}
  .e__body--seal{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .seal{width:92px}
  .e--2011 .e__body--seal{grid-template-columns:1fr}
  .e--2011 .badges img{width:84px}

  /* The ad run becomes a row you slide through */
  .adrun{padding-bottom:34px}
  .adrun__cols{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:calc(var(--pad) * -1);padding:4px var(--pad) 12px;margin-top:8px}
  .adrun__col{display:contents}
  .adrun__cols>*>*{flex:0 0 76vw;scroll-snap-align:center}
  .clip--a{order:1}.clip--b{order:2}.clip--c{order:3}.clip--d{order:4}.next{order:5;align-self:stretch}
  .adrun__deck{font-size:20px}

  .wall__h{font-size:clamp(90px,28vw,112px)}
  .wall__in{margin-top:-36px}
  .wall__photo img{aspect-ratio:1.5;object-fit:cover;object-position:62% 40%}
}
@media (min-width:700px){.adrun__hint{display:none}}

/* ======================= /videos ======================= */

/* Bill line under each title: who, length, when */
.bill{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:16px;line-height:1.25;margin-top:6px}
.bill__s{font-weight:700}
.bill .ld{flex:1 1 18px;min-width:18px}
.bill__d{font:400 24px/1 var(--gothic);letter-spacing:.02em}
.bill__y{flex:1 1 100%;font:italic 500 15px/1.25 var(--slab)}

/* Facade inside a fixed 16:9 frame so every poster lines up */
.vposter .facade{color:var(--cream);padding:4px;background:#000}
.vposter .facade img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover}
.vposter .facade-frame{border:2px solid currentColor}

/* The feature: lit like the homepage's Now Showing */
.vf{position:relative;background:var(--ink);color:var(--cream);padding-block:clamp(26px,4vw,64px) calc(var(--tear-h) + clamp(26px,4vw,64px))}
.vf .kick{color:var(--red-hot)}
.vf__in{display:grid;gap:18px}
.vf__h{font:400 clamp(84px,14vw,210px)/.86 var(--gothic);text-transform:uppercase;margin-top:4px}
.vf__h span{display:block}
.vf__t{font:800 italic clamp(25px,2.6vw,38px)/1.15 var(--slab);margin-top:clamp(12px,1.6vw,22px)}
.vf .bill{max-width:30em}
.vf .bill__d{color:var(--cream)}
.vf__n{margin-top:10px;max-width:40ch}
.vf__v{min-width:0}
.vf .facade__play{left:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px)}
.vf .vposter .facade img{object-position:50% 58%}

/* On the news */
.vn{padding-block:clamp(26px,4vw,60px) clamp(36px,5vw,76px)}
.vn__rh{font-size:clamp(30px,3vw,44px)}
.vn__grid{display:grid;gap:clamp(26px,3vw,44px);margin-top:clamp(12px,1.6vw,22px)}

/* Video cards */
.vcard{min-width:0}
.vcard__t{font:400 clamp(36px,3.4vw,52px)/.98 var(--gothic);text-transform:uppercase;letter-spacing:.008em;margin-top:10px}
.vcard__n{margin-top:6px;max-width:44ch}
.vcard--big .vcard__t{font-size:clamp(44px,4.6vw,70px)}

/* The reel */
.vr{padding-block:clamp(32px,4.4vw,64px) calc(var(--tear-h) + clamp(30px,4vw,60px))}
.vr__head{display:grid;gap:4px}
.vr__pencil{transform:rotate(-1.5deg)}
.vr__grid{display:grid;gap:clamp(20px,2.6vw,38px) clamp(14px,2vw,28px);margin-top:clamp(16px,2.4vw,34px)}
.vr__fine{margin-top:clamp(24px,3vw,40px);max-width:70ch}
.vr__fine a{font-weight:600;display:inline-block;padding-block:2px}
.vr .facade__play{left:10px;bottom:10px;gap:6px;padding:4px 10px 4px 6px;box-shadow:3px 3px 0 #000}
.vr .facade__play svg{width:32px}
.vr .facade__play b{font-size:18px}

/* Phone: poster left, words right. Saves a lot of thumb. */
@media (max-width:599px){
  .vr .vcard{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:12px;align-items:start}
  .vr .vcard__t{font-size:30px;margin-top:0}
  .vr .bill{font-size:15px}
  .vr .bill .ld{display:none}
  .vr .bill__d{font-size:21px;order:-1;flex:0 0 100%}
  .vr .bill__s{flex:0 0 100%}
  .vr .vcard__n{font-size:16px;line-height:1.35}
  .vr .facade__play{left:6px;bottom:6px;padding:3px 6px}
  .vr .facade__play svg{width:24px}
  .vr .facade__play b{display:none}
}
@media (min-width:600px){
  .vr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vr .vcard:last-child .vcard__t{font-size:clamp(36px,3.4vw,52px)}
}
@media (min-width:700px){
  .vf__in{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);align-items:center;gap:clamp(24px,3vw,48px)}
  .vf__h{font-size:clamp(84px,10.4vw,170px)}
  .vcard--big{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center}
  .vcard--big .vcard__t{margin-top:0}
  .vr__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vr__head{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  /* Reel posters are small frames, so the cards stay small. The long one finishes the row. */
  .vr .vcard:last-child{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,2vw,28px);align-items:center}
  .vr .vcard:last-child .vcard__t{margin-top:0}
}
@media (min-width:1200px){
  .vr__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vr .vcard:last-child{grid-column:auto;display:block}
  .vr .vcard:last-child .vcard__t{margin-top:10px}
}
@media (max-width:319px){
  .wall__h{font-size:52px;white-space:normal}
}

/* The generations: the old site's family page, as posted and printed. */
.fam{align-items:start}
.fam__pic{justify-self:center;width:100%;max-width:420px;transform:rotate(-1deg)}
.fam__pic img{display:block;width:100%;height:auto;border:6px solid #fbf8f1;outline:1px solid rgba(23,18,13,.45);box-shadow:3px 4px 0 rgba(23,18,13,.32)}
.fam__pic figcaption{font:italic 500 15px/1.3 var(--slab);margin-top:9px}
@media (min-width:700px){.fam{grid-template-columns:minmax(0,1fr) minmax(260px,400px)}}