/* ==========================================================================
   ncklln.com — global stylesheet
   Edit the tokens in :root to change the whole site's look.
   Sizes mirror the original Wix site, measured at 1440px wide.
   ========================================================================== */

:root {
  /* Type. Brandon Grotesque (the Wix font) isn't free; Josefin Sans is the
     closest open substitute — same low x-height, sets ~10% wider.
     Swap --font-sans to change everything at once. */
  --font-sans: "Josefin Sans", "Brandon Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Times New Roman", Times, serif;

  /* Colors */
  --black: #000;
  --ink: #212121;          /* intro + outro card background on the home page */
  --text-light: #d4d4d4;   /* intro text on dark */
  --text-body: #414141;    /* body text on the inner pages */
  --text-muted: #636363;   /* breadcrumbs, "Nice to meet you!" */
  --text-faint: #999;      /* bio labels and descriptions */
  --navy: #041f3e;         /* body text on the Snapchat and HeyGen cards */
  --highlight: #bfbfbf;    /* highlighter behind the outro text */
  --rule: #d6d6d4;

  --snap-yellow: #fffa37;
  --quibi-purple: #7a2ff7;
  --route-blue: #3fa9e0;
  --advising-lilac: #cfc7f2;

  /* Home layout */
  --panel-split: 43%;                      /* width of the coloured left panel on home cards */
  --card-h: clamp(560px, 46.32vw, 667px);  /* 667px at 1440 and up */
  --gap-h: 380px;                          /* space between cards (holds the chevron) */

  /* Inner pages sit on Wix's 980px canvas */
  --canvas: 980px;
  --media-w: 667px;        /* image column on case-study rows */
  --copy-w: 251px;         /* copy column on case-study rows */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.45;
  color: var(--black);
  background: #fff;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
a:hover { opacity: .75; }

/* Wix separated paragraphs with an empty line */
p { margin: 0 0 1.45em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3 { font-weight: 300; margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Home page
   -------------------------------------------------------------------------- */
body.home {
  background: var(--black);
  color: var(--text-light);
}
/* Greyscale logo tile, fixed behind the whole page at 9% opacity */
body.home::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background: url("images/bg-logos.png") left top / 1919px auto repeat;
  opacity: .09;
  pointer-events: none;
}

/* Intro card: logo + one paragraph, full width, dark */
.intro {
  margin-top: clamp(48px, 14.3vw, 206px);
  min-height: 565px;
  padding: 114px 24px 67px;
  background: var(--ink);
  text-align: center;
}
.intro img.logo {
  width: min(515px, 100%);
  margin: 0 auto 56px;
}
.intro p {
  max-width: 623px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 35px;
  letter-spacing: 1.96px;
}

/* Spacer between cards with a down-chevron near the top */
.gap {
  height: var(--gap-h);
  padding-top: 100px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.intro + .gap { height: 266px; padding-top: 58px; }
.gap a { display: block; width: 87px; height: 65px; text-decoration: none; }
.gap svg { width: 100%; height: 100%; display: block; }

/* Work card: coloured left panel with copy, image on the right */
.card {
  display: grid;
  grid-template-columns: var(--panel-split) 1fr;
  min-height: var(--card-h);
}
.card .panel {
  position: relative;
  display: flex;
  align-items: center;
  padding: 40px 24px 40px 16%;   /* 16% of the panel = 99px at 1440 */
  background: var(--panel-bg, var(--ink));
  color: var(--panel-ink, var(--text-light));
  overflow: hidden;
}
.card .panel::before {           /* optional background image behind the copy */
  content: "";
  position: absolute; inset: 0;
  background: var(--panel-img, none) center / cover no-repeat;
  z-index: 0;
}
.card .panel > .copy { position: relative; z-index: 1; max-width: 318px; }
.card .copy .eyebrow {
  font-size: 20px;
  line-height: 50px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.card .copy p { font-size: 17px; line-height: 1.45; }
.card .copy .mark {              /* small brand logo under the copy */
  margin-top: 32px;
  width: 80px; height: auto;
}

.card#route .copy a { font-weight: 600; }

/* HeyGen sits further left, with the logo directly above the text */
.card#heygen .panel { padding-left: 9%; }
.card#heygen .copy { max-width: 274px; }
.card#heygen .copy .brand { width: 128px; margin-bottom: 16px; }

.card .media {
  position: relative;
  background: var(--media-bg, #000) center / cover no-repeat;
  overflow: hidden;
}
.card .media > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.card .media > img.actual-size {  /* shown 1:1, top-centred, like the Quibi phones on Wix */
  object-fit: none;
  object-position: 50% 0;
}
.card .media > img.framed {       /* a screenshot floating on the panel's background */
  inset: 48px;
  width: calc(100% - 96px); height: calc(100% - 96px);
  object-fit: contain;
  filter: drop-shadow(0 0 0 transparent);
  transition: transform .35s ease, filter .35s ease;
}
.card .media:has(> img.framed):hover { opacity: 1; }
/* drop-shadow, not box-shadow, so the shadow follows the screenshot's rounded corners */
.card .media:hover > img.framed {
  transform: scale(1.03);
  filter: drop-shadow(0 16px 28px rgb(0 0 0 / .35));
}
.card .media > img.overlay {      /* the Route phone, full height, centred on the map */
  left: 50%; right: auto;
  width: auto; height: 100%;
  transform: translateX(-50%);
  object-fit: contain;
}

/* Design-advising app grid: greyscale that colours in on hover */
.card .media.apps { display: grid; place-items: center; }
.card .media.apps .stack {
  position: relative; width: min(600px, 90%); aspect-ratio: 1;
}
.card .media.apps .stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s ease; }
.card .media.apps .stack img.color { opacity: 0; }
.card .media.apps .stack:hover img.color { opacity: 1; }
@media (hover: none) {
  .card .media.apps .stack img.color { opacity: 1; }
}

/* Bottom card: dark text on a grey highlighter */
.card.outro .copy { color: var(--black); }
.card.outro .copy p:first-child { line-height: 50px; margin-bottom: 8px; }
.card.outro .copy .hl {
  background: var(--highlight);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.card.outro .copy .hl.big { font-size: 20px; letter-spacing: 1px; color: var(--ink); }

/* --------------------------------------------------------------------------
   Inner pages (snap, quibi, stories, bio)
   -------------------------------------------------------------------------- */
.page {
  width: min(var(--canvas), 100% - 32px);
  margin: 0 auto;
  padding-top: 6px;
}

.site-header {
  display: flex; align-items: center;
  margin-left: 21px;
  font-size: 16px;
}
.site-header a { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.site-header a:hover, .site-footer a:hover { opacity: 1; }

/* iPhone home button: resting, hover and pressed states, stacked */
.home-btn { position: relative; display: block; flex: none; width: 62px; height: 62px; }
.home-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.home-btn img.rest { opacity: 1; }
a:hover .home-btn img.rest { opacity: 0; }
a:hover .home-btn img.hover { opacity: 1; }
a:active .home-btn img.hover { opacity: 0; }
a:active .home-btn img.pressed { opacity: 1; }

/* Centered page intro with a logo */
.lede {
  text-align: center;
  max-width: 577px;
  margin: 0 auto;
  padding-top: 39px;
  font-size: 16px;
  line-height: 1.45;
}
.lede.italic p { font-style: italic; }
.lede img { width: 175px; margin: 0 auto 20px; }
.lede img.app-icon { width: 144px; margin: 5px auto 46px; }

/* Media / copy rows */
.lede + .row { margin-top: 56px; }
.row {
  display: grid;
  grid-template-columns: minmax(0, var(--media-w)) var(--copy-w);
  justify-content: center;
  gap: 23px;
  align-items: start;
  margin-bottom: 51px;
}
.row:last-of-type { margin-bottom: 0; }
.row .media img { width: 100%; aspect-ratio: 667 / 402; object-fit: cover; }
.row .copy { padding-top: 17px; font-size: 14px; line-height: 1.4; color: var(--text-body); }
.row .copy p { margin-bottom: 1.4em; }
.row .copy .eyebrow { font-size: 14px; line-height: 20px; text-transform: uppercase; margin-bottom: 31px; }
.row .copy .eyebrow.plain { text-transform: none; margin-bottom: 14px; }

/* Long-form article (snap-stories), aligned with the header text */
.article {
  width: min(650px, 100%);
  margin: 61px 0 0 90px;
  font-size: 23px;
  line-height: 1.2;
  color: var(--text-body);
}
.article .crumbs { font-size: 15px; color: var(--text-muted); margin-bottom: 26px; }
.article p { margin: 0; }
.article p + p { margin-top: 1.2em; }
.article figure { margin: 45px 0 35px; }
.article figure img { width: var(--w, 100%); }
/* Fanned-out screens: wider than the column. The top 11% of the image
   width is transparent, so it tucks up under the paragraph above. */
.article figure.wide { margin-top: calc(24px - 0.11 * min(1129px, 100vw - 48px)); }
.article figure.wide img {
  width: min(1129px, 100vw - 48px);
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Footer shared by the inner pages */
.site-footer {
  margin-top: 39px;
  display: flex; flex-direction: column; align-items: center;
  gap: 15px;
}
.site-footer .social { display: flex; gap: 8px; }
.site-footer .social img { width: 18px; height: 18px; }
.site-footer .home-btn { width: 62px; height: 45px; }

/* Bio */
.bio {
  display: grid;
  grid-template-columns: 252px minmax(0, 650px);
  gap: 27px;
  align-items: start;
  margin: 61px 0 0 31px;
}
.bio + .site-footer { margin-top: 65px; }
.bio .photo img {
  width: 252px;
  aspect-ratio: 252 / 427;
  object-fit: cover;
  object-position: 45% 50%;
  filter: grayscale(1);
}
.bio .hello { font-size: 15px; color: var(--text-muted); margin-bottom: 28px; }
.bio h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 29px;
  line-height: 1.2;
  color: var(--text-body);
  margin-bottom: 14px;
}
.bio .about { font-size: 16px; max-width: 519px; color: var(--text-body); }
.bio .email { margin-top: 25px; font-size: 14px; color: var(--text-body); display: inline-flex; align-items: center; gap: 14px; }
.bio .email svg { width: 20px; height: 20px; }
.bio hr { border: 0; border-top: 1px solid var(--rule); margin: 64px 0 60px; }
.bio h2 { font-size: 14px; color: var(--text-faint); margin: 0 0 32px; }
.bio dl { display: grid; gap: 28px 0; margin: 0 0 60px; }
.bio dl:last-child { margin-bottom: 0; }
.bio dl.timeline { grid-template-columns: 120px 1fr; }
.bio dl.patents { grid-template-columns: 156px minmax(0, 421px); }
.bio dt { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--text-body); }
.bio dd { margin: 0; font-size: 14px; color: var(--text-faint); }
.bio dl.patents dd { text-transform: uppercase; }
.bio dl.patents dd .nick { text-transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* Below this the wide Stories image no longer fits beside an offset column */
@media (max-width: 1320px) {
  .article { margin-left: auto; margin-right: auto; }
}

@media (max-width: 900px) {
  .intro { margin-top: 0; min-height: 0; padding: 40px 20px; }
  .intro img.logo { width: min(515px, 88%); margin-bottom: 24px; }
  .intro p { font-size: 15px; line-height: 1.7; letter-spacing: .06em; }
  .gap, .intro + .gap { height: 88px; padding-top: 16px; }
  .gap a { width: 58px; height: 43px; }

  .card { grid-template-columns: 1fr; min-height: 0; }
  .card .panel, .card#heygen .panel { padding: 40px 24px; }
  .card .media { aspect-ratio: 4 / 3; }
  .card .media > img.actual-size { object-fit: cover; object-position: 50% 50%; }
  .card .media > img.framed { inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); }
  .card .media.apps { aspect-ratio: 1; }

  .site-header { margin-left: 0; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 48px; }
  .row .copy { padding-top: 0; }
  .row .copy .eyebrow { margin-bottom: 14px; }
  .article { font-size: 19px; }
  .article figure img { width: min(var(--w, 100%), 100%); }
  .bio { grid-template-columns: minmax(0, 1fr); margin-left: 0; gap: 28px; }
  .bio + .site-footer { margin-top: 48px; }
}

@media (max-width: 520px) {
  .card .copy p { font-size: 16px; }
  .lede { padding-top: 24px; }
  .lede img { width: 120px; }
  .lede img.app-icon { width: 104px; margin: 0 auto 24px; }
  .bio h1 { font-size: 25px; }
  .bio dl, .bio dl.timeline, .bio dl.patents { grid-template-columns: 1fr; gap: 2px 0; }
  .bio dd { margin-bottom: 16px; }
}