/* Garden Empire — nathanielkoloc.com home
   Built from "Garden Empire Home.dc.html" (Claude Design handoff). Desktop
   values match the 1280px design; breakpoints below adapt it for smaller screens. */

:root {
  --green-deep: #14261e;   /* dark ground */
  --green: #1f3a2e;        /* ink green on cream */
  --cream: #efe7d6;        /* paper ground, tile frame */
  --cream-soft: #e3d8bf;   /* secondary text on dark */
  --cream-muted: #d9ceb4;  /* nav links */
  --paper: #f6f0e3;        /* searches panel */
  --ink: #1b1c1a;
  --ink-soft: #3a3833;
  --brass: #b08d57;
  --brass-hi: #e7c27a;     /* hover on dark */
  --brass-line: rgba(176, 141, 87, .5);
  --umber: #5b3a24;        /* hover on cream */
  --rule: #b9ab8e;         /* hairline on cream */

  --serif: 'Young Serif', Georgia, serif;
  --sans: 'Schibsted Grotesk', system-ui, sans-serif;

  --gutter: 56px;
  --max: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--green-deep);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
figure { margin: 0; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--umber); }
:focus { outline: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
::selection { background: rgba(176, 141, 87, .3); }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.link-underline {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding: 2px 0;
  white-space: nowrap;
}
.link-underline:hover { color: var(--brass-hi); }

.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* — nav — */
.nav { border-bottom: 1px solid var(--brass-line); }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-top: 24px; padding-bottom: 24px;
}
.nav__brand {
  font-family: var(--serif); font-size: 22px; white-space: nowrap;
  color: var(--cream); text-decoration: none;
}
.nav__brand:hover { color: var(--cream); }
.nav__links { display: flex; align-items: center; gap: 40px; font-size: 14px; }
.nav__links a:not(.link-underline) { color: var(--cream-muted); text-decoration: none; }
.nav__links a:not(.link-underline):hover { color: var(--brass-hi); }

/* — hero — */
.hero__inner {
  display: flex; flex-direction: column; gap: 48px;
  padding-top: 72px; padding-bottom: 64px;
}
.hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 56px; }
.hero__copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; align-self: flex-start; }
.hero__title {
  font-family: var(--serif); font-weight: 400;
  font-size: 54px; line-height: 1.08; letter-spacing: -0.012em;
  max-width: 880px; text-wrap: balance;
}
.hero__sub { font-size: 31px; line-height: 1.36; color: var(--cream-soft); max-width: 720px; text-wrap: pretty; }
.hero__cta { font-size: 18px; padding: 4px 0; }

.portrait { flex: none; display: flex; flex-direction: column; gap: 10px; }
.portrait__frame { width: 256px; height: 320px; padding: 8px; border: 1px solid var(--brass); }
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; }

.essay {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding-top: 24px; border-top: 1px solid var(--brass-line);
  color: var(--cream); text-decoration: none;
}
.essay:hover { color: var(--brass-hi); }
.essay__meta { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.essay__kicker { font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.essay__title { font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.2; }
.essay__read { font-size: 17px; white-space: nowrap; }

/* — capabilities — */
.capabilities { background: var(--cream); color: var(--ink); }
.capabilities__inner {
  display: flex; flex-direction: column; gap: 56px;
  padding-top: 96px; padding-bottom: 104px;
}
.capabilities__title { padding-bottom: 24px; border-bottom: 1px solid var(--ink); }

.cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cap-col:nth-child(1) { padding-right: 36px; }
.cap-col:nth-child(2) { display: flex; flex-direction: column; gap: 48px; padding: 0 36px; border-left: 1px solid var(--rule); }
.cap-col:nth-child(3) { padding-left: 36px; border-left: 1px solid var(--rule); }
.cap { display: flex; flex-direction: column; gap: 18px; }
.cap--stacked { padding-top: 40px; border-top: 1px solid var(--rule); }
.cap__name { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; color: var(--green); }
.cap__proof {
  font-size: 21px; line-height: 1.3; letter-spacing: -0.005em;
  text-wrap: balance;
}
.cap__body { font-size: 17px; line-height: 1.6; text-wrap: pretty; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tags li {
  font-size: 14px; line-height: 1.55; color: var(--green);
  border: 1px solid var(--rule); border-radius: 999px; padding: 5px 11px;
}

.searches-toggle {
  align-self: flex-start; margin-top: 6px;
  font-family: var(--sans); font-size: 17px; font-weight: 500; line-height: 1.55;
  background: transparent; border: none; border-bottom: 1.5px solid var(--green);
  color: var(--green); padding: 4px 0; cursor: pointer;
}
.searches-toggle:hover { color: var(--umber); border-bottom-color: var(--brass); }

/* Searches pop-up (native <dialog>) */
.searches {
  width: min(1100px, calc(100vw - 48px)); max-height: min(86vh, 900px);
  margin: auto; overflow: auto;
  border: 1px solid var(--green); background: var(--paper); color: var(--ink);
  padding: 40px 40px 44px;
  box-shadow: 0 30px 80px -20px rgba(20, 38, 30, .55);
}
.searches[open] { display: flex; flex-direction: column; gap: 32px; }
.searches::backdrop { background: rgba(20, 38, 30, .6); backdrop-filter: blur(2px); }
body.has-dialog { overflow: hidden; }
.searches__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding-bottom: 18px; border-bottom: 1px solid var(--rule);
}
.searches__title { font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.12; color: var(--green); }
.searches-close {
  flex: none;
  font-family: var(--sans); font-size: 15px; line-height: 1.2;
  background: transparent; border: 1px solid var(--green); color: var(--green);
  padding: 8px 14px; cursor: pointer;
}
.searches-close:hover { background: var(--green); color: var(--cream); }
.searches__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; row-gap: 28px; }
.search-group { display: flex; flex-direction: column; gap: 8px; }
.search-group__name { font-size: 16px; font-weight: 600; line-height: 1.3; margin: 0; }
.search-group__roles { display: flex; flex-direction: column; gap: 2px; }
.search-group__roles li { font-size: 15px; line-height: 1.55; font-style: italic; color: var(--ink-soft); }

.referrals {
  border: 1px solid var(--green); padding: 32px 36px;
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr); gap: 40px; align-items: center;
}
.referrals__intro { display: flex; flex-direction: column; gap: 12px; }
.referrals__title { font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.05; color: var(--green); }
.referrals__intro p { font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.referrals__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid var(--rule); }
.referrals__list li {
  padding: 6px 18px; border-right: 1px solid var(--rule);
  font-family: var(--serif); font-size: 20px; line-height: 1.2; color: var(--green);
}
.referrals__list li:last-child { border-right: none; }

