/* Treehouse Farms website styles. Plain CSS with no build step: edit and reload.
   Colors come from the logo (black and white) on a paper background, with a forest green for
   buttons and links and a wood tan for the logo's stepped double bars. */

/* DM Serif Display (headings) and Outfit (text), self-hosted under the SIL Open Font License (see
   the OFL files in assets/fonts). The same files and subsets as treehousepharmacy.com. */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-serif-display-v17-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-serif-display-v17-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Outfit is one variable font file for every weight. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/outfit-v15-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/outfit-v15-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --ink: #161513;
  --paper: #f3eee5;
  --card: #fbf9f4;
  --line: #dcd3c3;
  --muted: #59544b;        /* 6.5:1 on paper */
  --green: #2c4a2f;        /* 8.5:1 with paper text */
  --green-hover: #3b5f3f;
  --tan: #a27e50;          /* decoration only (3.2:1), never text */
  --on-ink: #f3eee5;
  --on-ink-muted: #c9c1b2; /* 10:1 on ink */
  --display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --text: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--text); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--green); text-underline-offset: 3px; }
a:hover { color: var(--green-hover); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
h1, h2, h3 { margin: 0 0 .5em; font-family: var(--display); font-weight: 400; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); }
h3, .h3 { font-size: 1.45rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }
.muted { color: var(--muted); }
.nowrap, a[href^="tel:"] { white-space: nowrap; }
.lead { max-width: 36em; font-size: 1.2rem; color: var(--muted); }
.eyebrow { margin: 0 0 14px; font: 600 .78rem/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--green); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 60; padding: 8px 14px; background: var(--card); }

/* The logo's stepped double bars, above section headings. */
.bars { display: block; width: 76px; height: 9px; margin: 0 0 18px;
  background: linear-gradient(var(--tan), var(--tan)) 12px 0 / 52px 3px no-repeat, linear-gradient(var(--tan), var(--tan)) 0 6px / 76px 3px no-repeat; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.actions + p { margin-top: 24px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px;
  border: 2px solid var(--green); border-radius: var(--radius); background: var(--green); color: var(--on-ink);
  font: 600 .95rem/1.2 var(--text); letter-spacing: .03em; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.btn:hover { border-color: var(--green-hover); background: var(--green-hover); color: var(--on-ink); }
.btn-outline { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }

/* Header */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand img { width: auto; height: 50px; }
.nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 24px; }
.nav a { padding: 10px 0; border-bottom: 2px solid transparent; color: var(--ink); font-weight: 500; text-decoration: none; }
.nav a:hover { color: var(--green); }
.nav a[aria-current="page"] { border-bottom-color: var(--tan); }
@media (max-width: 480px) {
  .brand img { height: 40px; }
  .nav { gap: 0 14px; }
  .nav a { font-size: .92rem; }
}

/* Home hero */
.hero { padding: clamp(48px, 8vw, 96px) 0; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero-photo { width: 100%; border-radius: var(--radius); }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 32px; }
  .hero-photo { order: -1; }
}

/* Sections and cards */
.page-head { padding: clamp(44px, 7vw, 80px) 0 clamp(28px, 4vw, 40px); }
.section { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--line); }
.section-tight { padding: 0 0 clamp(56px, 8vw, 88px); }
.section-head { max-width: 40em; margin-bottom: 36px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.card > :last-child { margin-bottom: 0; }
.card .btn { margin-top: 8px; }
.card-meta { margin: -6px 0 12px; color: var(--muted); font-size: .95rem; }
.btn + .card-meta { margin: 14px 0 0; }
.card-link { font-weight: 600; text-decoration: none; }
.card-link:hover { text-decoration: underline; }
.empty { padding: 48px 28px; text-align: center; }
.empty p { max-width: 32em; margin-left: auto; margin-right: auto; }

/* Dark band, with faint plank lines */
.on-ink { background-color: var(--ink); color: var(--on-ink); }
.on-ink .eyebrow, .on-ink .muted, .on-ink .lead { color: var(--on-ink-muted); }
.on-ink a:not(.btn) { color: var(--on-ink); }
.on-ink :focus-visible { outline-color: var(--on-ink); }
.on-ink .btn { border-color: var(--on-ink); background: var(--on-ink); color: var(--ink); }
.on-ink .btn:hover { border-color: #fff; background: #fff; color: var(--ink); }
.on-ink .btn-outline { border-color: var(--on-ink-muted); background: transparent; color: var(--on-ink); }
.on-ink .btn-outline:hover { border-color: var(--on-ink); background: var(--on-ink); color: var(--ink); }
.band { padding: clamp(56px, 8vw, 88px) 0; background-image: repeating-linear-gradient(180deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 22px); }
.band .wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px 40px; align-items: center; }
.band .actions { margin-top: 0; }
@media (max-width: 860px) { .band .wrap { grid-template-columns: 1fr; } }

/* Home: the story beside Frank, then photo cards and the farm in numbers */
.about { display: grid; grid-template-columns: 1.3fr .7fr; gap: 24px 48px; align-items: center; margin-bottom: 48px; }
.about figure { justify-self: end; width: 100%; max-width: 340px; margin: 0; }
.about img { border-radius: var(--radius); }
.about figcaption { margin-top: 10px; color: var(--muted); font-size: .92rem; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } .about figure { justify-self: start; } }
.photo-card { overflow: hidden; }
.photo-card img { width: calc(100% + 56px); max-width: none; margin: -28px -28px 22px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; margin: 48px 0 0; padding-top: 32px; border-top: 1px solid var(--line); }
.stats div { display: flex; flex-direction: column-reverse; }
.stats dt { color: var(--muted); font-size: .95rem; }
.stats dd { margin: 0; font: clamp(2.2rem, 4vw, 3rem)/1.1 var(--display); }

