/* Working Paper, the Kennelly Design Co direction. Shared by the comp and the boards.
   Palette and text face are chosen with data attributes:
   <html data-palette="steel|marker|brick" data-text="archivo|franklin|atkinson"> */

:root{
  --paper:#F7F7F4;
  --coal:#101820;
  --coal-2:#171F28;
  --ash:#4A4A4A;
  --mute:#B8BEC4;
  --rule:#D8D8D2;
  --rule-dark:#2B343E;
  --display:'Big Shoulders Display','Archivo',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --text:'Archivo',system-ui,sans-serif;
  --wrap:1240px;
  --gutter:clamp(20px,4vw,56px);
  --section:clamp(72px,10vw,136px);
  /* palette defaults, overridden below */
  --accent:#3A86BF; --accent-dark:#3A86BF; --turn-color:#3A86BF; --turn-bg:transparent;
  --sk-stroke:#3A86BF; --sk-fill:none; --sk-text:#3A86BF;
  --btn-dark-bg:var(--paper); --btn-dark-fg:var(--coal); --link-line:#3A86BF; --field:transparent; --sup:#3A86BF;
}
[data-text="archivo"]{--text:'Archivo',system-ui,sans-serif}
[data-text="franklin"]{--text:'Libre Franklin',system-ui,sans-serif}
[data-text="atkinson"]{--text:'Atkinson Hyperlegible Next','Atkinson Hyperlegible',system-ui,sans-serif}

