/* Direction C hub: Laura's desk, and on it one organiser tray. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/_assets/previews/c/hub/fonts/bricolage-normal.a756882d8a.woff2) format("woff2");
}

:root {
  --ground: light-dark(#E9E7F0, #121019);
  --ink: light-dark(#1D1A2B, #F2F0F8);
  --muted: light-dark(#4A4560, #B8B2CB);
  --focus: light-dark(#A2470A, #FFA35C);
  --edge: light-dark(#1D1A2B, #F2F0F8);
  --call-edge: #1D1A2B;
  --seal-paper: var(--ground);
  --display: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", sans-serif;
}

body {
  background: var(--ground);
  color: var(--ink);
}

/* Header */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s4);
}

.bar__home {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  text-decoration: none;
}

.bar__seal {
  width: 3.25rem;
  flex: none;
  color: var(--ink);
}

.bar__name {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 88%;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.bar__tools {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

@media (max-width: 599px) {
  .bar__tools .note {
    display: none;
  }
  .bar__name {
    font-size: 1.0625rem;
  }
}

/* Hero */
.hero {
  padding-block: var(--s4) var(--s7);
}

.hero__copy {
  display: grid;
  gap: var(--s4) var(--s7);
  align-items: end;
  margin-bottom: var(--s5);
}

@media (min-width: 960px) {
  .hero__copy {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
}

.hero__title {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 78%;
  font-size: clamp(2.75rem, 1.6rem + 5.2vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.hero__line {
  display: inline-block;
}

.hero__lede {
  max-width: 40ch;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.45;
  color: var(--muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
}

.mess {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 48px;
  padding: var(--s3) var(--s4);
  border: 1.5px solid var(--edge);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 700 1rem/1.2 var(--body);
  cursor: pointer;
  transition: background-color 140ms var(--ease-out), transform 140ms var(--ease-out);
}

.mess:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.mess:active {
  transform: scale(.97);
}

.mess svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* The tray: compartments of different sizes, like a real drawer organiser.
   The pencil gets the long slot. */
.tray {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 8px;
  border-radius: 24px;
  background: var(--tray-wall);
  box-shadow: 0 2px 0 light-dark(#FFFFFF, #4A4462) inset, 0 34px 60px -34px light-dark(rgb(48 40 80 / .55), rgb(0 0 0 / .8));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "org org"
    "sim jug"
    "dec sta"
    "sty cel"
    "des des"
    "sha sha";
}

@media (min-width: 600px) {
  .tray {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "org org sim jug"
      "org org dec sta"
      "sty sty cel cel"
      "des des des sha";
  }
}

@media (min-width: 1100px) {
  .tray {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(13.5rem, auto));
    grid-template-areas:
      "org org sim jug dec dec"
      "org org sta sta sty sty"
      "cel cel des des des sha";
  }
}

.cell--organise { grid-area: org; }
.cell--simplify { grid-area: sim; }
.cell--juggle { grid-area: jug; }
.cell--declutter { grid-area: dec; }
.cell--stage { grid-area: sta; }
.cell--style { grid-area: sty; }
.cell--celebrate { grid-area: cel; }
.cell--design { grid-area: des; }
.cell--share { grid-area: sha; }

.cell {
  min-width: 0;
  display: flex;
}

.cell__door {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr auto;
  width: 100%;
  min-height: 12.5rem;
  padding: var(--s4) var(--s4) var(--s3);
  border-radius: 16px;
  background: var(--floor);
  color: var(--tray-ink);
  text-decoration: none;
  box-shadow: inset 0 3px 8px rgb(0 0 0 / .14);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

a.cell__door:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 rgb(0 0 0 / 0), 0 16px 26px -14px rgb(20 14 40 / .55);
}

a.cell__door:active {
  transform: translateY(-2px);
}

a.cell__door:focus-visible {
  outline-offset: 2px;
}

.cell__verb {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--verb);
}

.cell__name {
  margin-top: var(--s1);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.3;
}

.cell__line {
  margin-top: var(--s2);
  max-width: 34ch;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--tray-muted);
}

.cell__obj {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 6.5rem;
  padding-block: var(--s3) var(--s2);
}

.obj {
  width: auto;
  max-width: 78%;
  max-height: 7.5rem;
  object-fit: contain;
  filter: drop-shadow(0 8px 7px rgb(0 0 0 / .2));
}

.cell--organise .obj {
  max-height: 17rem;
  max-width: 70%;
}

.cell--design .cell__obj,
.cell--style .cell__obj {
  justify-items: center;
}

.cell__state {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  justify-self: start;
  min-height: 32px;
  font-size: 0.875rem;
  font-weight: 700;
}

.cell__arrow {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms var(--ease-out);
}

a.cell__door:hover .cell__arrow {
  transform: translateX(4px);
}

.cell__state--later {
  font-weight: 600;
  color: var(--tray-muted);
}

.cell__state--later::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}

.cell--built .cell__state {
  padding: var(--s1) var(--s3);
  border-radius: 999px;
  background: var(--tray-body);
  color: var(--tray-ink);
}

/* Wide compartments put the object beside the words. */
@media (min-width: 600px) {
  .cell--design .cell__door,
  .cell--style .cell__door,
  .cell--celebrate .cell__door,
  .cell--declutter .cell__door,
  .cell--stage .cell__door {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: var(--s3);
  }
  .cell--design .cell__obj,
  .cell--style .cell__obj,
  .cell--celebrate .cell__obj,
  .cell--declutter .cell__obj,
  .cell--stage .cell__obj {
    grid-column: 2;
    grid-row: 1 / -1;
  }
  .cell--design .cell__verb,
  .cell--design .cell__name,
  .cell--design .cell__line,
  .cell--design .cell__state,
  .cell--style .cell__verb,
  .cell--style .cell__name,
  .cell--style .cell__line,
  .cell--style .cell__state,
  .cell--celebrate .cell__verb,
  .cell--celebrate .cell__name,
  .cell--celebrate .cell__line,
  .cell--celebrate .cell__state,
  .cell--declutter .cell__verb,
  .cell--declutter .cell__name,
  .cell--declutter .cell__line,
  .cell--declutter .cell__state,
  .cell--stage .cell__verb,
  .cell--stage .cell__name,
  .cell--stage .cell__line,
  .cell--stage .cell__state {
    grid-column: 1;
  }
  .cell--design .cell__state,
  .cell--style .cell__state,
  .cell--celebrate .cell__state,
  .cell--declutter .cell__state,
  .cell--stage .cell__state {
    align-self: end;
  }
}

@media (max-width: 599px) {
  .cell--organise .cell__door,
  .cell--design .cell__door,
  .cell--share .cell__door {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: var(--s3);
  }
  .cell--organise .cell__obj,
  .cell--design .cell__obj,
  .cell--share .cell__obj {
    grid-column: 2;
    grid-row: 1 / -1;
  }
  .cell--organise .cell__door > :not(.cell__obj),
  .cell--design .cell__door > :not(.cell__obj),
  .cell--share .cell__door > :not(.cell__obj) {
    grid-column: 1;
  }
  .cell__door {
    min-height: 11rem;
    padding: var(--s3);
  }
  .cell__obj {
    min-height: 5rem;
  }
  .obj {
    max-height: 5.5rem;
  }
  .cell--organise .obj {
    max-height: 9rem;
  }
}

.tray__key {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
  font-size: 0.9375rem;
  color: var(--muted);
}

.tray__key-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}

/* The arrival: nine objects arrive as a heap, then each finds its own
   compartment. The labels are already in place; the objects find them.
   Plays once on load and finishes by itself. */
.cell--organise .obj { --sx: 30vw; --sy: 16vh; --sr: -24deg; --d: 0ms; }
.cell--simplify .obj { --sx: 6vw; --sy: 26vh; --sr: 32deg; --d: 60ms; }
.cell--juggle .obj { --sx: -8vw; --sy: 30vh; --sr: -40deg; --d: 120ms; }
.cell--declutter .obj { --sx: -26vw; --sy: 22vh; --sr: 18deg; --d: 40ms; }
.cell--stage .obj { --sx: 4vw; --sy: 4vh; --sr: 70deg; --d: 180ms; }
.cell--style .obj { --sx: -22vw; --sy: 6vh; --sr: -16deg; --d: 100ms; }
.cell--celebrate .obj { --sx: 28vw; --sy: -14vh; --sr: 36deg; --d: 160ms; }
.cell--design .obj { --sx: 4vw; --sy: -16vh; --sr: -52deg; --d: 80ms; }
.cell--share .obj { --sx: -30vw; --sy: -18vh; --sr: 14deg; --d: 140ms; }

@media (prefers-reduced-motion: no-preference) {
  .lt-js .obj {
    animation: tidy 1500ms var(--ease-out) var(--d) both;
  }
  .lt-js .hero__line {
    animation: rise 640ms var(--ease-out) both;
  }
  .lt-js .hero__line + .hero__line {
    animation-delay: 90ms;
  }
  .lt-js .hero__side {
    animation: rise-soft 700ms var(--ease-out) 200ms both;
  }
  /* Back from one of her sites: no heap, just a small settle. */
  html[data-arrived-from-hub] .obj {
    animation: settle 520ms var(--ease-out) var(--d) both;
  }
  html:not(.lt-ready) .obj,
  html:not(.lt-ready) .hero__line,
  html:not(.lt-ready) .hero__side {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lt-js .hero__side {
    animation: fade 300ms ease-out both;
  }
}

@keyframes tidy {
  0%, 16% {
    transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(1.12);
  }
  100% {
    transform: none;
  }
}

@keyframes settle {
  from {
    transform: translateY(-10px) rotate(calc(var(--sr) / 6));
  }
}

@keyframes rise {
  from {
    transform: translateY(0.4em);
    opacity: 0;
  }
}

@keyframes rise-soft {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

/* Start: the free call */
.start {
  padding-block: var(--s8);
}

.start__inner {
  display: grid;
  gap: var(--s5) var(--s7);
  align-items: center;
}

@media (min-width: 760px) {
  .start__inner {
    grid-template-columns: 11rem minmax(0, 1fr);
  }
}

.start__stamp {
  width: 8rem;
  color: var(--ink);
  transform: rotate(-8deg);
}

@media (min-width: 760px) {
  .start__stamp {
    width: 11rem;
  }
}

.start__title {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 82%;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.025em;
}

.start__text {
  max-width: 50ch;
  margin-top: var(--s3);
  font-size: 1.125rem;
  color: var(--muted);
}

.start__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  margin-top: var(--s5);
}

.start__small {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* About, in her words: filed like an index. */
.about {
  display: grid;
  gap: var(--s6) var(--s8);
  padding-block: var(--s7) var(--s8);
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}

@media (min-width: 960px) {
  .about {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
}

.about__title {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 82%;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.about__pull {
  margin-top: var(--s5);
  max-width: 22ch;
  font-family: var(--display);
  font-weight: 500;
  font-stretch: 90%;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  line-height: 1.2;
  color: var(--verb-organise);
}

.about__index {
  display: grid;
}

.about__row {
  display: grid;
  gap: var(--s1) var(--s5);
  padding-block: var(--s4);
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}

.about__row:first-child {
  border-top: 0;
  padding-top: 0;
}

@media (min-width: 600px) {
  .about__row {
    grid-template-columns: 8rem minmax(0, 1fr);
  }
}

.about__row dt {
  font-weight: 700;
  font-size: 0.9375rem;
}

.about__row dd {
  max-width: 60ch;
  color: var(--muted);
}

.foot {
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}