/* The Appraisal Hub - "The Institution" design system.
   Extracted verbatim from the approved design board
   design/canvas-working/Main.dc.html (the FINAL boards with the two ruled
   deltas applied: hours 9 to 5, monogram TAH).
   Plain CSS, one file, no build step. */

/* ==========================================================================
   THE APPRAISAL HUB - "THE INSTITUTION" design system
   Restrained heritage. Navy and brass. Hairlines, not shadows.
   ========================================================================== */

:root{
  /* --- ink and field --- */
  --navy-900:#111A23;
  --navy-800:#1A2733;
  --navy-700:#27394A;
  --navy-600:#3A4E60;
  --slate-500:#55636F;

  /* --- brass --- */
  --brass:#B48E4D;        /* accent rules + text on navy (5.6:1 on navy-900) */
  --brass-deep:#755A27;   /* brass as TEXT on light (6.6:1 on paper)        */
  --brass-pale:#E7DCC4;

  /* --- paper --- */
  --paper:#FFFFFF;
  --bone:#F7F5F0;
  --bone-deep:#EFEBE2;

  /* --- rules --- */
  --rule:#DCD6C9;
  --rule-soft:#EAE6DC;
  --rule-navy:rgba(255,255,255,.16);

  /* --- text --- */
  --text:#22303B;         /* 12.4:1 on paper */
  --text-soft:#4C5A66;    /*  7.2:1 on paper */
  --text-invert:#FFFFFF;
  --text-invert-soft:#C6CFD7; /* 9.4:1 on navy-900 */

  /* --- measure --- */
  --page:1200px;
  --gutter:48px;

  /* --- spacing --- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ---------- layout ---------- */
.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--gutter);}
.wrap-narrow{max-width:840px;margin:0 auto;padding:0 var(--gutter);}
.band{padding:var(--s9) 0;}
.band-tight{padding:var(--s8) 0;}
.band-bone{background:var(--bone);}
.band-navy{background:var(--navy-900);color:var(--text-invert);}
.band-navy .lede,.band-navy p{color:var(--text-invert-soft);}
.hr{height:1px;background:var(--rule);border:0;margin:0;}
.hr-brass{height:2px;width:56px;background:var(--brass);border:0;margin:0 0 var(--s5);}

/* ---------- type ---------- */
.label{
  font-family:var(--sans);
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass-deep);margin:0 0 var(--s4);
}
.band-navy .label,.label-invert{color:var(--brass);}
.display{
  font-family:var(--serif);font-weight:600;
  font-size:60px;line-height:1.06;letter-spacing:-.015em;margin:0 0 var(--s5);
}
h1.page-title{
  font-family:var(--serif);font-weight:600;
  font-size:46px;line-height:1.12;letter-spacing:-.012em;margin:0 0 var(--s5);
}
h2{
  font-family:var(--serif);font-weight:600;
  font-size:33px;line-height:1.2;letter-spacing:-.01em;margin:0 0 var(--s5);
}
h3{
  font-family:var(--serif);font-weight:600;
  font-size:21px;line-height:1.35;margin:0 0 var(--s3);
}
h4{
  font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.5;
  letter-spacing:.01em;margin:0 0 var(--s2);
}
.lede{
  font-family:var(--serif);font-size:21px;line-height:1.62;color:var(--text-soft);
  margin:0 0 var(--s5);
}
p{margin:0 0 var(--s5);}
p:last-child{margin-bottom:0;}
.small{font-size:15px;line-height:1.6;color:var(--text-soft);}
.fine{font-size:13px;line-height:1.6;color:var(--text-soft);}
.pending{
  font-family:var(--sans);font-size:13px;font-style:normal;
  color:var(--brass-deep);background:#FBF4E4;
  border:1px dashed #C9AE79;padding:2px 8px;display:inline-block;line-height:1.5;
}
.band-navy .pending{color:#F0DCB2;background:rgba(180,142,77,.12);border-color:rgba(180,142,77,.6);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.01em;
  padding:15px 26px;border-radius:0;text-decoration:none;border:1px solid transparent;
}
.btn-primary{background:var(--navy-900);color:#fff;}
.btn-outline{background:transparent;color:var(--navy-900);border-color:var(--navy-600);}
.btn-brass{background:var(--brass);color:#20180A;}
.btn-ghost-invert{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);}

/* ---------- header ---------- */
.utility{background:var(--navy-900);color:var(--text-invert-soft);font-size:12.5px;letter-spacing:.02em;}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);height:40px;}
.utility strong{color:#fff;font-weight:600;}

.masthead{border-bottom:1px solid var(--rule);background:var(--paper);}
/* Child selector, not descendant: the collapsed navigation panel below carries
   its own .wrap for the page measure and must not inherit the masthead row's
   flex layout and 104px height. */
.masthead > .wrap{display:flex;align-items:center;gap:var(--s7);height:104px;}
.lockup{display:flex;align-items:center;gap:14px;text-decoration:none;flex:0 0 auto;}
.monogram{
  width:44px;height:44px;border:1px solid var(--brass);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:16px;font-weight:600;color:var(--navy-900);
  letter-spacing:.04em;
}
.wordmark{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.05;color:var(--navy-900);letter-spacing:-.005em;}
.wordmark span{display:block;font-family:var(--sans);font-size:9.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass-deep);margin-top:4px;}

