/* kirill.green page-specific styles on top of IDS */

.ids {
  /* IDS reset sets img width:100%; height:auto keeps the attr-based
     aspect ratio instead of the literal height presentational hint */
  & img {
    height: auto;
  }

  /* Typography detailing. Headings balance (no lone short last word); the
     tagline instead fills greedily via the p rule below — balancing it made
     the longer PT/RU taglines break mid-phrase ("… Editor / independente"). */
  & h1,
  & h2 {
    text-wrap: balance;
  }

  /* Tagline: one step down the IDS type scale from loud (2em → 1.5em, the
     h3 rung) so it sits closer to the name without losing its lead weight */
  & p.loud {
    font-size: 1.5em;
    line-height: 1.3;
  }

  /* Hero display text (cities + name + tagline) spans the full page column,
     aligning with the cards below. IDS's 85% ids__text-width clamp is a
     body-readability rule that made longer taglines wrap early; Collections
     and the footer (real running text) keep it. */
  & .ids__text-width.hero-width {
    width: 100%;
  }

  & p {
    text-wrap: pretty;
  }

  /* Round avatar-sized portrait */
  & figure.avatar {
    width: 6em;
    --ids__radius: 1.6em;
    margin-bottom: 0;
  }

  /* Intro rhythm: cities label floats free of the name;
     the tagline hugs it */
  & hgroup p {
    color: var(--ids__text-caption);
    margin-bottom: 0.9em;
  }

  & hgroup h1 {
    margin-bottom: 0.12em;
  }

  /* Theme-aware images: follow the site's .dark class, not the OS */
  & .only-dark {
    display: none;
  }

  /* Telegram channel logo in an entry heading */
  & h4 .logo {
    width: 1.3em;
    height: 1.3em;
    display: inline-block;
    border-radius: 50%;
    vertical-align: -0.3em;
    margin-right: 0.15em;
  }

  /* Small label next to a heading: "in Russian", "ex Odigest" */
  & .tag {
    font-size: 0.62em;
    font-weight: 450;
    color: var(--ids__text-caption);
    margin-left: 0.4em;
    white-space: nowrap;
  }

  /* Project cards inside .ids__sequence — surface containers */
  & .card {
    --ids__radius: 1.2em;
    background: var(--ids__surface);
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  & .card figure {
    margin: 0;
  }

  /* Corner geometry: superellipse(2.4) squircle, CROSS-BROWSER.
     IDS ships native corner-shape (Chromium-only) with a mask fallback, but
     its fallback packs the `intersect` keyword into the `mask` shorthand,
     which WebKit's parser rejects — so Safari/Firefox drop to square corners
     (verified in real Safari + IDS's own demo, 2026-07-13). Instead we drive
     one generated 2.4 superellipse mask through mask-composite for EVERY
     engine: identical squircle in Chromium, Safari and Firefox from a single
     asset. Four corner masks, each opaque except a rounded notch, intersected.
     border-radius:0 makes IDS's corner-shape inert so only the mask shapes;
     the card's mask also clips its flush header image, so no per-image radius.
     Regenerate the paths with scratchpad gen-superellipse.mjs to change K. */
  & .ids__rounded,
  & figure.ids__rounded::after {
    border-radius: 0;
    --sq-tl: url('data:image/svg+xml;utf-8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22><path d=%22M0,1L0,1L0.0018,0.897L0.0071,0.8167L0.016,0.7438L0.0285,0.6758L0.0444,0.6116L0.0638,0.5509L0.0867,0.4933L0.113,0.4388L0.1426,0.3873L0.1754,0.3387L0.2116,0.2933L0.2508,0.2508L0.2933,0.2116L0.3387,0.1754L0.3873,0.1426L0.4388,0.113L0.4933,0.0867L0.5509,0.0638L0.6116,0.0444L0.6758,0.0285L0.7438,0.016L0.8167,0.0071L0.897,0.0018L1,0L100,0L100,100L0,100Z%22/></svg>');
    --sq-tr: url('data:image/svg+xml;utf-8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22><path d=%22M0,0L99,0L99,0L99.103,0.0018L99.1833,0.0071L99.2562,0.016L99.3242,0.0285L99.3884,0.0444L99.4491,0.0638L99.5067,0.0867L99.5612,0.113L99.6127,0.1426L99.6613,0.1754L99.7067,0.2116L99.7492,0.2508L99.7884,0.2933L99.8246,0.3387L99.8574,0.3873L99.887,0.4388L99.9133,0.4933L99.9362,0.5509L99.9556,0.6116L99.9715,0.6758L99.984,0.7438L99.9929,0.8167L99.9982,0.897L100,1L100,100L0,100Z%22/></svg>');
    --sq-br: url('data:image/svg+xml;utf-8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22><path d=%22M0,0L100,0L100,99L100,99L99.9982,99.103L99.9929,99.1833L99.984,99.2562L99.9715,99.3242L99.9556,99.3884L99.9362,99.4491L99.9133,99.5067L99.887,99.5612L99.8574,99.6127L99.8246,99.6613L99.7884,99.7067L99.7492,99.7492L99.7067,99.7884L99.6613,99.8246L99.6127,99.8574L99.5612,99.887L99.5067,99.9133L99.4491,99.9362L99.3884,99.9556L99.3242,99.9715L99.2562,99.984L99.1833,99.9929L99.103,99.9982L99,100L0,100Z%22/></svg>');
    --sq-bl: url('data:image/svg+xml;utf-8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22><path d=%22M0,0L100,0L100,100L1,100L1,100L0.897,99.9982L0.8167,99.9929L0.7438,99.984L0.6758,99.9715L0.6116,99.9556L0.5509,99.9362L0.4933,99.9133L0.4388,99.887L0.3873,99.8574L0.3387,99.8246L0.2933,99.7884L0.2508,99.7492L0.2116,99.7067L0.1754,99.6613L0.1426,99.6127L0.113,99.5612L0.0867,99.5067L0.0638,99.4491L0.0444,99.3884L0.0285,99.3242L0.016,99.2562L0.0071,99.1833L0.0018,99.103L0,99Z%22/></svg>');
    -webkit-mask-image: var(--sq-tl), var(--sq-tr), var(--sq-br), var(--sq-bl);
    mask-image: var(--sq-tl), var(--sq-tr), var(--sq-br), var(--sq-bl);
    -webkit-mask-position: top left, top right, bottom right, bottom left;
    mask-position: top left, top right, bottom right, bottom left;
    -webkit-mask-size: calc(var(--ids__radius) * 100);
    mask-size: calc(var(--ids__radius) * 100);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    overflow: hidden;
  }

  & .card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: calc(var(--ids__density) * 0.7em) calc(var(--ids__density) * 0.8em)
      calc(var(--ids__density) * 0.8em);
  }

  & .card .card-body > :last-child {
    margin-bottom: 0;
  }

  /* Link rows sit on one line across a card row. Scoped to .card — it's the
     only place entry-links survive now that Collections is a ledger. */
  & .card .entry-links {
    font-size: 0.9em;
    margin-top: auto;
    padding-top: calc(var(--ids__density) * 0.35em);
  }

  /* A surface that isn't shipped yet: named, but not a link — it stays body
     text at 60%, so "dim + unlinked" reads as "in progress" against the
     brand-coloured links beside it. Shipped surfaces come first in the row,
     unshipped ones trail; the row is the roadmap, not just an index of
     what's live. */
  & .card .entry-links .wip {
    opacity: 0.6;
  }

  /* Legend for the dimming above — the convention isn't self-evident, so the
     startup grid states it once underneath rather than per card. Footer's
     p.caption is footer-scoped, hence its own rule here. */
  & .wip-note {
    font-size: 0.8em;
    color: var(--ids__text-caption);
    margin-top: calc(var(--ids__density) * 0.15em);
    margin-bottom: 0;
  }

  & footer {
    padding: 0;

    & p.caption {
      font-size: 0.8em;
      color: var(--ids__text-caption);
      margin-bottom: 0.3em;

      & a {
        color: inherit;
      }
    }
  }

  /* Subtle 1px outline on standalone photos: pure black/white so it reads
     as edge, not dirt; drawn as an overlay so the squircle clip applies */
  & figure.ids__rounded {
    position: relative;
  }

  & figure.ids__rounded::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
    pointer-events: none;
    /* mask + border-radius:0 inherited from the .ids__rounded group above,
       so this 1px outline is clipped to the same squircle */
  }
}

