/* ==========================================================================
   withRemote.ai — Editorial design system
   Influences: New Yorker editorial · 37signals/Basecamp candor ·
   Stripe Atlas precision · contemporary editorial type-driven sites
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,30..100,0..1&family=GT+Sectra:wght@400;500;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@300..700&family=Geist:wght@300..700&display=swap');

:root {
  /* === Cream / off-white tones === */
  --paper:        #F4EFE6;   /* primary cream */
  --paper-2:      #EDE6D6;   /* warmer cream */
  --paper-3:      #E5DCC6;   /* sand */
  --paper-edge:   #DCD2BB;
  --milk:         #FAF6EC;   /* near-white */
  --bone:         #FFFCF3;

  /* === Ink === */
  --ink:          #1A1714;   /* near-black, warm */
  --ink-2:        #2A2520;
  --ink-soft:     #4A413A;
  --ink-mute:     #756B61;
  --ink-faint:    #A39A8C;
  --rule:         #C9BFAB;
  --rule-soft:    #D9CFB8;

  /* === Accents (warm earth palette, not generic SaaS) === */
  --rust:         #C2440E;   /* primary accent — vermillion/rust */
  --rust-deep:    #8E2F08;
  --ochre:        #D4A537;   /* sun ochre */
  --moss:         #4A6741;   /* deep moss green */
  --indigo:       #2A3A6B;   /* deep indigo */
  --plum:         #6B2D4A;   /* burgundy plum */
  --sky-pale:     #BCD0D8;   /* dusty sky */

  /* === Surfaces === */
  --ink-surface:  #1A1714;
  --ink-surface-2:#2A241F;

  /* === Type === */
  --serif-display:'GT Sectra', 'Fraunces', 'Times New Roman', serif;
  --serif-body:   'Fraunces', 'GT Sectra', 'Times New Roman', serif;
  --serif-italic: 'Instrument Serif', 'Fraunces', serif;
  --sans:         'Geist', system-ui, -apple-system, sans-serif;
  --mono:         'JetBrains Mono', 'IBM Plex Mono', monospace;

  /* === Layout === */
  --max:          1320px;
  --gut:          clamp(20px, 4vw, 56px);

  /* === Motion === */
  --ease:         cubic-bezier(.2,.8,.2,1);
  --ease-soft:    cubic-bezier(.4,0,.2,1);
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ===== Selection ===== */
::selection { background: var(--rust); color: var(--bone); }

/* ===== Type scale ===== */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow-rust { color: var(--rust); }

.display-xl {
  font-family: var(--serif-display);
  font-size: clamp(64px, 11.5vw, 192px);
  line-height: 0.88;
  letter-spacing: -0.045em;
  font-weight: 400;
}
.display-l {
  font-family: var(--serif-display);
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  font-weight: 400;
}
.display-m {
  font-family: var(--serif-display);
  font-size: clamp(36px, 4.6vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  font-weight: 400;
}
.display-s {
  font-family: var(--serif-display);
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.h-italic { font-family: var(--serif-italic); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

.lede {
  font-family: var(--serif-body);
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.45;
  color: var(--ink-soft);
  font-weight: 400;
  text-wrap: pretty;
}

.label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ===== Layout primitives ===== */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
}
.container-wide { max-width: 1480px; margin: 0 auto; padding: 0 var(--gut); }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 var(--gut); }

/* ===== Editorial rule ===== */
.rule { border-top: 1px solid var(--rule); }
.rule-thick { border-top: 2px solid var(--ink); }
.rule-double { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 14px 0; }

/* ===== Buttons ===== */
.btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  transition: all .25s var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn-ink {
  background: var(--ink);
  color: var(--bone);
  border: 1px solid var(--ink);
}
.btn-ink:hover { background: var(--rust); border-color: var(--rust); transform: translate(0, -1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--bone); }
.btn-rust {
  background: var(--rust);
  color: var(--bone);
  border: 1px solid var(--rust);
}
.btn-rust:hover { background: var(--rust-deep); border-color: var(--rust-deep); }
.btn-cream {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper);
}
.btn-cream:hover { background: var(--bone); }
.btn-link {
  font-family: var(--sans);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.btn-link:hover { color: var(--rust); border-color: var(--rust); }

.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ===== Marquee ticker ===== */
.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  flex: 0 0 auto;
  display: flex;
  gap: 64px;
  padding-right: 64px;
  animation: marquee 60s linear infinite;
}
@keyframes marquee {
  to { transform: translateX(-100%); }
}

