/* ================= bold type (2026-10-15) =================
   Melker: "lean into the bold typography and effects of my root page melker.dev while keeping the sites content almost the same".
   From melker.dev: Anybody at 900 in capitals, headlines that fill the space they are given (the font's width axis does part of it).
   The motion is the site's own. Melker, after a first try that copied melker.dev's ten styles: "now you just copied my melker.dev
   styles without thought. do it properly. id rather have 3 great styles than 10 half assed". So the hero has three styles made from
   what Midnatt is: RITNING (the headline drawn and measured, like the machines), MOTORN (the letters as pistons in the V8's firing
   order) and EXPONERING (a band of light exposes the letters, like film). A camera shutter cuts between them.
   Anybody is OFL (fonts/LICENSE-anybody-OFL.txt). bold.js fits the headlines and runs the hero; hero-early.js fits the hero's
   headline before anything else loads, and the headline is hidden until then (fit-wait), so the old type never flashes. */
@font-face{font-family:"Anybody";src:url(/fonts/anybody-latin-wdth-normal.woff2) format("woff2");font-weight:100 900;font-stretch:50% 150%;font-display:block}
.bold-type{--display:"Anybody",Impact,"Arial Black",sans-serif}
.fit-wait [data-fit]{visibility:hidden}

/* ---- a headline that fills its column: one line per row, each as large as the column allows (bold.js) */
[data-fit]{position:relative;font-family:var(--display)!important;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;text-wrap:nowrap}
[data-fit] .fl{display:block;width:max-content;line-height:.82;white-space:nowrap}
[data-fit] .fl+.fl{margin-top:.04em}
[data-fit] .fl i{font-style:normal;display:inline-block}
[data-fit] .fl.probe{position:absolute!important;visibility:hidden;pointer-events:none;left:0;top:0}

