/* ================= 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:var(--b-bg);-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:var(--ext)}}
[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;text-shadow:var(--ext)}}
/* 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)}}
/* (the perforations EXPONERING had are now the film strip of the whole landing page: .i-film in intro.css) */

/* 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}

/* Depth (Emil, 2026-10-15: the letters "more 3d"): every letter of the hero is extruded down to the right, eight thin layers in a darker
   shade of its own colour and a soft shadow under them, so the headline reads as solid blocks standing on the page. The exposure
   keyframes end on the same depth. */
.b-stage .i-h .fl i{--ext:0.009em 0.009em 0 var(--ext-c), 0.018em 0.018em 0 var(--ext-c), 0.027em 0.027em 0 var(--ext-c), 0.036em 0.036em 0 var(--ext-c), 0.045em 0.045em 0 var(--ext-c), 0.054em 0.054em 0 var(--ext-c), 0.063em 0.063em 0 var(--ext-c), 0.072em 0.072em 0 var(--ext-c), .1em .12em .16em rgba(0,0,0,.5);text-shadow:var(--ext)}
[data-style=ritning] .i-h{--ext-c:#34312b}
[data-style=ritning] .i-h .fl-last{--ext-c:#8f5c08}
[data-style=motorn] .i-h{--ext-c:#b06d05}
[data-style=motorn] .i-h .fl-last{--ext-c:#b06d05}
[data-style=exponering] .i-h{--ext-c:#3d3830}
[data-style=exponering] .i-h .fl-last{--ext-c:#8f5c08}
.calm .b-stage .i-h .fl i{text-shadow:var(--ext)!important}
/* the ambilight glows on the dark styles only; on MOTORN's orange it reads as a dirty shadow */
.b-stage[data-style=motorn] .i-amb{visibility:hidden}

/* read by screen readers, not shown */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* formatting QA, 2026-10-16: a short wide screen (a phone held sideways, 844 x 390): the headline column is no wider than the height allows, so the words, the lead and the
   buttons fit between the bar and the bottom edge. The block was 412 px tall on a screen that leaves 338 px, so the kicker and the first line sat under the bar and the buttons
   under the film strip at the bottom. The headline's lines are sized to the column's width (bold.js), so a narrower column makes every line smaller together. */
@media (orientation:landscape) and (max-height:560px){
  .bold-type:not(.portrait) .i-copy{width:min(40vw,62svh)}
  html:not(.portrait) .i-lead{font-size:14px;line-height:1.22;margin:8px 0 10px}
  html:not(.portrait) .i-copy .btn{padding:9px 16px 7px;font-size:13px}
  html:not(.portrait) .i-copy .more{font-size:13px;padding:0 2px;line-height:1.2;min-height:0}
  html:not(.portrait) .i-copy .row{gap:8px 16px}
  html:not(.portrait) .i-kick,html:not(.portrait) .f-code{display:none}   /* the small line above the headline and the film code along the bottom strip: there is no room for them */
}