/* Direction C, organise: The Virtual Organiser. Paper, sumi ink and her
   orange; her own Bitter, made bolder. Things square up and slide into
   their places, then the stamp comes down. */

@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_assets/previews/c/organise/fonts/bitter-normal-2.0efe0fbe60.woff2) format("woff2");
}

:root {
  --ground: light-dark(#F3F4F7, #121419);
  --surface: light-dark(#FFFFFF, #1B1E26);
  --ink: light-dark(#16181F, #EEF0F4);
  --muted: light-dark(#474C59, #AEB4C1);
  --accent-text: light-dark(#9E4708, #FFA765);
  --kraft: light-dark(#E3CFAE, #4A3D2A);
  --cell-off: light-dark(#DADDE4, #2C3039);
  --focus: light-dark(#9E4708, #FFA765);
  --edge: light-dark(#16181F, #EEF0F4);
  --seal-paper: var(--ground);
  --seal-mark: var(--thread);
  --arrival-floor: var(--floor-organise);
  --display: "Bitter", "Rockwell", "Roboto Slab", Georgia, serif;
}

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

.top__name {
  font-weight: 800;
}

.h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.h3 {
  margin: var(--s6) 0 var(--s4);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
}

/* Hero: words on the left, the desk on the right. */
.hero {
  display: grid;
  gap: var(--s6);
  align-items: center;
  padding-block: var(--s5) var(--s8);
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--s7);
    min-height: min(78vh, 760px);
  }
}

.hero__copy {
  display: grid;
  gap: var(--s4);
  justify-items: start;
}

.hero__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.625rem, 1.5rem + 4.6vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.hero__tag {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  color: var(--accent-text);
}

.hero__lede {
  max-width: 44ch;
  font-size: 1.125rem;
  color: var(--muted);
}

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

/* The desk: a knolled flat lay, everything at right angles. */
.desk {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 86;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 30px 50px -36px rgb(22 24 31 / .5);
}

.desk__item {
  position: absolute;
}

.desk__item img {
  width: 100%;
  filter: drop-shadow(0 6px 6px rgb(0 0 0 / .16));
}

.desk__item--folders { left: 3%; top: 3.5%; width: 44%; --fx: -18%; --fy: 10%; --fr: -9deg; --d: 0ms; }
.desk__item--envelope { left: 52%; top: 5.8%; width: 44%; --fx: 14%; --fy: 18%; --fr: 11deg; --d: 70ms; }
.desk__item--card { left: 3%; top: 55.8%; width: 34%; --fx: 24%; --fy: -16%; --fr: 14deg; --d: 140ms; }
.desk__item--stamp { left: 40%; top: 52.3%; width: 11%; --fx: 60%; --fy: 40%; --fr: -20deg; --d: 210ms; }
.desk__item--pen { left: 55%; top: 52.3%; width: 4.6%; --fx: 300%; --fy: -10%; --fr: 38deg; --d: 260ms; }
.desk__item--cap { left: 62%; top: 52.3%; width: 5.4%; --fx: -200%; --fy: 30%; --fr: -30deg; --d: 300ms; }
.desk__item--clips { left: 70%; top: 52.3%; width: 11%; --fx: 80%; --fy: 60%; --fr: 26deg; --d: 340ms; }
.desk__item--elastic { left: 86%; top: 52.3%; width: 11%; --fx: -90%; --fy: 80%; --fr: -12deg; --d: 380ms; }
.desk__item--mug { left: 64%; top: 72%; width: 24%; --fx: -30%; --fy: -14%; --fr: 8deg; --d: 420ms; }

.desk__impression {
  position: absolute;
  left: 30%;
  top: 22%;
  width: 40%;
  color: var(--thread);
  transform: rotate(-7deg);
  opacity: .92;
  --seal-paper: transparent;
  --seal-mark: var(--thread);
}

.desk__impression .seal__line {
  stroke-width: 2;
}

@media (prefers-reduced-motion: no-preference) {
  .lt-js .desk__item {
    animation: square-up 760ms var(--ease-out) var(--d) both;
  }
  .lt-js .desk__item--stamp {
    animation: stamp 1500ms cubic-bezier(.45, 0, .2, 1) 1000ms both;
  }
  .lt-js .desk__impression {
    animation: impress 380ms var(--ease-out) 1820ms both;
  }
  .lt-js .hero__copy > * {
    animation: slide-in 560ms var(--ease-out) both;
  }
  .lt-js .hero__copy > :nth-child(2) { animation-delay: 60ms; }
  .lt-js .hero__copy > :nth-child(3) { animation-delay: 120ms; }
  .lt-js .hero__copy > :nth-child(4) { animation-delay: 180ms; }
  .lt-js .hero__copy > :nth-child(5) { animation-delay: 240ms; }
  html:not(.lt-ready) .desk__item,
  html:not(.lt-ready) .desk__impression,
  html:not(.lt-ready) .hero__copy > * {
    animation-play-state: paused;
  }
}

@keyframes square-up {
  from {
    transform: translate(var(--fx), var(--fy)) rotate(var(--fr));
  }
}

@keyframes stamp {
  0% { transform: none; }
  30% { transform: translate(-235%, -10%) rotate(-6deg); }
  48% { transform: translate(-235%, 12%) rotate(-6deg) scale(.94); }
  62% { transform: translate(-235%, -14%) rotate(-6deg); }
  100% { transform: none; }
}

@keyframes impress {
  from {
    transform: rotate(-7deg) scale(1.25);
    opacity: 0;
  }
}

@keyframes slide-in {
  from {
    transform: translateX(-18px);
    opacity: 0;
  }
}

/* What she handles: kraft folders with her orange tabs. */
.handles {
  padding-block: var(--s7) var(--s8);
}

.handles__head {
  display: grid;
  gap: var(--s4);
  margin-bottom: var(--s6);
}

@media (min-width: 960px) {
  .handles__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: end;
    gap: var(--s7);
  }
}

.handles__lede {
  max-width: 56ch;
  font-size: 1.125rem;
  color: var(--muted);
}

.folders {
  display: grid;
  gap: var(--s6) var(--s4);
  margin: 0;
}

@media (min-width: 600px) {
  .folders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .folders {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.folder {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
}

.folder__tab {
  justify-self: start;
  padding: var(--s2) var(--s4) var(--s1);
  border-radius: 10px 10px 0 0;
  background: var(--thread);
  color: #16181F;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
}

.folder__body {
  padding: var(--s5) var(--s4) var(--s6);
  border-radius: 0 12px 12px 12px;
  background: var(--kraft);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.5;
  transition: transform 180ms var(--ease-out);
}

.folder:hover .folder__body {
  transform: translateY(-3px);
}

/* Prices: a timesheet. Each square is one hour. */
.prices {
  padding-block: var(--s8);
  background: var(--surface);
}

.prices__head {
  display: grid;
  gap: var(--s3);
}

.prices__lede {
  max-width: 52ch;
  font-size: 1.125rem;
  color: var(--muted);
}

.sheet {
  display: grid;
  margin: 0;
}

.sheet__row {
  display: grid;
  gap: var(--s3) var(--s6);
  align-items: center;
  padding-block: var(--s5);
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name price"
    "hours hours"
    "note note";
}

@media (min-width: 900px) {
  .sheet__row {
    grid-template-columns: 12rem minmax(0, 1fr) 13rem;
    grid-template-areas:
      "name hours price"
      ". note note";
  }
}

.sheet__name {
  grid-area: name;
  display: grid;
}

.sheet__plan {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
}

.sheet__hours {
  color: var(--muted);
  font-weight: 600;
}

.sheet__price {
  grid-area: price;
  justify-self: end;
  text-align: right;
  color: var(--muted);
  font-weight: 600;
}

.price {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.625rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}

.sheet__note {
  grid-area: note;
  max-width: 60ch;
  color: var(--muted);
}

.hours {
  grid-area: hours;
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 4px;
  max-width: 40rem;
}

.hours i {
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--cell-off);
}

.hours--5 i:nth-child(-n + 5),
.hours--10 i:nth-child(-n + 10),
.hours--20 i {
  background: var(--thread);
}

@media (prefers-reduced-motion: no-preference) {
  .lt-arrived .hours i {
    animation: hour-in 420ms var(--ease-out) both;
  }
  .lt-arrived .hours i:nth-child(n) { animation-delay: calc(var(--i, 0) * 30ms); }
}

.hours i:nth-child(1) { --i: 1; } .hours i:nth-child(2) { --i: 2; } .hours i:nth-child(3) { --i: 3; } .hours i:nth-child(4) { --i: 4; }
.hours i:nth-child(5) { --i: 5; } .hours i:nth-child(6) { --i: 6; } .hours i:nth-child(7) { --i: 7; } .hours i:nth-child(8) { --i: 8; }
.hours i:nth-child(9) { --i: 9; } .hours i:nth-child(10) { --i: 10; } .hours i:nth-child(11) { --i: 11; } .hours i:nth-child(12) { --i: 12; }
.hours i:nth-child(13) { --i: 13; } .hours i:nth-child(14) { --i: 14; } .hours i:nth-child(15) { --i: 15; } .hours i:nth-child(16) { --i: 16; }
.hours i:nth-child(17) { --i: 17; } .hours i:nth-child(18) { --i: 18; } .hours i:nth-child(19) { --i: 19; } .hours i:nth-child(20) { --i: 20; }

@keyframes hour-in {
  from {
    transform: scale(.4);
  }
}

.oneoffs {
  display: grid;
  gap: var(--s5);
}

@media (min-width: 760px) {
  .oneoffs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.oneoff {
  display: grid;
  align-content: start;
  gap: var(--s3);
  padding-top: var(--s4);
  border-top: 3px solid var(--ink);
}

.oneoff--free {
  border-top-color: var(--thread);
}

.oneoff__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
}

.oneoff__prices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
}

.oneoff__prices dt {
  font-weight: 600;
  color: var(--muted);
}

.oneoff__note {
  color: var(--muted);
  max-width: 44ch;
}

.oneoff .call {
  justify-self: start;
}

/* Do I need a VA? */
.va {
  padding-block: var(--s8);
}

.va__grid {
  display: grid;
  gap: var(--s6);
  margin-top: var(--s5);
}

@media (min-width: 960px) {
  .va__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s8);
  }
}

.va__pull {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
  line-height: 1.15;
  color: var(--accent-text);
}

.va__words {
  display: grid;
  gap: var(--s4);
  align-content: start;
  max-width: 58ch;
}

.va__words > p {
  font-size: 1.0625rem;
}

.cover {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--s4);
  align-items: center;
  margin-top: var(--s3);
  padding: var(--s4);
  border-radius: 14px;
  background: var(--surface);
}

.cover__seal {
  color: var(--ink);
  --seal-paper: var(--surface);
}

.cover__text {
  color: var(--muted);
}

.cover__text strong {
  color: var(--ink);
}

/* Booking */
.booking {
  padding-block: var(--s7) var(--s8);
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}

.step__n {
  border-color: var(--thread);
  font-family: var(--display);
}

.step__title {
  font-family: var(--display);
  font-weight: 800;
}

.family__title {
  font-family: var(--display);
  font-weight: 800;
}

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