/* C.O.R.A.L. Petersburg. Shared base for every public page.
   Page-specific rules stay inline in the page that uses them.

   This file exists because the design tokens and the topbar, form, button and
   footer recipes are now needed by more than one page. The alternative was a
   byte-identical copy of the block in each file, which drifts the first time
   someone edits one of them.

   Anything added here must be used by at least two pages. */

:root{
  --ink:#12160F; --canopy:#1E2A1E; --canopy-2:#243228;
  --parchment:#F2EDE1; --parchment-dim:#E7E0CF;
  --brass:#B4903F; --brass-soft:#C9A868;
  --fieldstone:#9A927C; --fieldstone-panel:#A49B84; --ember:#A44A2E;
  --line: rgba(242,237,225,0.16);
  /* --line composites to roughly 1.6:1 against the panels, which is fine for a
     decorative rule and fails WCAG 1.4.11 for the boundary of a control. Form
     fields use this instead. */
  --control-line: var(--fieldstone-panel);
}
*{box-sizing:border-box;}
/* Any `display` declaration on an element beats the user-agent [hidden] rule,
   so the hidden attribute silently stops working the moment a component sets
   display:flex or display:grid. Caught on /developers, where the tab strip is
   display:flex and carries hidden in the shipped markup: without this, a
   visitor with JavaScript off saw two dead tab buttons above two already
   visible panels. Every progressive-enhancement guarantee on this site leans
   on the attribute, so the reset belongs here rather than per component. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--ink); color:var(--parchment); font-family:'Inter',sans-serif; font-weight:400; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:'Fraunces',serif; font-weight:500; letter-spacing:-0.01em; margin:0;}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--brass-soft);}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }
section{padding:110px 0;}
@media (max-width:640px){ section{padding:68px 0;} }

/* The only focus treatment used to be the input border-colour change, so every
   link, button and tab fell back to the user-agent outline, which is close to
   invisible against --ink in some engines. WCAG 2.4.7. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brass); outline-offset:3px;
}
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--brass); color:var(--ink); padding:12px 20px; text-decoration:none;
  font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.06em;
}
.skip-link:focus{left:0;}

/* scroll-behavior:smooth above has no escape hatch of its own, and in-page tab
   and nav anchors fire it far more often now that there is more than one page. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:0.01ms !important; animation-iteration-count:1 !important;
    transition-duration:0.01ms !important; scroll-behavior:auto !important;
  }
}

/* ---- Topbar ------------------------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:50;
  /* Wraps on purpose. The nav gained a second and third link when /developers
     shipped, and a no-wrap row of them plus the brand measured 558px against a
     375px viewport, so the whole document scrolled sideways. */
  display:flex; justify-content:space-between; align-items:center; gap:10px 16px;
  flex-wrap:wrap;
  padding:16px 32px; border-bottom:1px solid var(--line);
  background:rgba(18,22,15,0.94); backdrop-filter:blur(10px);
}
@media (max-width:640px){ .topbar{padding:12px 20px;} }
.brand-mark{font-family:'Fraunces',serif; font-size:1.05rem; white-space:nowrap;}
.brand-mark a{text-decoration:none;}
.brand-sub{font-family:'IBM Plex Mono',monospace; font-size:0.58rem; letter-spacing:0.16em; color:var(--fieldstone); text-transform:uppercase; margin-top:3px;}
.topbar-nav{display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:4px 22px;}
@media (max-width:560px){
  /* Two compact rows: brand, then nav. Wrapping alone left a three-row sticky
     header eating half a phone screen, because the strapline takes two lines
     of its own and the nav took a third. The acronym is expanded in the page
     copy, so dropping it from the bar costs nothing. */
  .brand-sub{display:none;}
  .topbar-nav{flex-basis:100%; justify-content:flex-start; gap:0 16px;}
  /* The tap target stays 44px; only the label shrinks. */
  .back-link{font-size:0.64rem; letter-spacing:0.04em;}
}
/* These were 0.72rem mono with no padding, about 11px tall. Lighthouse's
   accessibility audit does not test tap-target size, which is why a 100 never
   caught it; two adjacent nav links make it worse. */
.back-link{
  display:inline-flex; align-items:center; min-height:44px; padding:0 2px;
  font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.06em;
  text-decoration:none; color:var(--parchment-dim); white-space:nowrap;
}
.back-link:hover{color:var(--brass-soft);}
.back-link[aria-current="page"]{color:var(--brass-soft);}

