/* ===========================================================================
   Van Isle RV Park Calculator — shared brand stylesheet for the thin tool pages.
   Hand-written (no Tailwind) so the focused calculators stay tiny and fast.
   Mirrors the design tokens used by the main index.html calculator.
   =========================================================================== */

:root {
  --paper:#F4EBE0; --ink:#1F2421; --rust:#ff9131; --teal:#2F5D5A;
  --ochre:#D9A441; --stone:#A89C8C; --shell:#EADFCF; --forest:#264D45;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Inter Tight', system-ui, sans-serif;
  background: var(--paper); color: var(--ink);
  background-image: radial-gradient(circle at 1px 1px, rgba(31,36,33,0.04) 1px, transparent 0);
  background-size: 24px 24px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: 'Fraunces', serif; font-optical-sizing: auto; font-weight: 400; }
.num { font-family: 'DM Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.italic { font-style: italic; }
a { color: inherit; }

/* Layout ------------------------------------------------------------------- */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.rule { height: 1px; background: rgba(31,36,33,0.15); width: 100%; }
.eyebrow { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rust); font-family:'DM Mono',monospace; }
.muted { color: rgba(31,36,33,0.7); }
.small { font-size: .8rem; }
.center { text-align: center; }

/* Header / footer ---------------------------------------------------------- */
.site-head { border-bottom: 1px solid rgba(31,36,33,0.15); }
.site-head .wrap { display:flex; align-items:center; justify-content:space-between; padding-top:1.1rem; padding-bottom:1.1rem; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.brand .mark { width:1.7rem; height:1.7rem; border-radius:50%; background:var(--rust) center/cover no-repeat url('/VanIsleDERVP.png'); position:relative; }
.brand .mark::after { content:none; }
.brand .name { font-family:'Fraunces',serif; font-size:1.2rem; }
.head-link { font-size:.85rem; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:1px; }
.head-link:hover { color:var(--rust); border-color:var(--rust); }

.site-foot { border-top:1px solid rgba(31,36,33,0.15); background:rgba(234,223,207,0.5); margin-top:4rem; }
.site-foot .wrap { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; padding-top:2.5rem; padding-bottom:2.5rem; }

/* Hero --------------------------------------------------------------------- */
.hero { padding: 3rem 0 1.5rem; }
.hero h1 { font-family:'Fraunces',serif; font-weight:300; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height:1.04; letter-spacing:-.01em; margin:.8rem 0 0; }
.hero p.lead { font-size: clamp(1.05rem,2vw,1.25rem); color: rgba(31,36,33,0.72); max-width: 46rem; margin:1.1rem 0 0; }

/* Section headings --------------------------------------------------------- */
section.block { padding: 3rem 0; border-top:1px solid rgba(31,36,33,0.15); }
section.block h2 { font-family:'Fraunces',serif; font-weight:300; font-size: clamp(1.8rem,3.5vw,2.6rem); line-height:1.06; margin:.4rem 0 1rem; }
h3 { font-family:'Fraunces',serif; font-weight:400; }

/* Calculator card grid ----------------------------------------------------- */
.calc-grid { display:grid; grid-template-columns: 1fr; gap: 1.5rem; align-items:start; }
@media (min-width: 880px) { .calc-grid { grid-template-columns: 1.15fr .85fr; gap: 2.5rem; } }

.card { background: var(--paper); border:1px solid rgba(31,36,33,0.2); }
.card-head { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.5rem; border-bottom:1px solid rgba(31,36,33,0.15); }
.card-head .label { font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-family:'DM Mono',monospace; }
.card-body { padding: 1.25rem 1.5rem 1.5rem; }
.card.shell { background: var(--shell); border-color: rgba(31,36,33,0.15); }

.results.card { position: sticky; top: 1.5rem; }
@media (max-width: 879px) { .results.card { position: static; } }

/* Fields ------------------------------------------------------------------- */
.field-row { display:grid; grid-template-columns: 1fr; gap: 1.1rem 1.5rem; }
@media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field-group { margin: 1.5rem 0; }
.field-group > .group-title { font-family:'Fraunces',serif; font-size:1.05rem; display:block; margin-bottom:.9rem; }

label.f { display:block; }
label.f > .l { display:block; font-size:.85rem; font-weight:500; margin-bottom:.25rem; }
label.f > .l .hint { color: rgba(31,36,33,0.5); font-weight:400; }
.field {
  background: transparent; border:none; border-bottom:1.5px solid var(--ink);
  padding:.5rem 0; font-family:'DM Mono',monospace; font-size:1.05rem; color:var(--ink);
  width:100%; border-radius:0; outline:none; transition:border-color .2s ease;
}
.field:focus { border-color: var(--rust); }
.prefixed { position:relative; }
.prefixed .pfx { position:absolute; left:0; top:50%; transform:translateY(-50%); font-family:'DM Mono',monospace; color:var(--stone); pointer-events:none; }
.prefixed .field { padding-left:1.05rem; }

/* Result rows -------------------------------------------------------------- */
.rrow { display:flex; align-items:baseline; justify-content:space-between; padding:.7rem 0; border-bottom:1px solid rgba(31,36,33,0.1); }
.rrow:last-child { border-bottom:none; }
.rrow .rl { font-size:.88rem; }
.rrow .rv { font-family:'DM Mono',monospace; font-size:1.05rem; }
.rrow.hero-row .rv { font-size:1.9rem; font-weight:500; }
.rrow.hero-row .rl { font-weight:500; }
.hero-num { font-family:'Fraunces',serif; font-size:2.4rem; line-height:1; }
.subrow { display:flex; align-items:baseline; justify-content:space-between; padding:.25rem 0; font-size:.78rem; color:rgba(31,36,33,0.6); }
.subrow .num { font-size:.82rem; }

/* Bars --------------------------------------------------------------------- */
.bar { height:.75rem; width:100%; display:flex; overflow:hidden; border-radius:9999px; border:1px solid rgba(31,36,33,0.15); }
.bar > span { height:100%; display:block; }
.legend { display:flex; flex-wrap:wrap; gap:.25rem 1rem; font-size:.65rem; font-family:'DM Mono',monospace; color:rgba(31,36,33,0.6); margin-top:.4rem; }
.legend .sw { display:inline-block; width:.5rem; height:.5rem; border-radius:2px; margin-right:.25rem; vertical-align:middle; }

/* Buttons / chips ---------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; background:var(--ink); color:var(--paper);
  border:none; padding:.85rem 1.4rem; font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; font-weight:500;
  text-decoration:none; cursor:pointer; transition:background .2s ease; width:100%; }
.btn:hover { background:var(--rust); }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid rgba(31,36,33,0.25); }
.btn.ghost:hover { border-color:var(--ink); background:transparent; color:var(--rust); }

.presets { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.25rem; }
.preset { font-size:.78rem; padding:.35rem .8rem; border:1px solid rgba(31,36,33,0.25); background:transparent; cursor:pointer; color:rgba(31,36,33,0.7); transition:all .2s ease; }
.preset:hover { border-color:var(--ink); color:var(--ink); }

/* FAQ + tables ------------------------------------------------------------- */
.faq-item { padding:1rem 0; border-top:1px solid rgba(31,36,33,0.12); }
.faq-item:first-child { border-top:none; }
.faq-item h3 { font-size:1.1rem; margin:0 0 .35rem; }
.faq-item p { margin:0; font-size:.9rem; color:rgba(31,36,33,0.75); }

.related { display:grid; grid-template-columns:1fr; gap:1px; background:rgba(31,36,33,0.15); border:1px solid rgba(31,36,33,0.15); }
@media (min-width:720px){ .related { grid-template-columns:repeat(3,1fr); } }
.related a { background:var(--paper); padding:1.5rem; text-decoration:none; transition:background .2s ease; }
.related a:hover { background:rgba(234,223,207,0.6); }
.related a h3 { font-size:1.15rem; margin:.4rem 0 .5rem; }
.related a:hover h3 { color:var(--rust); }
.related a p { font-size:.82rem; color:rgba(31,36,33,0.7); margin:0; }
.related a .go { display:inline-block; margin-top:.8rem; font-size:.82rem; border-bottom:1px solid rgba(31,36,33,0.4); }
.related a:hover .go { color:var(--rust); border-color:var(--rust); }

.cta { background:var(--shell); border:1px solid rgba(31,36,33,0.15); padding:2rem; }
.note { font-size:.72rem; color:rgba(31,36,33,0.5); font-style:italic; font-family:'Fraunces',serif; }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }