@charset "utf-8";

/* ═══════════════════════════════════════════════════════════════════
   Beeig Industries
   One stylesheet. No build step, no framework, no preprocessor.

   Structure:
     1. Fonts
     2. Tokens          ← change colours and spacing here
     3. Reset
     4. Layout shell
     5. Sidebar
     6. Buttons
     7. Shared text
     8. Home
     9. Product detail
    10. Contact
    11. Small pages
    12. Mobile
    13. Motion
   ═══════════════════════════════════════════════════════════════════ */


/* ── 1. Fonts ─────────────────────────────────────────────────────
   Self-hosted so no third party sees your visitors and the content
   security policy can stay strict. Run tools/fetch-fonts.sh if the
   assets/fonts folder is empty — the site falls back to system fonts
   until then, so nothing breaks in the meantime.                    */

@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('../fonts/inter-tight-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('../fonts/inter-tight-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('../fonts/inter-tight-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}


/* ── 2. Tokens ───────────────────────────────────────────────────── */

:root {
  /* Ink and text.
     The three muted values differ from the original mockup: #a3a39d,
     #8c8c86 and #a08a63 measured 2.5:1, 3.4:1 and 3.3:1 against white,
     all below the 4.5:1 minimum for text this size. These replacements
     read the same and pass.                                          */
  --ink:           #17181a;   /* headings, buttons, the mark      18.0:1 */
  --ink-soft:      #3a3b3d;
  --body:          #56564f;   /* body copy                         7.4:1 */
  --muted:         #6e6e67;   /* small labels, placeholders        5.1:1 */
  /* Bronze is checked against the DARKEST surface it sits on (the sidebar
     and the contact callout), not just white — on those it needs to be a
     shade deeper than it would on plain white to clear 4.5:1.           */
  --bronze:        #7f6b3e;   /* eyebrow labels        5.2:1 / 4.8:1 sand */
  --amber:         #e8a33d;   /* decoration only — 2.2:1 on white        */

  /* Surfaces */
  --paper:         #ffffff;
  --paper-2:       #fbfbf9;
  --sand:          #f6f6f4;
  --sand-hover:    #eeeeea;
  --sand-active:   #e8e6df;
  --notice-bg:     #fdf7ec;
  --notice-border: #f0e4cf;

  /* Lines */
  --line:          #e3e3e0;
  --line-soft:     #ebeae6;
  --line-field:    #dcdcd8;
  --line-hover:    #c9c3b6;
  --line-error:    #9a4f3f;

  /* Product accents */
  --accent-1: #e8a33d;
  --accent-2: #2f6f6b;
  --accent-3: #9a4f3f;
  --accent-4: #4a5a8c;
  --accent:   var(--accent-1);   /* overridden per product */

  /* Type */
  --sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 26px; --s7: 34px; --s8: 44px; --s9: 56px;

  /* Radii */
  --r-field: 6px; --r-nav: 7px; --r-card-sm: 9px; --r-card: 10px;

  /* Elevation and motion */
  --lift:  0 6px 18px rgba(23, 24, 26, .07);
  --t:     180ms;
  --ease:  cubic-bezier(.2, 0, .2, 1);

  /* Layout */
  --sidebar-w:   258px;
  --content-max: 1000px;
}

.accent-1 { --accent: var(--accent-1); }
.accent-2 { --accent: var(--accent-2); }
.accent-3 { --accent: var(--accent-3); }
.accent-4 { --accent: var(--accent-4); }


/* ── 3. Reset ─────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

/* A visible focus ring on everything keyboard users can reach. Never
   remove this without putting something equally visible in its place. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff;
  padding: var(--s3) var(--s4); border-radius: 0 0 var(--r-field) 0;
  font-size: 14px; font-weight: 500;
}
.skip:focus { left: 0; }


/* ── 4. Layout shell ──────────────────────────────────────────────── */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100dvh;
}

.content {
  padding: 40px var(--s8) var(--s9);
  max-width: var(--content-max);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}


/* ── 5. Sidebar ───────────────────────────────────────────────────── */

.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  background: var(--sand);
  border-right: 1px solid var(--line);
  padding: 28px var(--s5);
  display: flex;
  flex-direction: column;
  gap: 30px;
  view-transition-name: sidebar;   /* stays put while pages change */
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand:hover { text-decoration: none; }
.brand-mark { flex: none; view-transition-name: brand; }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.brand-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bronze);
}

.nav ul { display: flex; flex-direction: column; gap: 3px; }

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: var(--r-nav);
  font-size: 13px; font-weight: 500;
  transition: background-color var(--t) var(--ease);
}
.nav-item:hover { background: var(--sand-hover); text-decoration: none; }
.nav-item.is-active { background: var(--sand-active); }