/* ---- Section heads ------------------------------------------------------ */
.sec-head{max-width:620px; margin-bottom:52px;}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.8rem);}
.sec-head p{color:var(--parchment-dim); font-weight:300; margin-top:14px; line-height:1.7;}

/* ---- Buttons ------------------------------------------------------------ */
.btn{display:inline-flex; align-items:center; justify-content:center; padding:15px 30px; border:1px solid var(--brass); background:var(--brass); color:var(--ink); text-decoration:none; font-size:0.86rem; letter-spacing:0.04em; font-family:'Inter',sans-serif; cursor:pointer;}
.btn:hover{background:var(--brass-soft);}
button[disabled]{opacity:0.6; cursor:progress;}

/* ---- Form controls ------------------------------------------------------ */
/* Enumerated by exclusion rather than by listing types. The previous rule named
   text, email and tel, so input[type=url] and <textarea> fell through to
   browser-default chrome, and the 760px anti-zoom rule repeated the same list,
   so iOS Safari zoomed the viewport when either was focused. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
select, textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--control-line);
  color:var(--parchment); font-family:'Inter',sans-serif; font-size:0.95rem;
  padding:14px 4px; outline:none; transition:border-color .2s;
}
@media (max-width:760px){
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
  select, textarea{font-size:16px;}
}
textarea{
  resize:vertical; min-height:120px; line-height:1.7; padding:12px 10px; font-weight:300;
  border:1px solid var(--control-line);
}
input::placeholder, textarea::placeholder{color:var(--fieldstone);}
input:focus, select:focus, textarea:focus{border-color:var(--brass);}
select option, select optgroup{background:var(--canopy); color:var(--parchment);}
select optgroup{color:var(--fieldstone); font-style:normal; font-weight:500;}

/* --fieldstone reads 4.34:1 on --canopy-2, just under the 4.5 AA floor for
   small text. It clears the bar on --ink, so only the panel copy is lifted
   rather than changing the token everywhere and washing out the light
   sections that use it. */
.consent{font-size:0.74rem; color:var(--fieldstone-panel); margin-top:18px; line-height:1.6; font-weight:300;}
.signup-msg{margin-top:18px; font-family:'IBM Plex Mono',monospace; font-size:0.8rem; color:var(--brass-soft); display:none; line-height:1.5; scroll-margin-top:90px;}
.signup-msg.show{display:block;}
/* --ember is 2.30:1 on --canopy-2 and fails AA outright. Error copy is set in
   --parchment and --ember becomes a positional accent, so the message is
   readable and still unmistakably an error. */
.signup-msg.error{color:var(--parchment); padding-left:12px; border-left:2px solid var(--ember);}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ---- Direct contact block ----------------------------------------------- */
.signup-direct{margin-top:36px; padding-top:26px; border-top:1px solid var(--line);}
/* Underlined, not just tinted: colour alone is not a distinguishable cue for
   anyone who cannot separate the brass from the surrounding copy. */
.signup-direct a{color:var(--brass-soft); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:rgba(201,168,104,0.5); font-size:0.95rem; white-space:nowrap;}
.signup-direct a:hover{text-decoration-color:var(--brass-soft);}
.signup-direct .direct-sep{color:var(--fieldstone); margin:0 10px;}
.agent-name{font-family:'Fraunces',serif; font-size:1.05rem; color:var(--parchment); margin-bottom:4px;}
.agent-title{font-family:'IBM Plex Mono',monospace; font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--fieldstone-panel); margin-bottom:14px;}
@media (max-width:420px){ .signup-direct .direct-sep{display:none;} .signup-direct a{display:block; margin-top:6px;} }

/* ---- Footer ------------------------------------------------------------- */
footer{padding:44px 0 56px; border-top:1px solid var(--line);}
.footer-legal{font-size:0.74rem; color:var(--fieldstone-panel); line-height:1.7; font-weight:300;}
.footer-legal strong{color:var(--parchment-dim);}
.footer-legal p{margin:0 0 14px;}
.footer-legal p:last-child{margin-bottom:0;}

/* Equal Housing Opportunity. Inline SVG rather than an image file: it is
   required on housing advertising, so it must not be one 404 away from
   disappearing, and it has to stay legible on the dark footer. */
.eho{display:flex; align-items:flex-start; gap:12px;}
.eho svg{flex:0 0 auto; width:28px; height:28px; margin-top:1px;}