.nav{display:flex;gap:26px;margin-left:auto;}
.nav a{
  font-size:14.5px;font-weight:500;color:var(--text);text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;
}
.nav a.on{border-bottom-color:var(--brass);}

.callbox{
  flex:0 0 auto;border-left:1px solid var(--rule);padding-left:var(--s6);margin-left:var(--s6);
  display:flex;flex-direction:column;justify-content:center;
}
.callbox .label{margin:0 0 2px;font-size:10px;letter-spacing:.2em;}
.callbox a{
  font-family:var(--serif);font-size:27px;font-weight:600;color:var(--navy-900);
  text-decoration:none;line-height:1.1;letter-spacing:-.01em;white-space:nowrap;
}
.callbox .fine{font-size:12px;margin-top:2px;}

/* ---------- log in affordance (quiet, never competes with the phone) ---------- */
.utility .u-right{display:flex;align-items:center;gap:16px;}
.u-rule{display:inline-block;width:1px;height:13px;background:var(--rule-navy);}
.u-login{
  color:#fff;text-decoration:none;font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  border-bottom:1px solid var(--brass);padding-bottom:2px;
}
.mast-actions{display:none;}
.login-link{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy-900);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid var(--brass);padding-bottom:3px;
}

/* ---------- collapsed navigation panel (below 1152px) ----------
   A navy sheet under the masthead row, brass hairline at its head, opened by
   the MENU button. Normal flow, full width, so it never overlaps the page and
   never adds horizontal overflow. Closed is the hidden attribute, which is also
   the no-JavaScript state. Link colour is #fff on --navy-900 (15.9:1) and the
   quiet labels take --text-invert-soft (9.4:1); both clear 4.5:1. */
.site-menu{
  background:var(--navy-900);color:var(--text-invert);
  border-top:2px solid var(--brass);
}
.site-menu[hidden]{display:none;}
.site-menu .wrap{padding-top:var(--s4);padding-bottom:var(--s5);}
.sm-nav{display:flex;flex-direction:column;}
.sm-nav a{
  font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.2;
  color:#fff;text-decoration:none;letter-spacing:-.005em;
  padding:14px 0;border-bottom:1px solid var(--rule-navy);
}
.sm-foot{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;padding-top:var(--s5);}
.sm-login{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;text-decoration:none;white-space:nowrap;
  border-bottom:1px solid var(--brass);padding-bottom:3px;
}
.sm-tel{
  font-family:var(--serif);font-size:27px;font-weight:600;color:#fff;
  text-decoration:none;line-height:1.1;letter-spacing:-.01em;white-space:nowrap;
}

