/* Xakal fixes on top of the Noir stylesheet. port.py links this after it on every page. */

/* Home page hero: Noir's 112px heading broke to one word a line; this keeps it to two lines */
.hero .d1{font-size:clamp(38px,5.2vw,80px);text-wrap:balance}

/* Footer: Apple and Google Play marks port.py puts in front of the store links */
.foot .si{width:1.25em;height:1.25em;fill:currentColor;vertical-align:-.28em;margin-right:.6em;flex:none}
.foot a:not(.btn):has(> .si){display:inline-block;white-space:nowrap}   /* the mark never wraps away from its label */

/* Home page footer: port.py gives the home page the footer every other page has (class hf). The home page does
   not load the stylesheet those pages style it with, so its rules are repeated here, scoped to .hf. */
.foot.hf{padding:64px 0 36px;font-size:17px;line-height:1.5;background:#0B0712;color:#F5F1E8;border-top:1px solid rgba(201,178,124,.2)}
.foot.hf .g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;row-gap:40px;
  width:100%;max-width:1440px;margin:0 auto;padding-inline:20px}
.hf .foot-brand,.hf .fcol{grid-column:1/-1}
.hf .foot-brand img{width:118px;height:auto}
.hf .stores{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hf .stores .btn{min-height:44px;padding:0 16px;font-size:11px;letter-spacing:.18em;gap:10px}
.hf .label{display:block;margin:0 0 6px;font-weight:500;font-size:11px;line-height:1.3;letter-spacing:.22em;
  text-transform:uppercase;color:#A99CC0}
.hf address{margin-top:28px;font-style:normal;color:#D8D0E6;line-height:1.7}
.hf address a{display:inline-block;padding:9px 0;color:#F5F1E8;text-decoration:none}
.hf .fcol a{display:block;min-height:44px;padding:10px 0;line-height:24px;font-weight:400;font-size:14px;
  color:#ECE6DA;text-decoration:none}
.hf .fcol a:hover{color:#C9B27C}
.hf .foot-bottom{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:16px 32px;padding:26px 72px 0 0;border-top:1px solid rgba(201,178,124,.2);color:#D8D0E6}
.hf .social{display:flex;gap:28px;margin:0;padding:0;list-style:none}
.hf .social a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:48px;
  padding:11px 0 14px;font-size:13px;letter-spacing:normal;text-transform:none;color:#F5F1E8}
.hf .social a::after{bottom:8px}
.hf .caption{margin:0;font-weight:300;font-size:12px;line-height:1.55;letter-spacing:.01em}
@media (min-width:480px){.foot.hf .g{padding-inline:28px}.hf .fcol{grid-column:span 2}}
@media (min-width:768px){
  .foot.hf .g{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-inline:40px}
  .hf .foot-brand{grid-column:1/5;padding-right:24px}
}
@media (min-width:1024px){.foot.hf{padding:96px 0 44px}}
@media (min-width:1280px){.foot.hf .g{padding-inline:72px}}

/* Home page spacing: Noir left 140 to 200px above and below every chapter and a hero taller than the screen, which
   read as empty bands between sections. Roughly halved, and the hero stops short of the screen so Big Jobs shows. */
body .hero,.hero .stage{height:88vh!important}
.vch{padding-block:clamp(48px,5vw,88px)}
.ch{padding-block:clamp(56px,6vw,104px)}
.band{padding-block:clamp(64px,7vw,120px)}
.vt .vnum{font-size:clamp(40px,4.5vw,72px)}

/* Home page: the short overview port.py adds under each chapter heading */
.vo{margin:0;max-width:40ch;font-weight:300;font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:#D8D0E6}

/* Partners and clients, phones */
@media (max-width:767px){
  /* an odd last partner takes the whole row instead of leaving an empty cell */
  .logo-row li:last-child:nth-child(odd){grid-column:1/-1}
  /* logos sit in the middle of their cells */
  .logo-row li{align-items:center;min-height:84px;padding:18px 14px}
  .partners .lg{height:24px}
  /* every logo gets the same centred box, so very wide marks (Wraptron) shrink to fit instead of filling a row */
  .logo-row .lg{width:min(128px,100%)}
  .track .lg{width:100%}
  .logo-row .lg img,.track .lg img{width:100%;object-position:center}
  /* a tighter client strip: narrower cells, centred logos, smaller text marks */
  .track li{width:150px;min-height:88px;padding:16px;align-items:center;text-align:center;gap:10px}
  .track .lg{height:22px}
  .track .tall .lg,.track li.tall .lg{height:32px}
  .track .ln{font-size:9.5px}
  .track .wordmark{font-size:14px}
}