/* Mello Acres — site styles
   Palette sampled from the logo: cream ground, oxblood frame, dahlia coral,
   garden sage, warm browns. One stylesheet for the whole site. */

:root {
  --ground:#FBF7F1; --surface:#FFFFFF; --plate:#FFFDF9;
  --ink:#241A16; --ink-soft:#7B6A5D;
  --bloom:#B04B2C; --bloom-lit:#E2795A; --blush:#F7E7DE;
  --sage:#6E8272; --sage-wash:#EDF0EA;
  --hairline:#E4D8CC;
  --band:#3B211E; --band-ink:#F8F1E8; --band-soft:#BCA79B; --band-line:#5E3B34;
  --shadow:0 1px 2px rgba(36,26,22,.05), 0 10px 26px -14px rgba(36,26,22,.24);
  --measure:66ch;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#18110F; --surface:#211917; --plate:#211917;
    --ink:#F4ECE3; --ink-soft:#AE9C90;
    --bloom:#EF9573; --bloom-lit:#EF9573; --blush:#2C1D19;
    --sage:#9DB39F; --sage-wash:#1C2620;
    --hairline:#3A2A25;
    --band:#120B0A; --band-ink:#F8F1E8; --band-soft:#AE9A8E; --band-line:#4A2E29;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -14px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"] {
  --ground:#18110F; --surface:#211917; --plate:#211917;
  --ink:#F4ECE3; --ink-soft:#AE9C90;
  --bloom:#EF9573; --bloom-lit:#EF9573; --blush:#2C1D19;
  --sage:#9DB39F; --sage-wash:#1C2620;
  --hairline:#3A2A25;
  --band:#120B0A; --band-ink:#F8F1E8; --band-soft:#AE9A8E; --band-line:#4A2E29;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -14px rgba(0,0,0,.85);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Karla,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; }
h1,h2,h3,h4 { font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif; font-weight:600; }
a { color:var(--ink); text-decoration-color:var(--bloom-lit); text-underline-offset:3px;
    text-decoration-thickness:2px; }
a:hover { color:var(--bloom); }
a:focus-visible { outline:2px solid var(--bloom-lit); outline-offset:3px; border-radius:2px; }

.wrap { max-width:1080px; margin:0 auto; padding:0 26px; }
.wrap-narrow { max-width:760px; margin:0 auto; padding:0 26px; }
.eyebrow { font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bloom); }
.skip { position:absolute; left:-9999px; }
.skip:focus { position:static; display:inline-block; margin:8px; padding:8px 14px;
  background:var(--bloom); color:#fff; }

/* ---------- masthead ----------
   The wordmark is black script with no keyline, so the brand block stays light
   in both themes and swaps to the cream artwork when the page is dark. */
.masthead { background:var(--plate); }
:root[data-theme="dark"] .masthead,
:root:not([data-theme="light"]) .masthead { background:var(--surface); }
.masthead .wrap { display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding-top:22px; padding-bottom:20px; }
.brand { display:inline-block; line-height:0; flex:none; text-decoration:none; }
.brand img { width:clamp(212px,28vw,300px); display:block; }
.brand .on-dark { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .on-light { display:none; }
  :root:not([data-theme="light"]) .brand .on-dark { display:block; }
}
:root[data-theme="dark"] .brand .on-light { display:none; }
:root[data-theme="dark"] .brand .on-dark { display:block; }

.mast-right { margin-left:auto; display:flex; align-items:center; gap:18px;
  flex-wrap:wrap; justify-content:flex-end; }
.mast-tag { font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-soft); text-align:right; line-height:1.9; }
.callbtn { background:var(--bloom); color:#FFF; font-weight:700; font-size:13.5px;
  letter-spacing:.04em; padding:12px 18px; text-decoration:none; white-space:nowrap;
  border:2px solid var(--bloom); }
.callbtn:hover { background:var(--band); border-color:var(--band); color:var(--band-ink); }
.callbtn:focus-visible { outline:2px solid var(--band); outline-offset:2px; }

.navbar { background:var(--band); border-top:3px solid var(--bloom-lit); }
.navbar .wrap { display:flex; gap:26px; flex-wrap:wrap; padding-top:0; padding-bottom:0;
  align-items:stretch; }
.navbar a { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--band-soft); text-decoration:none; padding:15px 0;
  border-bottom:3px solid transparent; }
.navbar a:hover { color:var(--band-ink); border-bottom-color:var(--band-line); }
.navbar a[aria-current="page"] { color:var(--bloom-lit); border-bottom-color:var(--bloom-lit); }
.navbar a:focus-visible { outline:2px solid var(--bloom-lit); outline-offset:-2px; }

/* ---------- hero ---------- */
.hero { background:var(--band); color:var(--band-ink); }
.hero .wrap { display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center;
  padding-top:60px; padding-bottom:60px; }
.hero .eyebrow { color:var(--bloom-lit); }
.hero h1 { font-size:clamp(38px,6.4vw,62px); font-weight:600; letter-spacing:-.01em;
  line-height:1.06; margin:16px 0 0; max-width:15ch; text-wrap:balance; }
.hero p { font-size:18px; color:var(--band-soft); margin:18px 0 0; max-width:46ch; line-height:1.6; }
.hero .actions { display:flex; gap:11px; margin-top:28px; flex-wrap:wrap; }
.hero-art { border:10px solid var(--plate); box-shadow:var(--shadow); display:block; width:100%; }
@media (max-width:820px) {
  .hero .wrap { grid-template-columns:1fr; gap:32px; padding-top:44px; padding-bottom:46px; }
  .hero-art { order:-1; }
}

.btn { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:13px 21px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; }
.btn-solid { background:var(--bloom-lit); color:#3B211E; }
.btn-solid:hover { background:#F4A385; color:#3B211E; }
.btn-ghost { border-color:var(--band-line); color:var(--band-ink); }
.btn-ghost:hover { border-color:var(--bloom-lit); color:var(--bloom-lit); }
.btn-ink { background:var(--bloom); color:#FFF; }
.btn-ink:hover { background:var(--band); color:var(--band-ink); }
.btn-outline { border-color:var(--hairline); color:var(--ink); }
.btn-outline:hover { border-color:var(--bloom); color:var(--bloom); }

/* ---------- page header (interior pages) ---------- */
.pagehead { border-bottom:1px solid var(--hairline); }
.pagehead .wrap { padding-top:48px; padding-bottom:36px; }
.pagehead h1 { font-size:clamp(36px,5.8vw,54px); font-weight:600; letter-spacing:-.008em;
  line-height:1.06; margin:12px 0 0; text-wrap:balance; }
.pagehead .tag { font-size:19px; color:var(--ink-soft); margin:14px 0 0; max-width:var(--measure); }

/* ---------- bands and sections ---------- */
.band { background:var(--band); color:var(--band-ink); }
.band a { color:var(--band-ink); }
.band .eyebrow { color:var(--bloom-lit); }
.band h2 { color:var(--band-ink); }
.blush { background:var(--blush); }
section { padding:58px 0; }
section.tight { padding:40px 0; }
.sechead { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.sechead h2 { font-size:34px; font-weight:600; letter-spacing:-.01em; margin:0; }
.sechead .more { margin-left:auto; font-size:11.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bloom); text-decoration:none; }
.sechead .more:hover { text-decoration:underline; }

.prose p { max-width:var(--measure); }
.prose h2 { font-size:30px; margin:38px 0 0; padding-bottom:8px;
  border-bottom:2px solid var(--bloom-lit); display:inline-block; }
.prose h2 + p { margin-top:14px; }
.prose h3 { font-size:23px; margin:28px 0 6px; }
.prose ul, .prose ol { max-width:var(--measure); padding-left:22px; }
.prose li { margin:8px 0; }
.prose li::marker { color:var(--bloom); }
.lede { font-size:20px; line-height:1.6; color:var(--ink-soft); max-width:var(--measure); }

/* ---------- the three pillars ---------- */
.pillars { display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:1px;
  background:var(--hairline); border:1px solid var(--hairline); }
.pillars > a { background:var(--surface); text-decoration:none; display:block; }
.pillars > a:hover { background:var(--blush); }
.pillars img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pillars .body { padding:22px 24px 26px; }
.pillars h3 { font-size:27px; margin:0; }
.pillars p { margin:8px 0 0; color:var(--ink-soft); font-size:16px; line-height:1.55; }
.pillars .more { display:inline-block; margin-top:14px; font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--bloom); }

/* ---------- cards ---------- */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.card { background:var(--surface); border:1px solid var(--hairline); padding:24px; }
.card h3 { font-size:24px; margin:0 0 8px; }
.card p { margin:0; color:var(--ink-soft); font-size:16px; }
.card p + p { margin-top:10px; }

/* ---------- steps ---------- */
.steps { counter-reset:step; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px; margin-top:8px; }
.step { position:relative; padding-top:14px; border-top:2px solid var(--bloom-lit); }
.step::before { counter-increment:step; content:counter(step,decimal-leading-zero);
  font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--bloom); }
.step h3 { font-size:23px; margin:6px 0 6px; }
.step p { margin:0; color:var(--ink-soft); font-size:16px; }

/* ---------- gallery ---------- */
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; }
.gallery img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.strip { width:100%; height:clamp(150px,26vw,280px); object-fit:cover; display:block;
  background:var(--band); }

/* ---------- availability list ---------- */
.avail { width:100%; border-collapse:collapse; margin-top:10px; font-size:16px; }
.avail caption { text-align:left; font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); padding-bottom:10px; }
.avail th, .avail td { text-align:left; padding:11px 14px 11px 0; border-bottom:1px solid var(--hairline);
  vertical-align:top; }
.avail th { font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); }
.avail td.price { white-space:nowrap; font-variant-numeric:tabular-nums; }
.tagp { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 9px; border:1px solid var(--hairline); color:var(--ink-soft); }
.tagp.on { background:var(--sage-wash); border-color:var(--sage); color:var(--sage); }
.tagp.off { background:var(--blush); border-color:var(--bloom-lit); color:var(--bloom); }