/* ---------- hero ---------- */
.hero{background:var(--navy-900);color:#fff;position:relative;overflow:hidden;}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--brass) 22%,var(--brass) 78%,transparent);
  opacity:.85;
}
.hero-inner{padding:var(--s10) 0 var(--s9);display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s9);align-items:start;}
.hero .display{color:#fff;}
.hero .lede{color:var(--text-invert-soft);max-width:32ch;}
.hero-actions{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6);}

.seal{
  border:1px solid var(--rule-navy);border-top:2px solid var(--brass);
  padding:var(--s6) var(--s6) var(--s5);background:rgba(255,255,255,.03);
}
.seal h4,.seal .seal-title{color:#fff;letter-spacing:.16em;text-transform:uppercase;font-size:11.5px;color:var(--brass);margin-bottom:var(--s5);}
.seal .seal-title{font-family:var(--sans);font-weight:600;line-height:1.2;}
.seal dl{margin:0;}
.seal .row{display:flex;justify-content:space-between;gap:var(--s4);
  padding:13px 0;border-bottom:1px solid var(--rule-navy);align-items:baseline;}
.seal .row:last-child{border-bottom:0;padding-bottom:0;}
.seal dt{font-size:13.5px;color:var(--text-invert-soft);}
.seal dd{margin:0;font-family:var(--serif);font-size:19px;font-weight:600;color:#fff;text-align:right;}
.seal dd .pending{text-align:left;max-width:190px;}

/* ---------- ledger (proof strip) ---------- */
.ledger{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);}
.ledger .cell{padding:var(--s7) var(--s5) var(--s7) 0;border-right:1px solid var(--rule);}
.ledger .cell:last-child{border-right:0;padding-right:0;}
.ledger .cell:not(:first-child){padding-left:var(--s5);}
.ledger .fig{font-family:var(--serif);font-size:38px;font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--navy-900);}
.ledger .cap{font-size:13px;color:var(--text-soft);margin-top:10px;}

/* ---------- covenant list ---------- */
.covenant{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule);}
.covenant .item{padding:var(--s7) var(--s6) 0 0;border-right:1px solid var(--rule);}
.covenant .item:last-child{border-right:0;padding-right:0;}
.covenant .item:not(:first-child){padding-left:var(--s6);}
.covenant .num{font-family:var(--serif);font-size:14px;font-weight:600;color:var(--brass-deep);
  letter-spacing:.14em;margin-bottom:var(--s4);}

/* ---------- two column prose ---------- */
.cols{display:grid;grid-template-columns:340px 1fr;gap:var(--s9);align-items:start;}
/* page header: title column gets real measure so the serif H1 breathes */
.cols-title{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:end;}
.cols-title h1.page-title{margin-bottom:0;max-width:16ch;}
.cols-wide{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:start;}

/* ---------- register table ---------- */
.register{width:100%;border-collapse:collapse;font-size:15px;}
.register caption{text-align:left;font-size:13px;color:var(--text-soft);padding-bottom:var(--s4);}
.register th{
  text-align:left;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass-deep);
  padding:0 var(--s5) 12px 0;border-bottom:1px solid var(--rule);
}
.register td{padding:14px var(--s5) 14px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top;}
.register td:last-child,.register th:last-child{padding-right:0;}
.register .st{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--navy-900);white-space:nowrap;}
.register .num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;letter-spacing:.01em;}
/* An AMC license number set in running text. Same mono family as the register
   cell, so a number reads as a number wherever it appears. */
.lic{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.94em;letter-spacing:.01em;}

/* ---------- panels ---------- */
.panel{background:var(--paper);border:1px solid var(--rule);border-top:2px solid var(--brass);padding:var(--s7);}
.panel-bone{background:var(--bone);border:1px solid var(--rule);border-top:2px solid var(--brass);padding:var(--s7);}
.panel-navy{background:var(--navy-800);border-top:2px solid var(--brass);padding:var(--s7);color:#fff;}

.checklist{list-style:none;margin:0;padding:0;}
.checklist li{padding:15px 0 15px 30px;border-bottom:1px solid var(--rule-soft);position:relative;font-size:15.5px;}
.checklist li:last-child{border-bottom:0;}
.checklist li::before{
  content:"";position:absolute;left:0;top:24px;width:14px;height:1px;background:var(--brass);
}
.panel-navy .checklist li{border-bottom-color:var(--rule-navy);color:var(--text-invert-soft);}

/* ---------- service moments (clock time + story + owner) ---------- */
.moments{list-style:none;margin:0;padding:0;}
.moments li{
  display:grid;grid-template-columns:104px 1fr 150px;gap:var(--s5);
  padding:18px 0;border-bottom:1px solid var(--rule-navy);align-items:start;
}
.moments li:first-child{padding-top:4px;}
.moments li:last-child{border-bottom:0;padding-bottom:4px;}
.moments .when{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--brass);line-height:1.1;}
.moments .when em{display:block;font-family:var(--sans);font-style:normal;font-size:10.5px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-invert-soft);margin-top:5px;}
.moments .what{font-size:15px;line-height:1.6;color:var(--text-invert-soft);}
.moments .what strong{color:#fff;}
.moments .who{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);text-align:right;padding-top:5px;}
@media (max-width:760px){
  .moments li{grid-template-columns:76px 1fr;gap:var(--s4);}
  .moments .when{font-size:19px;}
  .moments .who{grid-column:2;text-align:left;padding-top:0;}
}

/* ---------- contact form (the only written contact route on the site) ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--s5);}
.form-field{display:block;}
.form-field.wide{grid-column:1 / -1;}
.form-field label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate-500);margin-bottom:8px;
}
.form-field .req{color:var(--brass-deep);}
.form-field input,.form-field select,.form-field textarea{
  width:100%;box-sizing:border-box;font-family:var(--sans);font-size:15.5px;line-height:1.5;
  color:var(--text);background:var(--paper);border:1px solid var(--rule);border-radius:0;
  padding:12px 14px;appearance:none;-webkit-appearance:none;
}
.form-field textarea{min-height:140px;resize:vertical;}
.form-field select{background-image:none;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass-deep);
}
.form-field.has-error input,.form-field.has-error select,.form-field.has-error textarea{border-color:#8C2F26;}
.form-error{display:block;font-size:13px;line-height:1.5;color:#8C2F26;margin-top:7px;}
.form-actions{margin-top:var(--s6);display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;}
.form-actions .fine{margin:0;max-width:44ch;}
.form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-notice{
  border:1px solid var(--rule);border-left:3px solid var(--brass);background:var(--bone);
  padding:var(--s5) var(--s6);margin-bottom:var(--s6);font-size:15.5px;line-height:1.6;color:var(--text);
}
.form-notice.is-error{border-left-color:#8C2F26;}
@media (max-width:760px){
  .form-grid{grid-template-columns:1fr;}
}

/* ---------- quiet founder note ---------- */
.note{border-left:2px solid var(--brass);padding:var(--s2) 0 var(--s2) var(--s6);}
.note p{font-family:var(--serif);font-size:19px;line-height:1.65;color:var(--text);}
.note .fine{font-family:var(--sans);}

