/* the Studio design: three printed-style spreads, like a printed comp card laid open */
body.studio{--panel:#d9d7d3;--strip:#fafaf9}
.s-wrap{max-width:1120px;margin:0 auto;padding:10px max(20px,4vw) 70px;display:grid;gap:36px}
.s-spread{display:grid;background:var(--panel);box-shadow:0 18px 38px -22px #0006;aspect-ratio:1.414/1;overflow:hidden;min-width:0}
.s-photo{min-width:0;min-height:0;overflow:hidden;background:#cfcdc9}.s-photo img{width:100%;height:100%;object-fit:cover}
/* 1: portrait | name, measurements, contact | white strip with the QR code */
.s-one{grid-template-columns:50% minmax(0,1fr) 9.5%}.s-one.nophoto{grid-template-columns:minmax(0,1fr) 9.5%}
.s-panel{padding:clamp(16px,3.2vw,40px);display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-width:0}
.s-id h1{font-size:clamp(16px,2.1vw,24px);font-weight:500;margin:0;line-height:1.2}
.s-loc{margin:4px 0 0;color:var(--muted);font-size:clamp(9px,.9vw,11px);letter-spacing:.14em;text-transform:uppercase}
.s-ver{margin:6px 0 0;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.s-stats{margin-top:10px;font-size:clamp(10px,1vw,12.5px);color:#3d3c3a}.s-stats p{margin:2px 0}.s-stats span,.s-info span{font-size:8px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--ink);margin-right:8px}
.s-info{font-size:clamp(10px,1vw,12.5px)}.s-info p{margin:4px 0}
.s-contact{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:clamp(9.5px,.95vw,12px);color:#4a4946}
.s-contact li{display:flex;align-items:center;gap:8px;min-width:0}.s-contact svg{flex:none;opacity:.7}.s-contact a{text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.s-contact a:hover{text-decoration:underline}
.s-strip{background:var(--strip);padding:clamp(8px,1.4vw,16px) clamp(4px,.8vw,10px);display:flex;justify-content:center;align-items:flex-start}
.s-qr{margin:0;text-align:center}.s-qr svg{display:block;width:clamp(40px,5.2vw,64px);height:clamp(40px,5.2vw,64px);margin:0 auto}.s-qr figcaption{margin-top:5px;font-size:6.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
/* 2: a tall photo beside the experience, and a second large photo */
.s-two{grid-template-columns:1fr 1fr}.s-two.wide{grid-template-columns:1fr}
.s-textpanel{display:flex;gap:clamp(12px,2.2vw,28px);padding:clamp(12px,2.2vw,26px);min-width:0;min-height:0}
.s-tall{flex:0 0 36%;min-height:0;overflow:hidden;background:#cfcdc9}.s-tall img{width:100%;height:100%;object-fit:cover}
.s-cols{flex:1;display:flex;flex-direction:column;gap:clamp(10px,1.6vw,20px);justify-content:flex-end;font-size:clamp(9.5px,.95vw,12px);min-width:0;overflow:hidden}
.s-cols h2{margin:0 0 6px;font-size:8px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.s-cols p{margin:0;color:#3d3c3a}.s-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:3px;color:#3d3c3a}.s-cols a{border-bottom:1px solid var(--ink);text-decoration:none}.s-cols small{color:var(--muted);font-size:8px;letter-spacing:.14em;text-transform:uppercase;margin-left:6px}
/* 3: a large photo, and the gallery with the QR code */
.s-three{grid-template-columns:50% 1fr}
.s-gallerypanel{display:grid;grid-template-columns:minmax(0,1fr) 52%;gap:clamp(8px,1.4vw,16px);padding:clamp(10px,1.8vw,22px);min-width:0}
.s-side{display:flex;flex-direction:column;justify-content:space-between;gap:12px}.s-mark{margin:0;font-size:clamp(8px,.9vw,11px);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.s-stack{display:grid;grid-template-rows:1fr 1fr;gap:clamp(8px,1.4vw,16px);min-height:0}.s-stack div{min-height:0;overflow:hidden;background:#cfcdc9}.s-stack img{width:100%;height:100%;object-fit:cover}
.s-foot{display:flex;justify-content:space-between;gap:24px;padding:6px 0 0}.s-foot p{margin:0 0 16px;color:#4a4946}
@media(max-width:860px){
  .s-spread{aspect-ratio:auto;grid-template-columns:1fr!important}
  .s-one .s-photo img,.s-three .s-photo img,.s-two>.s-photo img{aspect-ratio:3/4}
  .s-strip{justify-content:flex-start;padding:16px clamp(16px,3.2vw,40px)}.s-qr svg{width:72px;height:72px}
  .s-textpanel{flex-direction:column}.s-tall{flex:none;aspect-ratio:3/4}.s-cols{justify-content:flex-start;overflow:visible}
  .s-gallerypanel{grid-template-columns:1fr}.s-stack{grid-template-rows:none;grid-template-columns:1fr 1fr}.s-stack div{aspect-ratio:3/4}
  .s-panel{gap:26px}
}
/* print: every spread is one landscape A4 page */
@media print{
  @page{size:A4 landscape;margin:8mm}
  body.studio{background:#fff}
  .s-wrap{max-width:none;padding:0;display:block}
  .s-spread{height:192mm;aspect-ratio:auto;box-shadow:none;break-inside:avoid;display:grid}
  .s-spread+.s-spread{break-before:page}
  .s-foot,.c-example,.c-print,.c-nav{display:none!important}
  .s-one{grid-template-columns:50% minmax(0,1fr) 9.5%!important}.s-two{grid-template-columns:1fr 1fr!important}.s-two.wide{grid-template-columns:1fr!important}.s-three{grid-template-columns:50% 1fr!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}