/* the Minimal design: a clean white sheet, one framed photo, two tall photos, the QR code in the corner. Sized in container units. */
body.minimal{--paper:#f6f8fb;--band:#c9c4bb}
.m-wrap{max-width:1120px;margin:0 auto;padding:10px max(20px,4vw) 70px;display:grid;gap:30px}
.m-sheet{container-type:inline-size;box-shadow:0 18px 38px -22px #0006;min-width:0;background:var(--paper);color:#1c1c1a}
.m-one{aspect-ratio:974/1420;display:grid;grid-template-rows:48.5fr 3.6fr 47.9fr}
.m-one.nobottom{grid-template-rows:1fr 0fr 0fr}.m-one.nobottom .m-band,.m-one.nobottom .m-bottom{display:none}
.m-top{display:grid;grid-template-columns:38.2% minmax(0,1fr);min-height:0;padding:0 4.3cqw 0 0}.m-top.solo{grid-template-columns:1fr}
.m-left{display:flex;flex-direction:column;justify-content:space-between;padding:3.4cqw 3.2cqw 3cqw 4.8cqw;min-width:0;min-height:0}
.m-head{display:flex;justify-content:space-between;gap:1.6cqw;align-items:flex-start}
.m-who{min-width:0}.m-who h1{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:max(13px,2.1cqw);font-weight:600;line-height:1.2}.m-who p{margin:.3cqw 0 0;font-size:max(9px,1.3cqw);color:#9a9ca1}.m-who .m-ver{font-size:max(8px,1cqw);letter-spacing:.1em;text-transform:uppercase;color:#555}
.m-stats{text-align:right;font-size:max(9px,1.3cqw);line-height:1.4;max-width:15cqw;flex:none}.m-stats p{margin:0}.m-stats .m-xs{font-size:.82em;color:#777;margin-top:.4cqw}
.m-contact{list-style:none;margin:0;padding:2.8cqw 0 0 .4cqw;border-top:1px solid #cfd3d9;display:grid;gap:1.1cqw;font-size:max(9px,1.25cqw);margin-left:-1.6cqw;margin-right:0}
.m-contact li{display:flex;align-items:center;gap:1.7cqw;min-width:0;padding-left:1.6cqw}.m-contact svg{flex:none;width:1.3cqw;height:1.3cqw;min-width:11px;min-height:11px;opacity:.7}.m-contact a{color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.m-contact a:hover{text-decoration:underline}
.m-photo{margin:3.6cqw 0 3.2cqw;min-width:0;min-height:0;overflow:hidden;background:#d9dadc}.m-photo img{width:100%;height:100%;object-fit:cover;display:block}
.m-band{background:var(--band)}
.m-bottom{position:relative;display:flex;padding:3.2cqw 4.8cqw 3cqw;min-height:0;background:var(--paper)}
.m-pair{display:grid;gap:1.1cqw;height:100%;width:73.4%;min-height:0}.m-pair.p2{grid-template-columns:1fr 1fr}.m-pair.p1{grid-template-columns:1fr;width:36.4%}
.m-pair>div{min-width:0;min-height:0;overflow:hidden;background:#d9dadc}.m-pair img{width:100%;height:100%;object-fit:cover;display:block}
.m-qr{position:absolute;right:4.8cqw;bottom:3cqw;margin:0}.m-qr svg{display:block;width:7.2cqw;height:7.2cqw}
/* the second sheet */
.m-two{padding:5cqw 4.8cqw;display:flex;flex-direction:column;gap:3.4cqw}
.m-title{margin:0;font-size:max(13px,2.1cqw);font-weight:600}
.m-more{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1.1cqw;width:100%}.m-more.c1{width:36%}.m-more.c2{width:73%}
.m-more>div{position:relative;aspect-ratio:3/4;overflow:hidden;background:#d9dadc;min-width:0}.m-more img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.m-text{display:grid;gap:2.4cqw;font-size:max(11px,1.6cqw);color:#2a2a28;max-width:60ch}
.m-text h2{margin:0 0 .6cqw;font-size:max(9px,1.15cqw);letter-spacing:.2em;text-transform:uppercase;font-weight:600}.m-text p{margin:0 0 .4cqw}.m-text ul{list-style:none;margin:0;padding:0;display:grid;gap:.5cqw}.m-text a{border-bottom:1px solid #000;text-decoration:none}.m-text small{color:#777;font-size:.7em;letter-spacing:.14em;text-transform:uppercase;margin-left:6px}
.m-end{display:flex;justify-content:space-between;gap:24px;padding:4px 0 0}.m-end p{margin:0 0 16px;color:#4a4946}
/* phones: the photo first, then the details, then the two photos */
@media(max-width:700px){
  .m-one{aspect-ratio:auto;display:flex;flex-direction:column}
  .m-top{display:flex;flex-direction:column-reverse;padding:0}.m-photo{margin:0;aspect-ratio:4/5}
  .m-left{padding:18px 16px;gap:18px}.m-who h1{font-size:19px}.m-who p,.m-stats{font-size:12px}.m-contact{margin:0;padding:14px 0 0;font-size:13px;gap:9px}.m-contact li{padding-left:0}
  .m-band{height:12px}
  .m-bottom{padding:16px;flex-direction:column;gap:16px}.m-pair,.m-pair.p1{width:100%;height:auto}.m-pair>div{aspect-ratio:3/4}.m-qr{position:static}.m-qr svg{width:72px;height:72px}
  .m-two{padding:18px 16px}.m-more,.m-more.c1,.m-more.c2{width:100%}.m-text{font-size:13px}
}
@media print{
  @page{size:A4 portrait;margin:8mm}
  body.minimal{background:#fff}
  .m-wrap{max-width:none;padding:0;display:block}
  .m-sheet{box-shadow:none;break-inside:avoid;width:184mm;margin:0 auto}
  .m-one{aspect-ratio:974/1420!important;display:grid!important}
  .m-top{display:grid!important;grid-template-columns:38.2% minmax(0,1fr)!important}
  .m-sheet+.m-sheet{break-before:page}
  .m-end,.c-example,.c-print,.c-nav{display:none!important}
}

/* no blue, anywhere: the browser paints autofilled fields light blue, selections and focus rings blue, taps blue-grey. Keep the field as designed. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:focus{-webkit-text-fill-color:currentColor!important;caret-color:currentColor;transition:background-color 600000s ease-in-out 0s!important;background-clip:text!important}
input:autofill,textarea:autofill,select:autofill{background:transparent!important;color:inherit!important;filter:none!important}
::selection{background:#2b2a28;color:#fbfbfa}
*{-webkit-tap-highlight-color:transparent}
input,textarea,select,progress,meter{accent-color:#2b2a28}
:focus-visible{outline-color:currentColor}