/* the Portrait design: a large close-up beside the details, a beige band, a row of three photos, and a footer. Sized in container units so it scales as one sheet. */
body.portrait{--sheet:#fff}
.p-wrap{max-width:1120px;margin:0 auto;padding:10px max(20px,4vw) 70px;display:grid;gap:30px}
.p-sheet{container-type:inline-size;background:var(--sheet);box-shadow:0 18px 38px -22px #0006;color:#1c1c1a;min-width:0}
.p-one{aspect-ratio:972/1420;display:grid;grid-template-rows:48.2fr 3.4fr 38.3fr 10.1fr}
.p-one.nobottom{grid-template-rows:48.2fr 0fr 0fr 10.1fr}.p-one.nobottom .p-band,.p-one.nobottom .p-row{display:none}
.p-top{display:grid;grid-template-columns:50.2% minmax(0,1fr);min-height:0}
.p-big{min-height:0;overflow:hidden;background:#e8e7e5}.p-big img{width:100%;height:100%;object-fit:cover;display:block}
.p-top.solo{grid-template-columns:1fr}
.p-info{display:flex;flex-direction:column;padding:5.4cqw 8.6cqw 3.2cqw 7.8cqw;min-width:0;min-height:0}
.p-head{display:grid;grid-template-columns:auto 1fr auto;gap:2cqw;align-items:start}
.p-who{white-space:nowrap}.p-who h1{margin:0;font-size:max(12px,1.9cqw);font-weight:500;line-height:1.25}.p-who p{margin:.2cqw 0 0;font-size:max(9px,1.35cqw);color:#555}.p-who .p-ver{font-size:max(8px,1.1cqw);letter-spacing:.1em;text-transform:uppercase}
.p-mid{margin:0;font-size:max(8px,1.2cqw);color:#8a8885;text-align:center;padding-top:.6cqw}
.p-stats{text-align:right;font-size:max(10px,1.5cqw);line-height:1.35}.p-stats p{margin:0}.p-stats .p-xs{font-size:.78em;color:#666;margin-top:.5cqw}
.p-second{margin:4.4cqw 0 0;width:100%;aspect-ratio:76/100;overflow:hidden;background:#e8e7e5;flex:none}.p-second img{width:100%;height:100%;object-fit:cover;display:block}
.p-contact{margin-top:auto;padding-top:2.4cqw;display:flex;justify-content:space-between;gap:1.6cqw;font-size:max(8px,1.22cqw);align-items:baseline;flex-wrap:wrap}
.p-contact p{margin:0}.p-contact b{font-weight:600;margin-right:.6cqw}.p-contact a{text-decoration:none;color:inherit}.p-contact a:hover{text-decoration:underline}.p-ig{color:#555}
.p-band{background:#c9c4bb}
.p-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.3cqw;min-height:0;background:#fff}.p-row.r1{grid-template-columns:1fr}.p-row.r2{grid-template-columns:1fr 1fr}
.p-row>div{min-width:0;min-height:0;overflow:hidden;background:#e8e7e5}.p-row img{width:100%;height:100%;object-fit:cover;display:block}
.p-foot{display:grid;grid-template-columns:1.25fr 1fr 12cqw;gap:3cqw;align-items:center;padding:1.8cqw 4.8cqw;min-height:0;overflow:hidden}
.p-col h2{margin:0 0 .6cqw;font-size:max(8px,1.2cqw);font-weight:600}.p-col ul{list-style:none;margin:0;padding:0;font-size:max(8px,1.22cqw);line-height:1.55;color:#333}
.p-qr{justify-self:end}.p-qr figure{margin:0}.p-qr svg{display:block;width:9.4cqw;height:9.4cqw}
/* the second sheet */
.p-two{padding:6cqw;display:flex;flex-direction:column;align-items:center;gap:3.4cqw}
.p-title{margin:0;font-size:max(15px,2.6cqw);font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-align:center}
.p-more{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.6cqw;width:100%}.p-more.c1{width:34%}.p-more.c2{width:68%}
.p-more>div{position:relative;aspect-ratio:3/4;overflow:hidden;background:#e8e7e5;min-width:0}.p-more img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.p-text{width:min(84%,560px);display:grid;gap:2.4cqw;text-align:center;font-size:max(11px,1.7cqw);color:#222}
.p-text h2{margin:0 0 .6cqw;font-size:max(8px,1.1cqw);letter-spacing:.24em;text-transform:uppercase;font-weight:500}.p-text p{margin:0 0 .4cqw}.p-text ul{list-style:none;margin:0;padding:0;display:grid;gap:.5cqw}.p-text a{border-bottom:1px solid #000;text-decoration:none}.p-text small{color:#777;font-size:.7em;letter-spacing:.14em;text-transform:uppercase;margin-left:6px}
.p-end{display:flex;justify-content:space-between;gap:24px;padding:4px 0 0}.p-end p{margin:0 0 16px;color:#4a4946}
/* phones: a plain stacked page */
@media(max-width:700px){
  .p-one{aspect-ratio:auto;display:flex;flex-direction:column}
  .p-top{display:flex;flex-direction:column}.p-big{aspect-ratio:3/4}
  .p-info{padding:18px 16px;gap:14px}.p-who h1{font-size:18px}.p-who p{font-size:12px}.p-stats{font-size:13px}.p-mid{font-size:11px}
  .p-second{margin:6px auto 0;width:70%}
  .p-contact{font-size:12px;flex-direction:column;gap:6px}
  .p-band{height:12px}.p-row{aspect-ratio:3/2}
  .p-more,.p-more.c1,.p-more.c2{width:100%}
  .p-foot{grid-template-columns:1fr 1fr;padding:18px 16px;gap:14px}.p-col h2,.p-col ul{font-size:12px}.p-qr{grid-column:1/-1;justify-self:start}.p-qr svg{width:72px;height:72px}
}
@media print{
  @page{size:A4 portrait;margin:8mm}
  body.portrait{background:#fff}
  .p-wrap{max-width:none;padding:0;display:block}
  .p-sheet{box-shadow:none;break-inside:avoid;width:184mm;margin:0 auto}
  .p-one{aspect-ratio:972/1420!important;display:grid!important}
  .p-top{display:grid!important;grid-template-columns:50.2% minmax(0,1fr)!important}
  .p-sheet+.p-sheet{break-before:page}
  .p-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}