/* Press page — /press/ Layers on property.css (header, slide-out menu, footer, :root tokens). The hero rules live inline in press.html's alongside the rest of the fixed-hero machinery, so this file styles the page body only. Deliberately parallel to about.css: same rhythm, same alternating panels, same measure. The two pages are the site's plain-prose pages, and they should not read as though they came from different sites. */ /* Everything below the hero rides above it in the stack and is opaque — the hero is position:fixed, so an transparent body would let it show through rather than be covered. One wrapper does it for every section; the footer already carries its own background. */ /* Every section after the hero must paint above it — this is what creates the "scrolls up in front of it" effect. This lived on a .pr-body wrapper until the sections became reorderable, at which point a fixed wrapper around a variable set of them made no sense. .pr-alt sets its own ground and comes later in this file, so it still wins. */ .pr-sec{position:relative;z-index:1;background:#fff} .pr-inner{max-width:1160px;margin:0 auto;padding:0 2rem} .pr-narrow{max-width:760px} .pr-sec{padding:4rem 0} /* Alternating panel, same tint as .ab-alt on the about page. */ .pr-alt{background:var(--paper)} .pr-h{font-family:var(--serif);font-weight:300;font-size:clamp(23px,2.8vw,32px); letter-spacing:.01em;margin:0 0 1.6rem} .pr-sec p{margin:0 0 1rem;max-width:66ch} .pr-sec p:last-child{margin-bottom:0} /* The coverage placeholder. Set apart from ordinary body copy — it is an empty state, not a paragraph someone wrote — but not styled as an error: the rule and the muted tone are enough. */ .pr-empty{font-size:.95rem;color:var(--muted);border-left:2px solid var(--line); padding:.15rem 0 .15rem 1.1rem;margin:0} /* Social links. A row of outlined pills that wraps to a column on a narrow screen; each is a 44px-tall target (WCAG 2.5.5). */ .pr-social{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.6rem 0 0;padding:0;list-style:none} .pr-social a{display:inline-flex;align-items:center;gap:.55rem;min-height:44px; padding:.5rem 1.15rem;border:1px solid var(--line);border-radius:2px; color:var(--ink);text-decoration:none;font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;transition:border-color .2s ease,background .2s ease} .pr-social a:hover{border-color:var(--ink);background:#fff} .pr-alt .pr-social a:hover{background:#fff} .pr-social svg{width:17px;height:17px;flex:none} /* Contact rows — the same component as .ab-contact on the about page. */ .pr-contact{display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;margin-top:1.9rem; padding-top:1.6rem;border-top:1px solid var(--line)} .pr-contact a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)} .pr-contact a:hover{border-bottom-color:var(--ink)} .pr-k{display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);margin-bottom:.15rem} @media(max-width:600px){ .pr-inner{padding:0 1.25rem} .pr-sec{padding:3rem 0} /* Full-width pills read better than a ragged wrap at this size. */ .pr-social{flex-direction:column} .pr-social a{justify-content:center} }