/* antonillarionov.com · obsidian.
   The calm dark room of the ODEI app (obsidian-calm-quiet): black glass, paper ink, and ODEI's World Model, a Liquid
   Gold globe beside the name. Silver marks the machine (domains, dates, hairlines, the globe's sea); gold is an event:
   the lights on the globe, the primary product, the trade mark. Self-hosted only: this file, globe.js, land.js and the
   brand font. No inline styles or scripts (strict CSP). */

@font-face {
  font-family: "Google Sans Flex";
  src: url("/assets/google-sans-flex-latin.5dd2c8c51dee.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallback so the swap to the brand font does not move the page. */
@font-face {
  font-family: "GSF Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto");
  size-adjust: 101%;
  ascent-override: 95.6%;
  descent-override: 28.3%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;

  /* Glass: five steps of black with the faintest warm cast. */
  --void: #060607;
  --ob-0: #09090b;
  --ob-1: #0d0d10;
  --ob-2: #121215;
  --ob-3: #17171b;

  /* Paper ink (calm: one step off white). */
  --paper: #e4e1db;
  --paper-2: #bdb9b2;
  --paper-3: #97938b;
  --hair: rgb(255 255 255 / 6%);
  --hair-2: rgb(255 255 255 / 8.5%);
  --hair-3: rgb(255 255 255 / 12.5%);

  /* Gold = the human and value. Matte. */
  --champagne: 229 214 182;
  --gold-hi: #e5d6b6;
  --gold: #d3bb8d;
  --gold-mid: #bba074;
  --gold-text: linear-gradient(180deg, #e6d6b2 0%, #d0b685 100%);

  /* Silver = the machine. Brushed. */
  --silver-hi: #dfe1e5;
  --silver: #b3b7be;
  --silver-2: #9ea3aa;

  --ease: cubic-bezier(.25, .7, .3, 1);
  --sans: "Google Sans Flex", "GSF Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --gutter: 22px;
  --rail: 0px;
  --col-gap: 0px;
}
@media (min-width: 720px) { :root { --gutter: 40px; } }
@media (min-width: 960px) { :root { --gutter: 56px; --rail: 220px; --col-gap: 48px; } }
@media (min-width: 1280px) { :root { --rail: 260px; --col-gap: 64px; } }

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

html {
  background: var(--ob-0);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(1200px 520px at 78% -160px, rgb(var(--champagne) / 2.4%), transparent 70%),
    radial-gradient(900px 600px at -10% 110%, rgb(200 210 230 / 1.4%), transparent 70%),
    var(--ob-0);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 380;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: rgb(211 187 141 / 30%); color: var(--paper); }

/* Anton's rule: no focus rings or square focus boxes anywhere. Keyboard focus is shown the way hover is (colour,
   hairline, arrow), never as an outline. */
:focus, :focus-visible { outline: none; }
a { -webkit-tap-highlight-color: transparent; }

h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
/* No one-word last lines ("founder." alone at 360px, "world." alone under a product headline). */
p, dd, .product-line { text-wrap: pretty; }
ol, ul { padding: 0; list-style: none; }

.wrap { width: min(1120px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- Hero: the name and the World Model (beside it on wide screens, under it on phones) ---------- */
.hero {
  --globe-d: min(76vw, 316px); /* the sphere's diameter (a phone holds it like a coin: big enough to turn with a thumb); the canvas box adds air for its halo */
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: clamp(500px, 70svh, 680px); /* 76svh left ~220px of dead black above the name on a 900px laptop */
}
.hero-copy {
  align-self: end;
  padding-top: 120px;
  padding-bottom: 28px;
}
h1 {
  font-size: clamp(46px, 7.4vw, 108px);
  line-height: 1;
  font-weight: 420;
  font-variation-settings: "opsz" 144;
  letter-spacing: -.034em; /* -.04em packed the "Ill" of Illarionov into a picket fence */
  color: var(--paper);
  text-wrap: balance;
}
.hero-role {
  margin-top: clamp(18px, 2.2vw, 28px);
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.3;
  font-weight: 380;
  letter-spacing: -.012em;
  color: var(--paper-2);
}
.hero-company {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 450;
  letter-spacing: .01em;
  color: var(--silver-2);
}

/* The World Model: ODEI's globe (globe.js), gold land for the human, silver sea and threads for the machine. The canvases
   fill a box of fixed size, so nothing on the page moves. It can be touched (a drag turns it, a click or tap drops gold),
   but it never takes the page's vertical scroll: touch-action pan-y hands every vertical swipe straight to the browser.
   The cursor changes only over the sphere itself (globe.js sets .is-hot there). */
.globe {
  position: relative;
  height: calc(var(--globe-d) * 1.2);
  margin-top: -12px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overflow: clip; /* the glow canvas rounds up to whole glyph cells; its last sliver of empty air never widens the page */
}
.globe.is-hot { cursor: pointer; }
.globe canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.globe.is-ready canvas { opacity: 1; }
/* The light on the metal and the glow (one pixel per glyph cell, stretched and blurred) add light: screen blending. */
.globe .globe-fx { mix-blend-mode: screen; }
.globe .globe-glow { mix-blend-mode: screen; filter: blur(9px); }
.globe.is-ready .globe-glow { opacity: .5; }
@media (max-width: 719px) { .globe .globe-glow { filter: blur(6px); } }
/* Wide screens: the globe stands beside the name, its right edge on the column's right edge (where the product
   arrows end), centred in a hero short enough that all of "Building now" stays on the first screen of a laptop. */
@media (min-width: 720px) {
  .hero { --globe-d: min(440px, 38vw, 50svh); min-height: clamp(440px, 60svh, 580px); }
  .globe {
    position: absolute;
    z-index: 1;
    top: calc(50% - var(--globe-d) * .65);
    right: max(0px, calc(max(var(--gutter), (100% - 1120px) / 2) - var(--globe-d) * .15)); /* never past the screen's edge (768 to 1200 px) */
    width: calc(var(--globe-d) * 1.3);
    height: calc(var(--globe-d) * 1.3);
    margin: 0;
  }
}
/* Portrait screens: the name sits at a fixed distance from the top instead of at the foot of a tall empty hero. */
@media (orientation: portrait) and (min-width: 600px) {
  .hero { min-height: 0; }
  .hero-copy { padding-top: 152px; }
}
@media (orientation: portrait) and (min-width: 720px) { .hero { min-height: calc(var(--globe-d) * 1.3 + 40px); } }
@media (max-width: 599px) {
  .hero { min-height: 0; }
  .hero-copy { padding-top: 96px; }
}

/* Entrance: the copy settles once (transform and opacity only, no layout shift). */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: settle 1.1s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: .12s; }
  .hero-copy > :nth-child(3) { animation-delay: .24s; }
  @keyframes settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .globe canvas { transition: none; }
  .globe { pointer-events: none; } /* one still frame: nothing to turn, so no cursor and no touch target either */
}

/* ---------- Bands: one column of truth, a silver rail for the machine marks ---------- */
.band {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: var(--col-gap);
  padding-block: 72px;
  border-top: 1px solid var(--hair-2);
}
/* The hero already carries air below the name (and the globe's box on phones), so the first band starts close under it. */
.band:first-child { border-top-color: transparent; padding-top: 8px; }
.band > * { grid-column: 2; }
.band > .band-title { grid-column: 1 / -1; }
@media (min-width: 960px) {
  .band { padding-block: 88px; }
  .band:first-child { padding-top: 16px; }
}

.band-title {
  margin-bottom: 36px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 520;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--silver-2);
}
@media (min-width: 960px) { .band-title { margin-bottom: 48px; } }

/* ---------- Building now ---------- */
.products { border-top: 1px solid var(--hair); }
.products li { border-bottom: 1px solid var(--hair); }
.product {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  grid-template-areas: "domain arrow" "line arrow";
  row-gap: 6px;
  align-items: center;
  padding: 22px 0 24px; /* flush with the section label and the hairlines; the wash below bleeds past the text */
  color: inherit;
  text-decoration: none;
}
/* Row wash: a soft rounded pane that bleeds 12px past the column, so the text itself stays on the grid. */
.product::before {
  content: "";
  position: absolute;
  inset: 1px -12px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0%);
  pointer-events: none;
  transition: background-color .4s var(--ease);
}
.product-domain {
  grid-area: domain;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--silver);
  transition: color .4s var(--ease);
}
.product-line {
  grid-area: line;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -.012em;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: transparent;
  transition: text-decoration-color .35s ease;
}
.product.is-primary .product-domain {
  color: var(--gold);
  background: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.arrow {
  grid-area: arrow;
  justify-self: end;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--silver-2);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .45s var(--ease), stroke .3s ease;
}
/* Hover only where a real pointer hovers (no sticky wash after a tap); keyboard focus always gets the full state,
   carried by a champagne underline under the sentence, never by an outline (Anton's rule). */
@media (hover: hover) {
  .product:hover::before { background-color: rgb(255 255 255 / 2.6%); }
  .product:hover .product-domain { color: var(--silver-hi); }
  .product:hover .arrow { transform: translate(2px, -2px); stroke: var(--paper); }
  .product.is-primary:hover .arrow { stroke: var(--gold); }
}
.product:focus-visible::before { background-color: rgb(255 255 255 / 4.5%); }
.product:focus-visible .product-domain { color: var(--silver-hi); }
.product:focus-visible .product-line { text-decoration-color: rgb(var(--champagne) / 75%); }
.product:focus-visible .arrow { transform: translate(2px, -2px); stroke: var(--gold); }
@media (min-width: 960px) {
  /* The domain steps out into the rail: the machine mark on the left, the human sentence on the right. */
  .products { margin-left: calc(-1 * (var(--rail) + var(--col-gap))); }
  .product {
    grid-template-columns: calc(var(--rail) + var(--col-gap)) minmax(0, 1fr) 20px;
    grid-template-areas: "domain line arrow";
    padding: 26px 0 28px;
  }
  .product-domain { font-size: 14.5px; }
}

/* ---------- Experience: a track record ---------- */
.entry {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: var(--col-gap);
}
.entry + .entry { margin-top: 72px; padding-top: 72px; border-top: 1px solid var(--hair); }
@media (min-width: 960px) { .entry + .entry { margin-top: 88px; padding-top: 88px; } }
.entry-rail { grid-column: 1; }
.entry-body { grid-column: 2; max-width: 700px; }
@media (max-width: 959px) {
  .entry { grid-template-columns: minmax(0, 1fr); }
  .entry-rail, .entry-body { grid-column: 1; }
  .entry-rail { order: 2; margin-top: 8px; margin-bottom: 22px; }
  .entry-body { display: contents; }
  .entry-name { order: 1; }
  .entry-body > :not(.entry-name) { order: 3; }
}
.entry-dates {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
.entry-role {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--paper-2);
}
@media (min-width: 960px) {
  .entry-rail { padding-top: 14px; }
  .entry-role { margin-top: 6px; }
}
.entry-name {
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.05;
  font-weight: 430;
  font-variation-settings: "opsz" 96;
  letter-spacing: -.03em;
}
.entry-name a {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .14em;
  text-decoration-color: transparent;
  transition: color .35s var(--ease), text-decoration-color .35s var(--ease);
}
/* Paper to gold-hi alone is almost the same luminance, so the state is carried by a champagne underline too. */
@media (hover: hover) { .entry-name a:hover { color: var(--gold-hi); text-decoration-color: rgb(var(--champagne) / 55%); } }
.entry-name a:focus-visible { color: var(--gold-hi); text-decoration-color: rgb(var(--champagne) / 80%); }
.entry-lead {
  margin-top: 18px;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 450;
  color: var(--paper);
}
.entry-text {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--paper-2);
}
.entry-mark {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper-3);
}
.entry-mark .gold { font-weight: 520; }

.figure {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 28px;
  margin-bottom: 4px;
}
/* The figure is a fact, not a billboard: it stays under the company name's weight class and well under the H1. */
.figure-value {
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1;
  font-weight: 340;
  font-variation-settings: "opsz" 144;
  letter-spacing: -.035em;
  font-variant-numeric: lining-nums;
  color: var(--paper);
}
.figure-unit {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 420;
  letter-spacing: .02em;
  color: var(--silver);
}

.record {
  display: grid;
  gap: 26px 40px;
  margin-top: 36px;
  padding-top: 30px;
  border-top: 1px solid var(--hair);
}
@media (min-width: 720px) { .record { grid-template-columns: 1fr 1fr; } }
/* Sentence case: the section labels are the only tracked capitals on the page, so the record reads as prose. */
.record dt {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 520;
  letter-spacing: -.005em;
  color: var(--paper);
}
.record dd {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--paper-2);
}

/* Inline links: a paper hairline that turns champagne. */
.record a {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgb(255 255 255 / 26%);
  transition: color .3s ease, text-decoration-color .3s ease;
}
@media (hover: hover) { .record a:hover { color: var(--gold-hi); text-decoration-color: rgb(var(--champagne) / 70%); } }
.record a:focus-visible { color: var(--gold-hi); text-decoration-color: rgb(var(--champagne) / 90%); text-decoration-thickness: 2px; }

.gold {
  color: var(--gold);
  background: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Contact: the ODEI pills (buttons-gold, calm volume) ---------- */
.contact { display: flex; flex-wrap: wrap; gap: 12px; }
.pill {
  --rim: linear-gradient(115deg, rgb(var(--champagne) / 55%), rgb(255 255 255 / 16%) 40%, rgb(255 255 255 / 10%) 65%, rgb(var(--champagne) / 30%));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--paper);
  background: rgb(255 255 255 / 5%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
  transition: background-color .3s ease, color .3s ease, transform .18s cubic-bezier(.2, .7, .2, 1);
}
.pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (hover: hover) { .pill:hover { background: rgb(255 255 255 / 10%); color: #f2efe9; } }
/* Keyboard focus: the glass fills and its own champagne rim brightens (the rim is the pill's edge, not an added ring). */
.pill:focus-visible {
  --rim: linear-gradient(115deg, rgb(var(--champagne) / 95%), rgb(var(--champagne) / 55%) 50%, rgb(var(--champagne) / 90%));
  background: rgb(255 255 255 / 15%);
  color: #f6f3ee;
}
.pill:active { transform: scale(.97); }
@media (max-width: 400px) { .contact { gap: 10px; } .pill { min-width: 72px; padding: 0 20px; } }

/* Primary: the warm paper pill; one slow band of champagne crosses it on hover. */
.pill-primary {
  --rim: linear-gradient(115deg, rgb(var(--champagne) / 95%), rgb(255 255 255 / 0%) 45%, rgb(255 255 255 / 0%) 70%, rgb(var(--champagne) / 70%));
  background: #ebe7df;
  color: #111;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%);
}
.pill-primary::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 40%, rgb(var(--champagne) / 0%) 42%, rgb(222 186 118 / 55%) 50%, rgb(var(--champagne) / 0%) 58%, transparent 60%) no-repeat;
  background-size: 260% 100%;
  background-position: 110% 0;
  mix-blend-mode: multiply;
}
@media (hover: hover) { .pill-primary:hover { background: #f3efe7; color: #000; } }
/* #ebe7df to #f3efe7 is invisible to a keyboard user; focus turns the paper to champagne instead. */
.pill-primary:focus-visible { background: var(--gold-hi); color: #000; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .pill-primary:hover::after { animation: sweep 1.9s cubic-bezier(.4, .12, .3, 1) both; }
  @keyframes sweep { 0% { opacity: 1; background-position: 110% 0; } 88% { opacity: 1; } 100% { opacity: 0; background-position: -10% 0; } }
}

/* ---------- Footer ---------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 32px 48px;
  border-top: 1px solid var(--hair-2);
  font-size: 14px;
  line-height: 1.5;
  color: var(--paper-3);
}
.foot .gold { font-weight: 520; }

/* ---------- 404 ---------- */
.nf {
  display: grid;
  align-content: center;
  min-height: 100svh;
  padding-block: 64px;
}
.nf h1 { font-size: clamp(72px, 14vw, 160px); color: var(--paper-3); }
.nf a {
  justify-self: start;
  margin-top: 28px;
  font-size: 20px;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: rgb(var(--champagne) / 40%);
}
@media (hover: hover) { .nf a:hover { color: var(--gold-hi); text-decoration-color: rgb(var(--champagne) / 80%); } }
.nf a:focus-visible { color: var(--gold-hi); text-decoration-color: rgb(var(--champagne) / 90%); text-decoration-thickness: 2px; }

/* ---------- Forced colours (Windows contrast themes): clipped-gradient text would be transparent, so give it ink ---------- */
@media (forced-colors: active) {
  .gold, .product.is-primary .product-domain { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
  .globe { display: none; }
  .pill { border: 1px solid ButtonText; }
  .product:focus-visible .product-line, .entry-name a:focus-visible { text-decoration-color: Highlight; }
}

/* ---------- Print: a due-diligence page gets printed and saved as PDF. Ink on paper, no globe, links spelled out. ---------- */
@media print {
  @page { margin: 18mm 16mm; }
  html, body { background: #fff !important; color: #111; font-size: 11pt; }
  :root { --paper: #111; --paper-2: #333; --paper-3: #555; --silver: #444; --silver-2: #555; --hair: #ccc; --hair-2: #ccc; }
  .globe { display: none; }
  .hero { min-height: 0; }
  .hero-copy { padding: 0 0 12pt; animation: none; }
  .hero-copy > * { animation: none !important; }
  h1 { font-size: 34pt; }
  .band { padding-block: 16pt; break-inside: auto; }
  .entry { break-inside: avoid; }
  .entry + .entry { margin-top: 16pt; padding-top: 16pt; }
  .gold, .product.is-primary .product-domain { background: none; -webkit-text-fill-color: currentColor; color: #7a5a1e; }
  .product::before, .arrow, .pill::before, .pill::after { display: none; }
  .figure-value { font-size: 30pt; }
  .pill { display: inline; height: auto; min-width: 0; padding: 0; overflow: visible; background: none !important; box-shadow: none; color: #111; }
  .contact { gap: 6pt 18pt; }
  .pill[href^="http"]::after, .pill[href^="mailto"]::after { content: attr(href); display: inline; position: static; margin-left: .5em; opacity: 1; background: none; color: #444; mix-blend-mode: normal; }
}

/* After the judges: the last product row's hairline and the next band's top rule drew a double line with an empty gap
   (read as a missing row). The band rule alone closes the list. */
.products li:last-child { border-bottom: 0; }

/* Company marks (Anton, Oct 29): the official ODEI orbit mark (odei.ai) and the Aegis mark (aegis.im, monochrome
   variant), recoloured to the page's paper ink so mark and name are one tone. Sized from the heading's em, so they
   scale with it on phones; decorative (alt=""), the name stays the link text. */
.entry-name a { display: inline-flex; align-items: center; gap: .3em; }
.entry-name a > span { text-decoration: inherit; }
.entry-logo { flex: none; width: auto; display: block; }
.entry-logo--odei { height: .84em; } /* a fine line mark: one step larger than the solid Aegis mark to read at the same weight */
.entry-logo--aegis { height: .84em; transform: translateY(-.02em); }
@media (max-width: 719px) { .entry-name a { gap: .26em; } }

/* Phones held sideways (short landscape): the 440px hero minimum was taller than the screen and pushed the name to the
   foot of an empty black band. The hero is as tall as the globe, the name sits at its middle beside it. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 720px) {
  .hero { --globe-d: min(300px, 34vw, 64svh); min-height: calc(var(--globe-d) * 1.3 + 24px); }
  .hero-copy { align-self: center; padding-top: 72px; padding-bottom: 12px; }
}

/* Company tags, as on the old site (Anton, Oct 29: only the old site's texts about the companies): the two badges
   "Built entirely from scratch" and "Built end-to-end with AI as co-founder" return as small tracked tags, not as lead
   sentences. Silver: they describe how the work was built. */
.entry-tag {
  margin: 18px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  font-weight: 520;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--silver-2);
}
.entry-tag + .entry-text, .entry-tag + .figure { margin-top: 18px; }
.entry-text + .entry-text { margin-top: 12px; }