/* instance-b-website — Redstone / Instance B
   Built from the Figma design (Redstone Website). Monochrome, airy, sidebar + content.
   Plain CSS, no build step. One stylesheet shared by all 9 pages. */

/* ---- Fonts ---------------------------------------------------------------
   Stack Sans Notch = the redstone wordmark + the CTA (bundled, real font).
   Albert Sans = everything else (loaded from Google Fonts in each page head). */
@font-face {
  font-family: "Stack Sans Notch";
  src: url("/fonts/StackSansNotch-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Stack Sans Notch";
  src: url("/fonts/StackSansNotch-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

/* ---- Tokens --------------------------------------------------------------- */
:root {
  --ink: #000000;
  --bg: #ffffff;

  --font-wordmark: "Stack Sans Notch", system-ui, sans-serif;
  --font-body: "Albert Sans", system-ui, -apple-system, sans-serif;

  /* type scale — fluid, anchored to the Figma px sizes at desktop */
  --fs-wordmark: clamp(1.7rem, 0.9rem + 1.6vw, 2.25rem);   /* 36px */
  --fs-tagline:  clamp(1rem, 0.85rem + 0.4vw, 1.25rem);    /* 20px */
  --fs-nav:      clamp(1.15rem, 0.9rem + 0.8vw, 1.5rem);   /* 24px */
  --fs-heading:  clamp(2.4rem, 1.2rem + 4vw, 4rem);        /* 64px */
  --fs-lead:     clamp(1.4rem, 0.9rem + 1.6vw, 2rem);      /* 32px */
  --fs-body:     clamp(1.15rem, 0.9rem + 0.8vw, 1.5rem);   /* 24px */
  --fs-note:     clamp(0.9rem, 0.8rem + 0.4vw, 1rem);      /* 16px */

  --edge: clamp(24px, 3.2vw, 49px);   /* outer margin (49px in Figma) */
  --canvas-max: 1512px;
  --sidebar-w: clamp(220px, 26vw, 360px);
  --content-top: 30vh;                /* pushes heading/body to the upper-middle */
}

/* ---- Reset ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }

/* ---- Page canvas: sidebar | content -------------------------------------- */
.page {
  max-width: var(--canvas-max);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(24px, 3vh, 34px) var(--edge) clamp(28px, 4vh, 44px);
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  column-gap: clamp(32px, 4vw, 56px);
  align-items: stretch;
}

/* ---- Sidebar: brand (top) / nav (middle) / product-note (bottom) --------- */
.sidebar {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  padding: clamp(24px, 3vh, 34px) 0 clamp(28px, 4vh, 44px);
  margin: calc(-1 * clamp(24px, 3vh, 34px)) 0 calc(-1 * clamp(28px, 4vh, 44px));
}
.brand {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.05;
  align-self: start;
}
.brand .wordmark {
  font-family: var(--font-wordmark);
  font-weight: 400;
  font-size: var(--fs-wordmark);
  letter-spacing: -0.01em;
}
.brand .tagline {
  font-family: var(--font-body);
  font-size: var(--fs-tagline);
  margin-top: 0.35em;
}

/* nav sits in the middle row, biased slightly above center (~41% in Figma) */
.nav {
  align-self: center;
  transform: translateY(-4%);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 22px);
  font-size: var(--fs-nav);
  font-weight: 600;
}
.nav-row { display: flex; align-items: center; gap: 12px; min-height: 1.2em; }
.nav-row a {
  text-decoration: none;
  padding: 2px 8px;
  margin-left: -8px;            /* keep label x-aligned while the pill bleeds left */
  border-radius: 1px;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.nav-row a:hover,
.nav-row a:focus-visible,
.nav-row a.nav-current { background: var(--ink); color: var(--bg); }
.nav-row a.active { background: var(--ink); color: var(--bg); }
/* Home load: hold the focus highlight until the first keypress so no nav item looks
   preselected however you arrive. Active only while .nav-quiet is set (the home page,
   which has no current item); never touches a sub-page's .active current highlight. */
.nav.nav-quiet a:focus-visible { background: transparent; color: var(--ink); }
/* The mobile menu toggle is hidden on desktop (shown only under the responsive breakpoint). */
.nav-toggle { display: none; }
/* No focus ring/border on menu items — the black background is the indicator. */
.nav-row a:focus,
.nav-row a:focus-visible { outline: none; }

/* right-pointing triangle for the active top-level item (after the pill) */
.nav-row.is-active::after {
  content: "";
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 9px solid var(--ink);
}

/* About submenu */
.subnav {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 22px);
  margin-top: clamp(14px, 1.4vw, 22px);
  padding-left: clamp(40px, 5vw, 101px);   /* indent to ~x150 from x49 */
}
.subnav .nav-row { position: relative; }
/* triangle BEFORE the active sub-item */
.subnav .nav-row.is-active::before {
  content: "";
  position: absolute;
  left: -22px;
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 9px solid var(--ink);
}
.subnav .nav-row.is-active::after { content: none; }

.product-note {
  align-self: end;
  margin: 0;
  font-size: var(--fs-lead);
}
/* Hero mobile-only copy of the product note (lives under the CTA); hidden on desktop. */
.hero-footer-note { display: none; }
/* Instance B logo mark above "an instance b product." (hero) */
.product-mark {
  display: block;
  width: 75px;       /* logo indicator size */
  height: auto;      /* preserve the mark's aspect ratio */
  margin-bottom: 4px;
}

/* ---- Content: heading / body / CTA --------------------------------------- */
.content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: var(--content-top);
}
.heading {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-heading);
  line-height: 1.05;
  text-align: left;
  margin: 0 0 clamp(28px, 4vh, 56px);
  letter-spacing: -0.01em;
}
.body {
  font-size: var(--fs-body);
  max-width: 60ch;
  margin: 0;
}
.body p { margin: 0 0 1.1em; }
.body p:last-child { margin-bottom: 0; }
.note {
  font-size: var(--fs-note);
  color: var(--ink);
  margin-top: 1.4em;
}