/* ---------- call band ---------- */
.callband{background:var(--navy-900);color:#fff;border-top:2px solid var(--brass);}
.callband .wrap{padding:var(--s8) var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:var(--s8);}
.callband h2{color:#fff;margin-bottom:var(--s3);}
.callband .tel{font-family:var(--serif);font-size:44px;font-weight:600;color:#fff;text-decoration:none;letter-spacing:-.015em;line-height:1.1;display:block;}
.callband .fine{color:var(--text-invert-soft);}

/* ---------- footer ---------- */
.foot{background:var(--navy-900);color:var(--text-invert-soft);font-size:14px;border-top:1px solid var(--rule-navy);}
.foot .wrap{padding:var(--s8) var(--gutter) var(--s6);}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s7);}
.foot h4,.foot h3{color:var(--brass);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:var(--s4);}
.foot ul{list-style:none;margin:0;padding:0;}
.foot li{margin-bottom:10px;}
.foot a{text-decoration:none;}
.foot .wordmark{color:#fff;}
/* The nested subtitle inherits --brass-deep, which is the token for text on a LIGHT
   ground (institution.css tokens, 6.6:1 on paper). On the navy footer it measured
   2.72:1. --brass is the palette's token for text on navy (5.6:1). Sweep F1. */
.foot .wordmark span{color:var(--brass);}
.foot .monogram{border-color:var(--brass);color:#fff;}
.foot-base{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--rule-navy);
  display:flex;justify-content:space-between;gap:var(--s5);font-size:12.5px;flex-wrap:wrap;}

/* ---------- mobile call bar (hidden on desktop) ---------- */
.callbar{display:none;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* The primary nav carries five items: Lenders, Service Promise, Coverage,
   Diligence, Contact (owner ruling 29; About moved to the footer). Technology
   lives in the footer too, which is what the approved site map board has.
   Between the page measure and the point where the nav is replaced by the menu
   button, the labels tighten rather than crowd the callbox. The tightening
   starts at 1220px rather than 1180px, and the gap is 16px rather than 18px,
   because the ruled five labels are 14.7px wider than the set they replace:
   measured headlessly, the untightened row overflows by 10px at a 1200px
   viewport and by 2px at 1152px, and this tightening returns both to zero. */
@media (max-width:1220px){
  .nav{gap:16px;}
  .nav a{font-size:13.5px;}
}

/* Below 1152px the five ruled labels, the lockup and the callbox no longer fit
   on one 104px row: measured headlessly against the rendered lenders page, the
   row overflowed the viewport by 46px at 1100, 122px at 1024, 246px at 900 and
   378px at 768, with the callbox holding a fixed right edge of 1146px and the
   phone number off screen. The nav therefore collapses into the same MENU
   button the narrow layout already uses, at 1151px instead of 760px. There is
   no second menu: this is the one mechanism, moved earlier. Between 761px and
   1151px the callbox stays beside the lockup and the utility bar still carries
   the only Log in link, so the masthead shows the button alone. */
@media (max-width:1151px){
  .nav{display:none;}
  .mast-actions{display:flex;align-items:center;gap:13px;margin-left:auto;}
  /* The control is a real <button> now, so the user agent's own background,
     font and radius are reset back to the ruled look the board specified. */
  .menu-btn{border:1px solid var(--rule);padding:9px 11px;font-size:11.5px;
    letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--navy-900);
    background:transparent;border-radius:0;font-family:var(--sans);line-height:1;
    cursor:pointer;-webkit-appearance:none;appearance:none;}
}

/* At 1152px and above the inline nav is back and the button is out of the
   masthead, so the panel is never shown, whatever state a resize left it in. */
@media (min-width:1152px){
  .site-menu{display:none;}
}

@media (max-width:1151px) and (min-width:761px){
  .login-link{display:none;}
  /* With the nav gone the callbox is the widest item left. Let it give ground
     before the phone number does: it may shrink, its one line of hours wraps,
     and the number itself keeps its own nowrap so it is never clipped. */
  .callbox{flex:0 1 auto;min-width:0;}
}

/* At the bottom of that band the row is still 48px too wide at 768px, so the
   masthead gap and the callbox rule spacing tighten before anything is cut. */
@media (max-width:900px) and (min-width:761px){
  .masthead > .wrap{gap:var(--s5);}
  .callbox{padding-left:var(--s4);margin-left:var(--s4);}
}

@media (max-width:1080px){
  .foot-grid{grid-template-columns:1fr 1fr 1fr;}
  .foot-grid .foot-brand{grid-column:1 / -1;}
  .hero-inner{grid-template-columns:1fr;gap:var(--s7);}
  .cols,.cols-wide,.cols-title{grid-template-columns:1fr;gap:var(--s7);align-items:start;}
  .cols-title h1.page-title{max-width:none;margin-bottom:var(--s5);}
}

@media (max-width:760px){
  :root{--gutter:22px;}
  body{font-size:16.5px;}
  .label{font-size:10.5px;letter-spacing:.14em;}

  .utility .wrap{height:auto;padding-top:9px;padding-bottom:9px;font-size:11.5px;
    justify-content:center;text-align:center;}
  .utility .u-hide{display:none;}

  .masthead > .wrap{height:auto;padding-top:16px;padding-bottom:16px;gap:var(--s4);
    flex-wrap:wrap;align-items:flex-start;}
  .lockup{gap:11px;}
  .monogram{width:38px;height:38px;font-size:13px;}
  .wordmark{font-size:18px;}
  .callbox{
    border-left:0;border-top:1px solid var(--rule);padding-left:0;margin-left:0;
    padding-top:14px;width:100%;
  }
  .callbox a{font-size:31px;}
  .login-link{font-size:11.5px;letter-spacing:.12em;}
  .sm-nav a{font-size:18px;padding:13px 0;}
  .sm-tel{font-size:24px;}
  .u-login,.u-rule{display:none;}
  .utility .u-right{gap:0;}

  .band{padding:var(--s8) 0;}
  .band-tight{padding:var(--s7) 0;}
  .hero-inner{padding:var(--s8) 0 var(--s7);}
  .display{font-size:38px;}
  h1.page-title{font-size:32px;}
  h2{font-size:26px;}
  .lede{font-size:18.5px;}
  .hero .lede{max-width:none;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .btn{justify-content:center;}

  .ledger{grid-template-columns:1fr 1fr;}
  .ledger .cell{padding:var(--s5) var(--s4) var(--s5) 0;border-bottom:1px solid var(--rule);}
  .ledger .cell:nth-child(2n){border-right:0;padding-right:0;padding-left:var(--s4);}
  .ledger .cell:nth-child(2n+1){padding-left:0;}
  .ledger .cell:nth-last-child(-n+2){border-bottom:0;}
  .ledger .fig{font-size:30px;}

  .covenant{grid-template-columns:1fr;}
  .covenant .item{padding:var(--s6) 0;border-right:0;border-bottom:1px solid var(--rule);}
  .covenant .item:last-child{border-bottom:0;padding-bottom:0;}
  .covenant .item:not(:first-child){padding-left:0;}

  .panel,.panel-bone,.panel-navy{padding:var(--s6) var(--s5);}
  .register{font-size:14px;}
  .register td{padding:12px var(--s3) 12px 0;}
  .register .st{font-size:15.5px;}
  .register .num{font-size:12.5px;}

  .callband .wrap{flex-direction:column;align-items:flex-start;gap:var(--s5);padding:var(--s7) var(--gutter);}
  .callband .tel{font-size:34px;}

  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s6);}
  .foot-grid .foot-brand{grid-column:1 / -1;}

  /* persistent, restrained call bar */
  .callbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--navy-900);border-top:2px solid var(--brass);
    align-items:center;justify-content:space-between;gap:var(--s4);
    padding:11px 22px;
  }
  .callbar .fine{color:var(--text-invert-soft);font-size:11.5px;margin:0;}
  .callbar .cb-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-weight:600;}
  .callbar a{
    font-family:var(--serif);font-size:20px;font-weight:600;color:#fff;text-decoration:none;
    border:1px solid var(--brass);padding:8px 14px;white-space:nowrap;
  }
  body{padding-bottom:74px;}
}

