/* work */
#work{
  --u: min(calc(100vw / 1672), calc(100svh / 941));
  --stage-w: calc(1672 * var(--u));
  --stage-h: calc(941 * var(--u));
  --ink:#241A0E; --ink-soft:#5A4A36; --ink-faint:#8E7C63;
  --dot:var(--brand-dot,#D6794F); --head:#1A140C;
  --tick:rgba(30,22,12,.72); --rule:rgba(36,26,14,.40);
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --serif:'Playfair Display',Georgia,serif; --hand:'Caveat',cursive;
}
#work{position:relative;width:100%;height:100svh;overflow:hidden;isolation:isolate}
#work .grain{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;opacity:.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.42'/></svg>")}
#work .vignette{position:absolute;inset:0;z-index:20;pointer-events:none;
  background:radial-gradient(126% 106% at 44% 40%,rgba(0,0,0,0) 58%,rgba(64,44,20,.12) 100%)}
#work .stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--stage-w);height:var(--stage-h);z-index:2}
#work .stage > *{position:absolute}
#work #gl-work{inset:0;width:100%;height:100%;z-index:4;opacity:0;transition:opacity .9s ease .2s}
#work #gl-work.ready{opacity:1}
#work .cx{left:50%;transform:translateX(-50%)}
#work .tick{width:calc(1.8 * var(--u));background:var(--tick)}
#work .t1{top:calc(0 * var(--u));height:calc(45 * var(--u))}
#work .t2{top:calc(730 * var(--u));height:calc(60 * var(--u))}
#work .t3{top:calc(840 * var(--u));height:calc(101 * var(--u))}
#work .eyebrow{left:calc(150 * var(--u));top:calc(96 * var(--u));display:flex;align-items:center;
  gap:calc(12 * var(--u));font-size:max(var(--mt,0px), calc(16 * var(--u)));font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);z-index:7}
#work .eyebrow i{display:block;width:calc(12 * var(--u));height:calc(12 * var(--u));
  border-radius:50%;background:var(--dot)}
#work .head{left:calc(150 * var(--u));top:calc(126 * var(--u));font-family:var(--serif);font-weight:400;
  font-size:calc(92 * var(--u));line-height:1;letter-spacing:.055em;color:var(--head);
  text-transform:uppercase;z-index:7}
#work .headrule{left:calc(447 * var(--u));top:calc(175 * var(--u));width:calc(1.4 * var(--u));
  height:calc(75 * var(--u));background:var(--rule);z-index:7}
#work .corner{right:calc(150 * var(--u));top:calc(42 * var(--u));text-transform:uppercase;
  color:var(--ink-soft);font-size:max(var(--mt,0px), calc(12.5 * var(--u)));font-weight:500;letter-spacing:.16em;
  line-height:1.7600;z-index:7}
#work .btn{left:calc(637 * var(--u));top:calc(826 * var(--u));width:calc(406 * var(--u));height:calc(40 * var(--u));
  display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--u));
  border:calc(1.3 * var(--u)) solid var(--rule);border-radius:100px;text-decoration:none;
  font-size:max(var(--mt,0px), calc(12.5 * var(--u)));font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  color:#2B2115;white-space:nowrap;z-index:7;pointer-events:auto;
  transition:background-color .34s ease,border-color .34s ease,color .34s ease}
@media (hover:hover) and (pointer:fine){ #work .btn:hover{background:#2B2115;border-color:#2B2115;color:#F3E7D3} }
#work .btn svg{width:calc(11 * var(--u));height:calc(11 * var(--u));flex:none;display:block}
#work .marks{left:0;top:0;width:calc(46 * var(--u));height:calc(48 * var(--u));z-index:6;pointer-events:none;overflow:visible;
  opacity:0;transition:opacity .25s ease}
#work .marks line{stroke:#1C150C;stroke-width:2.2;stroke-linecap:round}
#work .cursor{opacity:0;transition:opacity .25s ease;left:calc(722 * var(--u));top:calc(258 * var(--u));width:calc(30 * var(--u));height:calc(30 * var(--u));z-index:6;pointer-events:none}
#work .smiley{left:calc(996 * var(--u));top:calc(492 * var(--u));width:calc(28 * var(--u));height:calc(28 * var(--u));z-index:6;pointer-events:none}
@media (max-width:860px){
#work{
    --u: min(calc(100vw / 530), calc(100svh / 941));
    --stage-w: calc(530 * var(--u));
    --stage-h: calc(941 * var(--u));
  }
#work .eyebrow{left:calc(48 * var(--u));top:calc(132 * var(--u));font-size:max(var(--mt,0px), calc(14 * var(--u)));gap:calc(10 * var(--u))}
#work .eyebrow i{width:calc(10 * var(--u));height:calc(10 * var(--u))}
#work .head{left:calc(48 * var(--u));top:calc(148 * var(--u));font-size:calc(70 * var(--u))}
#work .headrule{left:calc(275 * var(--u));top:calc(195 * var(--u));height:calc(70 * var(--u))}
#work .corner{right:calc(48 * var(--u));left:auto;top:calc(100 * var(--u));font-size:max(var(--mt,0px), calc(9.6 * var(--u)));letter-spacing:.14em}
#work .btn{left:calc(97 * var(--u));top:calc(806 * var(--u));width:calc(338 * var(--u));height:calc(37 * var(--u));
    font-size:max(var(--mt,0px), calc(11 * var(--u)));letter-spacing:.15em;gap:calc(8 * var(--u))}
#work .btn svg{width:calc(10 * var(--u));height:calc(10 * var(--u))}
}

/* no rule after the heading */
#work .headrule{display:none}