/* Contact page (/contact/). The header, rules and footer are the homepage's (home-sections.css,
   site-chrome.css); the base below matches news/news.css so the two pages sit the same way. */

:root{
    --page:#fcfaf7; --frame:#fcfaf7;
    --line:#e6e0d8; --ink:#2a2724; --body:rgba(42,39,36,.8);
    --muted:#8f8880;
    --orange:#eb663a;
    --serif:'LT Superior Serif', Georgia, 'Times New Roman', serif;
    --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --sans:'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --rail:20px;
    --measure:760px;
}
@media (min-width:768px){ :root{ --rail:48px; } }
@media (min-width:1024px){ :root{ --rail:calc(100% * 120 / 1440); } }
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ overflow-x:hidden; }
body{ background:var(--page); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5; }
a{ color:inherit; }
a:hover{ color:var(--orange); }
:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.frame{ max-width:1440px; margin:0 auto; background:var(--frame); }
/* The content column. On desktop its side borders are the page's two inner rules, which run unbroken
   from the header to the footer: so its vertical spacing goes inside it (a block's top and bottom padding
   sits within its .wrap, never around it), and flow-root keeps its children's margins in, instead of
   letting them collapse out and open a gap in the rules. */
.wrap{ margin:0 var(--rail); display:flow-root; }
@media (min-width:1024px){ .wrap{ margin-inline:var(--col-edge); border-left:var(--col-line) solid var(--line); border-right:var(--col-line) solid var(--line); padding-left:clamp(28px,2.8vw,40px); padding-right:clamp(28px,2.8vw,40px); } }

.contact-head > .wrap{ padding-top:clamp(48px,7vw,104px); padding-bottom:clamp(24px,3vw,40px); }
.contact-head h1{ font-family:var(--serif); font-weight:500; font-size:clamp(42px,6.2vw,84px); line-height:1.02; letter-spacing:-.045em; }
.contact-head p{ margin-top:16px; font-size:clamp(16px,1.4vw,18px); color:var(--body); }

/* One row per way to reach us: a small label on the left, the details on the right.
   On phones the label sits above the details. */
.rows{ max-width:var(--measure); border-top:1px solid var(--ink); }
.row{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; padding:24px 0; border-bottom:1px solid var(--line); }
.row h2{ font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-top:5px; }
.row .main{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.2vw,28px); line-height:1.2; letter-spacing:-.02em; overflow-wrap:anywhere; }
.row .main a{ text-decoration:none; }
.row .main a:hover{ text-decoration:underline; text-underline-offset:4px; }
.row p.note{ margin-top:8px; font-size:15.5px; line-height:1.6; color:var(--body); }
.row p.note a{ color:var(--ink); }
.row address{ font-style:normal; font-size:17px; line-height:1.6; }
.row address strong{ font-weight:500; }
@media (max-width:640px){
    .row{ grid-template-columns:minmax(0,1fr); gap:8px; padding:20px 0; }
    .row h2{ padding-top:0; }
}
.rows + .end{ height:clamp(48px,6vw,88px); }