/* Nigel website
   Two layouts for the folder tabs:
   - Desktop and tablet: three full-width rows of interlocking tabs
   - Phone: one centred stack of tabs
   Tab colours are sampled from the Framer design, text colours from the app. */

:root {
  --page: #eeeeee;
  --ink: #1b1b1b;
  --blue: #1d51a2;

  --pad: clamp(20px, 3.2vw, 64px);

  /* Desktop tabs, all scaled to the screen width like the design */
  --row: clamp(44px, 4.4vw, 84px);       /* height of one row of tabs */
  --slope: calc(var(--row) * .7);        /* how far each angled edge leans */
  --label: clamp(20px, 3vw, 56px);

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Folder colours */
.c-dashboard { --bg: #d9d7d7; --fg: #1b1b1b; }
.c-calendar  { --bg: #f2e2ba; --fg: #5b4601; }
.c-projects  { --bg: #c9e9f5; --fg: #0a3e4a; }
.c-tasks     { --bg: #daccf2; --fg: #391d5e; }
.c-plans     { --bg: #c2d59e; --fg: #2c4019; }
.c-about     { --bg: #f1d4ca; --fg: #5c1b12; }
.c-get       { --bg: #c7d5f2; --fg: #1d2c5f; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  font-family: 'Satoshi', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  background: var(--page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- First screen: header + tabs ---------- */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--pad);
}

.wordmark { color: var(--blue); display: block; }
.wordmark svg { display: block; height: clamp(34px, 4.6vw, 88px); width: auto; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(150px, 25.5vw, 480px);
  height: clamp(42px, 3.9vw, 74px);
  padding: 0 20px;
  border: 1px dashed var(--blue);
  color: var(--blue);
  font-weight: 400;
  font-size: clamp(15px, 1.75vw, 32px);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover, .btn:focus-visible { background: var(--blue); border-style: solid; color: var(--page); }

.tabs-nav { margin-top: auto; }

.tabs { list-style: none; }

.tabs a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--label);
  line-height: 1;
  color: var(--fg);
  transition: transform .35s var(--ease);
}
.tabs a:focus-visible { outline: none; text-decoration: underline; text-underline-offset: .15em; }

/* ----- Desktop and tablet: three interlocking rows -----
   Each tab's colour is drawn by ::before. It leans half a slope past the
   tab's edges so neighbours cross in the middle of the row, leaving the
   V-shaped notch at the top, and it runs down behind the rows below. */

@media (min-width: 700px) {
  .tabs {
    display: grid;
    /* Column edges taken from the design: 35.6%, 50%, 66.3% */
    grid-template-columns: 35.6fr 14.4fr 16.3fr 33.7fr;
    grid-auto-rows: var(--row);
    overflow: hidden;
  }

  /* Row 1: halves. Row 2: three. Row 3: halves. */
  .tabs li:nth-child(1), .tabs li:nth-child(2),
  .tabs li:nth-child(4), .tabs li:nth-child(6),
  .tabs li:nth-child(7) { grid-column: span 2; }

  .tabs a { height: var(--row); z-index: 0; }

  .tabs a::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    height: calc(var(--row) * 3);
    left: calc(var(--slope) / -2);
    right: calc(var(--slope) / -2);
    background: var(--bg);
    clip-path: polygon(
      var(--slope) 0,
      calc(100% - var(--slope)) 0,
      100% var(--row),
      100% 100%,
      0 100%,
      0 var(--row)
    );
  }

  /* Tabs that touch the edge of the screen are square on that side */
  .tabs li:nth-child(1) a::before,
  .tabs li:nth-child(3) a::before,
  .tabs li:nth-child(6) a::before {
    left: 0;
    clip-path: polygon(0 0, calc(100% - var(--slope)) 0, 100% var(--row), 100% 100%, 0 100%);
  }
  .tabs li:nth-child(2) a::before,
  .tabs li:nth-child(5) a::before,
  .tabs li:nth-child(7) a::before {
    right: 0;
    clip-path: polygon(var(--slope) 0, 100% 0, 100% 100%, 0 100%, 0 var(--row));
  }

  /* Pull a folder up a little, like lifting it out of the drawer */
  .tabs a:hover, .tabs a:focus-visible { transform: translateY(-8px); }
}

/* ----- Phone: one centred stack ----- */

@media (max-width: 699px) {
  :root {
    --stack-h: 56px;
    --stack-peek: 34px;
    --stack-slope: 22px;
    --label: 20px;
  }
  .tabs li + li { margin-top: calc(var(--stack-peek) - var(--stack-h)); }
  .tabs a {
    height: var(--stack-h);
    align-items: flex-start;
    padding-top: 9px;
    background: var(--bg);
    clip-path: polygon(
      var(--stack-slope) 0,
      calc(100% - var(--stack-slope)) 0,
      100% var(--stack-slope),
      100% 100%,
      0 100%,
      0 var(--stack-slope)
    );
  }
  .tabs a:hover, .tabs a:focus-visible { transform: translateY(-6px); }
}

/* ---------- Folders (the sections) ---------- */

.anchor { display: block; height: 0; }

.folder { position: relative; }

/* Each folder's tab sits where that tab sits on the first screen */
.folder.c-dashboard { --tx: 0;       --tw: 50%;      --ls: 0; --rs: 1; }
.folder.c-calendar  { --tx: 50%;     --tw: 50%;      --ls: 1; --rs: 0; }
.folder.c-projects  { --tx: 0;       --tw: 35.6%;    --ls: 0; --rs: 1; }
.folder.c-tasks     { --tx: 35.6%;   --tw: 30.7%;    --ls: 1; --rs: 1; }
.folder.c-plans     { --tx: 66.3%;   --tw: 33.7%;    --ls: 1; --rs: 0; }
.folder.c-about     { --tx: 0;       --tw: 50%;      --ls: 0; --rs: 1; }
.folder.c-get       { --tx: 50%;     --tw: 50%;      --ls: 1; --rs: 0; }

.folder-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--row);
  margin-left: calc(var(--tx) - var(--slope) / 2 * var(--ls));
  width: calc(var(--tw) + var(--slope) / 2 * (var(--ls) + var(--rs)));
  margin-bottom: -1px; /* no seam between tab and body */
  background: var(--bg);
  color: var(--fg);
  font-size: var(--label);
  line-height: 1;
  clip-path: polygon(
    calc(var(--slope) * var(--ls)) 0,
    calc(100% - var(--slope) * var(--rs)) 0,
    100% 100%,
    0 100%
  );
}

.folder-body {
  background: var(--bg);
  color: var(--fg);
  padding: clamp(36px, 5vw, 80px) var(--pad);
}

.folder-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
}

.folder .copy { grid-column: 1 / 6; }
.folder .shot { grid-column: 6 / 13; }
.folder .copy.solo { grid-column: 1 / 9; }

.kicker {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
}

.folder h2 {
  margin-top: 14px;
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 72px);
  line-height: 1;
  letter-spacing: -.03em;
}

.folder p {
  margin-top: 20px;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.6;
  max-width: 44ch;
}
.folder p + p { margin-top: 12px; }
.folder .copy.solo p { max-width: 52ch; }

.specs { margin-top: 28px; list-style: none; max-width: 44ch; }
.specs li {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--fg) 22%, transparent);
  font-size: 15px;
  line-height: 1.45;
}
.specs li b { flex: 0 0 26px; font-weight: 500; }

