/* type-base.css: Esha's scale (GLOWUP-TYPE-ESHA.md section 2) as custom properties, and the ladder brought onto every
   display setting of the home and what-we-do pages, so the one giant line has a middle voice to stand against.
   25 Oct 2026, Nadir. Loads after glow.css, glow-a.css and mark3d.css; touches sizes, breaks and placement only.
   Cap heights measured off the woff2 in Chrome (canvas, 1000px): Bespoke Stencil 0.70 em, General Sans 0.718 em, x-height 0.527 em.
   Display margins below are set from the cap top (0.70 em), never the em box. */

:root{
  --L0:12px;                                   /* whisper: the who block, captions, labels */
  --L1:clamp(16px,15px + .1vw,17px);           /* text */
  --L2:clamp(18px,16.5px + .26vw,22px);        /* lead */
  --L3:clamp(30px,24px + 1.5vw,54px);          /* heading, the text face at 500 */
  --L4:clamp(40px,12px + 5vw,96px);            /* word: service words */
  --L5:clamp(52px,10px + 7.1vw,128px);         /* title: inner page h1, the close */
  --L6:clamp(58px,17px + 8vw,140px);           /* poster: the home tagline only. Esha's ceiling was 148; at 1920 three lines of 148 run to 31 percent of 1080, 140 holds 29 */
  --L7:clamp(80px,13vw,240px);                 /* picture word: HERITAGE IN MOTION, BRAND, one per screen, aria-hidden. Halved 29 Oct (Asif: "the other large letters are too big halve that size"); was clamp(160px,26vw,480px) */
  --cap:.70;                                   /* the stencil's cap height per em */
  --brk:24px;                                  /* the bracket: small text sits this far above and below the one giant line */
}
@media (min-width:1800px){:root{--L0:13px}}

/* the hollow rule: a hollow word is a window, never an outline effect; it keeps its own lit rim, the film behind it plays clear, and below the floor it goes solid.
   Set once here; the plate (type-a.js) reads the same numbers, so the shader, the SVG fallback and the DOM words agree. Measured 25 Oct 2026: the lip at 236 reads 14 to 1 against the plate and 17 to 1 against the wall; the film carries no floor */
:root{
  --hollow-rim:.001em;                          /* the rim, scaled to the letter. Was .028em, .016em, .010em (1.8px at L6 178); Asif, 31 Oct: "keep 10% of it", so a tenth: .18px at 1440, under one device pixel, so the floor below carries it */
  --hollow-rim-min:.5px;                        /* never thinner than this: one device pixel on a 2x screen; the plate texture draws the lip at exactly one device pixel whatever the ratio */
  --hollow-lip:.4;                              /* the lip's white, 0 to 1. A line cannot be drawn thinner than one device pixel, so the rest of the tenth is carried here: one device pixel at four tenths white is 9 to 13 percent of the old rim's ink at 1440 and 1870 on a 2x screen (R15, 31 Oct) */
  --hollow-floor:48px;                          /* below this a hollow word goes solid white */
  --hollow-dim:1;                               /* 1 = clear: the film shows through the cut exactly as it plays, no cap, no floor (Asif, 25 Oct: "bring back the full transparent inside"). Was .70, before that .48 (smoked glass). Below 1 the old capped window returns. The lip reads against the wall below, not the film */
  --hollow-wall:.012em;                         /* Anwar 25 Oct: .028 ate 61 percent of the film window; .012 gives most of it back. the cut's wall: the plate's thickness in shadow, one band of near-black just inside the lip (3.7px at L6 132). Whatever the film does, the lip has a dark neighbour and the film has a dark border */
  --hollow-wall-ink:#141413;                    /* the wall's ink on the DOM words and the SVG fallback */
  --hollow-fill:rgba(11,11,11,0);               /* the DOM form of the same dim: the glyph is filled with the page black at 1 minus the dim, so the window is smoked inside the letter only, never a pane behind it */
  --hollow-soft:0em;                            /* blur radius inside a cut on the plate; 0 since the cut went clear (was .06em, 7.9px at L6 132) */
  --hollow-sat:1;                               /* colour inside the cut kept whole since it went clear (was .6, pulled 40 percent toward grey) */
  --plate-etch:1.5;                            /* R15 (Asif, 31 Oct: "the pattern of fsi on the black opaque screen"): how hard the mark's combed grooves in the plate's face catch the left light, 0 flat to about 2; the shader in type-a.js shades the wall's own relief, the SVG fallback embosses it */
  --plate-see:.22;                             /* how much of the street shows through the black plate itself, 0 solid to .9 (Asif, 30 Oct: "make the hero section black bit opaque so we see through bit of the video as well"); the cuts stay the clear window */
}
@media (max-width:760px){:root{--plate-etch:.6}}   /* the phone wall (660x1428) is drawn 1.6x up, so the same gain turns its grooves to grain; lower there */
/* a hollow word set in markup: a smoked window with a lit rim. The stroke is centred on the edge, so the rim reads half in and half out of the glyph; paint order is left alone (stroke over fill) so the whole rim shows */
.hollow,.screen .word.hollow,.scene .after .word.hollow{color:var(--hollow-fill);-webkit-text-stroke:max(var(--hollow-rim-min),var(--hollow-rim)) color-mix(in srgb,var(--white) calc(var(--hollow-lip) * 100%),transparent)}
/* the wall on a DOM hollow word: the same text under it, stroked wider in the wall's ink, so the dark band shows just inside the white lip (and as a shadow just outside it). Markup carries data-text="the word" */
.hollow[data-text]{position:relative}
.hollow[data-text]::before{content:attr(data-text);position:absolute;inset:0;z-index:-1;color:transparent;-webkit-text-stroke:calc(max(var(--hollow-rim-min),var(--hollow-rim)) + 2 * var(--hollow-wall)) var(--hollow-wall-ink)}
/* only L5, L6 and L7 roles may be hollow (their minimums 52, 58, 160 sit above the floor); L4 may be hollow on desktop only: it falls to 40px on the phone, under the floor, so it goes solid */
@media (max-width:760px){.hollow.l4{color:var(--white);-webkit-text-stroke:0}}