.dark .ids figure.ids__rounded::after,
.ids.dark figure.ids__rounded::after {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

.dark .ids .only-light {
  display: none;
}

.dark .ids .only-dark {
  display: block;
}

/* Brand-tinted card surfaces — barely-there washes of each channel's
   own color; Okhuenno wears lilac */
.ids .card.brand-zhurnalus { background: rgb(228, 246, 226); }
.ids .card.brand-odi { background: rgb(252, 246, 219); }
.ids .card.brand-uxfromhell { background: rgb(251, 235, 232); }
.ids .card.brand-rational { background: rgb(252, 241, 228); }
.ids .card.brand-recursion { background: rgb(239, 241, 243); }
.ids .card.brand-kirya { background: rgb(230, 244, 235); }
.ids .card.brand-kirya-builds { background: rgb(252, 240, 228); }
.ids .card.brand-okhuenno { background: rgb(242, 237, 250); }

/* Links inside branded cards take the brand's color; hover deepens
   the same hue in light theme and brightens it in dark.
   Zhurnalus and Kirya are green-linked cards — they inherit the site's
   default green link+hover, so they need no override here. */
.ids .card.brand-odi { --ids__link: rgb(139, 98, 0); --ids__hover: rgb(99, 69, 0); }
.ids .card.brand-uxfromhell { --ids__link: rgb(190, 32, 42); --ids__hover: rgb(138, 15, 25); }
.ids .card.brand-rational,
.ids .card.brand-kirya-builds { --ids__link: rgb(173, 78, 6); --ids__hover: rgb(126, 55, 2); }
.ids .card.brand-okhuenno { --ids__link: rgb(115, 70, 185); --ids__hover: rgb(82, 45, 145); }
.ids .card.brand-recursion { --ids__link: rgb(85, 95, 110); --ids__hover: rgb(48, 56, 68); }

.dark .ids .card.brand-odi { --ids__link: rgb(224, 186, 92); --ids__hover: rgb(245, 216, 145); }
.dark .ids .card.brand-uxfromhell { --ids__link: rgb(255, 130, 125); --ids__hover: rgb(255, 175, 170); }
.dark .ids .card.brand-rational,
.dark .ids .card.brand-kirya-builds { --ids__link: rgb(242, 158, 106); --ids__hover: rgb(250, 195, 155); }
.dark .ids .card.brand-okhuenno { --ids__link: rgb(190, 165, 245); --ids__hover: rgb(215, 195, 255); }
.dark .ids .card.brand-recursion { --ids__link: rgb(160, 170, 185); --ids__hover: rgb(205, 212, 224); }

.dark .ids .card.brand-zhurnalus { background: rgb(29, 41, 31); }
.dark .ids .card.brand-odi { background: rgb(42, 39, 26); }
.dark .ids .card.brand-uxfromhell { background: rgb(44, 31, 30); }
.dark .ids .card.brand-rational { background: rgb(44, 36, 28); }
.dark .ids .card.brand-recursion { background: rgb(32, 33, 36); }
.dark .ids .card.brand-kirya { background: rgb(28, 39, 33); }
.dark .ids .card.brand-kirya-builds { background: rgb(44, 36, 28); }
.dark .ids .card.brand-okhuenno { background: rgb(38, 33, 46); }

/* Startup cards — same treatment, each in its product's own brand color:
   Bookov monochrome, KARDO azure, LYRA deep navy, Radaric green. */
.ids .card.brand-bookov { background: rgb(242, 242, 243); }
.ids .card.brand-kardo { background: rgb(230, 240, 251); }
.ids .card.brand-lyra { background: rgb(233, 237, 244); }
.ids .card.brand-radaric { background: rgb(230, 244, 236); }

.ids .card.brand-bookov { --ids__link: rgb(38, 38, 40); --ids__hover: rgb(0, 0, 0); }
.ids .card.brand-kardo { --ids__link: rgb(0, 106, 202); --ids__hover: rgb(0, 78, 155); }
.ids .card.brand-lyra { --ids__link: rgb(28, 54, 92); --ids__hover: rgb(16, 34, 64); }
.ids .card.brand-radaric { --ids__link: rgb(28, 118, 76); --ids__hover: rgb(18, 92, 60); }

.dark .ids .card.brand-bookov { --ids__link: rgb(228, 228, 230); --ids__hover: rgb(255, 255, 255); }
.dark .ids .card.brand-kardo { --ids__link: rgb(92, 168, 255); --ids__hover: rgb(150, 200, 255); }
.dark .ids .card.brand-lyra { --ids__link: rgb(150, 178, 214); --ids__hover: rgb(190, 210, 236); }
.dark .ids .card.brand-radaric { --ids__link: rgb(118, 208, 158); --ids__hover: rgb(158, 228, 194); }

.dark .ids .card.brand-bookov { background: rgb(31, 31, 33); }
.dark .ids .card.brand-kardo { background: rgb(20, 29, 43); }
.dark .ids .card.brand-lyra { background: rgb(23, 29, 40); }
.dark .ids .card.brand-radaric { background: rgb(27, 39, 32); }

/* Consulting offer cards — Kirya's identity-green wash, green-linked (no
   link override); the offer is Kirill himself, not a separate brand. */
.ids .card.brand-consulting { background: rgb(230, 244, 235); }
.dark .ids .card.brand-consulting { background: rgb(28, 39, 33); }

/* The price line is pinned to the card's bottom edge (same margin-top: auto
   trick as .entry-links) and wears the zone's link green — the three prices
   align on one baseline across the row. Sized to the card's h4 exactly
   (1.1em/600), so name and price bracket the card at equal weight. */
.ids .card .price {
  font-size: 1.1em;
  font-weight: 600;
  line-height: var(--ids__density);
  color: var(--ids__link);
  margin-top: auto;
  padding-top: calc(var(--ids__density) * 0.45em);
}

/* RU-only payment note (rubles via ИП, or EUR/USD via Stripe) — same
   muted-caption treatment as .wip-note. */
.ids .consulting-payment-note {
  font-size: 0.8em;
  color: var(--ids__text-caption);
  margin-top: calc(var(--ids__density) * 0.15em);
}

/* Uneven 2/3 + 1/3 split, not IDS's default equal-width sequence: width
   signals emphasis — individuals is the primary audience this section is
   written for, so it gets the wide column and carries the concrete example
   engagements + the "first session is an hour" line; companies is the
   pricier, secondary lane and stays a single short line. */
.ids .consulting-offers .ids__sequence-item:first-child {
  width: calc((100% - var(--gap)) * 2 / 3);
}
.ids .consulting-offers .ids__sequence-item:last-child {
  width: calc((100% - var(--gap)) / 3);
}

@media (width < 768px) {
  .ids .consulting-offers .ids__sequence-item:first-child,
  .ids .consulting-offers .ids__sequence-item:last-child {
    width: 100%;
  }
}

/* Ledger — an editorial "index", deliberately NOT a card. Shared by Agent
   Skills and Collections: every other section is an image-card grid, so more
   of them would over-unify the page. Full-width rows with hairline rules, a
   badge on the left linking out, description alongside; stacks to one column
   on mobile.

   The badge takes its colour from --ids__link, so it inherits whatever zone
   it sits in: Collections is site-green by default, Agent Skills is orange
   because .agent-skills scopes the token (same mechanism as a branded card).
   Two badge flavours — Agent Skills wraps a <code> (a slash-command really is
   code, and IDS already styles code as a chip); Collections badges are plain
   labels, so .is-label replicates that chip look on the link itself. */
.ids .agent-skills {
  --ids__link: rgb(173, 78, 6);
  --ids__hover: rgb(126, 55, 2);
}

.dark .ids .agent-skills {
  --ids__link: rgb(242, 158, 106);
  --ids__hover: rgb(250, 195, 155);
}

.ids .ledger {
  margin: 0;
}

.ids .ledger .ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 15em) 1fr;
  gap: 0.4em 2em;
  align-items: baseline;
  padding: calc(var(--ids__density) * 0.55em) 0;
  border-top: var(--ids__border-width-s) solid
    color-mix(in srgb, var(--ids__text) 12%, transparent);
}

