/* ============================================================
   H Ismond Joinery — Colors & Type
   Forest green, brass, ivory. After the mark.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter+Tight:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
     COLOR — ivory, ink, stone, forest, brass
     ============================================================ */

  /* Ivory surfaces — warm cream, but cool of manilla */
  --paper-00:  #FDFBF5;
  --paper-50:  #F8F4EA;   /* default page background */
  --paper-100: #EFE9D8;
  --paper-200: #DED5BD;

  /* Ink — deep near-blacks, never pure black */
  --ink-900: #14161C;
  --ink-700: #2A2D38;
  --ink-500: #5C606E;
  --ink-300: #9CA0AD;

  /* Stone — cool neutrals (var name 'oak' preserved for code compatibility) */
  --oak-100: #E2DDCC;
  --oak-300: #BAB29B;
  --oak-500: #847C66;
  --oak-700: #4D4838;

  /* Forest — the primary brand colour, from the mark */
  --forest-500: #134E3A;   /* primary green */
  --forest-700: #0A3329;   /* deep, for hover and reversed grounds */
  --forest-300: #2E6F58;   /* mid, for hairlines on green panels */

  /* Brass — the secondary accent, from the mark */
  --brass-500: #B8924A;    /* primary brass */
  --brass-700: #8B6F2D;    /* deep brass, for small text on light grounds */
  --brass-300: #D8B97A;    /* light brass, only on dark grounds */

  /* Legacy aliases — point at the new palette so existing code still resolves */
  --oxblood-500: var(--forest-500);
  --oxblood-700: var(--forest-700);
  --gilt-500:    var(--brass-700);

  /* Sage — quiet success only */
  --sage-500: #5E7766;

  /* ============================================================
     SEMANTIC SURFACES
     ============================================================ */
  --bg:          var(--paper-50);
  --bg-elevated: var(--paper-00);
  --bg-sunken:   var(--paper-100);
  --bg-inverse:  var(--forest-700);   /* for reversed footers / hero panels */

  --fg:         var(--ink-900);
  --fg-muted:   var(--ink-500);
  --fg-subtle:  var(--ink-300);
  --fg-inverse: var(--paper-00);

  --accent:      var(--forest-500);
  --accent-deep: var(--forest-700);
  --accent-warm: var(--brass-700);    /* small/text-grade brass */

  --rule:        var(--paper-200);
  --rule-strong: var(--ink-300);

  /* ============================================================
     TYPE — Cormorant (display serif) + Inter Tight (text)
     ============================================================ */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Garamond, 'Times New Roman', serif;
  --font-text:    'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-label:   'Inter Tight', sans-serif;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;

  --leading-tight:  1.05;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --track-label: 0.18em;
  --track-tight: -0.02em;
  --track-base:  0;

  /* ============================================================
     SPACING
     ============================================================ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --s-10: 128px; --s-11: 192px;

  /* ============================================================
     RADII, BORDERS, ELEVATION
     ============================================================ */
  --radius-0: 0; --radius-1: 2px; --radius-2: 4px; --radius-pill: 999px;
  --border-hair:   0.5px solid var(--rule);
  --border-thin:   1px solid var(--rule);
  --border-strong: 1px solid var(--ink-700);
  --shadow-inset-rule: inset 0 -1px 0 var(--rule);
  --shadow-press:      inset 0 1px 0 rgba(0,0,0,0.08);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-quiet: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--track-tight); color: var(--fg); margin: 0; }
h2, .h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--track-tight); margin: 0; }
h3, .h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); line-height: var(--leading-snug); margin: 0; }
h4, .h4 { font-family: var(--font-text); font-weight: 500; font-size: var(--text-md); line-height: var(--leading-snug); margin: 0; }

p, .body { font-family: var(--font-text); font-size: var(--text-base); line-height: var(--leading-loose); color: var(--ink-700); max-width: 62ch; margin: 0 0 1em 0; }

.lede { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--ink-700); }

.label { font-family: var(--font-label); font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--ink-500); }

.meta { font-family: var(--font-text); font-size: var(--text-sm); color: var(--ink-500); }

code, .mono { font-family: var(--font-mono); font-size: 0.92em; color: var(--ink-700); }

a {
  color: var(--ink-900);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-300);
  transition: text-decoration-color var(--dur-base) var(--ease-quiet);
}
a:hover { text-decoration-color: var(--accent); }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-7) 0; }

::selection { background: var(--paper-100); color: var(--ink-900); }

/* ============================================================
   SITE COMPONENTS — header, footer, button, label, placeholder
   ============================================================ */

a { color: inherit; }

