/* ---------------------------------------------------------------------------
   Groundfloor brand layer — "the datum"
   ---------------------------------------------------------------------------
   One idea, applied everywhere: the name is the position. The customer's
   application sits above the line; Groundfloor is the line. Everything here is
   drawn from architectural section drawing — floor plates, a datum rule, level
   marks — and every colour is taken from the existing palette tokens, so all
   eight palettes keep working untouched.
   Loaded last; it overrides, it does not replace.
--------------------------------------------------------------------------- */

:root{
  --plate:color-mix(in srgb, currentColor 14%, transparent);
  --plate-strong:color-mix(in srgb, currentColor 30%, transparent);
  --datum:var(--amber);
}

/* --- 1. The mark -----------------------------------------------------------
   The slab stack (chosen 2026-10-15, identity canvas "Groundfloor identity"):
   three floor slabs, only the bottom (ground) slab in the accent. Drawn as one CSS
   mask so it takes the palette and the surrounding text colour, and costs no request.
   Construction: mark height = ascender, gap = 0.45x mark height, mark on the baseline. */
.wordmark{display:inline-flex;align-items:baseline;gap:.33em;font-weight:500;letter-spacing:-.015em}
.wordmark::before{
  content:"";flex:none;align-self:baseline;
  height:.74em;width:calc(.74em * 4 / 3);
  background:linear-gradient(var(--datum),var(--datum)) 0 100%/100% 26.7% no-repeat,currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 28 80 60'%3E%3Cpath d='M8 88L68 88L88 72L28 72Z M8 66L68 66L88 50L28 50Z M8 44L68 44L88 28L28 28Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 28 80 60'%3E%3Cpath d='M8 88L68 88L88 72L28 72Z M8 66L68 66L88 50L28 50Z M8 44L68 44L88 28L28 28Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.wordmark::after{display:none}

/* --- 2. Paper --------------------------------------------------------------
   A flat #0b0c0e reads as "unstyled". A trace of grain reads as a surface. */
body.website{position:relative}
body.website::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
body.website>*{position:relative;z-index:1}
/* keep the skip link off-screen until focused; the rule above would otherwise pin it in the flow */
/* Fixed dark text: in dark mode --ink is light, which put light text on amber (audit V13). */
body.website>.skip-link{position:fixed;top:8px;left:16px;z-index:30;transform:translateY(-150%);background:var(--amber);color:#121211}
body.website>.skip-link:focus{transform:none}

/* --- 3. The hero as an elevation ------------------------------------------
   Floor lines recede upward and stop at the datum; the ground glows. Static by
   default — nothing moves, nothing loads, nothing to fall back from. */
.launch-hero{position:relative;isolation:isolate;overflow:clip;padding-bottom:88px}
.launch-hero::before{
  content:"";position:absolute;z-index:-1;
  inset:-24px 0 0;
  background:
    repeating-linear-gradient(to bottom, var(--plate) 0 1px, transparent 1px 104px),
    repeating-linear-gradient(to right, var(--plate) 0 1px, transparent 1px 168px);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 68%, #000);
  mask-image:linear-gradient(to bottom, transparent, #000 68%, #000);
  opacity:.75;
}
/* The datum: the line the page is built on. */
.launch-hero::after{
  content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(to right, var(--datum) 0 44%, var(--plate-strong) 44%);
}
/* A low glow off the ground line, keyed to the accent. */
.launch-hero .hero-bottom{position:relative}
.launch-hero .hero-bottom::before{
  content:"";position:absolute;z-index:-1;left:-20%;right:-20%;bottom:-120px;height:300px;
  background:radial-gradient(60% 100% at 30% 100%, color-mix(in srgb, var(--amber) 16%, transparent), transparent 70%);
  pointer-events:none;
}
/* "Close the gap." sits on its own datum. */
.launch-hero h1 em{
  background-image:linear-gradient(var(--datum),var(--datum));
  background-size:100% 4px;background-position:0 100%;background-repeat:no-repeat;
  padding-bottom:6px;
}

/* --- 4. Levels -------------------------------------------------------------
   Each section is a floor plate: a datum rule above it, a level mark in the
   margin. Drawing convention, not decoration — it tells you where you are. */
body.website main{counter-reset:level}
.site-section{position:relative;counter-increment:level;padding-top:56px}
.site-section::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right, var(--datum) 0 calc(var(--page-gutter) + 64px), var(--plate) calc(var(--page-gutter) + 64px));
}
.site-section::after{
  content:"L" counter(level,decimal-leading-zero);
  position:absolute;top:17px;left:10px;
  font:400 11px/1 var(--font-mono);letter-spacing:.14em;
  color:color-mix(in srgb, currentColor 48%, transparent);
}
@media(max-width:1180px){.site-section::after{display:none}}
/* The chat chapter runs full-bleed dark; keep its own frame. */
#conversation.galaxy-conversation::before,#conversation.galaxy-conversation::after{display:none}

/* --- 5. Cards as plates ----------------------------------------------------
   Each card stands on a short ground line that extends on hover. */
.v3-cards article{position:relative;overflow:hidden;transition:border-color var(--duration,180ms) var(--ease,ease)}
.v3-cards article::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:56px;
  background:var(--datum);
  transition:width 260ms var(--ease,cubic-bezier(.2,.7,.2,1));
}
.v3-cards article:hover{border-color:color-mix(in srgb, var(--amber) 45%, var(--line))}
.v3-cards article:hover::after{width:100%}

/* --- 6. Section eyebrows align to the datum ------------------------------- */
.site-section .section-heading .eyebrow::before{width:40px;height:2px;background:var(--datum)}

@media(prefers-reduced-motion:reduce){
  .v3-cards article::after{transition:none}
}
@media(max-width:760px){
  .launch-hero{padding-bottom:64px}
  .site-section{padding-top:40px}
  body.website::before{opacity:.35}
}

/* Dark/light switch in the header. It follows the nav in the DOM, so desktop needs no reordering
   and tab order matches what is seen. Collapsed header: menu button, then the switch, nav below. */
.site-header .theme-toggle{color:inherit}
.site-header nav{margin-left:auto}
.theme-toggle .icon-moon{display:none}
:root[data-palette="gf-porcelain"] .theme-toggle .icon-sun{display:none}
:root[data-palette="gf-porcelain"] .theme-toggle .icon-moon{display:block}
@media(max-width:1200px){
 .site-header #menu-toggle{order:1;margin-left:auto}
 .site-header .theme-toggle{order:2}
 .site-header nav{order:3;margin-left:0}
}

/* Logo standard: one wordmark on every page, home included. Geist 600 lettering (normal width),
   warm off-white on dark, signal-orange ground slab on the mark.
   Rafi, 2026-10-22: picked Geist (sample image matched Geist 600 at -.015em) and the orange-slab icon.
   Replaces the earlier same-day Archivo standard. blueprint.css no longer styles .wordmark type
   (the h1-h3 Archivo rule and the header rule only set colour), so this block is the single source. */
.wordmark{--datum:#ff5a1f;--amber:#ff5a1f;font-family:Geist,Arial,sans-serif;font-stretch:100%;font-weight:600;letter-spacing:-.015em}
/* Off-white only on the dark ground; the light theme (gf-porcelain) keeps the page ink. */
:root:not([data-palette="gf-porcelain"]) :is(.site-header .wordmark,.site-footer .footer-main .wordmark){color:#f3f1ec}
/* Logo plus the theme toggle and menu button are tight on small phones. */
@media(max-width:380px){.site-header.container{column-gap:12px}}