.ids .ledger .ledger-row:last-child {
  border-bottom: var(--ids__border-width-s) solid
    color-mix(in srgb, var(--ids__text) 12%, transparent);
}

.ids .ledger dt,
.ids .ledger dd {
  margin: 0;
}

/* Drop the link underline; the chip + hue shift carry the affordance. */
.ids .ledger .ledger-badge {
  text-decoration: none;
}

.ids .ledger .ledger-badge code,
.ids .ledger .ledger-badge.is-label {
  color: var(--ids__link);
  border: var(--ids__border-width-s) solid
    color-mix(in srgb, var(--ids__link) 22%, transparent);
  background: color-mix(in srgb, var(--ids__link) 8%, transparent);
  transition:
    color var(--ids__duration-base) var(--ids__easing-base),
    background-color var(--ids__duration-base) var(--ids__easing-base),
    border-color var(--ids__duration-base) var(--ids__easing-base);
}

/* .is-label carries the chip geometry itself (IDS's code rule gives the
   Agent Skills badge the same metrics for free) */
.ids .ledger .ledger-badge.is-label {
  display: inline-block;
  font-size: 0.9em;
  letter-spacing: 0.02em;
  font-weight: 450;
  padding: 0.1em 0.25em;
  border-radius: var(--ids__radius-s);
}

