/* house.css is linked ahead of this file in index.html */
:root{
  --paper:#F7F5EE; --paper2:#EFECE1; --ink:#131619;
  --slate:#141A35; --slate2:#1E3140; --slate-rule:#33485A;
  --signal:#F2762B; --signal-deep:#D65F18;
  --on-paper-62:#67665F; --on-paper-38:#9E9C93; --on-paper-16:#D3D0C6;
  --on-slate-62:#8FA0AC; --on-slate-38:#5D7180;
  --rule:#CDCABF;
  --wrap:1240px; --nav-wrap:1500px; --pad:clamp(20px,3.6vw,52px);
  --dcond:"DrukCond",Impact,sans-serif;
  --dwide:"DrukWide",Impact,sans-serif;
  --dtext:"DrukText",Helvetica,Arial,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --track:calc(0.95px - 0.006em); --nav-h:96px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
/* and nothing may be dragged sideways, whatever slips past a clip */
html,body{overscroll-behavior-x:none;max-width:100%}
html{scroll-behavior:smooth;background:var(--paper);
  /* the works canvas is deliberately wider than the screen so grains can
     travel in from off it, and it lives in a POSITION:FIXED rail, which the
     body's own clip does not contain. Clipping here does contain it, and
     unlike `hidden` it does not make the root a scroll container. */
  overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;
  line-height:1.5;-webkit-font-smoothing:antialiased;text-wrap:pretty;
  /* clip, not hidden: `overflow-x:hidden` makes the body a scroll container,
     which on iOS Safari silently kills position:sticky in its descendants,
     and every beat on this page is sticky-driven. `clip` contains the same
     overflow without creating a scroll container. */
  overflow-x:clip}
h1,h2,h3,h4,blockquote,.kick{text-wrap:balance}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);width:100%}
.paper-tex{display:none}

/* nav: own container, wider than the content wrap */
.nav{position:fixed;top:0;left:0;right:0;z-index:70}
.nav .in{max-width:var(--nav-wrap);margin-inline:auto;padding:var(--pad);
  display:flex;align-items:center;gap:30px}
.nav .mk{margin-right:auto;display:flex;align-items:center;gap:13px}
.nav .lsmark{width:78px;height:78px;fill:var(--slate);display:block;flex:none}
.nav .wm{font-family:var(--dtext);font-weight:700;font-size:14px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--slate);line-height:1;padding-top:3px}
@media(max-width:760px){.nav .lsmark{width:44px;height:44px}
  .nav .wm{font-size:12px;letter-spacing:.12em}}
.nav a.l{font-family:var(--dtext);font-weight:700;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--paper);transition:color .18s}
.nav a.l:hover{color:var(--ink)}
.nav .btn,.encore-btn{font-family:var(--dtext);font-weight:700;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;background:var(--paper);color:var(--ink);padding:12px 17px;
  box-shadow:5px 5px 0 var(--slate);transition:transform .16s,box-shadow .16s}
.nav .btn:hover,.encore-btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--slate)}


/* ---- shared type + buttons ---- */
.kick{font-family:var(--dtext);font-weight:700;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);display:block}
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.b1{font-family:var(--dtext);font-weight:700;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;background:var(--ink);color:var(--paper);padding:16px 22px;
  display:inline-flex;gap:12px;align-items:center;box-shadow:6px 6px 0 var(--paper);
  transition:transform .16s,box-shadow .16s}
.b1:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--paper)}
.b2{font-family:var(--dtext);font-weight:700;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;background:var(--paper);color:var(--ink);padding:16px 22px;
  display:inline-flex;align-items:center;box-shadow:6px 6px 0 var(--ink);
  transition:transform .16s,box-shadow .16s}
.b2:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}

/* the called strip */
.called{position:relative;z-index:2;margin-top:0;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--slate)}
.called .in{max-width:var(--wrap);margin-inline:auto;padding:24px var(--pad);
  display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);flex-wrap:nowrap}
.called .lab{font-family:var(--dtext);font-weight:700;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--signal);white-space:nowrap}
.called .logos{display:flex;align-items:center;gap:clamp(16px,2.4vw,38px);
  flex-wrap:nowrap;flex:1;justify-content:space-between}
.called .logos img{height:clamp(15px,1.55vw,21px);width:auto;object-fit:contain;
  filter:brightness(0) invert(1)}
@media(max-width:820px){
  .called .in{flex-wrap:wrap}
  .called .logos{flex-wrap:wrap;justify-content:flex-start;gap:18px 26px}
}