/* Base: palette + resets. All values come from the Figma file
   ("Interhouse - Website Finalization – 20JULY26") — do not invent values. */

:root {
  /* Palette (exact fills from the design file) */
  --ink: #000000;
  --offwhite: #F7F4F1;      /* light text on dark, light section bg */
  --nearwhite: #FCFAF8;
  --beige: #ECEAE1;
  --green: #00AA41;
  --green-tint: #DBEDD0;
  --yellow: #FCF598;
  --red: #EF4D4D;
  --purple: #593DE3;
  --taupe: #B2ADA4;
  --grey-dark: #4A4A4C;
  --blue: #C2ECFF;
  --pink: #FFCFF3;

  /* Type */
  --font-grotesk: 'FFF Acid Grotesk', Helvetica, Arial, sans-serif;
  --font-mono: 'ABC Schengen A Mono', 'Courier New', monospace;

  /* Shared component values (UI Bible) */
  --blur-pill-bg: rgba(0, 0, 0, 0.40);   /* black buttons: 40% + blur 16 */
  --blur-pill-bg-hover: rgba(0, 0, 0, 0.60);
  --blur-pill-blur: 1rem;
  --page-max: 90rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Proportional scaling: 1rem = 16 design-px at each Figma frame width
   (desktop 1440 / tablet 768 / mobile 390). All rem values in the CSS are
   the exact Figma px ÷ 16, so at any viewport width the page renders as the
   matching Figma frame, uniformly zoomed — text, images and spacing keep
   their designed proportions together. */
/* Capped at 16px: above the 1440 frame text and graphics hold their size
   instead of growing indefinitely (agency, Trello 2026-07-27). */
html { font-size: min(calc(100vw / 90), 16px); }                        /* 1440 frame */
@media (max-width: 1199px) { html { font-size: calc(100vw / 48); } }     /* 768 frame */
@media (max-width: 767px) { html { font-size: calc(100vw / 24.375); } }  /* 390 frame */

html { scroll-behavior: smooth; }
/* Document canvas beige so the strip iOS paints past the footer (bottom bar /
   rubber-band) matches the footer instead of flashing white (Trello 2026-08-18
   "remove the white band error"). body keeps the off-white page ground. */
html { background: var(--beige); }
/* flow-root: children's top margins must not collapse through body — with the
   subpage headers now fixed, the first section's 200px margin pushed the whole
   body box down and exposed the beige canvas at the top (VB 28AUG26 #3) */
body { display: flow-root; }

body {
  font-family: var(--font-grotesk);
  font-weight: 300;
  background: var(--offwhite);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
ul, ol { list-style: none; }