/* Thīna · In Stride — css/sections/firstrun.css
   The First Run, 001 to 100. Loaded after css/site.css. One centred column: the heading and the line under it; the box (the
   engine draws the lid and its three pressed seams in the cloth; here are the flap's topstitch and shade, the inside that
   follows the opening, and the cream card lying on the check); the field of 100 lids (the engine draws them; here are the
   stitches, the numbers and the keyboard); the line beneath. js/sections/firstrun.js sets every --fr-* size in whole px.
   Desktop: each number beneath its lid. Phone (html.m): the number on the lid. Reduced motion and no WebGL: the box stands
   open; a hovered or focused lid crossfades a static check in 200 ms. */

#firstrun{--fr-s:42px;--fr-g:26px;--fr-fw:654px;--fr-bw:654px;--fr-bh:366px;--fr-cw:288px;--fr-ch:192px;--fr-cf:46px;--fr-cnt:50px;
  --fr-crt:138px;--fr-crw:144px;--fr-si:5px;--fr-sd:3px;--fr-sg:2px;--fr-bix:12px;--fr-biy:9px;--top:var(--fr-bh);--fo:0;
  padding:calc(168 * var(--u)) 0 calc(184 * var(--u))}
.fr-wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.fr-lede{margin-top:calc(22 * var(--u));line-height:27px;letter-spacing:.01em;text-wrap:balance}

/* ---------- the box: a sand lid in the cloth, pressed on three sides; it parts along the seam, then folds back to its hinge ---------- */
.fr-box{position:relative;flex:none;width:var(--fr-bw);height:var(--fr-bh);margin-top:calc(64 * var(--u));pointer-events:none}
.fr-fbx{position:absolute;inset:0;display:none;border-radius:2px;                            /* no WebGL: the box shown open as a static check */
  background:var(--chk-ground) url("../../assets/check/Thina-check-repeat-10mm.svg") var(--bp,0 0)/var(--tile) var(--tile) repeat;
  box-shadow:inset 0 1px 0 var(--cream),inset 0 -1.5px 0 var(--band),inset 0 9px 12px -6px rgba(42,29,18,.45)}
.fr-flap{position:absolute;left:0;top:0;width:100%;height:var(--top);overflow:hidden}        /* the part of the lid still lying flat */
.fr-flap::before{content:"";position:absolute;inset:0;pointer-events:none;                   /* the lid turns from the light as it lifts */
  background:linear-gradient(180deg,rgba(59,42,28,calc(.008 + .03 * var(--fo))),rgba(59,42,28,calc(.022 + .07 * var(--fo))))}
.fr-stitch{position:absolute;left:var(--fr-bix);right:var(--fr-bix);top:var(--fr-biy);bottom:calc(var(--fr-biy) * (1 - var(--fo)));
  --st:rgba(156,119,64,.5);                                                                  /* a brass topstitch; it rides the lid's front edge */
  background:
    repeating-linear-gradient(180deg,var(--st) 0 3px,transparent 3px 5px) left top/1px 100% no-repeat,
    repeating-linear-gradient(180deg,var(--st) 0 3px,transparent 3px 5px) right top/1px 100% no-repeat,
    repeating-linear-gradient(90deg,var(--st) 0 3px,transparent 3px 5px) left bottom/100% 1px no-repeat}
.fr-in{position:absolute;inset:0;clip-path:inset(var(--top) 0 0 0);visibility:hidden}        /* the inside, revealed behind the lip */
.fr-shade{position:absolute;left:0;right:0;top:var(--top);bottom:0;pointer-events:none;       /* the box has walls: the hinge and the left wall shade the floor */
  background:
    linear-gradient(180deg,rgba(42,29,18,.5) 0,rgba(42,29,18,.26) 10px,rgba(42,29,18,.1) 28px,rgba(42,29,18,0) 58px),
    linear-gradient(90deg,rgba(42,29,18,.38) 0,rgba(42,29,18,.15) 10px,rgba(42,29,18,0) 36px),
    linear-gradient(270deg,rgba(42,29,18,.14) 0,rgba(42,29,18,0) 14px),
    linear-gradient(0deg,rgba(42,29,18,.16) 0,rgba(42,29,18,0) 12px),
    radial-gradient(120% 140% at 42% 30%,rgba(42,29,18,0) 46%,rgba(42,29,18,.2) 100%)}