[data-palette="steel"]{--accent:#3A86BF;--accent-dark:#3A86BF;--turn-color:#3A86BF;--turn-bg:transparent;--sk-stroke:#3A86BF;--sk-fill:none;--sk-text:#3A86BF;--btn-dark-bg:var(--paper);--btn-dark-fg:var(--coal);--link-line:#3A86BF;--field:transparent;--sup:#3A86BF}
[data-palette="marker"]{--accent:#F2B705;--accent-dark:#F2B705;--turn-color:var(--coal);--turn-bg:#F2B705;--sk-stroke:var(--coal);--sk-fill:#F2B705;--sk-text:var(--coal);--btn-dark-bg:#F2B705;--btn-dark-fg:var(--coal);--link-line:var(--coal);--field:#F2B705;--sup:var(--coal)}
[data-palette="brick"]{--accent:#8C3B2E;--accent-dark:var(--paper);--turn-color:#8C3B2E;--turn-bg:transparent;--sk-stroke:#8C3B2E;--sk-fill:none;--sk-text:#8C3B2E;--btn-dark-bg:var(--paper);--btn-dark-fg:var(--coal);--link-line:#8C3B2E;--field:transparent;--sup:#8C3B2E}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
::selection{background:var(--accent);color:var(--coal)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.dark :focus-visible{outline-color:var(--paper)}
body{font-family:var(--text);font-size:18px;line-height:1.55;color:var(--coal);background:var(--paper);-webkit-text-size-adjust:100%}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.dark{background:var(--coal);color:var(--paper)}
.dark .ash{color:var(--mute)}
.ash{color:var(--ash)}
.em{color:var(--accent)}
.dark .em{color:var(--accent-dark)}
.mono{font-family:var(--mono);font-size:14px;letter-spacing:0}

h1,h2,h3,.disp{font-family:var(--display);font-weight:700;line-height:.95;letter-spacing:0;text-wrap:balance}
h1{font-size:clamp(48px,5.2vw,76px);line-height:.92} /* three lines since 'and services' joined the headline, Oct 7; 76px keeps the button above the fold at 1440x900 */
h2{font-size:clamp(44px,5.6vw,80px);font-weight:700}
h3{font-size:clamp(30px,3.2vw,46px);font-weight:600;line-height:1}
p{max-width:60ch}
.lede{font-size:clamp(19px,1.6vw,23px);line-height:1.45;max-width:52ch}
.small{font-size:15px;line-height:1.5}

.btn{display:inline-block;font:600 17px/1 var(--text);padding:18px 24px;background:var(--coal);color:var(--paper);text-decoration:none;border:2px solid var(--coal);box-shadow:6px 6px 0 var(--accent);transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--accent)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--accent);transition-duration:.06s}
.dark .btn{background:var(--btn-dark-bg);color:var(--btn-dark-fg);border-color:var(--btn-dark-bg);box-shadow:6px 6px 0 var(--paper)}
.dark .btn:hover{box-shadow:8px 8px 0 var(--paper)}
.dark .btn:active{box-shadow:0 0 0 var(--paper)}
.link{font-weight:600;text-decoration:none;box-shadow:inset 0 -2px var(--link-line);padding:0 .06em 3px .04em;margin-left:-.04em;background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-size:0% 100%;background-position:0 0;transition:background-size .32s cubic-bezier(.2,.7,.2,1)}
.link:hover{background-size:100% 100%}
.dark .link{box-shadow:inset 0 -2px var(--paper)}
.dark .link:hover{color:var(--coal)}

/* the marked phrase in a headline: colored ink, or a highlighter stroke in the marker palette */
.turn{color:var(--turn-color);background-image:linear-gradient(to bottom,transparent 0 17%,var(--turn-bg) 17% 86%,transparent 86% 100%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em 0 .04em;margin-left:-.04em}

/* hero headline variants, chosen with data-hero on <html> */
.hero-copy{display:none}
[data-hero="users"] .hero-copy[data-variant="users"],[data-hero="with"] .hero-copy[data-variant="with"],[data-hero="ask"] .hero-copy[data-variant="ask"],[data-hero="enemy"] .hero-copy[data-variant="enemy"]{display:block}

/* header */
header.site{border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:22px;padding-bottom:22px} /* top and bottom only, so .wrap keeps its side gutter; "22px 0" wiped it (Aaron, Oct 13) */
.mark{display:flex;align-items:baseline;gap:14px;text-decoration:none}
.mark .word{font-family:var(--display);font-weight:700;font-size:27px;line-height:1;letter-spacing:.005em}
.mark .desc{font-size:14px;color:var(--ash)}
nav ul{display:flex;gap:28px;list-style:none;align-items:center}
nav a{text-decoration:none;font-size:16px;font-weight:500}
/* a plain navigation link reads as a link: a faint rule at rest, the highlighter sweep on hover, a solid rule on the current page (Aaron, Oct 19) */
nav ul a:not(.btn){padding:0 .06em 3px .04em;margin-left:-.04em;box-shadow:inset 0 -2px var(--rule);background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-size:0% 100%;background-position:0 0;transition:background-size .32s cubic-bezier(.2,.7,.2,1)}
nav ul a:not(.btn):not([aria-current="page"]):hover{background-size:100% 100%}
/* the page you are on keeps its solid rule and does not sweep on hover (Aaron, Oct 21: "turn it off there") */
nav ul a[aria-current="page"]{box-shadow:inset 0 -2px var(--coal)}
nav a.btn{padding:12px 16px;font-size:15px;box-shadow:4px 4px 0 var(--accent)}
nav a.btn:hover{box-shadow:6px 6px 0 var(--accent)}
@media (max-width:1180px){nav ul{gap:18px}nav a{font-size:15px}nav a.btn{padding:11px 14px}.mark .desc{display:none}}
@media (max-width:900px){.nav{flex-wrap:wrap}nav ul{gap:14px 18px;flex-wrap:wrap}}

/* hero */
.hero{padding:clamp(40px,5vw,64px) 0 clamp(48px,6vw,80px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(32px,5vw,80px);align-items:end}
.hero .lede{margin:24px 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.portrait{position:relative;justify-self:end;width:100%;max-width:400px}
.portrait::before{content:'';position:absolute;left:18px;top:18px;width:100%;aspect-ratio:1/1;background:var(--field);z-index:0}
.portrait img{position:relative;z-index:1;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.04)}
.portrait figcaption{position:relative;z-index:1;margin-top:12px;font-size:14px;color:var(--ash);line-height:1.45}
.portrait figcaption .name{display:block;font-weight:600;color:var(--coal);font-size:15px}
[data-palette="marker"] .portrait figcaption{margin-top:32px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.portrait{max-width:360px;justify-self:start}}

/* positions */
.positions{padding:var(--section) 0}
.positions h2{max-width:14ch;margin-bottom:clamp(40px,5vw,72px)}
#believe h2{max-width:20ch}
.pos{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);padding:clamp(32px,4vw,48px) 0;border-top:1px solid var(--rule-dark)}
.pos:last-child{border-bottom:1px solid var(--rule-dark)}
.pos p{color:var(--mute);font-size:17px}
.pos p strong{color:var(--paper);font-weight:500}
@media (max-width:900px){.pos{grid-template-columns:1fr}}

/* ways in */
.ways{padding:var(--section) 0}
.ways .intro{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.way{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,3fr);gap:clamp(20px,3vw,48px);padding:clamp(28px,3.5vw,44px) 0;border-top:1px solid var(--rule)}
.way:last-of-type{border-bottom:1px solid var(--rule)}
.way h3 small{display:block;font-family:var(--text);font-size:14px;font-weight:500;color:var(--ash);margin-bottom:12px;letter-spacing:0}
.way p{font-size:17px}
.spec{font-family:var(--mono);font-size:13.5px;line-height:1.6;color:var(--ash)}
.spec div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted var(--rule);padding:6px 0}
.spec div span:first-child{white-space:nowrap}
.ways .longer{margin-top:clamp(28px,3.5vw,44px);font-size:17px;max-width:56ch}
.spec div span:last-child{color:var(--coal);text-align:right}
@media (max-width:900px){.ways .intro,.way{grid-template-columns:1fr}}

/* proof */
.proof{padding:var(--section) 0}
.figure .num{font-family:var(--display);font-weight:700;font-size:clamp(96px,12vw,168px);line-height:.85;letter-spacing:-.01em}
.figure .num sup{font-size:.4em;vertical-align:top;position:relative;top:.18em;color:var(--sup)}
.figure p{margin-top:18px;font-size:19px;max-width:30ch}
#work{padding-top:clamp(48px,6vw,80px)}
#work h2{max-width:16ch;margin-bottom:clamp(32px,4vw,56px)}
.logo-row{display:flex;flex-wrap:wrap;gap:32px 48px;align-items:center}
.logo-row img{max-height:32px;max-width:170px;width:auto;height:auto;filter:grayscale(1) contrast(1.15);opacity:.8} /* every mark in gray; white inside a seal stays white */
.logo-row img[alt="Randstad Digital"],.logo-row img[alt="McDonald’s"],.logo-row img[alt="National Geographic"],.logo-row img[alt="Caterpillar"],.logo-row img[alt="Eliassen Group"],.logo-row img[alt="National Student Clearinghouse"],.logo-row img[alt="Penn National Insurance"],.logo-row img[alt="Securus Technologies"]{filter:grayscale(1) brightness(0);opacity:.72} /* light marks (white reverse, yellow) are forced to ink or they vanish on paper */
.logo-row img[alt="Navy Federal Credit Union"]{max-height:24px;max-width:210px}
#work .figure{margin-top:clamp(56px,7vw,96px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--rule)}
.figure .cite{display:block;margin-top:16px;font-size:14px;color:var(--ash);max-width:60ch}
@media (max-width:900px){.logo-row{gap:28px 40px}}

/* about + writing */
.about{padding:var(--section) 0;border-top:1px solid var(--rule)}
.about .grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start}
.about .sig{height:54px;width:auto;margin-top:26px;opacity:.9}
.about h3{margin-bottom:16px;font-size:clamp(26px,2.6vw,36px)}
.about p+p{margin-top:16px}
@media (max-width:900px){.about .grid{grid-template-columns:1fr}}

/* close */
.close{padding:var(--section) 0}
.close .grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,5vw,80px);align-items:end}
.close h2{max-width:18ch}
.close p{color:var(--mute);font-size:19px;margin-top:28px;max-width:48ch}
.close .mail{display:inline-block;font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,40px);line-height:1;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:10px;text-decoration-color:var(--accent-dark);margin-top:34px}
.close .mail:hover{color:var(--accent-dark)}
@media (max-width:900px){.close .grid{grid-template-columns:1fr}}

