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

/* Logo: the file on thexakal.com/login has a dark wordmark, so on dark surfaces it sits on the same white chip as there.
   .l-dark and .wl are the dark surface versions in the header; .l-light and .wd stay bare on light surfaces. */
.l-dark,.wl,.foot-brand img{box-sizing:content-box;padding:6px 12px;border-radius:10px;background:#fff}
.top .logo img,.wm img{height:28px;width:auto}   /* the chip adds width; this keeps the header logo as wide as before, clear of the menu */
.l-dark,.wl{padding:4px 8px}

/* 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: six logos since Wraptron came off, so one even row instead of Noir's seven columns */
@media (min-width:760px){.lrow{grid-template-columns:repeat(6,1fr)}}
@media (min-width:768px){.partners{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* Partners and clients, phones. Inner pages use .logo-row, the home page .lrow with its own inline styles. */
@media (max-width:899px){
  /* the home chapter grid may not grow past the screen to fit its widest child */
  .ch .g{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .lrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* an odd last partner takes the whole row instead of leaving an empty cell */
  .logo-row li:last-child:nth-child(odd),.lrow li:last-child:nth-child(odd){grid-column:1/-1}
  /* logos sit in the middle of their cells */
  .logo-row li,.lrow li{justify-content:center;align-items:center;min-height:84px;padding:18px 14px}
  .partners .lg,.lrow .lg{height:24px}
  /* every logo gets the same centred box, so very wide marks shrink to fit instead of filling a row */
  .logo-row .lg,.lrow .lg{width:min(128px,100%)}
  .track .lg{width:100%}
  .logo-row .lg img,.lrow .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}
}