/* Wholesale accounts (server/wholesale.mjs fills these pages in) */
.notice { margin: 0 0 24px; padding: 14px 18px; border-left: 4px solid var(--green); border-radius: 0 var(--radius) var(--radius) 0; background: var(--card); }
.notice-error { border-left-color: #9c2f22; }
.note { color: var(--muted); font-size: .95rem; }
.account-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0 0 32px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); font-size: .95rem; }
.account-bar span { overflow-wrap: anywhere; }
.account-bar form { margin: 0 0 0 auto; }
.link-button { padding: 0; border: 0; background: none; color: var(--green); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.form { display: grid; gap: 18px; max-width: 32rem; margin-top: 24px; }
.form label { display: grid; gap: 6px; font-weight: 600; }
.form .hint { color: var(--muted); font-size: .9rem; font-weight: 400; }
.form input { min-height: 48px; padding: 10px 14px; border: 1px solid #8f846f; border-radius: var(--radius); background: #fff; color: var(--ink); font: 400 1rem/1.4 var(--text); }
.edit { margin-top: 28px; }
.edit summary { color: var(--green); font-weight: 600; cursor: pointer; }
.buyers { display: grid; gap: 14px; margin: 0 0 40px; padding: 0; list-style: none; }
.buyers p { margin-bottom: 6px; overflow-wrap: anywhere; }
.decide { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.btn-small { min-height: 40px; padding: 8px 16px; font-size: .9rem; }

/* Order terms */
.terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin: 0; }
.terms dt { margin-bottom: 6px; color: var(--muted); font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.terms dd { margin: 0; font: 1.3rem/1.35 var(--display); }

/* Numbered steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; margin: 0 0 32px; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px;
  border-radius: 50%; background: var(--ink); color: var(--on-ink); font: 1.35rem/1 var(--display); }

/* Strain cards (scripts/strains.mjs) */
.strains { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.strain img { margin: -28px -28px 22px; width: calc(100% + 56px); max-width: none; border-radius: var(--radius) var(--radius) 0 0; }
.strain .eyebrow { margin-bottom: 8px; }
.strain dl { display: grid; gap: 10px; margin: 16px 0; }
.strain dt { color: var(--muted); font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.strain dd { margin: 0; }

/* Content still to come from the owner. README: replace every one before launch. */
.placeholder { padding: 16px 20px; border: 2px dashed var(--tan); border-radius: var(--radius); background: rgb(162 126 80 / .08); color: var(--muted); }
.placeholder::before { content: 'Placeholder'; display: block; margin-bottom: 4px; color: #7a5c35; font: 600 .72rem/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; }
.on-ink .placeholder { background: rgb(255 255 255 / .05); color: var(--on-ink-muted); }
.on-ink .placeholder::before { color: #d9b98a; }

/* Footer */
.site-footer { padding: 56px 0 32px; }
.site-footer .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.site-footer h2 { margin-bottom: 14px; color: var(--on-ink-muted); font: 600 .78rem/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase; }
.site-footer ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-logo { width: 200px; margin-bottom: 18px; }
.fine { grid-column: 1 / -1; margin: 0; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .12); color: var(--on-ink-muted); font-size: .85rem; }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr; } }

/* Age screen. The check in each page's <head> hides it before the page draws once someone has
   said yes in this browser session; assets/site.js handles the buttons. */
.age-gate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px 16px; overflow-y: auto; background: var(--paper); }
.age-gate:focus { outline: none; }
.age-ok .age-gate { display: none; }
html:not(.age-ok) body { overflow: hidden; }
.age-panel { max-width: 30rem; text-align: center; }
.age-panel img { width: min(320px, 80vw); margin: 0 auto 28px; }
.age-panel h2 { font-size: clamp(1.8rem, 6vw, 2.3rem); }
.age-panel .actions { justify-content: center; }
.age-no .actions { display: none; }
.age-sorry { margin-top: 24px; font-weight: 600; }
.age-fine { margin: 24px 0 0; color: var(--muted); font-size: .85rem; }