.cta {
  align-self: flex-end;
  margin-top: auto;            /* pin to bottom-right */
  padding-top: clamp(40px, 6vh, 80px);
  font-family: var(--font-wordmark);
  font-size: var(--fs-wordmark);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.12s ease;
}
.cta:hover { opacity: 0.55; }
.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ---- Hero page: right-aligned cluster, centered vertically ---------------- */
.page.hero .content {
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  padding-top: 0;
}
.page.hero .hero-wordmark {
  font-family: var(--font-wordmark);
  font-size: var(--fs-heading);
  line-height: 1.05;
  margin: 0;
}
.page.hero .hero-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-heading);
  line-height: 1.05;
  margin: 0 0 clamp(18px, 2.4vh, 28px);
  letter-spacing: -0.01em;
}
.page.hero .hero-desc {
  font-size: var(--fs-lead);
  max-width: 52ch;
  margin: 0;
}
.page.hero .cta {
  align-self: flex-end;
  margin-top: clamp(36px, 6vh, 72px);
  padding-top: 0;
}

/* ---- Responsive: stack to one column -------------------------------------- */
@media (max-width: 820px) {
  :root { --content-top: 8vh; }
  .page {
    grid-template-columns: 1fr;
    row-gap: clamp(28px, 6vh, 56px);
    min-height: 100vh;
  }
  .sidebar {
    display: flex; flex-direction: column; gap: clamp(20px, 4vh, 36px);
    position: relative; height: auto; padding: 0; margin: 0;
  }
  .nav { align-self: start; transform: none; }
  .product-note { align-self: start; margin-top: clamp(20px, 4vh, 36px); }
  /* Mobile: collapse the menu behind a "menu" toggle so the top of the screen is just
     logo + toggle and the page content shows on load. Fully hidden (display:none) when
     collapsed so the desktop keyboard-focus code can't grab a hidden link. */
  /* Hamburger icon: three bars that rotate into an X when the menu is open. */
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    position: absolute; top: 6px; right: 0; z-index: 60;   /* top-right, parallel to the brand */
    width: 26px; height: 20px; padding: 0; margin: 0;
    background: none; border: 0; cursor: pointer;
  }
  .nav-toggle span {
    display: block; height: 2px; width: 100%; background: var(--ink);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .sidebar.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .sidebar.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .sidebar.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Nav drawer: off-canvas on the right, slides in when the toggle sets .nav-open.
     visibility:hidden while closed keeps the links out of the tab/focus order. */
  .sidebar .nav {
    position: fixed; top: 0; right: 0;
    height: 100vh; width: min(78vw, 300px);
    align-self: auto; transform: translateX(100%);
    margin: 0; padding: clamp(84px, 14vh, 120px) var(--edge) var(--edge);
    background: var(--bg);
    border-left: 1px solid var(--ink);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.12);
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0.28s ease;
    overflow-y: auto;
    z-index: 50;
  }
  .sidebar.nav-open .nav { transform: translateX(0); visibility: visible; }
  /* The sidebar product-note never shows on mobile (the hero uses its bottom copy). */
  .sidebar .product-note { display: none; }
  .content { padding-top: 0; }
  .heading { text-align: left; }
  .cta { align-self: flex-start; padding-top: clamp(28px, 5vh, 48px); margin-top: clamp(20px, 4vh, 40px); }

  .page.hero .content { align-items: flex-start; text-align: left; justify-content: flex-start; }
  .page.hero .cta { align-self: flex-start; }
  /* Let the content row absorb the leftover height so the note can pin to the bottom. */
  .page.hero { grid-template-rows: auto 1fr; }
  /* Hero: the product + logo note pins to the bottom of the screen, under the CTA. */
  /* Center the main cluster in the space above the note: equal `auto` top margins on
     the first item and the note split the free space evenly (note stays pinned to the
     bottom). No fixed padding, so there's no dead gap. */
  .page.hero .hero-wordmark { margin-top: auto; }
  .page.hero .hero-footer-note {
    display: block;
    align-self: flex-start;
    text-align: left;
    margin-top: auto;                        /* pin to the bottom of the content area */
  }
  .content, .page.hero .content { min-width: 0; width: 100%; max-width: 100%; }
  /* hard-cap text to the viewport (minus margins) so it always wraps on small screens */
  .body, .page.hero .hero-desc, .heading, .page.hero .hero-wordmark, .page.hero .hero-title {
    max-width: calc(100vw - 2 * var(--edge));
    overflow-wrap: break-word;
  }
  .subnav { padding-left: clamp(24px, 8vw, 48px); }

  /* keep large type + the nowrap CTA inside the viewport */
  .heading, .page.hero .hero-wordmark, .page.hero .hero-title {
    font-size: clamp(2rem, 8.5vw, 2.8rem);
  }
  .cta { font-size: clamp(1.2rem, 6vw, 1.7rem); }
  .body, .page.hero .hero-desc { font-size: clamp(1.05rem, 4.4vw, 1.25rem); }
}

/* never allow horizontal overflow on small screens */
html, body { overflow-x: clip; }