/* ==========================================================================
   BOARD EXTENSIONS - built from the locked vocabulary only
   ========================================================================== */

/* ---------- the note register (shared with the blog index board) ---------- */
.reghead{
  display:grid;grid-template-columns:220px 1fr 132px;gap:var(--s6);
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-deep);
  padding:0 0 12px;border-bottom:1px solid var(--rule);
}
.reghead span:last-child{text-align:right;}
.notes{list-style:none;margin:0;padding:0;}
.notes > li{
  display:grid;grid-template-columns:220px 1fr 132px;gap:var(--s6);
  padding:var(--s6) 0;border-bottom:1px solid var(--rule-soft);align-items:start;
}
.notes > li:last-child{border-bottom:1px solid var(--rule);}
.nd-date{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.14;
  color:var(--navy-900);letter-spacing:-.01em;}
.nd-year{display:block;color:var(--brass-deep);}
.nd-title{font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.28;
  letter-spacing:-.008em;color:var(--navy-900);margin:0 0 var(--s3);}
.nd-title a{text-decoration:none;}
.nd-answer{font-size:15.5px;line-height:1.66;color:var(--text-soft);margin:0;}
.nd-read{font-size:13px;color:var(--text-soft);text-align:right;line-height:1.5;padding-top:6px;}

/* caption line and the one quiet door to the full register */
.notes-foot{display:flex;justify-content:space-between;align-items:center;
  gap:var(--s5);flex-wrap:wrap;margin-top:var(--s5);}