.shot img {
  width: 100%;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent);
  border-radius: 6px;
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--fg) 45%, transparent);
}
.shot figcaption {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
}

.folder .btn {
  margin-top: 32px;
  min-width: 0;
  height: 48px;
  padding: 0 28px;
  font-size: 15px;
  border: 1px solid var(--fg);
  color: var(--fg);
}
.folder .btn:hover, .folder .btn:focus-visible { background: var(--fg); color: var(--bg); }

.note { margin-top: 16px; font-size: 14px; opacity: .7; }
.note.mobile-only { display: none; }

/* ---------- Filing-cabinet effect ----------
   On screens tall enough to hold a whole folder, each folder sticks to the
   top and the next one slides up over it. Otherwise they follow one another. */

@media (min-width: 900px) and (min-height: 700px) {
  .folder {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    filter: drop-shadow(0 -4px 12px rgba(0, 0, 0, .06));
  }
  /* The first folder slides over nothing, so it needs no shadow */
  .folder.c-dashboard { filter: none; }
  .folder-body { flex: 1; display: flex; align-items: center; }
  .folder-grid { width: 100%; }
}

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  z-index: 1;
  background: var(--page);
  padding: 32px var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
}
.site-footer .wordmark svg { height: 26px; }

/* ---------- Tablet and phone ---------- */

@media (max-width: 900px) {
  .folder .copy, .folder .copy.solo, .folder .shot { grid-column: 1 / -1; }
  .folder .shot { margin-top: 36px; }
}

@media (max-width: 699px) {
  .btn { min-width: 0; padding: 0 16px; }
  /* On a phone every folder tab is a centred full-width tab */
  .folder .folder-tab {
    --stack-slope: 22px;
    margin-left: 0;
    width: 100%;
    height: 44px;
    clip-path: polygon(var(--stack-slope) 0, calc(100% - var(--stack-slope)) 0, 100% 100%, 0 100%);
  }
  .note.mobile-only { display: block; }
}

/* Read by search engines and screen readers, not shown */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Ticker between the tabs and the folders ---------- */

.ticker {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--blue);
  color: var(--page);
  height: var(--row);
  display: flex;
  align-items: center;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 45s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }

.ticker-run {
  display: flex;
  list-style: none;
}
.ticker-run li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: calc(var(--label) * .8);
  font-weight: 400;
  line-height: 1;
}
/* An orange dot between phrases, like the end of the now-line in the app */
.ticker-run li::after {
  content: '';
  width: .32em;
  height: .32em;
  margin: 0 1.1em;
  border-radius: 50%;
  background: #e8613a;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 699px) {
  .ticker { height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}