/* ==========================================================================
   Shared site furniture — one copy, loaded by every page.

   Pill nav, the footer bar, the billing/acknowledgement block and the iOS
   status-bar / URL-bar bands. These were pasted into each page and drifted
   (phone pills ended up two sizes, the footer wrapped differently on each).
   Edit them here; a page only keeps a rule below when it is deliberately
   different, and says so where it does.

   Relies on the tokens each page declares in :root:
   --rule --bone --teal-mid --teal-dim --gut
   ========================================================================== */

/* ---------- pill nav ----------
   Reference is contact.html — bone-based, not teal. .pbtn is the same pill on
   Studio's fixed bar. */
.pill,.pbtn{
  border:1px solid var(--rule);border-radius:0;
  padding:10px clamp(16px,2.2vw,30px);
  font-size:15px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(232,237,236,.82);white-space:nowrap;background:transparent;
  transition:border-color .22s,color .22s,background .22s;
}
.pill:hover,.pill:focus-visible,.pbtn:hover,.pbtn:focus-visible{
  border-color:var(--bone);background:rgba(232,237,236,.08);color:var(--bone)}
/* Three full-size pills plus the copyright cannot share a phone-width line. */
@media (max-width:640px){
  .pill,.pbtn{padding:9px 14px;font-size:12px;letter-spacing:.16em}
}

/* ---------- footer bar ---------- */
.fbar{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(10px,2.2vw,28px)}
.fbar .c{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--teal-mid);white-space:nowrap}
.fbar .line{flex:1;min-width:30px;height:1px;background:var(--rule)}
/* On a handset the rule goes, the pills keep one centred row, and the copyright
   drops beneath them. */
@media (max-width:760px){
  .fbar{justify-content:center;gap:8px}
  .fbar .line{display:none}
  .fbar .c{order:3;flex:1 0 100%;text-align:center}
}

/* ---------- billing line and acknowledgement ---------- */
.billing{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px clamp(8px,1.1vw,14px);
  padding:clamp(10px,1.8vh,18px) var(--gut) clamp(7px,1.1vh,12px);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-dim);line-height:1.7}
.billing a{color:var(--teal-mid);transition:color .2s}
.billing a:hover{color:var(--teal)}
.billing .sep{opacity:.5}
.billing .soc{display:inline-flex;align-items:baseline;gap:clamp(8px,1.1vw,14px)}
/* On a phone each fact gets its own line, with Instagram and LinkedIn paired on
   the last — rather than wrapping wherever the width runs out and leaving a
   stray separator dot at the start of a line. */
@media (max-width:640px){
  .billing{flex-direction:column;align-items:flex-start;gap:6px;line-height:1.5}
  .billing .sep{display:none}
  .billing .soc .sep{display:inline}
}
.ack{margin:0;padding:0 var(--gut) clamp(10px,1.6vh,18px);
  font-size:9.5px;line-height:1.5;letter-spacing:.025em;color:var(--teal-dim);
  max-width:min(100%,1100px)}

/* ---------- iOS bar tint ----------
   On an iPhone, Safari's status bar and floating URL bar sit outside the layout
   viewport (and report safe-area insets of 0), with page content showing through
   them. Black above and the site's deep teal below, overshooting the viewport edge
   by far more than any bar, fill those strips at any height; the extra 8px reaches
   inward to cover the hairline Safari's bar blur leaves at the boundary.
   Needs <div class="edge edge-top"> and <div class="edge edge-bot"> in the page.
   -webkit-touch-callout only exists on iOS, so no other device sees this. */
.edge{display:none}
@supports (-webkit-touch-callout:none){
  .edge{display:block;position:fixed;left:0;right:0;z-index:55;pointer-events:none}
  .edge-top{top:-300px;height:308px;background:#000}
  .edge-bot{bottom:-300px;height:308px;background:var(--teal-dim)}
}