/*
 * Fieldcraft Engineering — Site Styles
 *
 * Ported from the approved single-page design (scratchpad fieldcraft-home.html).
 * Custom design system, not Bootstrap utility classes — this page intentionally
 * does not load Bootstrap CSS/JS (see includes/header.php / footer.php).
 */

:root {
    --ground: #edf0ec;
    --ground-2: #e2e7e1;
    --ink: #17211d;
    --ink-soft: #46544c;
    --forest: #2f4a3a;
    --contour: #a9b7ad;
    --contour-index: #7f9486;
    --signal: #e0a800;
    --signal-ink: #17211d;
    --rule: #c9d2cb;
    --panel: #17211d;
    --panel-ink: #e6ece7;
    --panel-soft: #9fb0a5;
    --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ground: #111915; --ground-2: #17211c; --ink: #e3e9e4; --ink-soft: #a3b2a8;
        --forest: #8fb39c; --contour: #25332b; --contour-index: #36493e; --signal: #f0bb1c;
        --signal-ink: #111915; --rule: #2a3830; --panel: #0b110e; --panel-ink: #e3e9e4; --panel-soft: #8c9d92;
    }
}
:root[data-theme="dark"] {
    --ground: #111915; --ground-2: #17211c; --ink: #e3e9e4; --ink-soft: #a3b2a8;
    --forest: #8fb39c; --contour: #25332b; --contour-index: #36493e; --signal: #f0bb1c;
    --signal-ink: #111915; --rule: #2a3830; --panel: #0b110e; --panel-ink: #e3e9e4; --panel-soft: #8c9d92;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--ground); color: var(--ink);
    font-family: var(--body); font-size: 17px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }

/* Pre-launch banner (shown only while SITE_LAUNCHED is false) */
.sample { background: var(--signal); color: var(--signal-ink); text-align: center; padding: 6px 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .05em; }

/* Header */
header.top {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
    background: color-mix(in srgb, var(--ground) 88%, transparent);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule);
}
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { flex: none; display: block; }
.brand b { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.brand span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--ink-soft); text-transform: uppercase; margin-top: 3px; }
nav.links { display: flex; gap: 6px 22px; align-items: center; flex-wrap: wrap; margin: -8px 0; }
/* padding-block, not height: it grows the tap target to ~40px without changing
   the visual rhythm, and the negative margin above keeps the header the same
   height on desktop. */
nav.links a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-soft); padding-block: 8px; }
nav.links a:hover { color: var(--ink); }
.btn {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    background: var(--ink); color: var(--ground); font-weight: 600; font-size: 15px;
    padding: 10px 18px; border-radius: 2px; border: 2px solid var(--ink);
    transition: background .15s, color .15s;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--ground); }

/* Hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero .wrap { position: relative; padding-block: clamp(56px, 9vw, 112px) clamp(48px, 7vw, 88px); }
.grid-ref { display: inline-flex; gap: 10px; align-items: center; color: var(--ink-soft); background: var(--ground); padding: 4px 10px 4px 0; }
.grid-ref i { width: 10px; height: 10px; border: 2px solid var(--signal); transform: rotate(45deg); display: inline-block; }
h1 {
    font-family: var(--display); font-weight: 900; text-transform: uppercase;
    font-size: clamp(52px, 9.4vw, 124px); line-height: .9; letter-spacing: -.005em;
    margin: 18px 0 0; max-width: 11ch; text-wrap: balance;
}
h1 em { font-style: normal; color: var(--forest); }
.hero p.lede { font-size: clamp(18px, 2vw, 21px); max-width: 38ch; color: var(--ink); margin: 26px 0 0; background: color-mix(in srgb, var(--ground) 80%, transparent); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* OPORD sections */
section.para { border-bottom: 1px solid var(--rule); padding-block: clamp(56px, 8vw, 96px); }
.para-grid { display: grid; grid-template-columns: 220px 1fr; gap: 24px 56px; }
@media (max-width: 820px) { .para-grid { grid-template-columns: 1fr; } }
.para-label { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 88px); align-self: start; }
@media (max-width: 820px) { .para-label { position: static; } }
.para-label .num { font-family: var(--display); font-weight: 800; font-size: 64px; line-height: .9; color: var(--signal); }
.para-label .name { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; }
.para-label .hint { font-size: 13px; color: var(--ink-soft); margin-top: 6px; max-width: 24ch; }
h2 {
    font-family: var(--display); font-weight: 800; text-transform: uppercase;
    font-size: clamp(34px, 4.6vw, 56px); line-height: .98; margin: 0; max-width: 18ch; text-wrap: balance;
}
.para-body > p { max-width: 62ch; color: var(--ink-soft); margin: 20px 0 0; }
.para-body > p strong { color: var(--ink); font-weight: 600; }

