/* ============================================================================
   Activénse portfolio tokens — SANKALPA-i theme
   Stage 4 of the website build guide. Done ONCE for the portfolio; the other
   three sites re-theme the same token NAMES so four sites read as one company.

   Every value downstream references a token. No hex codes outside this block —
   that rule is what makes a re-theme a ten-line change instead of a rebuild.

   The palette and the type pairing are INHERITED, not invented: Cinzel and
   Cormorant Garamond on #0D0D2B with gold leaf is the existing SANKALPA canon,
   and the golden-rectangle construction of the wordmark is immutable.
   ========================================================================= */

:root {
  /* ---- ground ---------------------------------------------------------- */
  --cosmic:        #0D0D2B;   /* the ground everything sits on */
  --cosmic-deep:   #07071B;   /* wells, footers, the space under things */
  --cosmic-lift:   #131335;   /* raised surfaces — cards, the sticky bar */

  /* ---- gold: the one warm note, spent sparingly ------------------------ */
  --gold:          #C9A84C;
  --gold-bright:   #F0D080;
  --gold-dim:      rgba(201, 168, 76, 0.22);
  --gold-ghost:    rgba(201, 168, 76, 0.08);

  /* ---- ink ------------------------------------------------------------- */
  --parchment:     #E8D5B7;   /* headings that are not gold */
  --text:          #FFFFFF;
  --text-mid:      #AAAACC;
  --text-dim:      #666688;
  --divider:       #222244;

  /* ---- the seven, in the V3 Material register --------------------------- */
  --c-root:   #E53935;
  --c-sacral: #FF9800;
  --c-solar:  #FFC107;
  --c-heart:  #4CAF50;
  --c-throat: #00BCD4;
  --c-brow:   #3F51B5;
  --c-crown:  #7B1FA2;

  /* ---- the four turns of the day, shared with the app --------------------- */
  --w-dawn:  #FFB27A;
  --w-day:   #9CC0F0;
  --w-dusk:  #FF8A6A;
  --w-night: #8A97C8;

  /* ---- semantic -------------------------------------------------------- */
  --surface:        var(--cosmic);
  --surface-raised: var(--cosmic-lift);
  --text-primary:   var(--text);
  --text-muted:     var(--text-mid);
  --accent:         var(--gold);
  --border:         var(--divider);
  --focus:          var(--gold-bright);

  /* ---- type ------------------------------------------------------------ */
  --font-display: 'Cinzel', Georgia, serif;             /* the wordmark's own */
  --font-body:    'Cormorant Garamond', Georgia, serif; /* everything read */
  --font-ui:      'Inter', ui-sans-serif, system-ui, sans-serif; /* labels only */

  /* Type scale on φ = 1.618, the same ratio the wordmark is built on.
     Fluid so a 380px phone and a 1440px desk share one scale, not two. */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.35rem, 1.24rem + 0.55vw, 1.82rem);
  --step-2:  clamp(1.80rem, 1.55rem + 1.25vw, 2.94rem);
  --step-3:  clamp(2.28rem, 1.85rem + 2.15vw, 4.75rem);

  /* ---- space, on the same ratio ---------------------------------------- */
  --s-1:  0.382rem;
  --s-2:  0.618rem;
  --s-3:  1rem;
  --s-4:  1.618rem;
  --s-5:  2.618rem;
  --s-6:  4.236rem;
  --s-7:  6.854rem;

  --measure: 34rem;          /* reading width — never wider */
  --radius:  2px;            /* nearly square: this is carved, not rounded */
  --radius-pill: 999px;
  --rule: 1px solid var(--divider);

  /* ---- motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: 1200ms;
  --med:  600ms;
}

/* ---------------------------------------------------------------------------
   Shared shell.

   The header and footer are byte-identical on all five pages, so the few rules
   they must not disagree about live HERE — one file — rather than in five
   copies that drift apart the first time someone edits one page.

   Touch targets: measured at 380px, the wordmark came out 26px tall and the
   nav link 20px. Both are navigation, not prose, so both must clear 44px.
   (Inline links inside a paragraph are exempt and are deliberately left alone —
   padding them out would wreck the line rhythm of the reading pages.)
   ------------------------------------------------------------------------ */
