/* SevenBases field-manual style: tokens and components.
   Self-host this file and the fonts.  No inline styles are needed. */
:root {
  --sb-navy: #072950;
  --sb-graphite: #1B2430;
  --sb-bone: #FDF8EC;
  --sb-cool: #E6EDF5;
  --sb-orange: #D05723;      /* accent shapes, large text, logo sun */
  --sb-orange-ink: #B8460E;  /* buttons and any small orange text on light backgrounds */
  --sb-muted: #4B5A70;
  --sb-line: #D9D2BF;
  --sb-white: #FFFFFF;

  --sb-font-head: "Saira Condensed", "Arial Narrow", Arial, sans-serif;
  --sb-font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --sb-cut: 12px;            /* chamfer size, echoes the wordmark's cut corners */
  --sb-s1: 4px; --sb-s2: 8px; --sb-s3: 16px; --sb-s4: 24px; --sb-s5: 40px; --sb-s6: 64px; --sb-s7: 96px;
  --sb-max: 1120px;
}

body { background: var(--sb-bone); color: var(--sb-graphite); font: 400 1.0625rem/1.65 var(--sb-font-body); }
h1, h2, h3, .sb-head {
  font-family: var(--sb-font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.05; color: var(--sb-navy);
}
h1 { font-size: clamp(2.75rem, 7vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
h3 { font-size: 1.5rem; }
.sb-wrap { max-width: var(--sb-max); margin: 0 auto; padding: 0 var(--sb-s4); }
.sb-section { padding: var(--sb-s6) 0; }
.sb-section--cool { background: var(--sb-cool); }
.sb-section--dark { background: var(--sb-graphite); color: var(--sb-bone); }
.sb-section--dark h1, .sb-section--dark h2, .sb-section--dark h3 { color: var(--sb-bone); }
.sb-section--navy { background: var(--sb-navy); color: var(--sb-bone); }
.sb-section--navy h1, .sb-section--navy h2, .sb-section--navy h3 { color: var(--sb-bone); }

/* Section label, for example: 01 / POWER */
.sb-label {
  display: flex; align-items: center; gap: var(--sb-s3);
  font: 600 .875rem/1 var(--sb-font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--sb-navy);
}
.sb-label::after { content: ""; flex: 1; height: 1px; background: var(--sb-line); }
.sb-section--dark .sb-label, .sb-section--navy .sb-label { color: var(--sb-bone); }

/* Links: navy with an underline, never orange */
a { color: var(--sb-navy); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
.sb-section--dark a, .sb-section--navy a { color: var(--sb-bone); }

/* Buttons: cut corners.  One primary per page. */
.sb-btn {
  display: inline-block; min-height: 48px; padding: 14px 28px; border: 0; cursor: pointer;
  font: 700 1rem/1.2 var(--sb-font-head); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  background: var(--sb-orange-ink); color: var(--sb-white);
  clip-path: polygon(var(--sb-cut) 0, 100% 0, 100% calc(100% - var(--sb-cut)), calc(100% - var(--sb-cut)) 100%, 0 100%, 0 var(--sb-cut));
  transition: background-color .16s ease;
}
.sb-btn:hover { background: #9E3A08; }
.sb-btn--ghost { background: var(--sb-navy); color: var(--sb-bone); }
.sb-btn--ghost:hover { background: var(--sb-graphite); }

/* Cards: hairline border, one chamfered corner, navy top rule */
.sb-card {
  background: var(--sb-white); border: 1px solid var(--sb-line); border-top: 3px solid var(--sb-navy);
  padding: var(--sb-s4);
  clip-path: polygon(0 0, calc(100% - var(--sb-cut)) 0, 100% var(--sb-cut), 100% 100%, 0 100%);
}
.sb-grid { display: grid; gap: var(--sb-s4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Readouts: key facts as instrument numbers */
.sb-readout { border-left: 3px solid var(--sb-navy); padding-left: var(--sb-s3); }
.sb-readout .num { display: block; font: 700 clamp(2.5rem, 6vw, 3.75rem)/1 var(--sb-font-head); color: var(--sb-navy); font-variant-numeric: tabular-nums; }
.sb-readout .cap { display: block; margin-top: var(--sb-s2); font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sb-muted); }
.sb-section--dark .sb-readout, .sb-section--navy .sb-readout { border-left-color: var(--sb-orange); }
.sb-section--dark .sb-readout .num, .sb-section--navy .sb-readout .num { color: var(--sb-bone); }
.sb-section--dark .sb-readout .cap, .sb-section--navy .sb-readout .cap { color: #C9D4E3; }

/* Spec tables */
.sb-spec { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sb-spec th, .sb-spec td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--sb-line); vertical-align: top; }
.sb-spec th { font: 600 .8125rem/1.2 var(--sb-font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--sb-muted); }

/* Pick card: two columns, honest */
.sb-pick .does { display: grid; gap: var(--sb-s3); grid-template-columns: 1fr 1fr; }
.sb-pick h4 { font: 700 .875rem/1 var(--sb-font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--sb-navy); margin: 0 0 var(--sb-s2); }
@media (max-width: 640px) { .sb-pick .does { grid-template-columns: 1fr; } }

/* Safety callout */
.sb-callout { border-left: 6px solid var(--sb-navy); background: var(--sb-cool); padding: var(--sb-s3) var(--sb-s4); }

/* Hero text over a photo */
.sb-hero { position: relative; color: var(--sb-bone); }
.sb-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,41,80,.20), rgba(7,41,80,.78)); }
.sb-hero > * { position: relative; }
.sb-hero h1 { color: var(--sb-bone); }

/* Focus and motion */
:focus-visible { outline: 3px solid var(--sb-navy); outline-offset: 3px; }
.sb-section--dark :focus-visible, .sb-section--navy :focus-visible, .sb-hero :focus-visible { outline-color: var(--sb-bone); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }