/* CHARUS shared visual system.
   Keep this file limited to site-wide tokens, theme metrics and base utilities.
   Page composition and header presentation belong to their own modules. */
:root{
  --bg:#F5F2EC;
  --bg2:#F1EEE7;
  --bg-rgb:245,242,236;
  --ink:#0F1011;
  --hair:#D8D1C8;
  --accent:#FF4A00;
  --copy:#3A3631;
  --muted:#AAA49D;
  --optical-weight-t:0;
  --headline-weight:calc(235 + 15 * var(--optical-weight-t));
  --body-copy-weight:calc(350 + 15 * var(--optical-weight-t));
  --body-copy-tracking:-.003em;
  --headline-grade-stroke:calc(.12px + .03px * var(--optical-weight-t));
  --body-grade-stroke:calc(.10px - .01px * var(--optical-weight-t));

  /* Major independent page-section boundaries use one restrained theme-aware
     hairline. Internal/subsection borders do not consume this token. */
  --site-section-boundary-color:color-mix(in srgb,var(--hair) 72%,transparent);

  /* Shared paired-content geometry. Home's approved composition supplied the
     initial values; Home, Contact and future paired sections consume the same
     tokens so later deliberate layout changes have one owner. */
  --site-pair-side:8vw;
  --site-pair-gutter:clamp(5.5rem,6.5vw,8.5rem);
  --site-pair-wide-major:760px;
  --site-pair-wide-minor:610px;
  --site-pair-content-edge:var(--site-pair-side);
}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0C0E10;
  --bg2:#13171B;
  --bg-rgb:12,14,16;
  --ink:#F4F0E9;
  --hair:#394148;
  --accent:#25C9FF;
  --copy:#D9D2CA;
  --muted:#7E8891;
  --headline-weight:calc(235 + 15 * var(--optical-weight-t));
  --body-copy-weight:calc(350 + 15 * var(--optical-weight-t));
  --body-copy-tracking:-.003em;
  --headline-grade-stroke:0px;
  --body-grade-stroke:0px;
}
*{box-sizing:border-box}
.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
html{scroll-behavior:auto}
body{
  margin:0;
  font-family:"CHARUS Inter",Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--ink);
}
.accent{color:var(--accent)}

/* Major section boundary. This shared role separates independent sibling page
   sections; internal legal, form, control, media and tooltip hairlines remain
   locally owned. Home and Contact still carry compatibility declarations in
   page CSS, so these semantic adapters deliberately outrank those legacy rules. */
.site-section-boundary,
body[data-page="home"] .section,
body[data-page="contact"] .legal-section,
body[data-page="about"] .about-section:not(:first-child){
  border-top:1px solid var(--site-section-boundary-color);
}

/* Shared CHARUS tooltip surface. Context owners still decide copy, trigger,
   placement and lifecycle; this primitive owns only the visual surface. */
.charus-tooltip{
  position:fixed;
  z-index:120;
  left:0;
  top:0;
  width:max-content;
  max-width:min(18rem,70vw);
  padding:.48rem .62rem;
  border:1px solid color-mix(in srgb,var(--hair) 84%,transparent);
  background:color-mix(in srgb,var(--bg) 97%,var(--ink) 3%);
  color:var(--copy);
  box-shadow:0 3px 12px color-mix(in srgb,var(--ink) 10%,transparent);
  font-family:"CHARUS Inter",Arial,Helvetica,sans-serif;
  font-size:.72rem;
  font-weight:400;
  line-height:1.35;
  letter-spacing:0;
  white-space:normal;
  opacity:0;
  visibility:hidden;
  pointer-events:auto;
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
}
.charus-tooltip[data-placement="below-end"]{
  transform:translateY(-4px);
}
.charus-tooltip[data-placement="below-end"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:100%;
  height:.5rem;
  background:transparent;
}
.charus-tooltip.is-visible,
.charus-tooltip[data-placement="below-end"].is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
  transition-delay:0s;
}
@media(prefers-reduced-motion:reduce){
  .charus-tooltip{transition:none}
}

/* Shared editorial action link. New consumers use .editorial-action-link.
   Home's .about-contact-action remains as a compatibility adapter because the
   frozen Home layer and language adapter already depend on that hook. Typography
   and resting color remain with the surrounding editorial context, while this
   primitive owns action affordance, focus treatment and compact/touch behavior. */
body :is(.editorial-action-link,.about-contact-action){
  display:inline-flex;
  align-items:baseline;
  padding:0;
  border:0;
  background:transparent;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:color .18s ease,transform .18s ease;
}
body .editorial-action-link{
  color:inherit;
}
body :is(.editorial-action-link,.about-contact-action)::after{
  content:"→";
  display:inline-block;
  width:0;
  margin-left:0;
  overflow:hidden;
  color:var(--accent);
  font-size:1em;
  line-height:1;
  opacity:0;
  transform:translateX(-.18rem);
  transition:width .18s ease,margin-left .18s ease,opacity .18s ease,transform .18s ease;
}
body :is(.editorial-action-link,.about-contact-action):is(:hover,:focus-visible){
  color:var(--ink);
}
body :is(.editorial-action-link,.about-contact-action):is(:hover,:focus-visible)::after{
  width:1.15em;
  margin-left:.42rem;
  opacity:1;
  transform:translateX(0);
}
body :is(.editorial-action-link,.about-contact-action):active{
  transform:translateY(.5px);
}
body :is(.editorial-action-link,.about-contact-action):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}

