/* ============================================================
   LEV27 — components
   The parts every piece is built from: the band, the plate, the card,
   the notice, the block grid. The brand book and the landing page both
   load this file, so a specimen and the real thing are the same code.

   Sizes inside an artboard are written in the artboard's own unit
   (points for print, pixels for screen) and multiplied by --k, which
   is one unit at the artboard's current width. Give .ab a real width
   (11in, 1080px) and every size lands at true scale.
   ============================================================ */

/* ---------- artboards ---------- */
.ab{container-type:inline-size;position:relative;width:100%;overflow:hidden;background:var(--lev-white);color:var(--lev-midnight)}
.ab>.ab-in{position:absolute;inset:0;--k:calc(100cqw / var(--w));font-family:var(--lev-text);
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.ab-in *{box-sizing:border-box;margin:0;padding:0}
.ab-in img{display:block}
.ab--tabloid-p{aspect-ratio:792/1224}   .ab--tabloid-p>.ab-in{--w:792}
.ab--tabloid-l{aspect-ratio:1224/792}   .ab--tabloid-l>.ab-in{--w:1224}
.ab--square-pt{aspect-ratio:1}          .ab--square-pt>.ab-in{--w:792}
.ab--welcome{aspect-ratio:36/48}        .ab--welcome>.ab-in{--w:2592}
.ab--badge{aspect-ratio:4/6}            .ab--badge>.ab-in{--w:288}
.ab--feed{aspect-ratio:1080/1350}       .ab--feed>.ab-in{--w:1080}
.ab--story{aspect-ratio:1080/1920}      .ab--story>.ab-in{--w:1080}
.ab--email{aspect-ratio:1200/980}       .ab--email>.ab-in{--w:1200}
.ab--slide{aspect-ratio:16/9}           .ab--slide>.ab-in{--w:1920}
.ab--stage{aspect-ratio:16/7}           .ab--stage>.ab-in{--w:1600}
.ab--lany{aspect-ratio:4/5}             .ab--lany>.ab-in{--w:800}
.ab--og{aspect-ratio:1200/630}          .ab--og>.ab-in{--w:1200}
.ab--cubes{aspect-ratio:4/3}            .ab--cubes>.ab-in{--w:1200}

/* ---------- fields ---------- */
.f-navy{background:var(--lev-navy);color:var(--lev-white)}
.f-white{background:var(--lev-white);color:var(--lev-midnight)}
.f-sky{background:var(--lev-sky);color:var(--lev-midnight)}
.f-blue{background:var(--lev-blue);color:var(--lev-midnight)}
.f-lime{background:var(--lev-lime);color:var(--lev-midnight)}
.f-midnight{background:var(--lev-midnight);color:var(--lev-white)}

/* ---------- the band ----------
   Navy strip, logo in the middle, blocks at the ends, full height and flush to the
   edge. --bh is its height in artboard units. Bookend: one block each end. Cluster,
   for wide formats: a full block and a half block each end. Bare: the logo alone.
   Blocks are never cropped.
   A block never sits against its own colour. A band lands on navy, white or lime;
   where it has to land on sky or blue (the table sign), it takes the blocks on their
   lime backgrounds (block-NN-lime.svg). A block with navy in its own field stays off
   the band (OFF_BAND in data.js; build.py stops if one is used). */
.band{--b:calc(var(--k) * var(--bh));position:relative;display:flex;align-items:stretch;justify-content:space-between;
  flex:none;height:var(--b);background:var(--lev-navy);overflow:hidden}
.band__end{display:flex;align-items:stretch;flex:none}
.band__tile{display:block;flex:none;width:var(--b);height:var(--b)}
.band .band__tile>img{display:block;width:100%;height:100%}
.band__stack{display:flex;flex-direction:column;flex:none}
.band__stack>.band__tile,.band__stack>i{display:block;width:calc(var(--b) / 2);height:calc(var(--b) / 2)}
.band__stack>i{background:var(--lev-midnight);opacity:.34}
.band__logo{flex:1;min-width:0;display:grid;place-items:center;padding:0 calc(var(--b) * .14)}
.band__logo>img{height:calc(var(--b) * .6);width:auto;max-width:100%;object-fit:contain}
.band--plain .band__logo>img{height:calc(var(--b) * .44)}

/* ---------- the loading screen ----------
   The window is the one piece drawn to move, and this is one of the few places it is called
   for. A navy field, the three letters rising, a lime line that fills as the page loads;
   then the field lifts and the page is there. Hidden unless <html> has .intro, which only
   the page's own script adds, so with no script or with reduced motion it never appears. */
.loader{display:none}
html.intro .loader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--lev-navy);
  transition:transform .95s var(--lev-rise);will-change:transform}