.fr-card{position:absolute;left:calc(50% - var(--fr-cw) / 2);top:calc(50% - var(--fr-ch) / 2);width:var(--fr-cw);height:var(--fr-ch);
  overflow:hidden;background:var(--cream);border-radius:1px;
  box-shadow:0 0 0 .5px rgba(59,42,28,.16),1px 1.5px 0 rgba(201,183,153,.95),3px 6px 10px -3px rgba(42,29,18,.5),14px 22px 36px -12px rgba(42,29,18,.55)}
.fr-card::before{content:"";position:absolute;inset:0;pointer-events:none;                   /* the card in the same light as the cloth */
  background:linear-gradient(152deg,rgba(246,240,228,0) 30%,rgba(230,217,195,.42) 100%)}
.fr-card-no{position:absolute;left:0;right:0;top:var(--fr-cnt);font-family:var(--serif);font-weight:400;font-size:var(--fr-cf);line-height:1;
  font-variation-settings:'opsz' 28;letter-spacing:.015em;color:var(--esp);font-variant-numeric:lining-nums;white-space:nowrap}
.fr-card-rule{position:absolute;left:calc(50% - var(--fr-crw) / 2);top:var(--fr-crt);width:var(--fr-crw);height:1px;background:rgba(59,42,28,.4)}
.fr-card-lip{position:absolute;left:0;right:0;top:0;height:12px;opacity:0;pointer-events:none;will-change:transform;
  background:linear-gradient(rgba(42,29,18,.42),rgba(42,29,18,0))}

/* ---------- the field: 100 lids; each a sand square with a stitched hairline border, its number beneath ---------- */
.fr-field{position:relative;flex:none;display:grid;grid-template-columns:repeat(10,var(--fr-s));grid-auto-rows:var(--fr-s);gap:var(--fr-g);
  width:var(--fr-fw);margin-top:calc(280 * var(--u));touch-action:pan-y pinch-zoom;outline:none}
