/*
 * Organise, Direction B. The sorted desk: paper white and sumi ink with her
 * own orange, set in Bitter, the face her current brand already uses. Motion
 * is precise and quick: things slide into their trays and stop, never bounce.
 */
@font-face {
  font-family: "Bitter";
  src: url(/_assets/previews/b/organise/fonts/bitter-var.0efe0fbe60.woff2) format("woff2");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url(/_assets/previews/b/organise/fonts/instrument-sans-var.8b74e9bc6e.woff2) format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url(/_assets/previews/b/organise/fonts/ibm-plex-mono-500.01d2854474.woff2) format("woff2");
  font-weight: 500; font-display: swap;
}

:root {
  --ground: light-dark(#F5F5F2, #151311);
  --raise: light-dark(#FFFFFF, #211E1B);
  --ink: light-dark(#1A1714, #F1EEE9);
  --muted: light-dark(#55504A, #B9B2A9);
  --accent: light-dark(#A8480A, #F3994F);
  --line: light-dark(#D9D6CF, #3A3530);
  --tint: light-dark(#FBE7D6, #3A2617);
  --display: "Bitter", Rockwell, "Roboto Slab", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --slide: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Seal ---------- */
.seal { color: var(--ink); }
.seal .wave { fill: var(--thread); }
.seal .wave-cut { fill: var(--ground); }
.seal .hair { stroke: currentColor; stroke-width: 1.4; }
.seal .mono path { fill: currentColor; }
.seal .ring-text { font: 600 10.5px/1 var(--body); letter-spacing: .3em; fill: currentColor; }
.seal .ring-long { font-size: 9.6px; letter-spacing: .14em; }

.h2 {
  font-family: var(--display); font-weight: 760; letter-spacing: -.02em;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.6rem); line-height: 1.04;
}
.h3 { font-family: var(--display); font-weight: 700; font-size: 1.375rem; line-height: 1.2; letter-spacing: -.01em; }
.lede { margin-top: var(--s3); color: var(--muted); font-size: 1.125rem; max-width: 50ch; }
.small { font-size: .9375rem; color: var(--muted); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }

/* ---------- Hero ---------- */
.hero {
  display: grid; gap: var(--s6);
  padding-block: clamp(1.25rem, 4vh, 3rem) var(--s8);
  align-items: center;
}
.hero-title { font-family: var(--display); line-height: 1; }
.hero-title .lead {
  display: block; font-family: var(--body); font-weight: 600;
  font-size: clamp(1.1rem, .9rem + .8vw, 1.5rem); letter-spacing: 0; color: var(--muted);
  margin-bottom: var(--s2);
}
.big-verb {
  display: inline-block; color: var(--accent);
  font-weight: 820; letter-spacing: -.035em;
  font-size: clamp(3.5rem, 1.4rem + 8.6vw, 8.75rem);
}
.big-verb .vw, .big-verb .main { display: inline-block; }
.big-verb .l { display: inline-block; }
.tray {
  display: block; height: .55rem; width: min(100%, 22rem); margin-top: var(--s3);
  background: var(--thread); border-radius: 2px; transform-origin: left;
}
.hero-line { margin-top: var(--s5); font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem); max-width: 34ch; }
.hero-line b { font-weight: 650; }
.hero-actions { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; }
.hero-text .note { margin-top: var(--s6); }
.hero-pic { position: relative; }
.hero-pic img { width: 100%; border-radius: 6px; aspect-ratio: 3 / 2; object-fit: cover; }
.hero-pic figcaption { margin-top: var(--s2); font-size: .8125rem; color: var(--muted); }
@media (min-width: 64rem) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: var(--s8); min-height: calc(100svh - 4.25rem); }
}

/* The verb sorts itself: letters come in out of order and slot into line. */
.l0 { --i: 0; --sx: 2.1em; --sy: -.5em; } .l1 { --i: 1; --sx: -.9em; --sy: .55em; }
.l2 { --i: 2; --sx: 1.4em; --sy: .35em; } .l3 { --i: 3; --sx: -2.2em; --sy: -.4em; }
.l4 { --i: 4; --sx: .7em; --sy: .6em; } .l5 { --i: 5; --sx: -1.3em; --sy: -.6em; }
.l6 { --i: 6; --sx: 1.8em; --sy: .3em; } .l7 { --i: 7; --sx: -.5em; --sy: -.45em; }
@media (prefers-reduced-motion: no-preference) {
  .lt-ready .big-verb .l { animation: sort .75s var(--slide) calc(120ms + var(--i) * 55ms) both; }
  .lt-ready .tray { animation: tray .55s var(--slide) .75s both; }
  .lt-ready .hero-line, .lt-ready .hero-actions, .lt-ready .hero-text .note { animation: up .6s var(--slide) both; }
  .lt-ready .hero-line { animation-delay: .9s; }
  .lt-ready .hero-actions { animation-delay: 1s; }
  .lt-ready .hero-text .note { animation-delay: 1.1s; }
  .lt-ready .hero-title .lead { animation: up .5s var(--slide) both; }
  .lt-ready .hero-pic { animation: settle .9s var(--slide) .35s both; }
}
@media (prefers-reduced-motion: reduce) {
  .lt-ready .hero { animation: fade .25s ease-out both; }
}
@keyframes sort { from { transform: translate(var(--sx), var(--sy)); } }
@keyframes tray { from { transform: scaleX(0); } }
@keyframes up { from { transform: translateY(1rem); opacity: 0; } }
@keyframes settle { from { transform: translateY(1.5rem) scale(.98); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }

/* ---------- What I take off your plate ---------- */
.what { padding-block: var(--s9); background: var(--raise); }
.what-grid { display: grid; gap: var(--s7); }
.tasks { display: grid; gap: var(--s5); }
.task { display: grid; gap: var(--s1); }
.task dt {
  font-family: var(--mono); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
}
.task dd { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.3; max-width: 40ch; }
.inbox { align-self: start; background: var(--ground); border-radius: 10px; padding: var(--s5); }
.inbox-cap { font-size: .9375rem; color: var(--muted); margin-bottom: var(--s4); }
.inbox-cap b { color: var(--ink); }
.mail { display: grid; gap: var(--s2); }
.mail li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4); background: var(--raise); border-radius: 6px;
  font-size: .9688rem;
}
.mail .subj { min-width: 0; }
.tag {
  flex: none; padding: .2rem .55rem; border-radius: 3px;
  font: 500 .75rem/1.3 var(--mono); letter-spacing: .02em;
  background: var(--tint); color: var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
  .inbox.lt-arrived .tag { animation: file .6s var(--slide) both; }
  .inbox.lt-arrived li:nth-child(2) .tag { animation-delay: .12s; }
  .inbox.lt-arrived li:nth-child(3) .tag { animation-delay: .24s; }
  .inbox.lt-arrived li:nth-child(4) .tag { animation-delay: .36s; }
  .inbox.lt-arrived li:nth-child(5) .tag { animation-delay: .48s; }
}
@keyframes file { from { transform: translateX(2.5rem); } }
@media (min-width: 64rem) {
  .what-grid { grid-template-columns: 1fr 1fr; column-gap: var(--s9); }
  .what-head { grid-column: 1 / -1; }
}

/* ---------- Prices: a timesheet ---------- */
.prices { padding-block: var(--s9); }
.prices-head { margin-bottom: var(--s7); }
.sheet { max-width: 52rem; }
.plans { width: 100%; margin-top: var(--s4); border-collapse: collapse; font-size: 1.0625rem; }
.plans th, .plans td { text-align: left; padding: var(--s4) var(--s3) var(--s4) 0; vertical-align: top; }
.plans thead th { font: 500 .75rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-bottom: var(--s2); }
.plans tbody tr { border-top: 1px solid var(--line); }
.plans tbody tr:last-child { border-bottom: 1px solid var(--line); }
.plans tbody th { font-family: var(--display); font-weight: 700; font-size: 1.375rem; }
.plans .num { text-align: right; padding-right: 0; }
.plans td.num { font-size: 1.5rem; color: var(--ink); }
.exec { display: block; margin-top: var(--s2); font-family: var(--body); font-weight: 400; font-size: .9375rem; color: var(--muted); max-width: 32ch; }
.hrs { display: grid; gap: var(--s2); }
.hrs .n { font: 500 1.375rem/1 var(--mono); }
.blocks {
  --t: .8rem; display: block; height: calc(var(--t) * .7);
  background: conic-gradient(at calc(var(--t) * .7) calc(var(--t) * .7), transparent 75%, var(--accent) 0) 0 0 / var(--t) var(--t);
  transform-origin: left;
}
.b5 { width: calc(var(--t) * 5); }
.b10 { width: calc(var(--t) * 10); }
.b20 { width: calc(var(--t) * 10); height: calc(var(--t) * 1.7); }
@media (min-width: 40rem) { .blocks { --t: 1rem; } }
@media (prefers-reduced-motion: no-preference) {
  .sheet.lt-arrived .blocks { animation: fill .7s var(--slide) both; }
  .sheet.lt-arrived tr:nth-child(2) .blocks { animation-delay: .1s; }
  .sheet.lt-arrived tr:nth-child(3) .blocks { animation-delay: .2s; }
}
@keyframes fill { from { transform: scaleX(.2); } }

.oneoffs { margin-top: var(--s8); display: grid; gap: var(--s6) var(--s7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.oneoff { display: grid; gap: var(--s3); align-content: start; padding-top: var(--s4); border-top: 3px solid var(--ink); }
.oneoff.free { border-top-color: var(--thread); }
.unit { font: 500 .875rem/1 var(--mono); color: var(--muted); margin-left: .35rem; }
.price { font-size: 2.25rem; line-height: 1; }
.pair { display: grid; gap: var(--s2); }
.pair li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); font-size: 1.125rem; border-bottom: 1px dotted var(--line); padding-bottom: var(--s2); }
.pair b { font-size: 1.75rem; }
.same-price { margin-top: var(--s7); max-width: 52rem; padding: var(--s4) var(--s5); background: var(--tint); border-radius: 6px; }

/* ---------- Do I need a VA? ---------- */
.need { padding-block: var(--s9); background: light-dark(#1A1714, #26221E); color: #F5F3EF; --muted: #C9C3BA; --ink: #F5F3EF; }
.need ::selection { background: var(--thread); color: var(--thread-ink); }
.need :focus-visible { outline-color: #F5F3EF; }
.need-grid { display: grid; gap: var(--s6); }
.need-title { font-family: var(--display); font-weight: 820; letter-spacing: -.03em; font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem); line-height: .98; }
.need-lede { color: var(--muted); font-weight: 600; }
.need blockquote { margin-top: var(--s5); }
.need blockquote p { font-family: var(--display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.2; font-weight: 500; max-width: 30ch; }
.need blockquote p::before { content: "“"; color: var(--thread); }
.need blockquote p::after { content: "”"; color: var(--thread); }
.need .insured { margin-top: var(--s7); display: flex; gap: var(--s3); align-items: flex-start; max-width: 44rem; font-weight: 550; }
.insured-mark { flex: none; width: 1.4rem; height: 1.4rem; margin-top: .15rem; border-radius: 50%; border: 2px solid currentColor; background: radial-gradient(circle, var(--thread) 0 38%, transparent 40%); }
@media (min-width: 64rem) { .need-grid { grid-template-columns: 1fr 1.3fr; column-gap: var(--s9); } }

/* ---------- Booking: three steps ---------- */
.booking { padding-block: var(--s9) var(--s7); }
.steps { margin-top: var(--s7); display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: none; }
.steps li { display: grid; gap: var(--s2); align-content: start; }
.step-n { font: 500 .875rem/1 var(--mono); width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; margin-bottom: var(--s2); }
.steps p { color: var(--muted); max-width: 34ch; }
.booking-cta { margin-top: var(--s7); }

.family-sentence { --display: "Bitter", Georgia, serif; font-weight: 600; }
.foot .seal-mini { width: 3.25rem; height: 3.25rem; }