/* Eureon Technologies — site styles
   Tokens mirror tools/brandlib.py. Change them there first, then here. */

:root {
  --parian:   #FBFBFA;
  --pentelic: #EDEDEC;
  --fresco:   #C2C2BF;
  --stone:    #4A4A48;
  --basalt:   #111110;
  --obsidian: #050505;
  --sinopia:  #C01F1B;   /* red on light  */
  --vermilion:#E8635B;   /* red on dark   */
  --copper:   #78452F;   /* copper on light */
  --patina:   #C89272;   /* copper on dark  */

  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 66ch;
  --gutter: clamp(1.5rem, 5vw, 5.5rem);
  --section: clamp(4.5rem, 10vw, 9rem);
  --hair: 1px solid var(--fresco);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--parian);
  color: var(--basalt);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- type -- */
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.24;
           text-wrap: balance;
             letter-spacing: .04em; margin: 0; text-transform: uppercase; }
h1 { font-size: clamp(2.1rem, 1.1rem + 4.2vw, 5rem); letter-spacing: .05em; }
h2 { font-size: clamp(1.6rem, 1rem + 2.4vw, 2.9rem); }
h3 { font-size: clamp(1.1rem, .95rem + .8vw, 1.45rem); }
p  { margin: 0 0 1.2em; max-width: var(--measure); text-wrap: pretty; }
/* text-wrap: pretty stops a paragraph ending on a single-word line. Rewording
   can fix one instance of that, but the break point moves with the viewport,
   so the widow reappears at another width. This handles it everywhere at once,
   and degrades to normal wrapping where unsupported. */
a  { color: var(--sinopia); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--basalt); }
em { font-style: italic; }

.eyebrow { font-family: var(--mono); font-size: .76rem; font-weight: 500;
           letter-spacing: .36em; text-transform: uppercase; color: var(--copper);
           margin: 0 0 1.6rem; }
/* The hero eyebrow reads as one line or not at all: "Eureon Technologies ·
   National Capital Region" must never break. Tracking is tightened from .36em
   and the size is viewport-scaled so the full 45-character run still clears a
   320px screen without wrapping or overflowing. */
.eyebrow--oneline { white-space: nowrap; letter-spacing: .18em;
                    font-size: clamp(.46rem, 2.3vw, .78rem); }

.lede { font-size: clamp(1.08rem, 1rem + .55vw, 1.35rem); line-height: 1.58; color: var(--basalt); }
.muted { color: var(--stone); }
.mono { font-family: var(--mono); }
/* Keeps a hyphenated compound from breaking across lines. Cinzel has no
   U+2011, so the character trick would render as tofu. */
.nb { white-space: nowrap; }

/* ------------------------------------------------------------- layout -- */
.wrap { max-width: 80rem; margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: var(--section); border-top: var(--hair); }
.rule-accent { width: 78px; height: 4px; background: var(--sinopia); border: 0; margin: 2rem 0; }

/* ---------------------------------------------------------------- nav -- */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center;
       justify-content: space-between; gap: 2rem; padding: .9rem var(--gutter);
       background: color-mix(in srgb, var(--parian) 90%, transparent);
       backdrop-filter: blur(10px); border-bottom: var(--hair); }
.nav__logo { display: block; text-decoration: none; }
.nav__logo svg { height: 34px; width: auto; display: block; }
.nav__links { display: flex; gap: 2rem; align-items: center; }
.nav__links a { font-family: var(--mono); font-size: .76rem; letter-spacing: .14em;
                text-transform: uppercase; color: var(--stone); text-decoration: none; }
.nav__links a:hover, .nav__links a:focus-visible { color: var(--basalt); }
@media (max-width: 900px) { .nav__links a:not(.btn) { display: none; } }

.btn { display: inline-block; font-family: var(--mono); font-size: .78rem; font-weight: 500;
       letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
       padding: .8rem 1.4rem; border: 1px solid var(--sinopia); color: var(--sinopia);
       transition: background .18s ease, color .18s ease; }
.btn:hover { background: var(--sinopia); color: var(--parian); }
.btn--solid { background: var(--sinopia); color: var(--parian); }
.btn--solid:hover { background: var(--basalt); border-color: var(--basalt); }
.btn--ghost { border-color: var(--fresco); color: var(--basalt); }
.btn--ghost:hover { background: transparent; border-color: var(--basalt); color: var(--basalt); }

:focus-visible { outline: 2px solid var(--sinopia); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: .6rem; z-index: 100; padding: .7rem 1rem;
              background: var(--sinopia); color: var(--parian); }

/* --------------------------------------------------------------- hero -- */
.hero { border-top: 0; padding-block: clamp(3rem, 7vw, 6rem) var(--section); }
.hero__stone { position: relative; border: var(--hair); overflow: hidden; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.hero__stone img { display: block; width: 100%; height: auto; }
.hero h1 { margin-bottom: 1.5rem; }
.hero .lede { max-width: 48ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }

/* --------------------------------------------------------- the formula -- */
.formula { display: flex; align-items: center; justify-content: center; gap: clamp(1rem,3vw,2.4rem);
           flex-wrap: wrap; padding: clamp(2rem,5vw,3.5rem); border: var(--hair);
           background: var(--pentelic); margin-top: 3rem; }
.formula__sig { height: clamp(72px, 12vw, 130px); width: auto; }
.formula__txt { max-width: 42ch; }
.formula__txt p { margin: 0; }
.formula__txt .mono { color: var(--copper); font-size: .82rem; letter-spacing: .18em;
                      text-transform: uppercase; display: block; margin-bottom: .7rem; }

/* --------------------------------------------------------------- grid -- */
.grid { display: grid; gap: 1px; background: var(--fresco); border: var(--hair); margin-top: 3rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid > * { background: var(--parian); padding: clamp(1.6rem, 3vw, 2.4rem); }
@media (max-width: 820px) { .grid--3 { grid-template-columns: 1fr; } }
.grid h3 { margin-bottom: .9rem; }
.grid p { font-size: .96rem; color: var(--stone); margin: 0; }

.proof { border: var(--hair); border-left: 3px solid var(--sinopia);
          padding: clamp(1.6rem, 3.4vw, 2.6rem); margin-top: 3rem; background: var(--pentelic); }
.proof h3 { margin-bottom: 1rem; }
.proof p { color: var(--stone); margin-bottom: 1em; }
.proof p:last-child { margin-bottom: 0; }
.proof strong { color: var(--basalt); }

/* Headings in the split column are sized to that COLUMN, not to the viewport.
   The global h2 clamp tops out at 2.9rem, at which "FIRST PRINCIPLES," measures
   483px inside a 432px column and wraps to a third line. */
.split h2 { font-size: clamp(1.6rem, 3.1vw, 2.45rem); }

.split { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
         gap: clamp(2rem, 6vw, 5.5rem); align-items: stretch; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.callout { border-left: 3px solid var(--sinopia); padding: .2rem 0 .2rem 1.6rem; margin: 2.4rem 0; }
.callout p { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em;
             font-size: clamp(1.05rem, .95rem + .6vw, 1.4rem); line-height: 1.36; margin: 0; }

/* --------------------------------------------------------------- misc -- */
.stealth { background: var(--basalt); color: var(--pentelic); border-top: 0; }
.stealth h2 { color: var(--parian); }
.stealth .eyebrow { color: var(--patina); }
.stealth p { color: var(--pentelic); }
.stealth a { color: var(--vermilion); }
.stealth .btn { border-color: var(--vermilion); color: var(--vermilion); }
.stealth .btn:hover { background: var(--vermilion); color: var(--obsidian); }

.cta { text-align: center; }
.cta .lede { margin-inline: auto; }
.cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }

footer { border-top: var(--hair); padding-block: 3rem; }
.foot { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: flex-start; }
.foot svg { height: 46px; width: auto; }
.foot__note { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
              color: var(--stone); line-height: 2; }


/* Photographs are greyscale by build, not by filter: Sinopia is the page's
   only accent and a coloured photograph competes with it. The dusk frames
   measured a +41 red lean before conversion. */
.plate { margin: clamp(2.5rem, 6vw, 4rem) 0 0; border: var(--hair); overflow: hidden; }
.plate img { display: block; width: 100%; height: auto; }
.plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
          background: var(--fresco); border: var(--hair); border-top: 0; }
.plates img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.plate__note { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em;
               text-transform: uppercase; color: var(--stone); margin: 1rem 0 0; }
@media (max-width: 720px) { .plates { grid-template-columns: 1fr 1fr; }
                            .plates img:last-child { display: none; } }

/* -------------------------------------------------------------- plates -- */
/* Photographs are greyscale by build, not by CSS filter: Sinopia is the page's
   only accent, and a coloured photograph competes with it. */
.split__media { margin: 2rem 0 0; border: var(--hair); overflow: hidden; }
.split__media img { display: block; width: 100%; height: auto; }

.proof { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
         gap: clamp(1.5rem, 4vw, 2.8rem); align-items: start; }
.proof__media { margin: 0; border: var(--hair); overflow: hidden; }
.proof__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (max-width: 820px) { .proof { grid-template-columns: 1fr; } }


/* Photographs in a split column fill the height their text sets, so their
   bottom edge aligns with the end of the prose beside them at every viewport
   width. Cropping to a fixed height cannot hold this: the text reflows and the
   alignment drifts. object-fit keeps the subject centred while the crop is
   taken from top and bottom. */
.split > div:first-child { display: flex; flex-direction: column; }
.split__media { flex: 1 1 auto; min-height: 14rem; margin-top: 2rem; }
.split__media img { height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .split > div:first-child { display: block; }
  .split__media { min-height: 0; }
  .split__media img { height: auto; object-fit: contain; }
}

/* The Capitol plate and the prose share their top and bottom edges. The
   heading sits ABOVE the split (not inside the photo column), so both columns
   start on the same line; flex-basis 0 stops the figure projecting the
   photograph's intrinsic 900x715 height into the row (which had left a blank
   band under the prose), so the PROSE sets the row height and the image covers
   it exactly — re-cropping taller or shorter as the text reflows, with the
   crop biased upward so the dome stays in frame while the foreground grounds
   give way. The heading keeps the in-split h2 scale so #team still matches
   #terrain typographically. */
#team .wrap > h2 { font-size: clamp(1.6rem, 3.1vw, 2.45rem); margin-bottom: 2rem; }
#team .split__media { flex-basis: 0; margin-top: 0; }
#team .split__media img { object-position: center 30%; }
/* the trailing paragraph margin would push the plate 1.2em past the last line */
#team .split > div:last-child > p:last-child { margin-bottom: 0; }

/* Square. A 3:4 portrait stood much taller than the text column beside it, so
   the two never lined up. The source is cropped to 1234x1233 — 6.8% off the top,
   17.9% off the bottom — which still holds the blade, the placard redaction and
   both marks, and sits at a height close to the text block. */
/* Side by side rather than stacked: as a full-width plate above the text, the
   photograph had to be scrolled past in its entirety before the call to action
   appeared. Beside it, both are in view at once. */
.cta { text-align: left; }
.cta__grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
             gap: clamp(1.8rem, 5vw, 4rem); align-items: center; }
.cta__body { min-width: 0; }
.cta .lede { margin-inline: 0; }
.cta__actions { justify-content: flex-start; margin-top: 2rem; }
.cta__media { margin: 0; border: var(--hair); overflow: hidden; }
@media (max-width: 820px) {
  .cta__grid { grid-template-columns: 1fr; }
  .cta__media { max-width: 22rem; }
}
.cta__media img { display: block; width: 100%; height: 100%; object-fit: cover;
                  aspect-ratio: 1 / 1; object-position: center; }

/* The stealth band takes harbour-dusk as a backdrop rather than a sixth plate,
   so it adds depth without adding page length. Held at 0.16 opacity over
   Basalt: the brightest pixel lands at luminance 55, keeping Parian text at
   11.5:1, comfortably AAA. */
.stealth { position: relative; isolation: isolate; overflow: hidden; }
.stealth::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../../promo/photo/terrain-harbour-dusk.jpg") 29% center / cover no-repeat;
  opacity: .16; }

/* The text sits on the right of the band, still left-aligned within its own
   column so it reads like every other block on the page. That leaves the left
   of the band clear, which is where the photograph's subject is: the pier mass
   measures densest at 29% across, so the backdrop is positioned there rather
   than centred. */
.stealth__body { max-width: 42rem; margin-left: auto; }
@media (max-width: 900px) { .stealth__body { max-width: none; margin-left: 0; } }

/* The mark set into the paragraph that describes it. SVG, so it stays crisp at
   any size, and the file carries no background — it sits on the page ground
   rather than as a tile. Floated so the text wraps around it; shape-outside
   follows the glyph's own alpha, so the wrap hugs the Sigma instead of a box. */
/* Centred in the gutter between the heading column and this one. The offset is
   half the split gap PLUS half the mark's own width: pulling back only half the
   gap puts the mark's left EDGE on the gutter midpoint, which sits it half a
   mark-width too far right. Both halves track the same clamps the grid uses, so
   it stays centred at every width rather than at one breakpoint. */
.mark-inline { float: left; width: clamp(84px, 11vw, 132px); height: auto;
               margin: .1rem 1.1rem .6rem
                       calc(-1 * (clamp(1rem, 3vw, 2.75rem) + clamp(42px, 5.5vw, 66px)));
               shape-outside: url("../../brand/logo/thumbnail/eureon-thumb-marble.svg");
               shape-margin: .6rem; }
@media (max-width: 620px) {
  .mark-inline { float: none; display: block; margin: 0 auto 1.4rem; width: 92px; }  /* no negative offset once columns collapse */
}