/* Thīna · In Stride — css/sections/name.css
   The meaning of the name. The dune mark is an opening in the cloth (js/sections/name.js registers its seams), so the SVG
   here is only the layout box the seams are measured from and, without WebGL, the static check-filled fallback.

   Row (desktops; name.js picks the mode): a 1600 x 900 design stage centred in the section and laid out in --nv, a layout
   unit clamped to 0.92–1.12 px, so the mark stays about 420 px wide (386 px at 1366 x 768, 470 px at 1920 x 1080). The mark
   spans x 590–1010 and y 310–530.5 of the stage, centred on the viewport; the copy hangs at x 1100. The type keeps the
   site's sizes at every width (.t-h2 56 px, .t-body 17 px), as the other sections do; name.js sets the baselines: the cap
   top of "Thīna." on the crest of the mark, the last line on its ground line.
   Column (.name-col: phones on html.m, narrow or portrait windows): the mark above the copy in one centred column, inside
   the gutter the phone's edge seams need. Nothing is pinned: the section is one viewport of the same cloth. */

#name{height:100vh;height:100svh;min-height:560px;overflow:hidden}

/* ---------- row: the design stage ---------- */
#name .name-stage{position:absolute;left:50%;top:50%;width:calc(1600 * var(--nv, 1px));height:calc(900 * var(--nv, 1px));
  transform:translate(-50%,-50%);pointer-events:none}
#name .name-stage > *{position:absolute;margin:0;white-space:nowrap}
#name .name-mark{left:calc(590 * var(--nv, 1px));top:calc(310 * var(--nv, 1px));width:calc(420 * var(--nv, 1px));
  height:calc(220.5 * var(--nv, 1px));overflow:visible}
#name .name-h,#name .name-lede,#name .name-ar,#name .name-last{left:calc(1100 * var(--nv, 1px));top:0}
#name .name-h{color:var(--ink);font-variation-settings:'opsz' 56}   /* the true optical size: the macron of Thīna is a hairline that must read */
#name .name-say{letter-spacing:.06em}
#name .name-ar{font-family:var(--arabic);font-weight:400;font-size:20px;line-height:1;color:var(--ink-70);direction:rtl;unicode-bidi:isolate}

/* ---------- the column: phones, narrow and portrait windows ---------- */
#name.name-col .name-stage{left:0;top:0;width:100%;height:100%;transform:none;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:4vh var(--gutter) 0;text-align:center}   /* the dark mark weighs on the top: the group sits a little low */
#name.name-col .name-stage > *{position:relative;left:auto;top:auto}
#name.name-col .name-mark{width:min(340px,100%);height:auto;aspect-ratio:80 / 42;flex:none}
#name.name-col .name-h{margin-top:54px}
#name.name-col .name-lede{margin-top:16px}
#name.name-col .name-ar{margin-top:12px}
#name.name-col .name-last{margin-top:28px}
/* the phone: the mark 270 wide (its feet well inside the edge seams), 14 px strokes, the site's phone type (40 / 16 px) */
html.m #name.name-col .name-mark{width:min(270px,100%)}
html.m #name.name-col .name-h{margin-top:44px;font-variation-settings:'opsz' 40}
html.m #name.name-col .name-lede{margin-top:13px}
html.m #name.name-col .name-ar{margin-top:10px;font-size:19px}
html.m #name.name-col .name-last{margin-top:24px}

/* ---------- no WebGL: the strokes as static check-filled shapes with a cream upper rim and a band lower rim ---------- */
.name-fb{display:none}
html.nogl .name-fb{display:inline}
.name-fb path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.name-fb-hi{stroke:var(--cream)}
.name-fb-lo{stroke:var(--band)}
.name-fb-in{stroke:url(#name-chk)}