/* ---------- callout ---------- */
.note { background:var(--blush); border-left:4px solid var(--bloom-lit); padding:18px 22px;
  margin:26px 0; max-width:var(--measure); }
.note p { margin:0; }
.note p + p { margin-top:10px; }

/* ---------- downloads ---------- */
.dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.dl a { background:var(--surface); border:1px solid var(--hairline); padding:22px 24px;
  text-decoration:none; display:block; }
.dl a:hover { border-color:var(--bloom); background:var(--blush); }
.dl h3 { font-size:23px; margin:0; }
.dl p { margin:7px 0 0; color:var(--ink-soft); font-size:15.5px; }
.dl .kind { display:block; margin-top:12px; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bloom); }

/* ---------- contact ---------- */
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:32px; }
.contact-grid h3 { font-size:22px; margin:0 0 8px; }
.contact-grid p { margin:0; color:var(--ink-soft); }
.contact-grid a { font-weight:700; }
.bigcontact { font-size:21px; font-weight:700; display:block; margin-top:4px; }

/* ---------- signup band ---------- */
.signup .wrap { padding-top:46px; padding-bottom:46px; }
.signup h2 { font-size:32px; margin:10px 0 0; }
.signup p { color:var(--band-soft); max-width:52ch; margin:12px 0 0; }
.signup form { display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.signup input[type=email] { flex:1 1 280px; min-width:0; background:#FFFDF9; color:#241A16;
  border:1px solid var(--band-line); padding:13px 15px; font-family:inherit; font-size:15px; }
.signup input[type=email]:focus { outline:2px solid var(--bloom-lit); outline-offset:1px; }

/* ---------- footer ---------- */
.foot { background:var(--band); color:var(--band-soft); border-top:1px solid var(--band-line);
  font-size:15px; }
.foot .wrap { padding-top:42px; padding-bottom:36px; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:30px; }
.foot h4 { font-family:Karla,sans-serif; font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--band-ink); margin:0 0 12px; }
.foot a { color:var(--band-soft); text-decoration:none; display:block; padding:3px 0; }
.foot a:hover { color:var(--bloom-lit); }
.foot .brandfoot img { width:210px; display:block; margin-bottom:14px; }
.foot .legal { border-top:1px solid var(--band-line); }
.foot .legal .wrap { display:block; padding-top:18px; padding-bottom:26px; font-size:13px;
  color:var(--band-soft); }

@media (max-width:620px) {
  body { font-size:16.5px; }
  .wrap, .wrap-narrow { padding:0 20px; }
  section { padding:44px 0; }
  .masthead .wrap { justify-content:center; text-align:center; }
  .mast-right { margin-left:0; width:100%; justify-content:center; }
  .mast-tag { text-align:center; }
  .navbar .wrap { gap:16px; }
  .navbar a { padding:12px 0; font-size:11px; letter-spacing:.1em; }
}

@media print {
  .navbar, .signup, .callbtn, .foot a { display:none; }
  body { background:#fff; color:#000; }
}

/* ---------- forms ----------
   The contact form and the newsletter capture. Both only appear once their
   endpoint is set in tools/build.py; until then the pages show call and email
   buttons instead, so nothing is ever half-wired. */
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; }
.hp { position:absolute; left:-9999px; }

.form { margin-top:8px; max-width:760px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
@media (max-width:620px) { .form-row { grid-template-columns:1fr; } }
.field { margin:0 0 16px; }
.field label { display:block; font-size:11.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
.field .opt { font-weight:500; letter-spacing:.04em; text-transform:none; opacity:.75; }
.field input, .field select, .field textarea {
  width:100%; background:var(--surface); color:var(--ink);
  border:1px solid var(--hairline); padding:12px 14px;
  font-family:inherit; font-size:16px; line-height:1.4; border-radius:0; }
.field textarea { resize:vertical; min-height:110px; }
.field input::placeholder, .field textarea::placeholder { color:var(--ink-soft); opacity:.65; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:2px solid var(--bloom-lit); outline-offset:1px; border-color:var(--bloom-lit); }
.field select { appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--bloom) 50%),
                   linear-gradient(135deg,var(--bloom) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:40px; }
.form-actions { margin:6px 0 0; }
.form-actions .btn { border:0; font-family:inherit; }
.form-note { margin:14px 0 0; font-size:15px; color:var(--ink-soft); }

.signup-form { display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; max-width:560px; }
.signup-form input[type=email] { flex:1 1 260px; min-width:0; background:#FFFDF9;
  color:#241A16; border:1px solid var(--band-line); padding:13px 15px;
  font-family:inherit; font-size:16px; border-radius:0; }
.signup-form input[type=email]::placeholder { color:#8A7A6E; }
.signup-form input[type=email]:focus { outline:2px solid var(--bloom-lit); outline-offset:1px; }
.signup-form button { border:0; font-family:inherit; cursor:pointer; }