/* Situation: the gap */
.gap-list { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.gap-list li { padding: 18px 20px 20px 0; border-bottom: 1px solid var(--rule); }
.gap-list li b { display: block; font-weight: 600; margin-bottom: 4px; }
.gap-list li span { color: var(--ink-soft); font-size: 15px; }

/* Mission: capabilities */
.caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 36px; }
.cap { background: var(--ground); padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.cap .mono { color: var(--forest); }
.cap h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; }
.cap p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }

/* Execution: phases */
.phases { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 0; }
.phase { display: grid; grid-template-columns: 150px 1fr; gap: 8px 32px; padding: 24px 0; border-top: 1px solid var(--rule); }
.phase:last-child { border-bottom: 1px solid var(--rule); }
@media (max-width: 600px) { .phase { grid-template-columns: 1fr; } }
.phase .when { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding-top: 4px; }
.phase .when b { display: block; color: var(--ink); font-family: var(--display); font-size: 28px; letter-spacing: .02em; font-weight: 800; line-height: 1; margin-bottom: 6px; }
.phase h3 { margin: 0; font-size: 19px; font-weight: 700; }
.phase p { margin: 6px 0 0; color: var(--ink-soft); max-width: 60ch; font-size: 15.5px; }
.phase .out { margin-top: 10px; font-size: 14px; color: var(--ink); }
.phase .out span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--forest); margin-right: 8px; }

/* Sustainment: panel */
section.panel { background: var(--panel); color: var(--panel-ink); border-bottom: none; }
section.panel h2 { color: var(--panel-ink); }
section.panel .para-body > p { color: var(--panel-soft); }
section.panel .para-body > p strong { color: var(--panel-ink); }
section.panel .para-label .hint { color: var(--panel-soft); }
.commit { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px 40px; }
.commit li { border-left: 2px solid var(--signal); padding-left: 16px; }
.commit b { display: block; font-weight: 600; color: var(--panel-ink); }
.commit span { color: var(--panel-soft); font-size: 15px; }

/* Footer */
footer { padding-block: 32px 40px; color: var(--ink-soft); font-size: 13.5px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

/* Inner page head (work.php). The home page uses .hero with the topo canvas;
   inner pages keep the same rhythm without the drawing. */
.page-head { border-bottom: 1px solid var(--rule); }
.page-head .wrap { padding-block: clamp(48px, 7vw, 88px) clamp(32px, 5vw, 56px); }
.page-head h1 {
    font-family: var(--display); font-weight: 900; text-transform: uppercase;
    font-size: clamp(40px, 6.6vw, 86px); line-height: .92; letter-spacing: -.005em;
    margin: 18px 0 0; max-width: 16ch; text-wrap: balance;
}
.page-head .lede { font-size: clamp(17px, 1.8vw, 20px); max-width: 60ch; margin: 22px 0 0; }

/* Case study blocks reuse .phase, which carries no h3 on that page, so the
   copy sits directly under the label. */
.phase > div > p:first-child { margin-top: 0; }

/* Inline links in prose. The closing section on work.php carries one. */
.para-body a:not(.btn) {
    color: inherit; text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: var(--signal); text-decoration-thickness: 2px;
}
.para-body a:not(.btn):hover { color: var(--signal); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }