/* the Editorial design: a 4:5 poster. Everything is sized in container units, so the poster scales as one piece. */
body.editorial{--sheet:#fff;--ed-font:"Helvetica Neue",Helvetica,Arial,sans-serif}
.e-wrap{max-width:1120px;margin:0 auto;padding:10px max(20px,4vw) 70px;display:grid;gap:30px}
.e-sheet{container-type:inline-size;background:var(--sheet);box-shadow:0 18px 38px -22px #0006;font-family:var(--ed-font);color:#000;min-width:0}
.e-one{position:relative;aspect-ratio:4/5;display:grid;grid-template-columns:25% 71% 4%;grid-template-rows:100%;padding:2.6cqw 0 2cqw}
.e-left{position:relative;min-width:0}
/* the names: the given name up from the bottom, the surname down from the top, both reading upward */
.e-names{position:absolute;left:1.7cqw;top:0;bottom:0;margin:0;display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:flex-start;font-weight:500;line-height:1;letter-spacing:.005em;text-transform:uppercase}
.e-names span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;line-height:1}
.e-id{position:absolute;left:9.4cqw;top:.6cqw;display:flex;flex-direction:column;gap:.1cqw;font-size:max(9px,1.9cqw);line-height:1.25;text-transform:uppercase;letter-spacing:.01em}.e-id b{font-weight:400}.e-id .e-ver{font-size:.75em;letter-spacing:.12em;margin-top:.6cqw}
.e-qr{position:absolute;left:9.4cqw;top:44%;margin:0}.e-qr svg{display:block;width:7.4cqw;height:7.4cqw}
.e-stats{position:absolute;left:9.2cqw;right:.4cqw;bottom:0;margin:0;font-size:max(8px,1.7cqw);line-height:1.38;text-transform:uppercase}
.e-stats div{display:flex;justify-content:space-between;gap:1cqw}.e-stats dt,.e-stats dd{margin:0;font-weight:400;white-space:nowrap}
/* the grid */
.e-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;min-height:0;background:#d0cfcd}
.e-grid>div{min-width:0;min-height:0;overflow:hidden;background:#e8e7e5}.e-grid img{width:100%;height:100%;object-fit:cover;display:block}
.e-grid.g1{grid-template-columns:1fr}.e-grid.g2{grid-template-columns:1fr 1fr}
.e-grid.g3{grid-template-rows:1fr 1fr}.e-grid.g3>div:first-child{grid-row:1/3}
/* the right edge: a handle, the agency name in a serif face, and a contact line */
.e-right{display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-size:max(7px,1.55cqw);letter-spacing:.02em;min-height:0}
.e-right p{margin:0;white-space:nowrap}.e-h1{writing-mode:vertical-rl}.e-h2{writing-mode:vertical-rl;transform:rotate(180deg)}
.e-logo{writing-mode:vertical-rl;transform:rotate(180deg);font-family:"Times New Roman",Times,Georgia,serif;font-size:max(12px,3.4cqw);letter-spacing:.04em;text-transform:uppercase}
/* the second sheet */
.e-two{padding:6cqw 6cqw 5cqw;display:flex;flex-direction:column;align-items:center;gap:3cqw}
.e-title{margin:0;font-size:max(15px,3cqw);font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-align:center}
.e-two .e-grid{width:78%;aspect-ratio:2/1.45}
.e-text{width:min(84%,560px);display:grid;gap:2.4cqw;text-align:center;font-size:max(11px,1.75cqw);color:#222}
.e-text h2{margin:0 0 .6cqw;font-size:max(8px,1.1cqw);letter-spacing:.24em;text-transform:uppercase;font-weight:500}.e-text p{margin:0 0 .4cqw}.e-text ul{list-style:none;margin:0;padding:0;display:grid;gap:.5cqw}.e-text a{border-bottom:1px solid #000;text-decoration:none}.e-text small{color:#777;font-size:.7em;letter-spacing:.14em;text-transform:uppercase;margin-left:6px}
.e-end{display:flex;justify-content:space-between;gap:24px;padding:4px 0 0}.e-end p{margin:0 0 16px;color:#4a4946}
/* phones: a plain stacked page */
@media(max-width:700px){
  .e-one{aspect-ratio:auto;display:flex;flex-direction:column;gap:18px;padding:0 0 18px}
  .e-grid{order:-1;aspect-ratio:4/5}
  .e-left{display:flex;flex-direction:column;gap:14px;padding:0 16px}
  .e-names,.e-id,.e-qr,.e-stats{position:static}
  .e-names{flex-direction:column;gap:2px}.e-names span{writing-mode:horizontal-tb;transform:none;font-size:clamp(26px,9vw,44px)!important}
  .e-id{font-size:12px}.e-qr svg{width:72px;height:72px}.e-stats{font-size:11px}
  .e-right{flex-direction:row;padding:0 16px;font-size:11px;gap:12px;justify-content:space-between}.e-right p,.e-h1,.e-h2,.e-logo{writing-mode:horizontal-tb;transform:none}.e-logo{font-size:15px}
  .e-two .e-grid{width:100%;order:0}
}
@media print{
  @page{size:A4 portrait;margin:8mm}
  body.editorial{background:#fff}
  .e-wrap{max-width:none;padding:0;display:block}
  .e-sheet{box-shadow:none;break-inside:avoid}
  .e-one{aspect-ratio:4/5;display:grid!important;width:100%}
  .e-sheet+.e-sheet{break-before:page;margin-top:0}
  .e-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}