@charset "UTF-8";
/* founders.css: the comic-book covers on /founders/, /founders/matthew-ciocci/ and /founders/chad-dixon/. Loaded only on those pages.
   Dynamic values come from founders.js through classList; the hosting CSP allows no inline styles.
   The art is never edited: the dark charged state, the halftone edge and the burst are CSS drawn over or on a plain <img>. */

/* --cw is the content width (the main element is the size container). --ink-k is the comic keyline. */
:root{
  --cw:calc(100vw - 2*var(--gutter));
  --vh:100vh;
  --ink-k:clamp(4px,.5vw,9px);
  --violet:#6a00ff;
  --indigo:#2a0a8a;
}
@supports (width:1cqw) and (height:1svh){
  :root{--cw:100cqw;--vh:100svh}
}
.founders-page .hero{container-type:inline-size;grid-template-columns:minmax(0,1fr);padding-bottom:clamp(36px,6vh,72px)}

/* ---------- focal points: where the bolt lands, as a share of the full image; --lean is the side the bolt comes down from ---------- */
.profile--matthew .panel,.card--matthew .panel{--fx:30%;--fy:70%;--lean:-1;--tilt:1.5deg}
.profile--chad .panel,.card--chad .panel{--fx:38.5%;--fy:11%;--lean:1;--tilt:-1.5deg}
.card--matthew .panel{--lean:1}
/* the face, kept clear of every bolt: centre as a share of the image, radius as a share of its width */
.profile--matthew .panel,.card--matthew .panel{--kx:51%;--ky:21%;--kr:10%}
.profile--chad .panel,.card--chad .panel{--kx:53%;--ky:27%;--kr:7%}
.card--chad .panel{--lean:-1}
.panel{--dot:var(--ink)}   /* one ink for the halftone on both arts */

/* ---------- the panel: a tilted comic frame with an ink keyline and a hard offset shadow ---------- */
.panel-wrap{position:relative;isolation:isolate;width:var(--pw)}
.panel{
  position:relative;display:block;margin:0;overflow:hidden;background:var(--indigo);
  transform:translate(var(--jx,0),var(--jy,0)) rotate(var(--tilt));
  box-shadow:0 0 0 var(--ink-k) var(--ink),clamp(10px,1.3vw,24px) clamp(12px,1.5vw,28px) 0 var(--ink-k) var(--fuchsia);
  -webkit-user-select:none;user-select:none;touch-action:manipulation;
}
.profile--chad .panel{box-shadow:0 0 0 var(--ink-k) var(--ink),calc(-1*clamp(10px,1.3vw,24px)) clamp(12px,1.5vw,28px) 0 var(--ink-k) var(--volt)}
.card--matthew .panel{box-shadow:0 0 0 var(--ink-k) var(--ink),calc(-1*clamp(10px,1.3vw,24px)) clamp(12px,1.5vw,28px) 0 var(--ink-k) var(--volt)}
.card--chad .panel{box-shadow:0 0 0 var(--ink-k) var(--ink),clamp(10px,1.3vw,24px) clamp(12px,1.5vw,28px) 0 var(--ink-k) var(--volt)}
.fnd .panel{cursor:pointer}
.panel img{display:block;width:100%;height:auto;-webkit-user-drag:none}
.panel.is-jolt{--jx:6px;--jy:-5px}
.panel.is-lit{outline:var(--ink-k) solid var(--volt)}

/* halftone at the edges: fine dots in a wider band, heavy dots in a narrow one, so the dots grow toward the frame.
   Two offset layers on a 10px tile, so the dots come out round and staggered like a print screen, not a square grid. */