/* :focus-visible mirrors :hover — otherwise keyboard users get only the
   reset's outline and none of the chip feedback a mouse user gets. */
.ids .ledger .ledger-badge:hover code,
.ids .ledger .ledger-badge:focus-visible code,
.ids .ledger .ledger-badge.is-label:hover,
.ids .ledger .ledger-badge.is-label:focus-visible {
  color: var(--ids__hover);
  background: color-mix(in srgb, var(--ids__link) 14%, transparent);
  border-color: color-mix(in srgb, var(--ids__link) 34%, transparent);
}

/* Stack badge over description on the narrow mobile column */
@media (width < 768px) {
  .ids .ledger .ledger-row {
    grid-template-columns: 1fr;
    gap: 0.3em;
  }

  /* the badge is inline-block, so keep it hugging its text, not the column */
  .ids .ledger dt {
    justify-self: start;
  }
}

/* Language switcher — text only (EN · RU · PT), no flags. Sits in the
   content's top-right corner (anchored to .ids__wrapper, which is relative),
   aligned with the avatar's top so it caps the layout rectangle. Active
   language in the link color, the rest quiet (caption tone). */
.ids .lang-switch {
  position: absolute;
  top: calc(var(--ids__spacer-xl) - 0.4em);
  right: -0.35em;
  display: flex;
  align-items: center;
  gap: 0.1em;
  font-size: 0.8em;
  letter-spacing: 0.03em;
  z-index: 5;
}