.mark,
.nav a.quiet,
footer nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ---- the navigation ------------------------------------------------------
   A five-page site whose header offered one link. On a phone the privacy
   notice, the terms and the disclaimer were unreachable except by scrolling to
   the footer of whatever page you happened to be on.

   Built on <details> so the disclosure state, the keyboard behaviour and the
   screen-reader semantics come from the browser rather than from script — the
   menu therefore still works if JavaScript fails, which on a page carrying
   crisis helplines is not a small thing. */
.menu { position: relative; }

.menu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-pill);
  color: var(--text-mid);
  font-family: var(--font-ui);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::marker { content: ''; }
.menu[open] summary { color: var(--gold); border-color: var(--gold); }

/* Three rules that become a cross when the menu opens. */
.menu .bars,
.menu .bars::before,
.menu .bars::after {
  display: block;
  width: 15px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--med) var(--ease), opacity var(--med) var(--ease);
}
.menu .bars { position: relative; }
.menu .bars::before,
.menu .bars::after { content: ''; position: absolute; left: 0; }
.menu .bars::before { top: -5px; }
.menu .bars::after  { top: 5px; }
.menu[open] .bars { background: transparent; }
.menu[open] .bars::before { transform: translateY(5px) rotate(45deg); }
.menu[open] .bars::after  { transform: translateY(-5px) rotate(-45deg); }

.menu .panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  min-width: 14rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem;
  background: var(--cosmic-lift);
  border: 1px solid var(--divider);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  z-index: 40;
}
.menu .panel a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 0.9rem;
  border-radius: 6px;
  color: var(--text-mid);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.menu .panel a:hover { background: var(--gold-ghost); color: var(--gold-bright); }
/* The page you are on is named, not guessed at. */
.menu .panel a[aria-current='page'] {
  color: var(--gold);
  background: var(--gold-ghost);
}
/* `.menu .panel a` (0,2,1) outranks `.btn-solid` (0,1,0), so without this the
   solid gold button inherits the muted grey link colour and lands at roughly
   2:1 against its own background — unreadable, and the one control here that
   must not be. Restate the dark ink at the winning specificity. */
.menu .panel .join {
  margin-top: 0.4rem;
  justify-content: center;
  color: var(--cosmic-deep);
}
.menu .panel .join:hover { color: var(--cosmic-deep); }

/* Wide enough for the links to sit out in the open: drop the button and lay
   the same markup out inline. One nav, two shapes — never two navs to update. */
@media (min-width: 48rem) {
  /* `display: contents` removes the <details> box itself from layout, so the
     panel becomes a direct flex child of the header. Without it the element is
     still CLOSED at this width — the browser collapses its box to zero width
     while our rule keeps the panel visible, and the links spill past the right
     edge of the viewport. Measured: 1511px inside a 1280px window. */
  .menu { display: contents; }
  .menu summary { display: none; }
  .menu .panel {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--s-2);
    padding: 0;
    min-width: 0;
    background: none;
    border: 0;
    box-shadow: none;
    /* NOT `min-width: 0`. That cancels the mobile 14rem, but it also lets this
       flex item collapse to zero while its own children keep their width — the
       links then render outside the header entirely (measured 1511px inside a
       1280px window). `auto` keeps it at min-content, which is what a row of
       links needs. */
    min-width: auto;
  }
  .menu .panel a { padding: 0 0.7rem; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }
  .menu .panel .join { margin-top: 0; }
}

/* A seeker who has asked for less motion gets less motion. Non-negotiable on
   a site whose whole promise is that it will not grab at you. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}