/* the stencil's tracking opens as it grows: -.01 at poster and title, 0 at word, +.005 on the phone; line-height .9 (poster .88, picture word .8) */
.st{line-height:.9;letter-spacing:0}
@media (max-width:760px){.st{letter-spacing:.005em}}

/* L7: the picture words. One per screen, cut by an edge, behind the subject */
.screen .word{font-size:var(--L7);line-height:.8;letter-spacing:0}
.heritage .word{left:54vw;top:calc(var(--sh) * .30)}
.chhaya .word{left:56vw;top:calc(var(--sh) * .06);font-size:var(--L7);z-index:2}   /* BRAND at the top, behind the SIM pack; WORK sat mid-screen, so the pair is a mirror and not a repeat */
@media (max-width:760px){
  .screen .word{font-size:var(--L7);left:34vw;top:calc(var(--sh) * .34)}
  .chhaya .word{font-size:var(--L7);left:30vw;top:calc(var(--sh) * .08)}
}

/* L4: the six service words, 84px at 1440 against 101 before; one line, the small line beside each at L0 */
.svc .row .st{font-size:var(--L4);line-height:.9}
.svc .row .ln{font-size:var(--L0)}
@media (max-width:760px){.svc .row .st{font-size:var(--L4)}}

/* L3: the text-face headings (the audit, the AI system, who, the four rows, the pair) */
.block .h,.duo .h,.pair .h,.tl .h{font-size:var(--L3);line-height:1.04;letter-spacing:-.02em}
@media (max-width:760px){.block .h,.duo .h,.pair .h,.tl .h{font-size:var(--L3)}}

/* L5: the close. GROWING? GOOD. and TAKE ONLY WHAT YOU NEED. at 112, the one loud note at the end of the page */
.close .st,.wwd .close .st{font-size:var(--L5);line-height:.9;letter-spacing:-.01em}
@media (max-width:760px){.close .st,.wwd .close .st{font-size:var(--L5)}}

/* the who block and the bracket lines */
.who{font-size:var(--L0)}
.brk{font-size:var(--L0);line-height:1.4;letter-spacing:.027em;font-variant-ligatures:none}

/* the new first screens share this shell; glow.js's hero hooks (.hero, .page-hero) are not matched on purpose: each variant drives its own motion */
.hero-t{position:relative;z-index:3;height:var(--sh);min-height:560px;overflow:hidden}
.page-hero-t{position:relative;z-index:3;height:var(--sh);min-height:560px}
@media (min-width:761px){html{scroll-snap-type:y proximity}.snap{scroll-snap-align:start}}
@media (prefers-reduced-motion:reduce){html{scroll-snap-type:none}}

/* the nav on an inner page: the current item white, the rest at 60 percent white; no orange in the bar, the page's one orange word stays the only one (Anwar fix 6) */
.inner .top .links a{color:rgba(242,242,240,.6);opacity:1}
.inner .top .links a.hot,.inner .top .links a[aria-current="page"]{color:var(--white)}
.inner .top .links a:hover{color:var(--white)}

/* the real heading stays in the document when a variant draws it another way */
.sr-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}