.loader__in{display:grid;justify-items:center;gap:clamp(18px,3.2vh,34px);width:min(74vw,600px);transition:transform .95s var(--lev-rise)}
.loader__art{display:block;width:100%;height:auto;aspect-ratio:382.86/221.5}
.loader__bar{display:block;width:100%;height:3px;background:rgba(255,255,255,.2);overflow:hidden}
.loader__bar b{display:block;height:100%;background:var(--lev-lime);transform-origin:0 50%;transform:scaleX(var(--lp,0))}
html.intro-out .loader{transform:translateY(-100%)}
html.intro-out .loader__in{transform:translateY(-22vh)}   /* the letters leave a little ahead of the field */

/* ---------- sign: shared ---------- */
.sign{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--lev-navy);color:var(--lev-white)}
.plate{flex:none;display:grid;place-items:center;text-align:center;font-family:var(--lev-display);font-weight:700;
  text-transform:uppercase;line-height:.86;letter-spacing:-.004em;white-space:nowrap}
.plate--room{height:calc(var(--k) * 216);font-size:calc(var(--k) * 161);padding-top:calc(var(--k) * 6)}
.plate--day{height:calc(var(--k) * 108);font-size:calc(var(--k) * 79);background:var(--lev-white);color:var(--lev-navy);padding-top:calc(var(--k) * 4)}
.notice{flex:none;background:var(--lev-lime);color:var(--lev-midnight);font-weight:500;
  font-size:calc(var(--k) * 18);line-height:1.24;padding:calc(var(--k) * 13) calc(var(--k) * 20) calc(var(--k) * 12)}

/* room sign: white card, two columns */
.card{flex:1;min-height:0;display:flex;flex-direction:column;margin:0 calc(var(--k) * 14) calc(var(--k) * 14);
  padding:calc(var(--k) * 56) calc(var(--k) * 58) calc(var(--k) * 24);background:var(--lev-white);color:var(--lev-midnight)}
.cols{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--k) * 78);position:relative}
.cols::before{content:"";position:absolute;left:50%;top:0;bottom:calc(var(--k) * 34);width:calc(var(--k) * .8);background:currentColor;opacity:.3}
.col{display:flex;flex-direction:column;gap:calc(var(--k) * 56)}
.day{font-family:var(--lev-display);font-weight:700;font-size:calc(var(--k) * 36);line-height:1;text-transform:uppercase;
  color:var(--lev-navy);padding-bottom:calc(var(--k) * 12)}
.item{border-top:calc(var(--k) * .8) solid rgba(38,47,111,.28);padding:calc(var(--k) * 11) 0 calc(var(--k) * 13)}
.item b{display:block;font-weight:700;font-size:calc(var(--k) * 19.8);line-height:1.22}
.item span{display:block;font-weight:500;font-size:calc(var(--k) * 19.8);line-height:1.22}
.item time{display:block;font-family:var(--lev-data);font-weight:700;font-size:calc(var(--k) * 19);line-height:1.2;
  color:var(--lev-navy);margin-top:calc(var(--k) * 5)}

/* day sign: the schedule on navy */
.rows{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--k) * 76);position:relative;
  padding:calc(var(--k) * 58) calc(var(--k) * 50) calc(var(--k) * 30)}
.rows::before{content:"";position:absolute;left:50%;top:calc(var(--k) * 58);bottom:calc(var(--k) * 60);width:calc(var(--k) * .8);background:var(--lev-white);opacity:.34}
.row{padding:0 0 calc(var(--k) * 17);margin-bottom:calc(var(--k) * 17);border-bottom:calc(var(--k) * .8) solid rgba(255,255,255,.3)}
.row:last-child{border-bottom:0}
.row b{display:block;font-weight:800;font-size:calc(var(--k) * 16.8);line-height:1.2;text-transform:uppercase;letter-spacing:-.005em}
.row span{display:block;font-weight:600;font-size:calc(var(--k) * 16.8);line-height:1.24}
.row em{display:block;font-weight:400;font-style:italic;font-size:calc(var(--k) * 16.8);line-height:1.24;text-transform:uppercase}
.row time{display:block;font-family:var(--lev-data);font-weight:700;font-size:calc(var(--k) * 20.2);line-height:1.2;color:var(--lev-lime);margin-top:calc(var(--k) * 4)}
.sign--day .notice{margin:0 calc(var(--k) * 62) calc(var(--k) * 40)}