.panel::before,.panel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.panel::before{
  background:radial-gradient(circle,var(--dot) 0 30%,transparent 34%) 0 0/10px 10px,radial-gradient(circle,var(--dot) 0 30%,transparent 34%) 5px 5px/10px 10px;
  -webkit-mask-image:linear-gradient(to right,#000,transparent 8%,transparent 92%,#000),linear-gradient(to bottom,#000,transparent 4.5%,transparent 92%,#000);
  mask-image:linear-gradient(to right,#000,transparent 8%,transparent 92%,#000),linear-gradient(to bottom,#000,transparent 4.5%,transparent 92%,#000);
}
.panel::after{
  background:radial-gradient(circle,var(--dot) 0 40%,transparent 44%) 0 0/10px 10px,radial-gradient(circle,var(--dot) 0 40%,transparent 44%) 5px 5px/10px 10px;
  -webkit-mask-image:linear-gradient(to right,#000,transparent 3.6%,transparent 96.4%,#000),linear-gradient(to bottom,#000,transparent 2.4%,transparent 96.4%,#000);
  mask-image:linear-gradient(to right,#000,transparent 3.6%,transparent 96.4%,#000),linear-gradient(to bottom,#000,transparent 2.4%,transparent 96.4%,#000);
}

/* the charged state: dark until the first bolt lands. A timed animation, so it ends at full color by itself even if no script ever runs.
   (scripting:enabled) rather than html.js, the same hold games.css uses: .js arrives with a deferred script, so a rule keyed on it could
   paint the art bright and then dark on a slow script. JavaScript off, nothing darkens it; reduced motion and ?t= frames, neither. */
@keyframes fnd-charged{
  0%,86%{filter:brightness(.26) saturate(.5) contrast(1.1)}
  100%{filter:brightness(1) saturate(1) contrast(1)}
}
@keyframes fnd-lit{
  0%{filter:brightness(1.7) saturate(1.25)}
  100%{filter:brightness(1) saturate(1)}
}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .panel:not(.is-struck) img{animation:fnd-charged 2.4s linear backwards}
  .panel.is-struck img{animation:fnd-lit .32s ease-out}
}
html.frozen .panel img{animation:none!important;filter:none!important}

/* the burst: volt halftone dots and a white core thrown out from the focal point. founders.js reads this element's centre as the target. */
.panel-burst{
  position:absolute;left:var(--fx);top:var(--fy);z-index:2;width:170%;aspect-ratio:1;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%) scale(.18);
  background:radial-gradient(circle at center,var(--volt) 0 34%,transparent 36%) 0 0/clamp(9px,1vw,16px) clamp(9px,1vw,16px);
  -webkit-mask-image:radial-gradient(circle at center,rgba(0,0,0,.2) 0,#000 26%,rgba(0,0,0,.7) 46%,transparent 66%);
  mask-image:radial-gradient(circle at center,rgba(0,0,0,.2) 0,#000 26%,rgba(0,0,0,.7) 46%,transparent 66%);
}
.panel-burst::after{
  content:"";position:absolute;inset:30%;border-radius:50%;
  background:radial-gradient(circle at center,#fff 0,#fffbe6 12%,rgba(255,225,77,.8) 28%,rgba(255,31,143,.3) 52%,rgba(255,31,143,0) 70%);
}
.panel-burst.is-burst{animation:fnd-burst .5s var(--ease-out) both}
.panel-burst.is-small{width:80%}
@keyframes fnd-burst{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.16)}
  50%{opacity:.9}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1)}
}
html.frozen .panel-burst.is-burst{animation:none;opacity:.95;transform:translate(-50%,-50%) scale(.2)}   /* a frozen frame keeps it small: it crowns the impact, it does not screen the art */

/* comic bursts centred on free corners of the panel, so most of each one shows; never under the caption box.
   --bx/--by put the centre on the corner: -50% for a left or top corner, 50% for a right or bottom one. */
.panel-wrap::before,.panel-wrap::after{
  content:"";position:absolute;aspect-ratio:1;pointer-events:none;transform:translate(var(--bx,-50%),var(--by,-50%));
  clip-path:polygon(55.5% .3%,60.2% 20.7%,76.5% 7.6%,71.9% 28%,92.3% 23.3%,79.2% 39.7%,99.7% 44.3%,80.8% 53.4%,97.2% 66.4%,76.3% 66.4%,85.4% 85.3%,66.6% 76.2%,66.6% 97.2%,53.5% 80.8%,44.5% 99.7%,39.8% 79.3%,23.5% 92.4%,28.1% 72%,7.7% 76.7%,20.8% 60.3%,.3% 55.7%,19.2% 46.6%,2.8% 33.6%,23.7% 33.6%,14.6% 14.7%,33.4% 23.8%,33.4% 2.8%,46.5% 19.2%);
}
.panel-wrap::before{z-index:-1;width:clamp(150px,30%,460px);background:var(--volt)}
.panel-wrap::after{z-index:-2;width:clamp(110px,22%,330px);background:var(--fuchsia)}

/* ---------- the epithet: a volt caption box on the panel's corner ---------- */
.epithet{
  position:absolute;z-index:3;margin:0;padding:.55em .9em;
  background:var(--volt);color:var(--ink);
  font-family:var(--mono);font-weight:500;font-size:clamp(12px,1.25vw,24px);line-height:1.1;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 0 0 3px var(--ink),5px 5px 0 3px var(--ink);
  transform:rotate(-3deg);
}

/* ---------- Strike: a fuchsia caption box with ink type and a hard ink shadow, tilted against the epithet; the zig underline like .cta ---------- */
.strike{
  position:absolute;z-index:3;display:none;min-height:44px;margin:0;padding:.62em 1.1em 1em;
  background:var(--fuchsia);border:0;border-radius:0;color:var(--ink);cursor:pointer;
  font-family:var(--mono);font-weight:500;font-size:clamp(16px,max(1.35vw,calc(var(--pw)*.036)),30px);line-height:1.1;letter-spacing:.2em;text-transform:uppercase;
  box-shadow:0 0 0 3px var(--ink),5px 5px 0 3px var(--ink);
  transform:rotate(2.5deg);
  transition:background-color .18s ease;touch-action:manipulation;
}
.fnd .strike{display:inline-block}
.strike .zig{left:1.1em;right:1.1em;bottom:.42em;width:calc(100% - 2.2em)}
.strike .zig-line{stroke:var(--ink)}
.strike:hover,.strike:focus-visible{background:var(--volt);color:var(--ink)}
.strike:hover .zig-line,.strike:focus-visible .zig-line{animation:zigdraw .35s ease-out both}
html.cap-strike .strike{visibility:hidden}   /* share-image captures (?egg=strike) leave the button out */

/* ---------- the name: enormous, Inter 900, the home word's heat, a hard ink shadow, over the panel's edge ---------- */
.name{
  position:relative;z-index:4;margin:0;width:max-content;max-width:none;
  font-family:var(--sans);font-weight:900;font-size:var(--name);line-height:.86;letter-spacing:-.018em;text-transform:uppercase;color:var(--paper);
  /* a keyline all round, then the hard offset: a stroke would show the variable font's overlapping contours, and text-shadow would paint over the clipped gradient */
  filter:drop-shadow(.012em 0 0 var(--ink)) drop-shadow(-.012em 0 0 var(--ink)) drop-shadow(0 .012em 0 var(--ink)) drop-shadow(0 -.012em 0 var(--ink)) drop-shadow(.036em .036em 0 var(--ink));
}
.name .w{
  --hw:900;display:block;width:max-content;max-width:none;
  padding:.05em .05em .05em 0;margin:-.05em -.05em -.05em 0;
  background-image:linear-gradient(180deg,#fffbe6 6%,#ffe14d 40%,#ff1f8f 78%,#ff1f8f 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.name.ts-hot .w{background-image:none}   /* the Thunderstruck egg's hot sweep shows through on these pages too */

/* ---------- reading: everything longer than a line sits in a solid ink box, never on open sky ---------- */
.fbox{
  position:relative;z-index:2;background:var(--ink);color:var(--paper);
  padding:clamp(18px,2vw,36px) clamp(18px,2.2vw,40px);
  box-shadow:0 0 0 var(--ink-k) var(--violet),clamp(7px,.8vw,14px) clamp(7px,.8vw,14px) 0 var(--ink-k) var(--ink);
}
.role{
  margin:0 0 .85em;
  font-family:var(--mono);font-weight:500;font-size:clamp(12px,1vw,18px);line-height:1.35;letter-spacing:.14em;text-transform:uppercase;color:var(--volt);
}
.fbox .lede{margin:0;max-width:none;font-size:clamp(17px,1.36vw,27px);line-height:1.45;color:var(--paper);text-wrap:pretty}

/* ---------- the cover ---------- */
.cover{position:relative;display:grid;align-items:start;padding-top:clamp(30px,6vh,72px)}
.cover-copy{position:relative;z-index:4;min-width:0}
.cover-copy .fbox{margin-top:clamp(26px,4.4vh,48px)}

/* Matthew: a square panel on the right; the first line of the name runs over its left edge, above the hand */
.profile--matthew{
  --pw:clamp(340px,min(50cqw,var(--vh) - 176px),1240px);
  --name:min(calc((var(--cw) - .64*var(--pw))/5.2),27vh);
}
.profile--matthew .cover{grid-template-columns:minmax(0,1fr) var(--pw)}
.profile--matthew .panel-wrap{grid-column:2;grid-row:1}
.profile--matthew .cover-copy{grid-column:1;grid-row:1;padding-top:clamp(6px,2vh,24px)}
.profile--matthew .cover-copy .fbox{margin-right:clamp(26px,3.4vw,72px)}
.profile--matthew .epithet{right:-1.4%;top:-2%}
.profile--matthew .strike{right:3%;bottom:-16px}
.profile--matthew .panel-wrap::before{left:0;bottom:0;--by:50%}
.profile--matthew .panel-wrap::after{left:0;top:0}

/* Chad: a portrait panel on the left, nothing cropped; the name runs over its right edge, across the cape */
.profile--chad{
  --pw:clamp(300px,min(42cqw,(var(--vh) - 172px)*.6667),900px);
  --name:min(calc((var(--cw) - .84*var(--pw))/3.2),30vh);
}
.profile--chad .cover{grid-template-columns:var(--pw) minmax(0,1fr)}
.profile--chad .panel-wrap{grid-column:1;grid-row:1}
.profile--chad .cover-copy{grid-column:2;grid-row:1;padding-top:clamp(6px,2vh,24px)}
.profile--chad .name{margin-left:calc(-.16*var(--pw))}
.profile--chad .cover-copy .fbox{margin-left:clamp(26px,3vw,64px)}
.profile--chad .epithet{left:-3%;bottom:7%}
.profile--chad .strike{right:4%;bottom:-16px}
.profile--chad .panel-wrap::before{right:0;top:0;--bx:50%}
.profile--chad .panel-wrap::after{left:0;top:0}

/* ---------- the huge line ---------- */
.bigline{
  position:relative;z-index:2;margin:clamp(64px,11vh,132px) 0 0;
  padding:clamp(24px,3.6cqw,76px) clamp(20px,4cqw,88px) clamp(26px,3.6cqw,76px);
  background:var(--volt);color:var(--ink);
  box-shadow:0 0 0 var(--ink-k) var(--ink),clamp(10px,1.3vw,24px) clamp(12px,1.5vw,28px) 0 var(--ink-k) var(--fuchsia);
  transform:rotate(-1deg);overflow:hidden;
}
.bigline::after{   /* a press-plate of fuchsia dots at the far corner */
  content:"";position:absolute;right:0;bottom:0;width:46%;height:100%;pointer-events:none;
  background:radial-gradient(circle at center,var(--fuchsia) 0 30%,transparent 33%) 0 0/12px 12px;
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 100% 100%,#000 0,transparent 78%);
  mask-image:radial-gradient(ellipse 100% 100% at 100% 100%,#000 0,transparent 78%);
}
.bigline blockquote,.bigline-text{
  position:relative;z-index:1;margin:0;
  font-family:var(--sans);font-weight:900;font-size:clamp(34px,7.2cqw,164px);line-height:1;letter-spacing:-.022em;word-spacing:.05em;
  text-wrap:balance;
}
.bigline .hit{
  display:inline-block;white-space:nowrap;background:var(--ink);color:var(--volt);
  padding:.04em .16em .1em;margin:.05em 0 0 -.04em;transform:rotate(-1.2deg);
}
.bigline figcaption{position:relative;z-index:1;margin-top:clamp(12px,1.6cqw,28px)}
.bigline cite{font-family:var(--mono);font-weight:500;font-style:normal;font-size:clamp(13px,1.15vw,20px);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}

/* ---------- section heads: huge, volt, hard ink shadow ---------- */
.big-h2{
  margin:0;position:relative;z-index:2;
  font-family:var(--sans);font-weight:900;font-size:clamp(38px,6.1cqw,132px);line-height:.94;letter-spacing:-.016em;word-spacing:.05em;text-transform:uppercase;color:var(--volt);
  text-shadow:.045em .045em 0 var(--ink);
}

/* ---------- who ---------- */
.who{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4cqw,80px);align-items:start;margin-top:clamp(72px,12vh,148px)}
.who .prose{max-width:none;margin:0;transform:rotate(.5deg)}
.who .prose p{color:var(--paper);font-size:clamp(17px,1.32vw,25px);line-height:1.52;margin:0 0 1em}
.who .prose p:last-child{margin-bottom:0}
.who .prose a{color:var(--volt);border-bottom:2px solid var(--volt)}
.who .prose a:hover,.who .prose a:focus-visible{color:#fff;border-bottom-color:#fff}

/* ---------- the record: comic frames, keyline and hard shadow, paper stock ---------- */
.record{margin-top:clamp(72px,12vh,148px)}
.frames{display:grid;gap:clamp(36px,3.8cqw,72px) clamp(28px,3.4cqw,64px);margin-top:clamp(40px,5vh,64px)}
.frames--4,.frames--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.frame{
  position:relative;padding:clamp(36px,3cqw,60px) clamp(20px,2.4cqw,48px) clamp(24px,2.4cqw,48px);
  background:var(--paper);color:var(--ink);overflow:visible;
  box-shadow:0 0 0 var(--ink-k) var(--ink),clamp(8px,1vw,18px) clamp(9px,1.1vw,20px) 0 var(--ink-k) var(--fuchsia);
  transform:rotate(-.8deg);
}
.frame:nth-child(2){transform:rotate(.7deg);box-shadow:0 0 0 var(--ink-k) var(--ink),clamp(8px,1vw,18px) clamp(9px,1.1vw,20px) 0 var(--ink-k) var(--volt)}
.frame:nth-child(3){transform:rotate(.6deg);box-shadow:0 0 0 var(--ink-k) var(--ink),clamp(8px,1vw,18px) clamp(9px,1.1vw,20px) 0 var(--ink-k) #7df9ff}
.frame:nth-child(4){transform:rotate(-.6deg);box-shadow:0 0 0 var(--ink-k) var(--ink),clamp(8px,1vw,18px) clamp(9px,1.1vw,20px) 0 var(--ink-k) var(--fuchsia)}
.frame::after{
  content:"";position:absolute;right:0;top:0;width:44%;height:70%;pointer-events:none;
  background:radial-gradient(circle at center,var(--violet) 0 26%,transparent 29%) 0 0/9px 9px;
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 100% 0,rgba(0,0,0,.65) 0,transparent 76%);
  mask-image:radial-gradient(ellipse 100% 100% at 100% 0,rgba(0,0,0,.65) 0,transparent 76%);
}
.frame-label{
  position:absolute;left:clamp(12px,1.6cqw,30px);top:0;z-index:2;margin:0;padding:.5em .8em;
  background:var(--volt);color:var(--ink);
  font-family:var(--mono);font-weight:500;font-size:clamp(12px,1vw,18px);line-height:1.1;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 0 0 3px var(--ink),4px 4px 0 3px var(--ink);
  transform:translateY(-50%) rotate(-2.5deg);
}
.frame h3{position:relative;z-index:1;margin:0;font-family:var(--sans);font-weight:900;font-size:clamp(26px,2.9cqw,60px);line-height:1.02;letter-spacing:-.018em;word-spacing:.04em}
.frame-body{position:relative;z-index:1;margin:clamp(12px,1.2cqw,22px) 0 0;font-size:clamp(17px,1.32vw,25px);line-height:1.42;color:var(--ink)}

/* ---------- the cross-link ---------- */
.xlink{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3cqw,60px);align-items:center;
  margin-top:clamp(72px,12vh,148px);padding:clamp(20px,2.6cqw,52px);
  background:var(--indigo);
  box-shadow:0 0 0 var(--ink-k) var(--ink),clamp(10px,1.3vw,24px) clamp(12px,1.5vw,28px) 0 var(--ink-k) var(--fuchsia);
  transform:rotate(.6deg);
}
.tile{margin:0;width:clamp(120px,20cqw,380px);box-shadow:0 0 0 var(--ink-k) var(--ink),clamp(8px,1vw,18px) clamp(9px,1.1vw,20px) 0 var(--ink-k) var(--volt);transform:rotate(-2.5deg)}
.tile img{display:block;width:100%;height:auto}
.profile--chad .tile{width:clamp(140px,24cqw,440px)}
.xlink-label{
  display:inline-block;margin:0 0 .9em;padding:.5em .8em;background:var(--volt);color:var(--ink);
  font-family:var(--mono);font-weight:500;font-size:clamp(12px,1vw,18px);line-height:1.1;letter-spacing:.16em;text-transform:uppercase;
  transform:rotate(-1.5deg);
}
.xlink-line{margin:0;font-family:var(--sans);font-weight:900;font-size:clamp(26px,4.1cqw,88px);line-height:1.02;letter-spacing:-.02em;word-spacing:.04em;color:var(--paper)}
.xlink-go{margin:clamp(14px,1.8cqw,32px) 0 0}
.xlink-go .cta{margin:0;color:var(--volt)}
.xlink-go .cta:hover,.xlink-go .cta:focus-visible{color:#fff}

/* ---------- the closing link ---------- */
.fcta{position:relative;z-index:2;margin-top:clamp(64px,10vh,120px)}
.page .fcta .cta{margin:0;font-weight:900;--cw:900;font-size:clamp(34px,5.6cqw,120px);letter-spacing:-.022em;word-spacing:.04em;text-shadow:.04em .04em 0 var(--ink);padding-bottom:.32em}
.fcta .zig{height:clamp(8px,1.1cqw,18px)}
.fcta .zig-line{stroke-width:clamp(2px,.45cqw,5px);stroke-dasharray:none}
.fcta .cta:hover .zig-line,.fcta .cta:focus-visible .zig-line{animation:none}
.fcta .cta:hover,.fcta .cta:focus-visible{color:var(--volt)}

/* ---------- the hub: a double cover. Column widths are 3:2, so the square and the 2:3 panel come out the same height.
   On a desktop the title runs across the top and the lede stands beside the cover, and the cover is sized from the screen's height
   (--top is everything above the panels), so both whole panels, both focal points and both names are on the first screen. ---------- */
.hub{
  --hg:clamp(30px,3.6cqw,84px);                                /* the gutter between the panels */
  --lw:clamp(240px,22cqw,560px);                               /* the narrowest the lede's column gets */
  --hf:min(calc(var(--cw)/9.6),calc(var(--vh)*.15),calc((.6*var(--cw) + .4*var(--lw) + .3*var(--hg) - 20px)/7.75));   /* the title, ending before the gutter so open sky is over it */
  --top:calc(62px + clamp(22px,4vh,48px) + .92*var(--hf) + clamp(22px,3.2vh,40px));
  --dmax:calc(var(--cw) - var(--lw) - var(--hg));
  --dw:clamp(min(var(--dmax),480px),calc((var(--vh) - var(--top) - 16px + .6*var(--hg))/.698),var(--dmax));
  --name:calc(var(--dw)*.56/5.2);
  display:grid;grid-template-columns:minmax(0,1fr) var(--dw);column-gap:var(--hg);align-items:start;
}
.hub-head{display:contents}
.hub-title{--name:var(--hf);grid-column:1/-1;grid-row:1;justify-self:start;margin-top:clamp(22px,4vh,48px);white-space:nowrap}
.hub-title .w{display:inline-block}
.hub-lede{grid-column:1;grid-row:2;justify-self:start;max-width:100%;margin-top:clamp(22px,3.2vh,40px);padding:clamp(14px,1.3vw,26px) clamp(16px,1.6vw,30px);transform:rotate(-.6deg)}
.hub-lede .lede{text-wrap:balance}
.hub-lede .nb{white-space:nowrap}   /* the compound never breaks at its hyphens */
.double{position:relative;grid-column:2;grid-row:2;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--hg);align-items:start;margin-top:clamp(22px,3.2vh,40px)}
.double::before{   /* one burst behind the top of the gutter */
  content:"";position:absolute;z-index:-1;left:calc(.6*(100% - var(--hg)) + .5*var(--hg));top:0;width:clamp(150px,20%,380px);aspect-ratio:1;pointer-events:none;
  transform:translate(-50%,-50%) rotate(8deg);background:var(--volt);
  clip-path:polygon(55.5% .3%,60.2% 20.7%,76.5% 7.6%,71.9% 28%,92.3% 23.3%,79.2% 39.7%,99.7% 44.3%,80.8% 53.4%,97.2% 66.4%,76.3% 66.4%,85.4% 85.3%,66.6% 76.2%,66.6% 97.2%,53.5% 80.8%,44.5% 99.7%,39.8% 79.3%,23.5% 92.4%,28.1% 72%,7.7% 76.7%,20.8% 60.3%,.3% 55.7%,19.2% 46.6%,2.8% 33.6%,23.7% 33.6%,14.6% 14.7%,33.4% 23.8%,33.4% 2.8%,46.5% 19.2%);
}
.card .panel-wrap::before,.card .panel-wrap::after{display:none}
.card{position:relative;min-width:0}
.card .panel-wrap{width:100%}
.card .epithet{font-size:clamp(11px,1vw,20px)}   /* a little smaller on the cards, so Chad's stays clear of the hammer's bolt */
.card--matthew .epithet{right:5%;top:-2.4%}   /* top right, off the bolt's way down to the hand */
.card--chad .epithet{right:-3%;top:-2%}
.card-copy{position:relative;z-index:4;margin-top:calc(-.9*var(--name))}
.name--card{font-size:var(--name);padding-left:clamp(10px,1.4cqw,28px)}
.card-box{margin-top:clamp(22px,2.4cqw,40px);padding:clamp(16px,1.7cqw,32px) clamp(18px,1.9cqw,36px)}
.card-line{margin:0;font-size:clamp(17px,1.32vw,25px);line-height:1.45;color:var(--paper)}
.card-go{margin:clamp(14px,1.4cqw,26px) 0 0}
.card-go .cta{margin:0;color:var(--volt)}
.card-go .cta:hover,.card-go .cta:focus-visible{color:#fff}
.hub .fcta{grid-column:1/-1;margin-top:clamp(56px,9vh,110px)}

/* ---------- 2560: the frames fit four across ---------- */
@media(min-width:1900px){
  .frames--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .frames--4 .frame h3{font-size:clamp(26px,2.3cqw,46px)}   /* the longest word has to fit a quarter of the width */
}

/* ---------- stacked: panel first, then the name over its bottom edge, filling the column. A phone on its side keeps the columns. ---------- */
@media(max-width:559px),(max-width:899px) and (min-height:501px){
  .profile--matthew{--pw:min(var(--cw),max(var(--vh) - 150px,320px));--name:min(calc(var(--cw)/5.24),26vh)}
  .profile--chad{--pw:min(var(--cw),max((var(--vh) - 130px)*.6667,300px));--name:min(calc(var(--cw)/3.16),30vh)}
  .profile--matthew .cover,.profile--chad .cover{grid-template-columns:minmax(0,1fr);padding-top:clamp(30px,5vh,48px)}
  .profile--matthew .panel-wrap,.profile--chad .panel-wrap{grid-column:1;grid-row:1}
  .profile--matthew .cover-copy,.profile--chad .cover-copy{grid-column:1;grid-row:2;padding-top:0;margin-top:calc(-.5*var(--name))}
  .profile--chad .name{margin-left:0}
  .profile--matthew .cover-copy .fbox,.profile--chad .cover-copy .fbox{margin:clamp(24px,5cqw,36px) 0 0}
  /* the name owns the bottom edge here and the bolt comes down on the left, so the epithet and Strike stand on the right:
     the epithet on the top corner, Strike under it on Chad's sky and between Matthew's raised fist and his knee */
  .profile--matthew .epithet,.profile--chad .epithet{left:auto;right:-1%;top:-13px;bottom:auto}
  .profile--chad .strike{left:auto;right:-1%;top:26px;bottom:auto}
  .profile--matthew .strike{left:auto;right:-1%;top:36%;bottom:auto}
  .profile--matthew .panel-wrap::before,.profile--chad .panel-wrap::before{left:auto;bottom:auto;right:max(13%,calc(.5*clamp(120px,36%,240px) - 12px));top:0;--bx:50%;--by:-50%;width:clamp(120px,36%,240px)}   /* behind the epithet, never past the page edge */
  .profile--matthew .panel-wrap::after,.profile--chad .panel-wrap::after{display:none}
  .bigline blockquote,.bigline-text{font-size:calc((var(--cw) - 40px)/6.2)}
  .big-h2{font-size:calc(var(--cw)/7.4)}
  .who{grid-template-columns:minmax(0,1fr)}
  .frames--4,.frames--2{grid-template-columns:minmax(0,1fr)}
  .frame h3{font-size:clamp(26px,5.4cqw,44px)}
  .hub{display:block;--name:calc(var(--cw)/5.24)}
  .hub-head{position:relative;z-index:4;display:grid;grid-template-columns:minmax(0,1fr)}
  .hub-title{--name:calc(var(--cw)/5.7);white-space:normal}
  .hub-title .w{display:block}
  .hub-lede{max-width:none;margin-top:clamp(20px,3vh,36px)}
  .double{grid-template-columns:minmax(0,1fr);gap:clamp(44px,8cqw,72px);margin-top:clamp(40px,6vh,72px)}
  .double::before{display:none}
  .card .panel-wrap::before{display:block;left:12%;top:0;width:clamp(110px,30%,200px)}   /* a burst at each panel's free top corner */
  .card--matthew .epithet{right:-1.4%}
  .card-copy{margin-top:calc(-.46*var(--name))}
  .card--chad .name--card{--name:calc(var(--cw)/3.16)}
  .card--chad .card-copy{margin-top:calc(-.5*var(--cw)/3.16)}
  .card--chad .panel-wrap{max-width:min(100%,(var(--vh) - 130px)*.6667)}
  .name--card{padding-left:0}
  .fcta .cta{white-space:normal}
}
@media(max-width:419px){   /* the narrowest phones: Strike sets tighter, so it stays off Matthew's armor */
  .profile--matthew .strike,.profile--chad .strike{padding-left:.8em;padding-right:.8em;letter-spacing:.14em}
  .profile--matthew .strike .zig,.profile--chad .strike .zig{left:.8em;right:.8em;width:calc(100% - 1.6em)}
}
@media(max-width:699px){
  .tile,.profile--chad .tile{width:clamp(96px,34cqw,240px)}
  .xlink{column-gap:16px}
  .xlink{align-items:start}
}
@media(max-width:479px){   /* a phone: the tile stands over the line, so the line keeps whole phrases */
  .xlink{grid-template-columns:minmax(0,1fr)}
  .tile,.profile--chad .tile{width:clamp(130px,46cqw,220px)}
}

/* ---------- reduced motion: no tilt-shake, no burst; a strike only changes the keyline's colour for a moment (founders.js) ---------- */
@media(prefers-reduced-motion:reduce){
  .panel.is-jolt{--jx:0;--jy:0}
  .panel-burst{display:none}
}