/* ஆழி — the logo system.
   One mark, one wordmark, four lockups. Link after tokens.css on every page.

   THE MARK  (viewBox 0 0 100 92; the stroke W = 13 units)
   ழ drawn on one stroke width and one angle (15°). The letter is flat colour.
   Its tail, the stroke that grows below the line like a root, is a paper plane
   folded once: a lit facet over a shade facet, nose out past the bowl.
   - waterline (the baseline) ........ y 57. Lockups put it on the text baseline.
   - roots start one gap below it .... y 62 (the U-hook and the wing hang from here).
   - stem top and wing underside ..... both cut at 15°, rising to the right.
   Paint order matters: wing, fold, then the letter on top (the stem hides the wing's root).

   <svg class="logo__mark" viewBox="0 0 100 92" aria-hidden="true" focusable="false">
     <path class="logo__wing" d="M40 62H99.5L40 69.97Z"/>
     <path class="logo__fold" d="M40 69.97L99.5 62L40 77.95Z"/>
     <path class="logo__ltr" d="M0 4.5L13 1V46H38V25.5A25.5 25.5 0 0 1 89 25.5V37A20 20 0 0 1 69 57H51V66A25.5 25.5 0 0 1 0 66V62H13V66A12.5 12.5 0 0 0 38 66V57H0ZM51 46V24A12.5 12.5 0 0 1 76 24V37A9 9 0 0 1 67 46Z"/>
   </svg>

   THE WORDMARK  ஆழி in Catamaran 900 (live text) + aazhi. in Archivo 800, chilli full stop.

   LOCKUPS
   .logo.logo--h      mark · ஆழி · aazhi.   primary, nav bars
   .logo.logo--stack  mark over ஆழி over aazhi., left-aligned   footers, covers, big moments
   .logo.logo--compact  mark · ஆழி   (add to --h; hides the Latin)
   mark only          the app icon: assets/mark/favicon.svg
   Colour rule: the letter is chilli; the wing is whatever the ground is not (ink on light,
   paper on dark). On a chilli ground the letter turns ink.
   Grounds: default = light (paper, fog). .logo--on-dark = ink, oxblood, sea. .logo--on-chilli = chilli.

   Sizing: set --logo-size on .logo (default 2rem). It is the size of ஆழி; every other
   measure is in em of it. .logo itself has font-size 0 so the whitespace between the
   SVG and the text in your markup can never open a gap.
   The mark is 1.2em tall: its stroke then sits within 4% of Catamaran 900's stem (0.163em),
   so mark and type carry the same weight (the extra 4% pays for chilli reading lighter
   than ink). */

.logo {
  --logo-size: 2rem;
  --logo-ink: var(--chilli);
  --logo-wing: var(--ink-2);
  --logo-fold: var(--ink);
  --logo-text: var(--ink);
  --logo-latin: var(--ink);
  --logo-dot: var(--chilli);

  display: inline-block;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
  color: var(--logo-text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
a.logo:focus-visible { outline: 2px solid var(--focus, var(--biro)); outline-offset: 6px; border-radius: 2px; }

.logo .logo__mark {
  display: inline-block;
  font-size: var(--logo-size);
  width: 1.3043em;
  height: 1.2em;
  max-width: none;     /* page resets like svg { max-width: 100% } would drop it out of the
                          lockup's intrinsic width and wrap the name under it */
  flex: none;
  overflow: visible;
  /* drop the waterline (y 57 of 92) onto the text baseline: 35/92 of the height */
  vertical-align: -0.4565em;
}
.logo__ltr { fill: var(--logo-ink); fill-rule: evenodd; }
.logo__wing { fill: var(--logo-wing); }
.logo__fold { fill: var(--logo-fold); }

.logo__word { display: inline; font-size: var(--logo-size); line-height: 1; }
.logo__ta {
  font: 900 1em/1 var(--f-tamil);
  letter-spacing: -0.005em;
  color: var(--logo-text);
}
.logo__en {
  font: 800 0.4em/1 var(--f-body);
  letter-spacing: -0.02em;
  color: var(--logo-latin);
}
.logo__en b { font-weight: inherit; color: var(--logo-dot); }

/* ---- horizontal (primary) --------------------------------------------- */
/* mark → ஆழி: 0.36em, so the wing's nose stops one counter short of ஆ and the
   bowl sits half a bowl away. ஆழி → aazhi.: 0.16em, the gap of a word space. */
.logo--h .logo__mark { margin-right: 0.36em; }
.logo--h .logo__ta { margin-right: 0.16em; }
.logo--compact .logo__en { display: none; }
.logo--compact .logo__ta { margin-right: 0; }

/* ---- stacked: mark over the word, all on the stem's left edge --------------- */
.logo--stack { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.logo--stack .logo__mark {
  width: 2.2em; height: 2.0249em;   /* 1.69× the horizontal mark: here the mark leads */
  vertical-align: top;
  margin: 0 0 0.26em 0.02em;         /* ஆ's ink starts 0.02em in from its origin */
}
.logo--stack .logo__word { display: flex; align-items: baseline; gap: 0.2em; }

/* ---- grounds ------------------------------------------------------------- */
.logo--on-dark {
  --logo-ink: var(--chilli);
  --logo-wing: var(--paper);
  --logo-fold: var(--fog);
  --logo-text: var(--paper);
  --logo-latin: var(--paper);
  --logo-dot: var(--chilli);
}
.logo--on-chilli {
  --logo-ink: var(--ink);
  --logo-wing: var(--paper);
  --logo-fold: var(--fog);
  --logo-text: var(--ink);
  --logo-latin: var(--ink);
  --logo-dot: var(--oxblood);
}

@media (forced-colors: active) {
  .logo__ltr, .logo__wing, .logo__fold { fill: CanvasText; }
  .logo__en b { color: CanvasText; }
}

/* ==== placements on the site ============================================== */

/* index.html nav (fog bar) */
.nav__logo { --logo-size: 2rem; margin-right: auto; padding: .35rem 0 .3rem; }
@media (max-width: 760px) { .nav__logo { --logo-size: 1.75rem; } }

/* index.html footer: the compact lockup as one giant chilli signature, cropped by the
   page edge just under the wing. The paper plane stays whole; the roots sink. */
.foot__logo {
  --logo-size: min(18.5vw, 17rem);
  --logo-text: var(--chilli);
  display: block;
  margin: clamp(2.5rem, 6vw, 4.5rem) auto calc(var(--logo-size) * -0.13);
  text-align: center;
  user-select: none;
  pointer-events: none;
}
.foot__logo .logo__mark { margin-right: 0.28em; }   /* big sizes set tighter */

/* flows.html, brand.html and mark.html top bars (paper) */
.topbar > .logo, .topbar-in > .logo, .bar-in > .logo { --logo-size: 1.75rem; flex: none; }