/* ===== Tag chip ===== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-soft);
  background: transparent;
}
.tag-ink { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.tag-rust { background: var(--rust); color: var(--bone); border-color: var(--rust); }
.tag-dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* ===== Cards ===== */
.card {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 28px;
}

/* ===== Numbered list ===== */
.numbered-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}
.numbered-row:last-child { border-bottom: 1px solid var(--rule); }
.numbered-row .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  padding-top: 6px;
}

/* ===== Underline link ===== */
.u-link {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: color .2s ease;
}
.u-link:hover { color: var(--rust); }

/* ===== Reveal animations ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"].in { transition-delay: .08s; }
[data-reveal-delay="2"].in { transition-delay: .16s; }
[data-reveal-delay="3"].in { transition-delay: .24s; }
[data-reveal-delay="4"].in { transition-delay: .32s; }
[data-reveal-delay="5"].in { transition-delay: .40s; }

/* ===== Noise overlay (subtle paper texture) ===== */
.paper-noise {
  position: relative;
}
.paper-noise::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence baseFrequency='.92' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .055 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: .55;
  z-index: 1;
}
.paper-noise > * { position: relative; z-index: 2; }

/* ===== Hand-drawn underline accent ===== */
.scribble {
  position: relative;
  white-space: nowrap;
}
.scribble::after {
  content: '';
  position: absolute;
  left: -2%; right: -2%;
  bottom: -6px;
  height: 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 8 C 40 2, 90 12, 130 6 S 198 4, 198 9' stroke='%23C2440E' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
}
.scribble-ochre::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 8 C 40 2, 90 12, 130 6 S 198 4, 198 9' stroke='%23D4A537' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>");
}
.scribble-ink::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 8 C 40 2, 90 12, 130 6 S 198 4, 198 9' stroke='%231A1714' stroke-width='2.2' fill='none' stroke-linecap='round'/></svg>");
}

/* ===== Star asterism (decorative) ===== */
.asterism {
  font-family: var(--serif-display);
  font-size: 14px;
  letter-spacing: 0.4em;
  color: var(--rust);
}

/* ===== Section header ===== */
.section-head {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 3fr;
  gap: 32px;
  align-items: baseline;
  padding-top: 28px;
  border-top: 2px solid var(--ink);
  margin-bottom: 56px;
}
.section-head .nameplate {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.section-head .nameplate .num {
  font-family: var(--serif-display);
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-transform: none;
  font-weight: 400;
}
@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; gap: 16px; }
}

/* ===== Editorial drop cap ===== */
.dropcap::first-letter {
  font-family: var(--serif-display);
  font-size: 5.6em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.08em 0 -0.03em;
  color: var(--rust);
  font-weight: 400;
}

/* ===== Pull quote ===== */
.pullquote {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

/* ===== Print-style figure ===== */
figure.editorial {
  margin: 0;
  border: 1px solid var(--rule);
  background: var(--milk);
  padding: 8px;
}
figure.editorial figcaption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 12px 8px 4px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

/* ===== Util ===== */
.flex { display: flex; }
.grid { display: grid; }
.center { display: flex; align-items: center; justify-content: center; }
.space-between { display: flex; justify-content: space-between; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .gap-48 { gap: 48px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; } .mb-48 { margin-bottom: 48px; }
.text-rust { color: var(--rust); }
.text-mute { color: var(--ink-mute); }
.text-soft { color: var(--ink-soft); }
.text-ochre { color: var(--ochre); }
.text-moss { color: var(--moss); }
.bg-paper { background: var(--paper); }
.bg-paper-2 { background: var(--paper-2); }
.bg-paper-3 { background: var(--paper-3); }
.bg-bone { background: var(--bone); }
.bg-ink { background: var(--ink); color: var(--bone); }

/* ===== Inverted (ink) sections ===== */
.invert {
  background: var(--ink-surface);
  color: var(--bone);
}
.invert .text-mute { color: #A39A8C; }
.invert .text-soft { color: #C9BFAB; }
.invert .rule, .invert hr { border-color: rgba(255,252,243,0.18); }
.invert .tag { border-color: rgba(255,252,243,0.18); color: #C9BFAB; }
.invert .btn-ghost { color: var(--bone); border-color: rgba(255,252,243,0.4); }
.invert .btn-ghost:hover { background: var(--bone); color: var(--ink); }
.invert .section-head { border-color: var(--bone); }
.invert .section-head .nameplate, .invert .section-head .nameplate .num { color: var(--bone); }
.invert .eyebrow { color: #A39A8C; }