.site-header { position: sticky; top: 0; z-index: 10; background: rgba(248, 244, 234, 0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); }
.site-header__inner { max-width: 1200px; margin: 0 auto; padding: 24px 48px 16px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.site-header__logo { display: block; line-height: 0; text-decoration: none; }
.site-header__logo img { height: 64px; display: block; }
.site-header__row { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.site-nav { display: flex; gap: 28px; justify-self: center; }
.site-nav a { font-family: var(--font-text); font-size: 14px; font-weight: 500; color: var(--ink-900); text-transform: capitalize; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.site-nav a:hover, .site-nav a.is-active { border-bottom-color: var(--forest-500); text-decoration: none; }
.site-header__cta { justify-self: end; font-family: var(--font-label); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--forest-500); text-decoration: none; border-bottom: 1px solid var(--forest-500); padding-bottom: 2px; }

.site-footer { border-top: 1px solid var(--rule); margin-top: 96px; padding: 64px 48px 48px; background: var(--paper-00); }
.site-footer__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.site-footer__col p { color: var(--ink-500); font-size: 14px; line-height: 1.6; max-width: 320px; }
.site-footer__bottom { max-width: 1200px; margin: 64px auto 0; border-top: 1px solid var(--rule); padding-top: 24px; display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-500); }
.site-footer__est { font-family: var(--font-label); letter-spacing: 0.22em; text-transform: uppercase; }

.wordmark { font-family: var(--font-display); font-weight: 500; line-height: 1; color: var(--forest-500); letter-spacing: -0.01em; }
.wordmark em { color: var(--brass-500); font-style: italic; font-weight: 500; }

.label { font-family: var(--font-label); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-500); }
.label--brass { color: var(--brass-700); letter-spacing: 0.32em; }
.label--paper { color: var(--brass-300); letter-spacing: 0.32em; }
.label--sage  { color: var(--sage-500); }

.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-text); font-weight: 500; font-size: 14px; padding: 13px 24px; border-radius: 2px; border: 1px solid transparent; cursor: pointer; transition: all 200ms cubic-bezier(0.4,0,0.2,1); text-decoration: none; }
.btn--primary { background: var(--forest-500); color: var(--paper-00); }
.btn--primary:hover { background: var(--forest-700); text-decoration: none; }
.btn--secondary { background: transparent; color: var(--ink-900); border-color: var(--ink-900); }
.btn--secondary:hover { background: var(--ink-900); color: var(--paper-00); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--forest-500); border: 0; border-bottom: 1px solid var(--forest-500); border-radius: 0; padding: 4px 0; }
.btn--ghost:hover { color: var(--forest-700); border-bottom-color: var(--forest-700); }

.ph { aspect-ratio: 4/3; padding: 16px; display: flex; align-items: flex-end; color: var(--paper-00); font-family: var(--font-label); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; position: relative; overflow: hidden; }
.ph small { display: block; opacity: 0.6; font-size: 9px; margin-bottom: 4px; text-transform: uppercase; }
.ph--oak    { background: linear-gradient(135deg,#BAB29B 0%,#847C66 100%); }
.ph--walnut { background: linear-gradient(135deg,#4D4838 0%,#14161C 100%); }
.ph--marble { background: linear-gradient(135deg,#EFE9D8 0%,#9CA0AD 100%); color: var(--ink-700); }
.ph--cream  { background: linear-gradient(135deg,#F8F4EA 0%,#DED5BD 100%); color: var(--ink-700); }
.ph--green  { background: linear-gradient(135deg,#1F6249 0%,#0B3327 100%); }
.ph--3-4 { aspect-ratio: 3/4; }
.ph--img { background-size: cover; background-position: center; }
.ph--img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(20,22,28,0.55) 100%); }
.ph--img > span { position: relative; text-shadow: 0 1px 2px rgba(0,0,0,0.5); z-index: 1; }

.section { max-width: 1200px; margin: 0 auto; padding: 96px 48px; }
.section--rule-top { border-top: 1px solid var(--rule); }
.section--rule-bot { border-bottom: 1px solid var(--rule); }
.section--paper { background: var(--paper-00); }
.section--forest { background: var(--forest-500); color: var(--paper-00); }
.section--narrow { max-width: 900px; }

.tile { text-decoration: none; color: inherit; display: block; }
.tile:hover { text-decoration: none; }
.tile__meta { margin-top: 16px; }
.tile__title { font-family: var(--font-display); font-size: 24px; line-height: 1.2; margin-top: 6px; color: var(--ink-900); }
.tile__loc { font-size: 13px; color: var(--ink-500); margin-top: 4px; }

.chip { cursor: pointer; display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid var(--ink-700); border-radius: 999px; font-family: var(--font-label); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-900); background: transparent; user-select: none; }
.chip.is-active { background: var(--ink-900); color: var(--paper-00); }

.field { margin-bottom: 28px; }
.field__label { font-family: var(--font-text); font-size: 13px; font-weight: 500; color: var(--ink-900); margin-bottom: 6px; }
.field input, .field textarea { width: 100%; box-sizing: border-box; font-family: var(--font-text); font-size: 16px; padding: 10px 0; background: transparent; border: 0; border-bottom: 1px solid var(--rule); color: var(--ink-900); outline: none; }
.field textarea { resize: none; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--forest-500); }

@media (max-width: 800px) {
  .site-header__inner { padding: 16px 20px 12px; }
  .site-header__logo img { height: 48px; }
  .site-header__row { grid-template-columns: 1fr; gap: 12px; }
  .site-nav { gap: 20px; flex-wrap: wrap; justify-content: center; }
  .site-header__cta { justify-self: center; }
  .site-footer { padding: 48px 20px 32px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__bottom { flex-direction: column; gap: 8px; padding: 24px 0 0; margin-top: 32px; }
  .section { padding: 56px 20px; }
}