/* the Noir design: a black panel beside a large photo, a beige band, then a beige page with the story. Sized in container units. */
body.noir{--ink-n:#0f0f10;--beige:#d9d6d0;--band:#c9c4bb}
.n-wrap{max-width:1120px;margin:0 auto;padding:10px max(20px,4vw) 70px;display:grid;gap:30px}
.n-sheet{container-type:inline-size;box-shadow:0 18px 38px -22px #0006;min-width:0;background:var(--beige);color:#1c1c1a}
.n-one{aspect-ratio:972/1416;display:grid;grid-template-rows:48.4fr 3.5fr 48.1fr}
.n-one.nobottom{grid-template-rows:1fr 0fr 0fr}.n-one.nobottom .n-band,.n-one.nobottom .n-bottom{display:none}
.n-top{display:grid;grid-template-columns:46.1% minmax(0,1fr);min-height:0;background:var(--ink-n)}.n-top.solo{grid-template-columns:1fr}
.n-dark{position:relative;background:var(--ink-n);color:#fff;padding:5.8cqw 4.7cqw;display:flex;flex-direction:column;justify-content:space-between;min-width:0;min-height:0}
.n-dark::before,.n-dark::after{content:"";position:absolute;left:0;right:0;height:1px;background:#ffffff33}.n-dark::before{top:2.9cqw}.n-dark::after{bottom:3.4cqw}
.n-id{display:flex;justify-content:space-between;gap:2cqw;align-items:flex-start}
.n-id h1{margin:0;font-size:max(14px,2.3cqw);font-weight:500;line-height:1.2}.n-id p{margin:.4cqw 0 0;font-size:max(9px,1.45cqw);color:#ddd}.n-id .n-ver{font-size:max(8px,1.05cqw);letter-spacing:.1em;text-transform:uppercase}.n-id .n-agency{color:#999}
.n-qr{margin:0;background:#fff;padding:.7cqw;flex:none}.n-qr svg{display:block;width:7.6cqw;height:7.6cqw}
.n-contact{list-style:none;margin:0 0 2.4cqw;padding:0;display:grid;gap:1.1cqw;font-size:max(9px,1.45cqw)}
.n-contact li{display:flex;align-items:center;gap:1.6cqw;min-width:0}.n-contact svg{flex:none;width:1.5cqw;height:1.5cqw;min-width:11px;min-height:11px;opacity:.85}.n-contact a{color:#fff;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.n-contact a:hover{text-decoration:underline}
.n-photo{min-width:0;min-height:0;overflow:hidden;background:#222}.n-photo img{width:100%;height:100%;object-fit:cover;display:block}
.n-band{background:var(--band)}
.n-bottom{position:relative;display:grid;grid-template-columns:46.1% minmax(0,1fr);grid-template-rows:6.4cqw 1fr auto;padding:0 0 2.9cqw;min-height:0;grid-template-areas:"label label" "tall story" "tall pair";background:var(--beige)}
.n-bottom::before{content:"";position:absolute;left:0;right:0;top:11.4cqw;height:1px;background:#b9b5ac}
.n-label{grid-area:label;margin:0;padding:4.4cqw 4.7cqw 0;font-size:max(10px,1.45cqw);height:6.4cqw}
.n-tall{grid-area:tall;grid-row:2/4;position:relative;z-index:1;margin:0 0 0 4.7cqw;min-height:0;overflow:hidden;background:#c9c6c0}.n-tall img{width:100%;height:100%;object-fit:cover;display:block}
.n-story{grid-area:story;padding:10.6cqw 7cqw 0 2.4cqw;font-size:max(8.5px,1.22cqw);line-height:1.5;color:#2a2a28;min-height:0;overflow:hidden}
.n-story h2{margin:0 0 .8cqw;font-size:max(10px,1.5cqw);font-weight:600;line-height:1.3;letter-spacing:-.01em}.n-story p{margin:0 0 1cqw}
.n-story dl{margin:1cqw 0;display:grid;grid-template-columns:1fr 1fr;gap:.2cqw 3cqw;font-size:.92em}.n-story dl div{display:flex;justify-content:space-between;gap:1cqw;border-bottom:1px solid #bdb9b0}.n-story dt{color:#6b6963}.n-story dd{margin:0}.n-story .n-bg{color:#55534e}
.n-pair{grid-area:pair;display:grid;gap:.5cqw;margin:0 7cqw 0 2.4cqw;width:36cqw;align-self:end}.n-pair.p2{grid-template-columns:1fr 1fr}.n-pair>div{aspect-ratio:3/4;overflow:hidden;background:#111}.n-pair img{width:100%;height:100%;object-fit:cover;display:block}
.n-pair.p1{width:18cqw}
/* the second sheet */
.n-two{padding:0 0 5cqw;display:flex;flex-direction:column;gap:3.4cqw;background:var(--beige)}.n-two .n-label{width:100%;height:auto;padding-bottom:1cqw}
.n-more{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.6cqw;width:calc(100% - 9.4cqw);margin:0 4.7cqw}.n-more.c1{width:34cqw}.n-more.c2{width:68cqw}
.n-more>div{position:relative;aspect-ratio:3/4;overflow:hidden;background:#222;min-width:0}.n-more img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.n-text{margin:0 4.7cqw;display:grid;gap:2.4cqw;font-size:max(11px,1.6cqw);color:#2a2a28}
.n-text h2{margin:0 0 .6cqw;font-size:max(9px,1.2cqw);letter-spacing:.2em;text-transform:uppercase;font-weight:600}.n-text p{margin:0 0 .4cqw}.n-text ul{list-style:none;margin:0;padding:0;display:grid;gap:.5cqw}.n-text a{border-bottom:1px solid #000;text-decoration:none}.n-text small{color:#6b6963;font-size:.7em;letter-spacing:.14em;text-transform:uppercase;margin-left:6px}
.n-end{display:flex;justify-content:space-between;gap:24px;padding:4px 0 0}.n-end p{margin:0 0 16px;color:#4a4946}
/* phones: the photo first, then the dark panel, then the story */
@media(max-width:700px){
  .n-one{aspect-ratio:auto;display:flex;flex-direction:column}
  .n-top{display:flex;flex-direction:column-reverse}.n-photo{aspect-ratio:3/4}
  .n-dark{padding:20px 16px;gap:26px}.n-dark::before,.n-dark::after{display:none}.n-id h1{font-size:19px}.n-id p{font-size:12px}.n-qr svg{width:76px;height:76px}.n-contact{font-size:13px;gap:10px;margin:0}
  .n-band{height:12px}
  .n-bottom{display:flex;flex-direction:column;padding:0 16px 18px;gap:14px}.n-bottom::before{display:none}
  .n-label{padding:16px 0 0;height:auto;font-size:13px}.n-tall{margin:0;aspect-ratio:3/4}.n-story{padding:0;font-size:13px;line-height:1.55}.n-story h2{font-size:15px}
  .n-pair{width:100%!important;margin:0}
  .n-two{padding-bottom:18px}.n-two .n-label{padding:16px 16px 0}.n-more,.n-more.c1,.n-more.c2{width:calc(100% - 32px);margin:0 16px}.n-text{margin:0 16px;font-size:13px}
}
@media print{
  @page{size:A4 portrait;margin:8mm}
  body.noir{background:#fff}
  .n-wrap{max-width:none;padding:0;display:block}
  .n-sheet{box-shadow:none;break-inside:avoid;width:184mm;margin:0 auto}
  .n-one{aspect-ratio:972/1416!important;display:grid!important}
  .n-top{display:grid!important;grid-template-columns:46.1% minmax(0,1fr)!important}
  .n-sheet+.n-sheet{break-before:page}
  .n-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}