/* ---- the hero */
.bold-type .i-h{font-size:100px;color:#F2ECDF}
.bold-type:not(.portrait) .i-copy{width:40vw}
.bold-type .i-lead{margin-top:3vh}
/* on a phone the hero is a column from top to bottom; when it is taller than the screen it starts at the top instead of being cut */
.bold-type.portrait .i-hero .i-stage{justify-content:safe center}

/* ---- the other big words of the landing page and the start screen, in the same type */
.bold-type .i-words{font-family:var(--display);font-weight:900;text-transform:uppercase;font-stretch:72%;letter-spacing:-.01em}
.bold-type .i-under{font-family:var(--display);font-weight:800;font-stretch:120%;text-transform:uppercase;letter-spacing:.02em}
.bold-type .i-h2{font-family:var(--display);font-weight:900;font-stretch:118%;text-transform:uppercase;letter-spacing:-.01em}
.bold-type .i-ways b{font-family:var(--display);font-weight:900;font-stretch:120%;text-transform:uppercase}
.bold-type .title .block{font-family:var(--display);font-weight:900;font-stretch:122%;letter-spacing:-.015em;line-height:.8}
.bold-type .t-engine .word,.bold-type .t-lab .word{display:inline-flex}
/* MOTORN and LABBET turn over letter by letter when their side is pointed at */
.b-l{display:inline-block;height:.8em;overflow:hidden;vertical-align:top}
.b-l b{display:block;height:.8em;font-weight:inherit}
.b-l>span{display:block}
.bold-type .roll .b-l>span{animation:b-roll .85s cubic-bezier(.7,0,.2,1) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes b-roll{0%{transform:translateY(0)}60%{transform:translateY(-.8em)}61%{transform:translateY(.8em)}100%{transform:translateY(0)}}

/* ================= the hero's three styles ================= */
.b-stage{--b-bg:#000;--b-fg:#F2ECDF;--b-acc:#FCA311;--b-dim:#8FA6D6}
.b-bg{position:absolute;inset:0;z-index:0;background:var(--b-bg);overflow:hidden}
.b-stage .i-copy{color:var(--b-fg)}
.b-stage .i-h{color:var(--b-fg)}
.b-stage .i-h .fl-last{color:var(--b-acc)}
.b-stage .i-kick{color:var(--b-acc)}
.b-stage .i-lead{color:var(--b-fg);opacity:.9}
.b-stage .i-copy .btn{background:transparent;color:var(--b-fg);border-color:var(--b-fg)}
.b-stage .i-copy .more,.b-stage .i-hint{color:var(--b-fg)}
.b-stage .fl{position:relative}
/* the shutter between two styles: two blades close from top and bottom in the next style's colour, an orange line on the seam */
.b-shut{position:absolute;inset:0;z-index:6;pointer-events:none}
.b-shut i{position:absolute;left:0;right:0;height:50.5%;background:var(--next,#000);transform:scaleY(0)}
.b-shut i:first-child{top:0;transform-origin:50% 0;box-shadow:inset 0 -2px 0 #FCA311}
.b-shut i:last-child{bottom:0;transform-origin:50% 100%}

/* ---- 1. RITNING: the headline drawn as outlines on a faint grid, measured with dimension lines, then TAK. is filled in orange */
[data-style=ritning]{--b-bg:#000;--b-fg:#F2ECDF;--b-acc:#FCA311}
[data-style=ritning] .b-bg{background:linear-gradient(rgba(242,236,223,.055) 1px,transparent 1px) 0 0/36px 36px,linear-gradient(90deg,rgba(242,236,223,.055) 1px,transparent 1px) 0 0/36px 36px,#000}
[data-style=ritning] .i-h .fl i{color:transparent;-webkit-text-stroke:max(1px,.011em) var(--b-fg)}
[data-style=ritning] .i-h .fl{animation:b-plot .95s cubic-bezier(.6,0,.25,1) both;animation-delay:calc(var(--l) * .22s + .1s)}
[data-style=ritning] .i-h .fl-last i{animation:b-fill .6s ease-out both;animation-delay:1.55s}
@keyframes b-plot{from{clip-path:inset(-10% 100% -10% 0)}to{clip-path:inset(-10% -2% -10% 0)}}
@keyframes b-fill{to{color:var(--b-acc);-webkit-text-stroke-color:var(--b-acc)}}
.b-dims{position:absolute;inset:0;pointer-events:none;display:none}
[data-style=ritning] .b-dims{display:block}
.b-dim{position:absolute;color:var(--b-dim);font:500 11px/1 "League Spartan",sans-serif;letter-spacing:.08em}
.b-dim.w{height:1px;background:currentColor;transform-origin:0 50%;animation:b-dimx .8s cubic-bezier(.6,0,.25,1) both;animation-delay:calc(var(--l) * .22s + .5s)}
.b-dim.w::before,.b-dim.w::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:currentColor}
.b-dim.w::before{left:0}.b-dim.w::after{right:0}
.b-dim.w span{position:absolute;left:50%;top:50%;translate:-50% -50%;padding:0 7px;background:var(--b-bg);opacity:0;animation:b-in .3s ease-out both;animation-delay:calc(var(--l) * .22s + 1.1s)}
@keyframes b-dimx{from{transform:scaleX(0)}}
@keyframes b-in{to{opacity:1}}

/* ---- 2. MOTORN: on orange the letters run as pistons in the V8's firing order (1-8-4-3-6-5-7-2); each flashes as it fires */
[data-style=motorn]{--b-bg:#FCA311;--b-fg:#0B0B0B;--b-acc:#0B0B0B}
[data-style=motorn] .i-h .fl i{animation:b-piston 1.1s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--fire) * -1.1s / 8)}
@keyframes b-piston{0%,100%{transform:translateY(.055em);color:var(--b-fg)}46%{color:var(--b-fg)}50%{transform:translateY(-.055em);color:#FFF4E2}60%{color:var(--b-fg)}}
[data-style=motorn] .i-h{animation:b-idle .07s steps(2) infinite}
@keyframes b-idle{50%{transform:translate(.4px,-.3px)}}
[data-style=motorn] .b-bg{background:repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 2px,transparent 2px 120px),#FCA311}

/* ---- 3. EXPONERING: the letters start as an unexposed outline; a band of light passes through them and leaves them exposed */
[data-style=exponering]{--b-bg:#050505;--b-fg:#F2ECDF;--b-acc:#FCA311}
[data-style=exponering] .i-h .fl i{animation:b-expose 1.1s ease-out both;animation-delay:calc(var(--x) * 1.5s + var(--l) * .08s + .15s)}
@keyframes b-expose{0%{color:transparent;-webkit-text-stroke:max(1px,.01em) rgba(242,236,223,.35);text-shadow:none}
  30%{color:#FFB547;-webkit-text-stroke-color:transparent;text-shadow:0 0 .18em rgba(252,163,17,.85),0 0 .5em rgba(252,163,17,.45)}
  100%{color:var(--b-fg);-webkit-text-stroke-color:transparent;text-shadow:none}}
[data-style=exponering] .i-h .fl-last i{animation-name:b-expose-last}
@keyframes b-expose-last{0%{color:transparent;-webkit-text-stroke:max(1px,.01em) rgba(242,236,223,.35)}30%{color:#FFD08A;-webkit-text-stroke-color:transparent;text-shadow:0 0 .2em rgba(252,163,17,.9)}100%{color:var(--b-acc);-webkit-text-stroke-color:transparent}}
/* the light itself, crossing the frame, and the film's perforations along the top and bottom */
[data-style=exponering] .b-bg::before{content:"";position:absolute;top:-20%;bottom:-20%;width:38%;left:-40%;
  background:radial-gradient(closest-side,rgba(252,163,17,.38),rgba(252,90,20,.12) 60%,transparent);filter:blur(30px);animation:b-leak 2.4s cubic-bezier(.4,0,.3,1) both .1s}
@keyframes b-leak{from{transform:translateX(0) skewX(-12deg)}to{transform:translateX(380%) skewX(-12deg)}}
[data-style=exponering] .b-bg::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(242,236,223,.14) 18px 30px) 0 14px/100% 12px no-repeat,
             repeating-linear-gradient(90deg,transparent 0 18px,rgba(242,236,223,.14) 18px 30px) 0 calc(100% - 14px)/100% 12px no-repeat}

/* the logo, tagline and menu over the hero follow the style on screen (bold.js sets data-hero-on and the two colours) */
html[data-hero-on].view-home .top{--logo:var(--hero-fg);--bar-bg:var(--hero-bg)}
html[data-hero-on].view-home .top .logo{background:var(--hero-fg)}
html[data-hero-on].view-home .nav{background:color-mix(in srgb,var(--hero-fg) 10%,transparent)}
html[data-hero-on].view-home .nav a:not(.hi),html[data-hero-on].view-home .nav .reel,html[data-hero-on].view-home .langs button:not(.on){color:var(--hero-fg)}
html[data-hero-on].view-home .both,html[data-hero-on].view-home .both b{color:var(--hero-fg)}
html[data-hero-on].view-home .sheetframe{border-color:color-mix(in srgb,var(--hero-fg) 25%,transparent)}

/* people who asked for less motion: the drawing, standing still and filled */
.calm .b-stage *,.calm .b-stage *::before,.calm .b-stage *::after,.calm .b-l>span{animation:none!important}
.calm [data-style] .i-h .fl i{color:var(--b-fg)!important;-webkit-text-stroke:0!important}
.calm [data-style] .i-h .fl-last i{color:var(--b-acc)!important}
.b-paused *,.b-paused *::before,.b-paused *::after{animation-play-state:paused!important}

/* RITNING's line heights, down the left side (left out on a phone, where there is no margin for them) */
.b-dim.h{width:1px;background:currentColor;transform-origin:50% 0;animation:b-dimy .7s cubic-bezier(.6,0,.25,1) both;animation-delay:calc(var(--l) * .22s + .35s)}
.b-dim.h::before,.b-dim.h::after{content:"";position:absolute;left:-5px;width:11px;height:1px;background:currentColor}
.b-dim.h::before{top:0}.b-dim.h::after{bottom:0}
.b-dim.h span{position:absolute;left:-8px;top:50%;translate:-100% -50%;opacity:0;animation:b-in .3s ease-out both;animation-delay:calc(var(--l) * .22s + .9s)}
@keyframes b-dimy{from{transform:scaleY(0)}}
.portrait .b-dim.h{display:none}
/* nothing in the hero moves before its headline is set */
.fit-wait .b-stage *,.fit-wait .b-stage *::before,.fit-wait .b-stage *::after{animation-play-state:paused!important}
/* on a phone the kicker leaves room for RITNING's width dimension over the headline */
.bold-type.portrait .i-hero .i-kick{margin-bottom:30px}