/* Field & Fallow landing page styles (design-system tokens + base). */

/* ---- fonts ---- */
/* Field & Fallow webfonts — bundled from the brand kit (SIL OFL). */
@font-face{font-family:"Libre Baskerville";src:url("../fonts/LibreBaskerville-Variable.ttf") format("truetype");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Baskerville";src:url("../fonts/LibreBaskerville-Italic-Variable.ttf") format("truetype");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Almarai";src:url("../fonts/Almarai-Light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Almarai";src:url("../fonts/Almarai-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Almarai";src:url("../fonts/Almarai-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Almarai";src:url("../fonts/Almarai-ExtraBold.ttf") format("truetype");font-weight:800;font-display:swap}

/* ---- colors ---- */
/* Field & Fallow colour — values from the brand kit (tokens.css / BRAND.md §4). */
:root{
  /* Core palette (from fieldandfallow.ca) */
  --ff-ink:#182241;        /* Fallow Ink — headings, body, outlines */
  --ff-logo-navy:#072064;  /* Logo artwork only */
  --ff-slate:#536C7C;      /* Field Slate — primary buttons, links, hero subheads */
  --ff-harbour:#213C4E;    /* Deep Harbour — dark sections, footer, button hover */
  --ff-white:#FFFFFF;      /* Page background */

  /* Supporting neutrals (derived in kit) */
  --ff-linen:#F5F2EC;      /* Alternating sections */
  --ff-stone:#E4E0D8;      /* Hairlines on linen */
  --ff-mist:#C9D3D9;       /* Hairlines on white, disabled */
  --ff-ink-70:rgba(24,34,65,.7);
  --ff-ink-50:rgba(24,34,65,.5);

  /* Form feedback (addition — not in kit; muted to sit with the palette) */
  --ff-error:#9A3B2E;

  /* Semantic */
  --color-bg:var(--ff-white);
  --color-bg-alt:var(--ff-linen);
  --color-bg-dark:var(--ff-harbour);
  --color-text:var(--ff-ink);
  --color-text-muted:var(--ff-ink-70);
  --color-text-on-dark:var(--ff-white);
  --color-accent:var(--ff-slate);
  --color-link:var(--ff-slate);
  --color-link-hover:var(--ff-harbour);
  --color-button:var(--ff-slate);
  --color-button-hover:var(--ff-harbour);
  --color-border:var(--ff-mist);
  --color-border-alt:var(--ff-stone);
  --color-border-strong:var(--ff-ink);
  --color-field-bg:var(--ff-white);
  --color-error:var(--ff-error);
  --overlay-hero:var(--ff-ink-50);
}

/* ---- typography ---- */
/* Field & Fallow type — Libre Baskerville 400 display/lede, Almarai body/UI. */
:root{
  --font-display:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --font-body:"Almarai","Helvetica Neue",Arial,sans-serif;

  --text-display:clamp(2.5rem,5vw,4rem);
  --text-h1:clamp(2rem,3.6vw,2.75rem);
  --text-h2:clamp(1.5rem,2.4vw,1.875rem);
  --text-h3:1.25rem;
  --text-lede:clamp(1.0625rem,1.4vw,1.1875rem);
  --text-body:1rem;
  --text-small:.875rem;
  --text-eyebrow:.75rem;

  --tracking-display:-0.02em;
  --tracking-h3:-0.01em;
  --tracking-eyebrow:.18em;
  --tracking-label:.14em;
  --tracking-button:.04em;
  --leading-display:1.15;
  --leading-lede:1.65;
  --leading-body:1.6;

  --weight-display:400;
  --weight-body:400;
  --weight-label:700;
}

/* ---- spacing ---- */
/* Field & Fallow space, shape, motion — from the kit's tokens.css. */
:root{
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;
  --space-9:6rem;--space-10:8rem;

  --section-y-mobile:var(--space-8);   /* 64px */
  --section-y-desktop:var(--space-10); /* 128px */
  --gutter-photo:10px;                 /* photo grid gutters (8–12px) */

  --container:1200px;
  --container-narrow:720px;

  --radius:0;                          /* square corners everywhere */
  --border-hairline:1px solid var(--color-border);
  --border-hairline-alt:1px solid var(--color-border-alt);

  --ease:cubic-bezier(.2,.6,.2,1); /* @kind other */
  --duration:240ms; /* @kind other */

  --button-pad-y:14px;
  --button-pad-x:28px;
  --field-height:48px;
  --sticky-cta-height:72px;
}

/* ---- base ---- */
/* Field & Fallow base element styles + utility classes. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-text);font:var(--weight-body) var(--text-body)/var(--leading-body) var(--font-body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--color-link);text-underline-offset:3px}
a:hover{color:var(--color-link-hover)}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);line-height:var(--leading-display);margin:0;text-wrap:balance}
p{text-wrap:pretty}
.ff-display{font-size:var(--text-display)}
.ff-h1{font-size:var(--text-h1)}
.ff-h2{font-size:var(--text-h2)}
.ff-h3{font-size:var(--text-h3);letter-spacing:var(--tracking-h3)}
.ff-lede{font-family:var(--font-display);font-size:var(--text-lede);line-height:var(--leading-lede)}
.ff-eyebrow{font:var(--weight-label) var(--text-eyebrow)/1 var(--font-body);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-accent)}
.ff-muted{color:var(--color-text-muted)}
.ff-wrap{width:min(100% - 32px,var(--container));margin-inline:auto}
.ff-narrow{width:min(100% - 32px,var(--container-narrow));margin-inline:auto}