/* =======================================================================
   RunCabin design system - "The Field Guide" (2026 redesign)
   -----------------------------------------------------------------------
   Warm paper + deep night-blue, editorial serif display type, hairline
   rules, dot-leader rate cards. The visual language of printed field
   guides and hand-built things - deliberately unlike template SaaS.

   Load on redesigned marketing pages INSTEAD of tailwind.css +
   runcabin-dark.css. Fonts: Fraunces (display), Schibsted Grotesk (text),
   IBM Plex Mono (data) - the shared nav injects the Google Fonts link on
   every page, so blog posts inherit the faces without per-page edits.

   Un-redesigned pages (ai-build app, funnel, dashboards) keep their own
   stylesheets; nothing here loads there.
   ======================================================================= */

:root {
    /* ground */
    --paper:       #f6f2e9;
    --paper-deep:  #ede7d8;
    --night:       #0e1a2b;
    --night-soft:  #16273c;
    --night-line:  rgba(242, 234, 217, .14);
    /* ink */
    --ink:         #1c2b3a;
    --ink-soft:    #52616f;
    --ink-line:    rgba(28, 43, 58, .16);
    --cream:       #f2ead9;
    --cream-soft:  #aebbc9;
    /* accent - the mark's blue family (BRAND.md: indigo/purple retired) */
    --accent:      #2563eb;
    --accent-deep: #1d4ed8;
    --sky:         #7dd3fc;
    --sky-mid:     #38bdf8;
    /* supporting */
    --ember:       #c46a1b;   /* one warm accent, tiny doses */
    --pine:        #2f6f4f;   /* checks on paper */
    --pine-bright: #4ade80;   /* checks on night */
    /* type */
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans:  "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- base ------------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 1.0625rem/1.65 var(--sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 560;
    letter-spacing: -0.012em;
    line-height: 1.08;
    margin: 0 0 .5em;
    text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 6.4vw, 4.4rem); line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.35rem; line-height: 1.25; }
p  { margin: 0 0 1em; }
strong { font-weight: 640; }

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(37, 99, 235, .4); transition: text-decoration-color .15s; }
a:hover { text-decoration-color: currentColor; }

::selection { background: rgba(125, 211, 252, .35); }

/* ---- sections & grid ------------------------------------------------- */
.rc-wrap   { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.rc-wrap-n { max-width: 880px;  margin: 0 auto; padding: 0 24px; }  /* narrow: text measure */
section { padding: 88px 0; }
@media (max-width: 640px) { section { padding: 64px 0; } }

/* night sections - the cabin after dark */
.rc-night { background: var(--night); color: var(--cream); }
.rc-night h1, .rc-night h2, .rc-night h3 { color: var(--cream); }
.rc-night a { color: var(--sky); text-decoration-color: rgba(125, 211, 252, .4); }
.rc-night ::selection { background: rgba(37, 99, 235, .5); }

/* paper grain - barely-there, paper sections only */
.rc-grain { position: relative; }
.rc-grain::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .17 0 0 0 0 .23 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}
.rc-grain > * { position: relative; }

/* hairline rules structure the page */
.rc-rule    { border: 0; border-top: 1px solid var(--ink-line); margin: 0; }
.rc-night .rc-rule { border-color: var(--night-line); }

/* kicker - a field-notes label: small caps + hairline, NOT tracking-widest */
.rc-kicker {
    display: flex; align-items: center; gap: 14px;
    font: 500 .8125rem/1 var(--mono);
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-soft); margin: 0 0 20px;
}
.rc-kicker::before { content: ""; width: 34px; height: 1px; background: var(--ember); flex: none; }
.rc-night .rc-kicker { color: var(--cream-soft); }

/* editorial chapter numeral (the three doors) */
.rc-num {
    font: italic 400 2.6rem/1 var(--serif);
    color: var(--ember);
}

/* ---- buttons --------------------------------------------------------- */
.rc-btn, .rc-btn-ghost {
    display: inline-block; font: 620 1rem/1 var(--sans);
    padding: 15px 26px; border-radius: 4px; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    cursor: pointer; border: 0;
}
.rc-btn { background: var(--accent); color: #fff !important; }
.rc-btn:hover { background: var(--accent-deep); }
.rc-btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink-line); }
.rc-btn-ghost:hover { border-color: var(--ink); }
.rc-night .rc-btn-ghost { color: var(--cream); border-color: var(--night-line); }
.rc-night .rc-btn-ghost:hover { border-color: var(--cream); }
.rc-btn-ink { background: var(--ink); color: var(--paper) !important; }
.rc-btn-ink:hover { background: var(--night); }

