/* Contact (2026-10-16): the page in the site's own way. Under the white top, on the same white, the office and the
   email stand large in navy, in one row, the way the home page sets its four numbers; the street photograph follows
   clear in black and white, half on the white and half on the navy footer, where the skyline stands at the end of every
   other page. It replaces the office written over the darkened photograph. The office and the email follow the top
   directly, with no line between (the sentence that stood there was taken out). Linked from the Contact page alone;
   the top keeps openings.css (.op) and the footer contact-ending.css (.end). */

/* the top's headline at the size and weight openings.css gives it, the size of "Let's start the conversation." at the
   end of every page (the older .page-e h1 rule had been shrinking it) */
html .page-e .op__h{font:300 clamp(48px,calc(100vw / var(--z,1) / 18),80px)/1.04 var(--serif);letter-spacing:-.026em;max-width:6.4em}

/* on this page the top, the office and the email keep to the rail of the home page, the ending and the footer, so every
   line of type stands over the edge of the photograph and the footer's columns */
html .op__wrap{max-width:1440px;padding:0 60px}

/* the office and the email */
.ct{padding:0 0 110px}
.ct__row{container-type:inline-size}
html .ct .ct__k{display:block;margin-bottom:14px;font:400 24px/1.25 'PX Spectral',Georgia,serif;letter-spacing:-.006em;color:var(--mute)}
html .ct .ct__v{display:block;font:300 28px/1.14 var(--serif);letter-spacing:-.02em;color:var(--ink)}
html .ct a.ct__v{display:inline-block;transition:opacity .4s var(--ease)}
html .ct a.ct__v:hover{opacity:.55}
html .ct a.ct__v:focus-visible{outline:2px solid var(--navy);outline-offset:6px}
/* on a phone the office is a link to the phone's maps (contact.js, 2026-10-17); it hangs from the top of its line, so
   it keeps the paragraph's height to the pixel */
html .ct .ct__item:first-child a.ct__v{vertical-align:top}

/* the street, where the skyline stands on every other page: the width of the text, half on the white, half on the navy */
.end--contact>.end__ph img{object-position:50% 74%;filter:grayscale(1) contrast(1.06) brightness(.96)}

@media (min-width:901px){
  .ct__row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
  .ct__item:first-child{grid-column:1/span 6}
  /* the office under the headline, the email under the note beside it; both as large as the email can be on one line in
     its five columns (it measures 11.4 times its size) */
  .ct__item:last-child{grid-column:8/span 5}
  html .ct .ct__v{font-size:min(56px,calc(((100cqi - 11 * var(--g)) * 5 / 12 + 4 * var(--g)) / 11.6))}
}

/* arrival: the office and the email rise once, after the top */
@keyframes ct-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.ct__row{animation:ct-rise 1.1s var(--ease) .5s both}

@media (max-width:900px){
  html .op__wrap{padding:0 20px}
  html .page-e .op__h{font-size:44px;max-width:none}
  .ct{padding-bottom:56px}
  .ct__item+.ct__item{margin-top:36px}
  html .ct .ct__k{margin-bottom:8px;font-size:21px}
  /* the email keeps to one line on the narrowest phones */
  html .ct .ct__v{font-size:min(30px,calc(100cqi / 11.6))}
}
@media (prefers-reduced-motion:reduce){.ct *{animation:none!important;transition:none!important}}