@media (max-width:760px){
  /* one column: the three column labels would stack into a meaningless list,
     so the header rule carries the register on its own */
  .reghead{display:block;font-size:0;padding:0;}
  .notes > li{grid-template-columns:1fr;gap:var(--s4);}
  .nd-read{text-align:left;padding-top:0;}
  .nd-date{font-size:22px;}
  .nd-title{font-size:21px;}
  .notes-foot{align-items:flex-start;gap:var(--s4);}
}

/* ---------- one note: byline, the stored article body, the other notes ------ */
.byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:14px 0;margin:var(--s6) 0 0;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);
}
.byline .by-who{color:var(--navy-900);}
.byline .by-sep{width:1px;height:12px;background:var(--rule);display:inline-block;}

/* The article body is stored HTML written in the admin application. It is
   styled here rather than in the markup, because the view never rewrites what
   the office wrote. */
.post-body{max-width:72ch;}
.post-body h2{font-size:27px;margin:var(--s8) 0 var(--s4);}
.post-body h2:first-child{margin-top:0;}
.post-body h3{margin:var(--s7) 0 var(--s3);}
.post-body p{margin:0 0 var(--s5);}
.post-body ul,.post-body ol{margin:0 0 var(--s5);padding-left:22px;}
.post-body li{margin-bottom:var(--s3);}
.post-body a{color:var(--brass-deep);}
.post-body img{margin:var(--s6) 0;}
.post-body blockquote{margin:var(--s6) 0;padding-left:var(--s5);border-left:2px solid var(--brass);
  font-family:var(--serif);font-size:21px;line-height:1.6;color:var(--text-soft);}
.post-body table{width:100%;border-collapse:collapse;margin:0 0 var(--s5);}
.post-body th,.post-body td{border-bottom:1px solid var(--rule-soft);padding:10px 0;text-align:left;}

.related{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);}
.related li{border-bottom:1px solid var(--rule-soft);}
.related li:last-child{border-bottom:0;}
.related a{display:block;padding:18px 0 6px;text-decoration:none;font-family:var(--serif);
  font-size:19px;font-weight:600;color:var(--navy-900);line-height:1.4;}
.related .fine{margin:0 0 16px;}

@media (max-width:760px){
  .byline{gap:var(--s4);font-size:11px;}
  .byline .by-sep{display:none;}
  .post-body h2{font-size:23px;}
}

/* ==========================================================================
   SKIP LINK AND FOCUS (quality sweep F3 and F7)
   ========================================================================== */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy-900);color:#fff;text-decoration:none;
  font-family:var(--sans);font-size:14px;font-weight:600;
  padding:10px 18px;border-bottom:2px solid var(--brass);
}
.skip:focus{left:0;}

/* One designed indicator, in the two brass tokens the palette already splits by
   ground. Measured against the real backgrounds: --brass-deep is 5.93:1 on bone
   and 6.47:1 on paper; --brass is 5.78:1 on navy-900 and 5.01:1 on navy-800.
   --brass on bone is only 2.79:1, which is why the light grounds take the deep
   token rather than one ring everywhere. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,.menu-btn:focus-visible{
  outline:2px solid var(--brass-deep);
  outline-offset:2px;
}
.utility a:focus-visible,.hero a:focus-visible,.band-navy a:focus-visible,
.panel-navy a:focus-visible,.callband a:focus-visible,.foot a:focus-visible,
.callbar a:focus-visible{
  outline-color:var(--brass);
}