.fr-row{display:contents}                                                                    /* ten lids: the phone's wave writes --rv here once for the row */
.fr-lid{position:relative;display:block;border-radius:2px;outline:none;-webkit-tap-highlight-color:transparent;
  --o:max(var(--lv, 0), var(--rv, 0));                                                       /* the lid's own opening, or its row's wave */
  --fl:calc((1 - var(--o)) * var(--fr-s) * .5 - min(var(--o) * 60px, 2px));                  /* the lid parts from its centre: the flaps keep what is printed on them */
  --flaps:linear-gradient(#000 var(--fl),transparent var(--fl),transparent calc(100% - var(--fl)),#000 calc(100% - var(--fl)))}
.fr-lid::before{content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;   /* the lid: a breath of shade and its stitched border, riding the two flaps */
  --st:rgba(156,119,64,.55);--sl:calc(var(--fr-s) - 2 * var(--fr-si));                      /* brass thread */
  --sx:repeating-linear-gradient(90deg,var(--st) 0 var(--fr-sd),transparent var(--fr-sd) calc(var(--fr-sd) + var(--fr-sg)));
  --sy:repeating-linear-gradient(180deg,var(--st) 0 var(--fr-sd),transparent var(--fr-sd) calc(var(--fr-sd) + var(--fr-sg)));
  background:
    var(--sx) var(--fr-si) var(--fr-si)/var(--sl) 1px no-repeat,
    var(--sx) var(--fr-si) calc(100% - var(--fr-si))/var(--sl) 1px no-repeat,
    var(--sy) var(--fr-si) var(--fr-si)/1px var(--sl) no-repeat,
    var(--sy) calc(100% - var(--fr-si)) var(--fr-si)/1px var(--sl) no-repeat,
    linear-gradient(rgba(59,42,28,.024),rgba(59,42,28,.024));
  -webkit-mask-image:var(--flaps);mask-image:var(--flaps)}
.fr-no{position:absolute;left:calc(var(--fr-g) * -.5);right:calc(var(--fr-g) * -.5);top:calc(100% + 6px);text-align:center;white-space:nowrap;pointer-events:none;
  font-family:var(--sans);font-weight:400;font-size:11px;line-height:1;letter-spacing:.04em;font-variant-numeric:tabular-nums;
  color:rgba(59,42,28,calc(.7 + .3 * min(1, var(--o) * 2.5)))}                               /* espresso 70 % (AA at 11 px), lifting to full as its lid opens */
.fr-field:focus-visible .fr-lid.is-cur{outline:1.5px solid var(--esp);outline-offset:3px}     /* the field is one control: the lid it is on is ringed */
html:not(.cur) .fr-lid{cursor:pointer}                                                      /* the system cursor (touch, reduced motion, no WebGL): a lid is a button */
.fr-line{margin-top:calc(var(--fr-g) + 22px);font-weight:300;font-size:15px;line-height:1.3;letter-spacing:.02em;color:var(--ink-70);
  font-variant-numeric:tabular-nums;text-wrap:balance}

/* ---------- reduced motion and no WebGL: nothing parts; a static check crossfades into a hovered or focused lid ---------- */
.fr-lid::after{content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;opacity:0;display:none;
  background:var(--chk-ground) url("../../assets/check/Thina-check-repeat-10mm.svg") var(--bp,0 0)/var(--tile) var(--tile) repeat;
  box-shadow:inset 0 1px 0 var(--cream),inset 0 -1.5px 0 var(--band),inset 0 8px 9px -6px rgba(42,29,18,.5)}
html.reduced .fr-lid::after,html.nogl .fr-lid::after{display:block;transition:opacity .2s linear}
html.reduced .fr-lid.fb-on::after,html.nogl .fr-lid.fb-on::after{opacity:1}
html.reduced .fr-lid::before,html.nogl .fr-lid::before{transition:opacity .2s linear}
html.reduced .fr-lid.fb-on::before,html.nogl .fr-lid.fb-on::before{opacity:0}
html.reduced .fr-no,html.nogl .fr-no{transition:color .2s linear,opacity .2s linear}
html.reduced .fr-lid.fb-on .fr-no,html.nogl .fr-lid.fb-on .fr-no{color:var(--esp)}
html.nogl .fr-fbx{display:block}
html.nogl .fr-lid{box-shadow:inset 0 0 0 1px rgba(59,42,28,.1)}                              /* the pressed outline the engine would draw */

/* ---------- the phone: one column inside the 36 px gutters; a denser board with each number on its lid ---------- */
html.m #firstrun{padding:96px 0 120px}
html.m .fr-h{font-variation-settings:'opsz' 40}                                              /* the heading's true optical size at 40 px: its hairlines hold at 1x */
html.m .fr-lede{margin-top:14px;font-size:16px;line-height:25px;max-width:318px}
html.m .fr-br{display:none}
html.m .fr-box{margin-top:44px}
html.m .fr-field{margin-top:120px}
html.m .fr-no{left:0;right:0;top:0;height:var(--fr-s);line-height:var(--fr-s);font-size:clamp(9.5px, calc(var(--fr-s) * .39), 11px);letter-spacing:0;color:var(--ink-70);
  opacity:calc(1 - min(1, var(--o) * 3));-webkit-mask-image:var(--flaps);mask-image:var(--flaps)}   /* printed on the lid, as large as the lid allows: it parts with it */
/* the phone's lids are stitched along the top and bottom only, so the digits have the lid's whole width */
html.m .fr-lid::before{background:
    var(--sx) var(--fr-si) var(--fr-si)/var(--sl) 1px no-repeat,
    var(--sx) var(--fr-si) calc(100% - var(--fr-si))/var(--sl) 1px no-repeat,
    linear-gradient(rgba(59,42,28,.024),rgba(59,42,28,.024))}
html.m.reduced .fr-lid.fb-on .fr-no,html.m.nogl .fr-lid.fb-on .fr-no{opacity:0}
html.m .fr-line{margin-top:28px;font-size:13px}