/* statement signs */
.say{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:0 calc(var(--k) * 74)}
.say p{font-weight:900;letter-spacing:-.035em;line-height:.9}
.say .soft{font-family:var(--lev-soft);font-style:italic;font-weight:400;letter-spacing:-.01em;line-height:1}
.c-white{color:var(--lev-white)} .c-lime{color:var(--lev-lime)} .c-sky{color:var(--lev-sky)} .c-blue{color:var(--lev-blue)}
.c-navy{color:var(--lev-navy)} .c-midnight{color:var(--lev-midnight)}
.name{font-family:var(--lev-display);font-weight:700;text-transform:uppercase;line-height:.86;white-space:nowrap}
.data{font-family:var(--lev-data);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.he{font-family:var(--lev-hebrew);font-weight:800;direction:rtl;unicode-bidi:isolate}

/* ---------- the pick-out ----------
   LEV sits inside ELEVATE. Wherever the word is set large, in capitals, LEV is picked out:
   lime on navy, electric on white. A field sets --pick once and everything on it follows. */
.shout{font-family:var(--lev-display);font-weight:900;text-transform:uppercase;line-height:.84;letter-spacing:-.005em}
.lev{color:var(--pick,var(--lev-lime))}
.f-navy,.f-midnight{--pick:var(--lev-lime)}
.f-white{--pick:var(--lev-electric)}

/* ---------- block grid ---------- */
.grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr)}
.cell{position:relative;min-width:0;min-height:0}
.cell>img{width:100%;height:100%}
.blockrow{display:flex;flex:none}
.blockrow>img{flex:1;min-width:0;aspect-ratio:1;height:auto}

/* ---------- block cubes ----------
   A cube with a block on every face, drawn in three dimensions so it can be turned. The scene is
   seen from above and to one side; --s is the side of a cube, and each cube sits at --x, --y, --z,
   counted in cube sides (across, up as a negative number, towards the viewer). --turn is how many
   quarter turns every cube has made. Faces are flat and unshaded: touching faces never share a
   background, so every edge of a cube is already a change of colour. */
.cubes{position:absolute;left:50%;top:calc(var(--k) * var(--top,520));width:0;height:0;--s:calc(var(--k) * var(--side,270));
  transform-style:preserve-3d;transform:rotateX(-30deg) rotateY(-45deg)}
.cube{position:absolute;left:calc(var(--s) / -2);top:calc(var(--s) / -2);width:var(--s);height:var(--s);transform-style:preserve-3d;
  transform:translate3d(calc(var(--s) * var(--x,0)),calc(var(--s) * var(--y,0)),calc(var(--s) * var(--z,0))) rotateY(calc(var(--turn,0) * -90deg));
  transition:transform 1.05s var(--lev-settle)}
.cube:nth-child(2){transition-delay:.09s} .cube:nth-child(3){transition-delay:.18s}
.cube>img{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden}
.cube__front{transform:translateZ(calc(var(--s) / 2))}
.cube__right{transform:rotateY(90deg) translateZ(calc(var(--s) / 2))}
.cube__back{transform:rotateY(180deg) translateZ(calc(var(--s) / 2))}
.cube__left{transform:rotateY(-90deg) translateZ(calc(var(--s) / 2))}
.cube__top{transform:rotateX(90deg) translateZ(calc(var(--s) / 2))}
.cube__bottom{transform:rotateX(-90deg) translateZ(calc(var(--s) / 2))}
@media (prefers-reduced-motion:reduce){ .cube{transition:none} }

/* ---------- the table letter: white, with the long shadow from the LEV block ---------- */
.letter{font-family:var(--lev-display);font-weight:900;color:var(--lev-white);line-height:.8}

/* ---------- buttons ---------- */
.lev-btn{display:inline-flex;align-items:center;gap:.6em;font:800 1rem/1 var(--lev-text);letter-spacing:0;
  padding:1.05em 1.5em;border:0;border-radius:0;cursor:pointer;text-decoration:none;
  transition:transform .28s var(--lev-settle),box-shadow .28s var(--lev-settle)}
.lev-btn--lime{background:var(--lev-lime);color:var(--lev-midnight);--sh:var(--lev-midnight)}
.lev-btn--navy{background:var(--lev-navy);color:var(--lev-white);--sh:var(--lev-midnight)}
.lev-btn--line{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.lev-btn--lime:hover,.lev-btn--navy:hover{transform:translate(3px,-3px);box-shadow:-3px 3px 0 var(--sh)}
.lev-btn--line:hover{transform:translate(3px,-3px);box-shadow:inset 0 0 0 2px currentColor,-3px 3px 0 currentColor}
.lev-btn:active{transform:none;box-shadow:none}
.lev-btn--line:active{box-shadow:inset 0 0 0 2px currentColor}
.lev-btn:focus-visible{outline:3px solid var(--lev-lime);outline-offset:3px}
.f-white .lev-btn:focus-visible,.lev-btn--lime:focus-visible{outline-color:var(--lev-navy)}

@media (prefers-reduced-motion:reduce){ .lev-btn{transition:none} .lev-btn:hover{transform:none} }