/* Strategic Inventory Partners: public site. Plain responsive CSS, phone first.
   Look: Kentucky whiskey. Charred-oak walnut, deep oxblood reds, saddle leather with
   stitched edges, and brass on parchment. */

:root {
  --ink: #2a1f1a;        /* body text: dark tobacco */
  --muted: #6b5a4e;
  --paper: #f7f0e4;      /* parchment */
  --card: #fffaf1;
  --tan: #efe2cc;        /* light leather: alternate sections */
  --line: #dfcfb3;
  --walnut: #1f1410;     /* header and footer: charred oak */
  --oxblood: #4a1515;    /* hero and call to action */
  --oxblood-2: #6b1e1e;
  --leather: #7a4a2a;    /* saddle leather: rules and stitching */
  --brass: #c9a24c;      /* accents on dark backgrounds */
  --amber-ink: #8a5a1c;  /* bourbon amber text on light backgrounds (4.5:1 or better) */
  --red-ink: #8b2323;    /* links on light backgrounds */
  --cream: #efe4d2;      /* text on dark backgrounds */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 8px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--sans); }
img { max-width: 100%; height: auto; }
a { color: var(--red-ink); }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--amber-ink); outline-offset: 2px; }
.site-header :focus-visible, .hero :focus-visible, .cta :focus-visible, .site-footer :focus-visible { outline-color: var(--brass); }

h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 6vw, 3.2rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 600px) { .wrap { padding: 0 24px; } }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 10; background: #fff; padding: 8px 12px; }

.eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--amber-ink); margin-bottom: 10px; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

/* Header */
.site-header { background: var(--walnut); color: var(--cream); border-bottom: 2px solid var(--leather); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--cream); text-decoration: none; }
.brand:hover { color: #fff8ec; }
.brand-mark { font-family: var(--serif); font-size: 2.1rem; font-weight: 700; line-height: 1; }
.brand-mark .i, .brand-name .i { color: var(--brass); }
.brand-name { border-left: 1px solid var(--brass); padding-left: 12px; font-family: var(--serif); font-size: .7rem; letter-spacing: .2em; line-height: 1.35; text-transform: uppercase; }
.site-nav { display: flex; flex-wrap: wrap; gap: 2px 20px; font-size: .95rem; }
.site-nav a { color: var(--cream); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a.on { color: #fff8ec; border-bottom-color: var(--brass); }
.site-nav .nav-login { color: var(--brass); }

/* Hero: deep red, lit from the top left like a glass held to the light */
.hero { background: radial-gradient(120% 140% at 0% 0%, var(--oxblood-2) 0%, var(--oxblood) 55%, #2e0d0d 100%); color: var(--cream); padding: 56px 0 64px; border-bottom: 1px solid rgba(201, 162, 76, .35); }
.hero-sm { padding: 40px 0 44px; }
.hero h1 { color: #fff8ec; max-width: 22ch; }
.hero .eyebrow { color: var(--brass); }
.hero .lead { font-size: 1.15rem; max-width: 52ch; margin-bottom: 0; }

/* Sections */
.section { padding: 48px 0; }
@media (min-width: 800px) { .section { padding: 64px 0; } }
.section-alt { background: var(--tan); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 62ch; margin-bottom: 28px; }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

/* Cards: a leather patch with a stitched edge */
.card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.card::after { content: ""; position: absolute; inset: 7px; border: 1px dashed rgba(122, 74, 42, .35); border-radius: 5px; pointer-events: none; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--red-ink); }
.card .more { position: relative; z-index: 1; margin-top: auto; font-weight: 600; text-decoration: none; }
.card-side { border-top: 4px solid var(--oxblood-2); }

.steps { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); counter-reset: step; }
.step { border-top: 2px solid var(--leather); padding-top: 18px; }
.step h2, .step h3 { font-size: 1.35rem; }
.step h2::before, .step h3::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; margin-bottom: 6px; font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .2em; color: var(--amber-ink); }

/* Call to action */
.cta { background: radial-gradient(120% 160% at 50% 0%, var(--oxblood-2) 0%, var(--oxblood) 70%); color: var(--cream); padding: 52px 0; text-align: center; }
.cta h2 { color: #fff8ec; }
.btn { display: inline-block; background: var(--brass); color: var(--walnut); border: 0; border-radius: 6px; padding: 12px 26px; font: 600 1rem var(--sans); text-decoration: none; cursor: pointer; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 2px 0 rgba(0, 0, 0, .25); }
.btn:hover { background: #d8b462; color: var(--walnut); }

/* About */
.team { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.person { display: flex; gap: 18px; align-items: flex-start; }
.avatar { flex: 0 0 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--oxblood); color: var(--brass); font: 700 1.6rem var(--serif); box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--leather); }
.role { color: var(--amber-ink); font-weight: 600; margin-top: -.3em; }

/* Contact */
.contact-grid { display: grid; gap: 40px; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 2fr 1fr; } }
.row-2 { display: grid; gap: 0 16px; }
@media (min-width: 600px) { .row-2 { grid-template-columns: 1fr 1fr; } }
.field { margin-bottom: 18px; }
label { display: block; margin-bottom: 6px; font-size: .95rem; font-weight: 600; }
.optional { font-weight: 400; color: var(--muted); }
input, select, textarea { width: 100%; padding: 11px 12px; border: 1px solid #c8b394; border-radius: 6px; background: #fffdf8; color: var(--ink); font: inherit; }
textarea { min-height: 170px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.errors { margin-bottom: 20px; padding: 12px 16px 2px; border: 1px solid #d9a9a0; border-radius: 6px; background: #fbe9e4; color: #7a1f1f; }
.contact-aside h2 { font-size: 1.35rem; }

/* Footer */
.site-footer { background: var(--walnut); color: var(--cream); padding: 44px 0 24px; font-size: .95rem; border-top: 2px solid var(--leather); }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { color: var(--brass); }
.site-footer .brand { margin-bottom: 12px; }
.footer-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.footer-label { margin-bottom: 8px; font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.site-footer .footer-label a { color: var(--brass); text-decoration: none; }
.footer-tag { color: var(--brass); font-size: .85rem; letter-spacing: .08em; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 6px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 32px; padding-top: 16px; border-top: 1px solid rgba(239, 228, 210, .15); font-size: .85rem; }

/* Staging only: draft copy and missing details stand out for review, in a yellow
   that is not part of the palette so it is never mistaken for the design. */
.staging-bar { padding: 6px 16px; background: #fff1a8; color: #4a3a00; font-size: .85rem; text-align: center; }
.is-staging .draft { outline: 2px solid #f5d000; outline-offset: 6px; }
.is-staging .ph { background: #fff1a8; color: #4a3a00; outline: 1px solid #c9a200; }

/* Copy edited in the office can run to several paragraphs */
.hero .lead + .lead { margin-top: 1em; }
img.avatar { object-fit: cover; padding: 0; }