/* — work sectors — */
.sectors__inner { padding-top: 96px; padding-bottom: 104px; }
.sectors__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sectors__intro {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 48px;
  padding: 0 0 56px;
}
.sectors__intro .section-title { flex: none; }
.sectors__lede {
  flex: 1; min-width: 0;
  font-size: 22px; line-height: 1.45; font-weight: 500; color: var(--cream-soft);
  padding-left: 48px; border-left: 1px solid var(--brass-line);
  max-width: 760px; text-wrap: pretty;
}
/* Alma mater mark — UVM shield, reversed to cream for the dark ground */
.alma { flex: none; margin-left: auto; display: flex; align-items: center; gap: 14px; }
.alma img { display: block; height: 80px; width: auto; }
/* Each tile reads like a stamp: cream mat, then a fine ink keyline around the art */
.tile {
  aspect-ratio: 1 / 1; position: relative; overflow: hidden;
  background: var(--cream); box-shadow: 0 0 0 10px var(--cream);
  padding: 7px;
}
.tile img { width: 100%; height: 100%; object-fit: cover; border: 1px solid rgba(20, 38, 30, .75); }
.tile figcaption {
  position: absolute; left: 0; bottom: 0; max-width: 80%;
  background: var(--cream); color: var(--ink);
  padding: 12px 18px 2px 0;
  font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: 0.01em;
  text-wrap: balance;
}

/* — responsive — */
@media (max-width: 1100px) {
  :root { --gutter: 40px; }
  .hero__title { font-size: 46px; }
  .hero__sub { font-size: 27px; }
  .portrait__frame { width: 216px; height: 270px; }
}

@media (max-width: 960px) {
  .cap-grid { grid-template-columns: minmax(0, 1fr); }
  .cap-col:nth-child(n) { padding: 40px 0 0; border-left: none; border-top: 1px solid var(--rule); margin-top: 40px; }
  .cap-col:first-child { padding-top: 0; border-top: none; margin-top: 0; }
  .searches__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .referrals { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .referrals__list { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: none; row-gap: 12px; }
  .referrals__list li { padding: 6px 18px 6px 0; border-right: none; }
  .sectors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sectors__intro { flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 40px; }
  .sectors__lede { padding: 22px 0 0; border-left: none; border-top: 1px solid var(--brass-line); }
  .alma { margin-left: 0; }
  .alma img { height: 64px; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .nav__inner { padding-top: 18px; padding-bottom: 18px; }
  .nav__brand { font-size: 19px; }
  .nav__links a:not(.link-underline) { display: none; }
  .hero__inner { padding-top: 48px; padding-bottom: 48px; gap: 40px; }
  .hero__row { flex-direction: column-reverse; align-items: flex-start; gap: 36px; }
  .hero__copy { gap: 22px; }
  .hero__title { font-size: 36px; line-height: 1.1; }
  .hero__sub { font-size: 23px; }
  .portrait__frame { width: 176px; height: 220px; padding: 6px; }
  .essay { flex-direction: column; gap: 12px; }
  .essay__meta { flex-direction: column; gap: 8px; }
  .essay__title { font-size: 22px; }
  .section-title { font-size: 40px; }
  .capabilities__inner { padding-top: 64px; padding-bottom: 72px; gap: 40px; }
  .cap__name { font-size: 34px; }
  .cap__proof { font-size: 19px; }
  .cap__body { font-size: 16px; }
  .searches { width: calc(100vw - 24px); max-height: 90vh; padding: 28px 22px 32px; }
  .searches[open] { gap: 24px; }
  .searches__title { font-size: 28px; }
  .searches__grid { grid-template-columns: minmax(0, 1fr); }
  .referrals { padding: 28px 22px; }
  .referrals__title { font-size: 30px; }
  .referrals__list { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .referrals__list li { font-size: 19px; }
  .sectors__inner { padding-top: 64px; padding-bottom: 72px; }
  .sectors__intro { padding-bottom: 28px; gap: 20px; }
  .sectors__lede { font-size: 19px; }
  .tile figcaption { font-size: 13px; padding: 9px 12px 1px 0; max-width: 82%; }
}