footer.site{padding:36px 0 44px;border-top:1px solid var(--rule-dark);font-size:14px;color:var(--mute)}
footer.site .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px}
footer.site ul{list-style:none;display:flex;flex-wrap:wrap;gap:20px}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--paper)}




/* How we start, the one-statement layout (V2, chosen Oct 6) */
.ways .narrow>*{max-width:900px} /* one reading column, on the same left edge as every other section */
.ways .narrow>p{max-width:60ch}
.ways .statement{font-family:var(--display);font-weight:700;font-size:clamp(40px,4.8vw,68px);line-height:.95;margin:28px 0 22px;text-wrap:balance}
.ways .after{font-size:19px;max-width:52ch}
.ways .cta{margin-top:36px}
.ways .spec-inline{display:flex;gap:12px 36px;flex-wrap:wrap;font-family:var(--mono);font-size:13.5px;color:var(--ash);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0;margin:32px 0}
.ways .spec-inline b{color:var(--coal);font-weight:500}
.ways .facts{font-family:var(--mono);font-size:14px;color:var(--ash);margin:0 0 20px}
.ways .facts span{margin:0 10px;color:var(--mute)}

/* the research line at the end of the dark section (1.9 moved here Oct 6) */
.positions .research{border-top:1px solid var(--rule-dark);padding-top:clamp(32px,4vw,48px);margin-top:0}
.positions .research p{color:var(--mute);font-size:17px;max-width:60ch}
.positions .research p b{color:var(--paper);font-weight:500}
.positions .research .cite{font-size:14px;margin-top:12px}

/* motion, added Oct 6. One pattern, the live site's fade and rise, used with restraint.
   Elements marked .reveal start low and faint and settle into place once, when they enter view.
   The highlighter behind the headline draws in left to right. Nothing moves for people who ask for reduced motion. */
html.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
html.js .reveal.in{opacity:1;transform:none}
html.js .turn{background-repeat:no-repeat;background-size:0% 100%;transition:background-size .7s cubic-bezier(.2,.7,.2,1) .35s}
html.js .in .turn{background-size:100% 100%}
.logo-row img{transition:filter .35s ease,opacity .35s ease}
.logo-row img:hover{filter:none;opacity:1}
.logo-row img[alt="Randstad Digital"]:hover,.logo-row img[alt="Securus Technologies"]:hover,.logo-row img[alt="Eliassen Group"]:hover{filter:grayscale(1) brightness(0)} /* white reverse and pale marks have no color to return to */
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  html.js .turn{background-size:100% 100%;transition:none}
  .logo-row img,.btn,.link{transition:none}
}