.nav-swatch {
  width: 18px; height: 18px; border-radius: 5px; flex: none;
  background: var(--accent);
}
.nav-swatch--home { background: transparent; border: 1.5px solid var(--line-hover); }

.sidebar-foot {
  margin-top: auto;
  display: flex; flex-direction: column; gap: var(--s2);
}

.colophon {
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  text-align: center; padding-top: var(--s2);
}


/* ── 6. Buttons ───────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 500;
  padding: 11px 18px; border-radius: var(--r-field);
  border: 1px solid transparent; cursor: pointer;
  text-align: center; white-space: nowrap;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.btn:hover { text-decoration: none; }

.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: var(--ink-soft); }
.btn--solid.is-active { background: var(--ink-soft); }

.btn--outline { border-color: var(--ink); color: var(--ink); font-size: 12px; padding: 9px 16px; }
.btn--outline:hover { background: var(--ink); color: #fff; }

.btn--block { display: flex; width: 100%; padding: 12px; border-radius: var(--r-nav); }

.btn[disabled] { opacity: .55; cursor: default; }


/* ── 7. Shared text ───────────────────────────────────────────────── */

.eyebrow {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bronze);
}
.eyebrow-rule { width: 22px; height: 2px; background: var(--amber); flex: none; }
.eyebrow--accent { color: var(--muted); letter-spacing: .12em; }
.eyebrow-chip {
  width: 10px; height: 10px; border-radius: 3px; flex: none;
  background: var(--accent);
}

.hero { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.hero-title {
  font-size: clamp(1.875rem, 1.25rem + 2.2vw, 2.625rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.1;
}
.page-title { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }

.lede { font-size: 16px; line-height: 1.75; color: var(--body); }
.lede--sm { font-size: 15px; line-height: 1.7; }

.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); }
.section-title { font-size: 15px; font-weight: 600; }
.section-hint { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* Placeholder shown until a real screenshot is dropped in. */
.shot--fpo {
  background: repeating-linear-gradient(135deg,
    var(--sand) 0 9px, var(--sand-hover) 9px 18px);
  display: flex; align-items: flex-end; padding: var(--s3);
}
.shot-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}


/* ── 8. Home ──────────────────────────────────────────────────────── */

.products { display: flex; flex-direction: column; gap: var(--s4); }

.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--paper);
  transition-property: border-color, box-shadow, transform;
  transition-duration: var(--t);
  transition-timing-function: var(--ease);
}
.card:hover {
  border-color: var(--line-hover);
  box-shadow: var(--lift);
  transform: translateY(-2px);
}
.card:has(.card-link:focus-visible) { border-color: var(--ink); }

/* The whole card is one link, so middle-click and ⌘-click behave. */
.card-link { display: flex; flex-direction: column; height: 100%; }
.card-link:hover { text-decoration: none; }

.card-bar { height: 4px; background: var(--accent); flex: none; }

.card-shot { display: block; border-bottom: 1px solid var(--line); }
.card-shot .shot {
  width: 100%; height: 150px; object-fit: cover; object-position: top left;
}

.card-body { display: flex; flex-direction: column; gap: 9px; padding: 18px var(--s5); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.card-title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.card-url {
  font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap;
}
.card-short { font-size: 14px; line-height: 1.6; color: var(--body); }
.card-meta { display: flex; align-items: center; gap: 7px; padding-top: 2px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.card-cat {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}


/* ── 9. Product detail ────────────────────────────────────────────── */

.crumbs {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  display: flex; gap: 7px; margin-bottom: calc(-1 * var(--s5));
}

.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; }
.detail-intro { display: flex; flex-direction: column; gap: 11px; }
.detail-title { font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.detail-desc { font-size: 16px; line-height: 1.7; color: var(--body); max-width: 480px; }

.detail-aside { display: flex; flex-direction: column; gap: 9px; align-items: flex-end; flex: none; }
.detail-url { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.shots {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 300px 175px;
  gap: 10px;
}
.shots > .shot {
  border: 1px solid var(--line); border-radius: var(--r-card);
  width: 100%; height: 100%; object-fit: cover; object-position: top left;
}
.shot--primary { grid-column: span 2; }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fact {
  display: flex; flex-direction: column; gap: 5px;
  border: 1px solid var(--line-soft); border-radius: var(--r-card-sm);
  padding: 15px 17px; background: var(--paper-2);
}
.fact-key {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.fact-val { font-size: 14px; font-weight: 500; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  font-size: 12px; color: var(--body);
  background: var(--sand); border: 1px solid var(--line-soft);
  border-radius: 20px; padding: 6px 13px;
}

.cta-strip {
  border-top: 1px solid var(--line); padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s5);
}
.cta-text { font-size: 14px; color: var(--body); }


/* ── 10. Contact ──────────────────────────────────────────────────── */

.contact {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: var(--s9);
  align-items: start;
}
.contact-intro { display: flex; flex-direction: column; gap: 14px; }

.notice {
  margin-top: var(--s2);
  border: 1px solid var(--notice-border); background: var(--notice-bg);
  border-radius: var(--r-card-sm); padding: 15px 17px;
  display: flex; flex-direction: column; gap: var(--s1);
}
.notice-key {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bronze);
}
.notice-val { font-size: 14px; font-weight: 500; }

.form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; min-width: 0; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

.input {
  height: 40px; width: 100%; min-width: 0;
  border: 1px solid var(--line-field); border-radius: var(--r-field);
  padding: 0 var(--s3); font-size: 14px; background: var(--paper);
  transition: border-color var(--t) var(--ease);
}
.input:hover { border-color: var(--line-hover); }
.input:focus { border-color: var(--ink); }
.input--area { height: auto; padding: var(--s3); line-height: 1.6; resize: vertical; }
.input::placeholder { color: var(--muted); }

select.input { appearance: none; padding-right: var(--s7);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6e67' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s3) center;
}

.has-error .input { border-color: var(--line-error); }
.field-error { font-size: 13px; color: var(--line-error); }

.alert {
  border: 1px solid var(--line-error); border-left-width: 3px;
  background: #fdf6f4; border-radius: var(--r-card-sm);
  padding: var(--s3) var(--s4);
  display: flex; flex-direction: column; gap: var(--s2);
}
.alert-title { font-size: 14px; font-weight: 500; }
.alert-list { display: flex; flex-direction: column; gap: var(--s1); font-size: 13px; color: var(--body); }
.alert-list a { text-decoration: underline; }

.counter { font-size: 12px; color: var(--muted); align-self: flex-end; }

.actions { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.form-status { font-size: 13px; color: var(--muted); }

/* The honeypot. Bots fill it; people never see it, can't tab to it, and
   screen readers skip it. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ── 11. Small pages ──────────────────────────────────────────────── */

.narrow { display: flex; flex-direction: column; gap: var(--s4); max-width: 560px; }
.ref { font-size: 13px; color: var(--muted); }
.ref code { font-family: var(--mono); font-size: 12px; color: var(--body); }


/* ── 12. Mobile ───────────────────────────────────────────────────── */

@media (max-width: 899px) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  /* The sidebar becomes a two-row top bar:
       row 1   brand ......................... Contact us
       row 2   Home  App One  App Two  App Three  App Four  →
     The nav scrolls sideways rather than hiding behind a toggle, so
     every product is one tap away and there's no JS to go wrong. */
  .sidebar {
    position: sticky; top: 0; z-index: 10;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand action"
      "nav   nav";
    align-items: center;
    gap: var(--s2) var(--s3);
    padding: var(--s2) var(--s4);
    border-right: 0; border-bottom: 1px solid var(--line);
  }

  .brand { grid-area: brand; min-width: 0; }
  .brand-tag { display: none; }
  .brand-name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .nav {
    grid-area: nav;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Bleed to the screen edges so the row reads as scrollable. */
    margin: 0 calc(-1 * var(--s4));
    padding: 0 var(--s4) 2px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav ul { flex-direction: row; gap: var(--s1); }
  .nav-item { min-height: 44px; white-space: nowrap; }   /* 44px touch target */

  .sidebar-foot { grid-area: action; margin-top: 0; }
  .colophon { display: none; }
  .btn--block { width: auto; min-height: 44px; padding: var(--s2) var(--s4); }

  .content { padding: var(--s6) var(--s5) var(--s8); gap: var(--s7); }

  .card-grid { grid-template-columns: minmax(0, 1fr); }

  .detail-head { flex-direction: column; gap: var(--s5); }
  .detail-aside { align-items: flex-start; }

  .contact { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
}

@media (max-width: 759px) {
  .shots { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .shots > .shot { aspect-ratio: 16 / 10; height: auto; }
  .shot--primary { grid-column: auto; }
  .shot--mobile { aspect-ratio: 4 / 5; }

  .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .row { grid-template-columns: minmax(0, 1fr); }
  .cta-strip { flex-direction: column; align-items: flex-start; gap: var(--s3); }
}

@media (max-width: 479px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .card-head { flex-direction: column; gap: var(--s1); }
  .card-url { white-space: normal; }
}


/* ── 13. Motion ───────────────────────────────────────────────────── */

/* Cross-document view transitions: the sidebar and mark stay put while
   the content changes, so navigation feels like an app rather than a
   page reload. Browsers without support just load the page normally. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover { transform: none; }
}