/* On mobile the wrapper gains side padding (desktop has none), so the -0.35em
   that hugs the desktop content edge overshoots the viewport here. Re-align to
   the content edge: wrapper padding minus the link's own right padding. */
@media (width < 768px) {
  .ids .lang-switch {
    right: calc(var(--ids__density) * 0.6rem - 0.35em);
  }
}

.ids .lang-switch a {
  color: var(--ids__text-caption);
  text-decoration: none;
  padding: 0.5em 0.35em;
  transition: color var(--ids__duration-fast) var(--ids__easing-base);
}

.ids .lang-switch a:hover {
  color: var(--ids__link);
}

.ids .lang-switch a[aria-current="page"] {
  color: var(--ids__link);
  font-weight: 600;
}

.ids .lang-switch span {
  color: var(--ids__text-caption);
  opacity: 0.5;
}

/* Footer contact line — the email link stays site-green (default); the
   Telegram @handle drops the word "Telegram" and wears Telegram's own brand
   blue, deepening on hover (brightening in dark). Scoped so it overrides the
   green only on this one link. */
.ids footer .tg-link {
  --ids__link: rgb(34, 158, 217);
  --ids__hover: rgb(20, 118, 168);
}

.dark .ids footer .tg-link {
  --ids__link: rgb(76, 181, 234);
  --ids__hover: rgb(124, 203, 242);
}

/* The X handle wears X's monochrome — same opt-in mechanism as .tg-link,
   same near-black/near-white pair as the Bookov card, so "black link"
   survives the dark theme. */
.ids footer .x-link {
  --ids__link: rgb(38, 38, 40);
  --ids__hover: rgb(0, 0, 0);
}

.dark .ids footer .x-link {
  --ids__link: rgb(228, 228, 230);
  --ids__hover: rgb(255, 255, 255);
}