/* small caption under a CTA */
.rc-cta-note { font-size: .875rem; color: var(--ink-soft); margin-top: 14px; }
.rc-night .rc-cta-note { color: var(--cream-soft); }

/* ---- lists with checks ----------------------------------------------- */
.rc-checks { list-style: none; padding: 0; margin: 0; }
.rc-checks li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.rc-checks svg { flex: none; margin-top: 4px; color: var(--pine); }
.rc-night .rc-checks svg { color: var(--pine-bright); }

/* ---- the ruled triptych (three doors, pricing) ------------------------ */
.rc-triptych { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); }
.rc-triptych > * { padding: 40px 34px 44px; border-left: 1px solid var(--ink-line); display: flex; flex-direction: column; }
.rc-triptych > *:first-child { border-left: 0; padding-left: 0; }
.rc-triptych > *:last-child { padding-right: 0; }
.rc-night .rc-triptych, .rc-night .rc-triptych > * { border-color: var(--night-line); }
@media (max-width: 900px) {
    .rc-triptych { grid-template-columns: 1fr; }
    .rc-triptych > * { border-left: 0; border-top: 1px solid var(--ink-line); padding: 36px 0; }
    .rc-triptych > *:first-child { border-top: 0; }
    .rc-night .rc-triptych > * { border-color: var(--night-line); }
}

/* ---- rate card: printed price list with dot leaders ------------------- */
.rc-rate { list-style: none; margin: 0; padding: 0; }
.rc-rate li { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; }
.rc-rate .rl { flex: none; }
.rc-rate .dots { flex: 1; border-bottom: 1px dotted var(--ink-line); transform: translateY(-4px); min-width: 24px; }
.rc-night .rc-rate .dots { border-color: var(--night-line); }
.rc-rate .rp { flex: none; font-family: var(--mono); font-size: .95rem; font-variant-numeric: tabular-nums; }

/* ---- data plate: mono spec sheet on paper ----------------------------- */
.rc-plate {
    border: 1px solid var(--ink-line); border-radius: 6px;
    background: var(--paper-deep);
    font: 400 .78rem/1.7 var(--mono); color: var(--ink-soft);
    padding: 22px 24px;
}
.rc-plate b { color: var(--ink); font-weight: 600; }

/* ---- tables (token costs) --------------------------------------------- */
.rc-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.rc-table th {
    font: 500 .75rem/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-soft); text-align: left; padding: 10px 14px;
    border-bottom: 1px solid var(--ink);
}
.rc-table td { padding: 13px 14px; border-bottom: 1px solid var(--ink-line); vertical-align: baseline; }
.rc-table .num { text-align: right; font-family: var(--mono); font-size: .875rem; font-variant-numeric: tabular-nums; }
.rc-table tbody tr:last-child td { border-bottom: 1px solid var(--ink); }

/* ---- footnote / fine print -------------------------------------------- */
.rc-fine { font-size: .8125rem; color: var(--ink-soft); line-height: 1.6; }
.rc-night .rc-fine { color: var(--cream-soft); }

/* ---- the trades run: comma-separated serif italic, not chip soup ------ */
.rc-run { font: italic 400 1.3rem/1.7 var(--serif); color: var(--ink-soft); }

/* ---- founder's note: a letter ----------------------------------------- */
.rc-letter {
    border-left: 2px solid var(--ember);
    padding-left: 28px;
}
.rc-letter .sig { font: italic 500 1.2rem/1 var(--serif); color: var(--ink); }

/* ---- product mock: a finished trade site in a browser frame, with the
        Cobble chat card showing the edit-by-asking loop. Field Guide
        restyle of the old hero-mock (decorative; mark root aria-hidden).
        Namespaced rcm-* so no legacy sheet touches it. ------------------- */
.rc-mock { position: relative; max-width: 560px; margin: 0 0 44px; }
.rcm-browser {
    background: #fdfbf6; border-radius: 6px; overflow: hidden;
    border: 1px solid rgba(28, 43, 58, .25);
    box-shadow: 0 1px 0 rgba(2, 6, 23, .3), 0 24px 48px -16px rgba(2, 6, 23, .5);
}
.rcm-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--paper-deep); border-bottom: 1px solid var(--ink-line); }
.rcm-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink-line); flex: none; }
.rcm-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; margin: 0 8px; background: #fdfbf6; border: 1px solid var(--ink-line); border-radius: 4px; padding: 4px 10px; font: 500 11.5px/1.4 var(--mono); color: var(--ink-soft); white-space: nowrap; overflow: hidden; }
.rcm-url svg { color: var(--pine); flex: none; }
.rcm-live { display: flex; align-items: center; gap: 5px; font: 600 10px/1 var(--mono); color: var(--pine); letter-spacing: .06em; text-transform: uppercase; flex: none; }
.rcm-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.rcm-page { padding: 16px 18px 50px; background: #fdfbf6; }
.rcm-nav { display: flex; align-items: center; gap: 9px; padding: 2px 2px 12px; }
.rcm-logo { font: 600 13px/1 var(--serif); color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }
.rcm-links { margin-left: auto; display: flex; gap: 7px; }
.rcm-links i { width: 26px; height: 5px; border-radius: 2px; background: var(--paper-deep); border: 1px solid rgba(28,43,58,.08); }
.rcm-navcta { font: 600 9.5px/1 var(--sans); color: #fdfbf6; background: var(--ink); border-radius: 3px; padding: 5px 8px; white-space: nowrap; }
.rcm-hero { border-radius: 4px; padding: 20px 18px 18px; background-color: var(--night); background-image: linear-gradient(165deg, rgba(14, 26, 43, .88), rgba(14, 26, 43, .5)), url(/img/mock/mock-hero.jpg); background-size: cover; background-position: center 40%; }
.rcm-kicker { font: 500 8.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sky); margin-bottom: 7px; }
.rcm-title { font: 500 17px/1.12 var(--serif); letter-spacing: -.01em; color: #fdfbf6; max-width: 240px; margin-bottom: 12px; }
.rcm-btn { display: inline-block; font: 620 10.5px/1 var(--sans); color: #fff; background: var(--accent); border-radius: 3px; padding: 7px 11px; }
.rcm-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.rcm-shot { position: relative; height: 62px; border-radius: 4px; overflow: hidden; }
.rcm-shot.before { background: #64748b url(/img/mock/mock-before.jpg) center/cover; }
.rcm-shot.after { background: var(--accent) url(/img/mock/mock-after.jpg) center/cover; }
.rcm-shot span { position: absolute; left: 6px; bottom: 5px; font: 600 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .95); background: rgba(14, 26, 43, .55); padding: 3px 6px; border-radius: 2px; }
.rcm-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.rcm-card { border: 1px solid var(--ink-line); border-radius: 4px; padding: 9px; background: #fdfbf6; }
.rcm-card .sq { display: block; width: 15px; height: 15px; border-radius: 3px; background: rgba(37, 99, 235, .18); margin-bottom: 7px; }
.rcm-card i { display: block; height: 4px; border-radius: 2px; background: var(--paper-deep); margin-top: 5px; }
.rcm-card i.w60 { width: 60%; }
.rcm-chat { position: absolute; right: -12px; bottom: -26px; width: min(56%, 240px); background: var(--paper); border: 1px solid rgba(28, 43, 58, .25); border-radius: 6px; padding: 11px 12px 12px; box-shadow: 0 20px 40px -12px rgba(2, 6, 23, .55); }
.rcm-chat-head { display: flex; align-items: center; gap: 6px; font: 500 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 9px; }
.rcm-chat-head img { width: 14px; height: 14px; }
.rcm-msg { font: 400 11.5px/1.45 var(--sans); border-radius: 6px; padding: 7px 10px; width: fit-content; max-width: 88%; }
.rcm-msg-user { background: var(--accent); color: #fff; margin-left: auto; border-bottom-right-radius: 2px; }
.rcm-msg-ai { background: var(--paper-deep); color: var(--ink); margin-top: 6px; border-bottom-left-radius: 2px; display: flex; align-items: center; gap: 6px; }
.rcm-msg-ai svg { color: var(--pine); flex: none; }
@media (max-width: 1023px) { .rcm-chat { right: 4px; } .rc-mock { margin-inline: auto; } }

/* ---- utility ----------------------------------------------------------- */
.rc-center { text-align: center; }
.rc-mono   { font-family: var(--mono); }
.rc-serif-i { font-family: var(--serif); font-style: italic; }
.rc-muted  { color: var(--ink-soft); }
.rc-night .rc-muted { color: var(--cream-soft); }
.rc-ember  { color: var(--ember); }