@media(min-width:921px){
  /* Right-docked paired copy shrink-wraps to its readable body. Reserve no
     hidden inline arrow width there: take only the action chrome out of
     intrinsic sizing so hover/focus cannot shift the complete body silhouette. */
  body .site-pair-copy__body .editorial-action-link{
    position:relative;
  }
  body .site-pair-copy__body .editorial-action-link::after{
    position:absolute;
    left:100%;
    top:0;
    width:1.15em;
    margin-left:.42rem;
    overflow:visible;
    line-height:inherit;
  }
}

@media(max-width:920px){
  body :is(.editorial-action-link,.about-contact-action){
    position:relative;
  }
  body :is(.editorial-action-link,.about-contact-action)::before{
    content:"";
    position:absolute;
    left:-.35rem;
    right:-.35rem;
    top:50%;
    height:44px;
    transform:translateY(-50%);
    background:transparent;
    pointer-events:auto;
  }
  body :is(.editorial-action-link,.about-contact-action)::after{
    width:1.15em;
    margin-left:.42rem;
    opacity:.78;
    transform:translateX(0);
  }
  body :is(.editorial-action-link,.about-contact-action):active::after{
    opacity:1;
    transform:translateX(.12rem);
  }
}

/* Shared paired-content axes. Contact opts in through .site-pair-grid; Home's
   established section roles are adapted here to the same primitive without
   changing Home markup or page-owned composition. The shared tokens above are
   authoritative for horizontal axes, gutter and wide column envelopes. */
body .site-pair-grid,
body[data-page="home"] .section{
  --section-side:var(--site-pair-side);
  --section-gutter:var(--site-pair-gutter);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:var(--site-pair-gutter);
  padding-left:var(--site-pair-side);
  padding-right:var(--site-pair-side);
}
@media(min-width:1600px){
  :root{
    /* Preserve the shared 8vw outer axis across the wide transition. Only the
       gutter and wide track envelope change at this breakpoint. */
    --site-pair-gutter:clamp(3rem,4vw,5rem);
    --site-pair-content-edge:max(
      var(--site-pair-side),
      calc(
        (100vw - var(--site-pair-wide-major) - var(--site-pair-wide-minor) - var(--site-pair-gutter)) / 2
      )
    );
  }

  body .site-pair-grid,
  body[data-page="home"] :is(.challenge-section,.culture-section){
    grid-template-columns:minmax(0,var(--site-pair-wide-major)) minmax(0,var(--site-pair-wide-minor));
    justify-content:center;
  }

  body .site-pair-grid.site-pair-grid--mirrored,
  body[data-page="home"] :is(.enabling-section,.about-section){
    grid-template-columns:minmax(0,var(--site-pair-wide-minor)) minmax(0,var(--site-pair-wide-major));
    justify-content:center;
  }

  /* Home's two wide annotations sit outside/alongside the section grid, but
     their horizontal anchor is still part of the shared pair geometry. This
     higher-specificity important rule deliberately supersedes the historical
     Home-local wide-screen formula without introducing a second numeric owner. */
  body[data-page="home"] :is(.name-origin,.culture-reference){
    left:var(--site-pair-content-edge) !important;
  }
}

/* Shared right-column editorial-copy alignment.
   The paired grid owns outer track placement; this opt-in primitive owns only
   the internal relationship of identity and readable body copy on the right.
   The body stays left-aligned, shrink-wraps to the authored reading silhouette,
   and docks that silhouette to the same right-hand axis as the identity.
   Typography and reading measures remain wholly page/section-owned. */
@media(min-width:921px){
  body .site-pair-copy--right{
    justify-self:end;
  }

  body .site-pair-grid--mirrored > .site-pair-copy--right{
    grid-column:2;
  }

  body .site-pair-copy--right > .site-pair-copy__identity{
    text-align:right;
  }

  body .site-pair-copy--right > .site-pair-copy__body{
    display:flow-root;
    width:fit-content;
    max-width:100%;
    margin-left:auto;
    margin-right:0;
    text-align:left;
  }
}

@media(max-width:920px){
  body .site-pair-grid,
  body[data-page="home"] .section{
    grid-template-columns:1fr;
    column-gap:0;
  }
}

/* Shared headline punctuation geometry. The dot should read as part of the
   authored headline rather than as a second floating mark. Page-local legacy
   declarations may still carry older values; this system rule supersedes them. */
body .round-dot{
  width:.14em;
  height:.14em;
  margin-left:.20em;
  vertical-align:-.015em;
}
/* Supersede the older Home-only English kerning exception now that .20em is
   the approved site-wide spacing. */
html[lang] body main .section .round-dot{
  margin-left:.20em;
}
/* Only the final word + accent dot are non-breaking. This keeps authored
   wrapping available everywhere else while preventing an orphan dot. */
.headline-dot-unit{
  white-space:nowrap;
}